/* Home composer dock: the message box and the representative switcher stick to the bottom of the home
   page, like the composer on the app's home screen. Loaded only by index.php (the old layout is index2.php). */
.home-shell { padding-bottom: 40px; }
.home-shell > .main-header + .home-represent-hero { margin-bottom: 56px; }

.home-dock {
  position: sticky;
  z-index: 60;
  bottom: 0;
  padding: 26px 28px 16px;
  background: linear-gradient(to bottom, rgba(7, 11, 18, 0), rgba(7, 11, 18, .92) 26px, var(--bg-main) 60%);
}
.home-dock > .agent-switcher { width: min(800px, 100%); margin: 0 auto 10px; }
.home-dock > .hero-input-container { margin: 0 auto; }
.home-dock .input-box-wrapper { padding: 12px 14px 10px; background: rgba(13, 20, 32, .97); }
.app-main .home-dock .prompt-textarea { min-height: 28px; }
/* The @ list opens upwards, above the docked box. */
.home-dock .mention-panel { top: auto; bottom: calc(100% + 12px); }

/* Below 900px the page itself scrolls; .app-main's overflow would still capture the sticky dock, so clip instead. */
@media (max-width: 900px) {
  .app-main:has(> .home-dock) { overflow: visible; overflow-x: clip; }
}

@media (max-width: 600px) {
  .home-dock { padding: 18px 12px calc(10px + env(safe-area-inset-bottom)); }
  body:has(.home-shell) .home-dock > .agent-switcher { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
  body:has(.home-shell) .home-dock > .agent-switcher::-webkit-scrollbar { display: none; }
  body:has(.home-shell) .home-dock .agent-pill { flex: 0 0 auto; width: auto; min-height: 36px; padding: 5px 10px; font-size: 13px; }
  body:has(.home-shell) .home-dock .agent-switcher > .icon-link { flex: 0 0 auto; width: 36px; height: 36px; }
  body:has(.home-shell) .home-dock .input-box-wrapper { padding: 10px 10px 8px; }
  .home-dock .prompt-textarea { font-size: 16px; }
  .home-shell > .main-header + .home-represent-hero { margin-bottom: 36px; }
}

/* Per user (19 Oct 2026): logo 10% smaller, more room between it and the hero line. */
.home-shell .main-brand-logo { margin-bottom: 58px; font-size: clamp(58px, 7.2vw, 83px); }
@media (max-width: 900px) { .home-shell .main-brand-logo { font-size: 52px; } }
@media (max-width: 600px) {
  body:has(.home-shell) .main-header { margin-bottom: 46px; }
  body:has(.home-shell) .main-header .main-brand-logo { margin-bottom: 0; font-size: 49px; }
}
@media (max-width: 360px) { body:has(.home-shell) .main-header .main-brand-logo { font-size: 41px; } }

/* The switcher pills start at the message box's left edge. */
.home-dock > .agent-switcher { justify-content: flex-start; }
.home-dock > .agent-switcher.has-popular > :first-child { margin-left: 0; }

/* Wide screens show the card rows of tasda_home_showcase_desktop_rows() instead of the app's arrangement:
   every row is filled (one card, two side by side, or two stacked on the left beside a narrower one on the right). */
.hs-desk { display: none; flex-direction: column; gap: calc(12 * var(--hs-u)); }
@container hs-showcase (min-width: 640px) {
  .hs-mosaic.hs-app { display: none; }
  .hs-mosaic.hs-desk { display: flex; }
}
@container hs-showcase (min-width: 820px) { .hs-mosaic.hs-desk { --hs-u: 1.2px; } }
.hsd-block { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: calc(12 * var(--hs-u)); }
.hsd-stack { display: grid; gap: calc(12 * var(--hs-u)); }
.hsd-row { display: grid; }
.hsd-row.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12 * var(--hs-u)); }
.hs-desk .hs-editorial:not(.is-hero) { height: auto; min-height: calc(var(--h) * var(--hs-u) * .8); }
/* Descenders (the g of "English") must not be cut off by the line clamp. */
.hs-desk .hs-fit.is-strong > span { line-height: 1.05; padding-bottom: .06em; }

/* The docked message box and switcher are as wide as the cards above them. */
.home-dock > .agent-switcher, .home-dock > .hero-input-container { width: min(860px, 100%); }

/* Per user (19 Oct 2026): the gap under the hero line is 50% larger (56 → 84px, phones 36 → 54px) and the gap
   above it (under the logo) is the same; the section titles are 50% larger with twice the room under them. */
.home-shell .main-brand-logo { margin-bottom: 84px; }
.home-shell > .main-header + .home-represent-hero { margin-bottom: 84px; }
.home-shell .section-header { margin-bottom: 24px; }
.home-shell .section-title { font-size: 28.5px; }
@media (max-width: 600px) {
  body:has(.home-shell) .main-header { margin-bottom: 54px; }
  body:has(.home-shell) .main-header .main-brand-logo { margin-bottom: 0; }
  .home-shell > .main-header + .home-represent-hero { margin-bottom: 54px; }
}
@media (max-width: 560px) { .home-shell .section-title { font-size: 27px; } }

/* Per user (19 Oct 2026, trial): the "Create personal representative / fictional character" cards in the
   showcase's language: two pastel cards side by side, a large headline, the pixel scene as a small screen
   inside the card and a round arrow button in the corner. Phones stack them. */
.home-shell .templates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-shell .template-card { display: flex; flex-direction: column; align-items: stretch; gap: 18px; min-height: 0; padding: 18px 18px 22px; border: 0; border-radius: 18px; color: #111827; background: #BCE7C9; box-shadow: none; }
.home-shell .template-card-character { background: #D8CEF8; }
.home-shell .template-card:hover { transform: translateY(-2px); border: 0; box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.home-shell .template-card .template-scene { flex: none; width: 100%; height: 170px; margin: 0; }
.home-shell .template-card .modern-art-canvas { border: 0; box-shadow: none; border-radius: 12px; }
.home-shell .template-copy { gap: 8px; padding-right: 58px; }
.home-shell .template-title { color: #111827; font-size: 28px; line-height: 1.04; letter-spacing: -.5px; }
.home-shell .template-description { color: rgba(17, 24, 39, .72); font-size: 15px; font-weight: 600; line-height: 1.4; }
.home-shell .template-card::after { content: '→'; position: absolute; right: 18px; bottom: 20px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: #111827; font-size: 22px; font-weight: 800; line-height: 1; }
@media (max-width: 680px) {
  .home-shell .templates-grid { grid-template-columns: 1fr; }
  .home-shell .template-card .template-scene { max-width: none; height: 150px; }
  .home-shell .template-title { font-size: 24px; }
}

/* Create cards' pictures (inc-home-create-scenes.php), in Tasda's pixel caricature style. */
.cs-scene { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cs-scene img { image-rendering: pixelated; }
.cs-person { background: #352879; box-shadow: inset 0 0 0 6px #6c5eb5; }
.cs-card { position: absolute; left: 7%; top: 50%; display: grid; grid-template-columns: 34% 1fr; gap: 8px; align-items: center; width: 44%; padding: 8px; border: 3px solid #111; border-radius: 6px; background: #fff7e3; transform: translateY(-50%) rotate(-3deg); box-shadow: 5px 5px 0 #111; }
.cs-card-avatar { width: 100%; aspect-ratio: 1; border: 2px solid #111; border-radius: 6px; object-fit: cover; }
.cs-card-lines { display: grid; gap: 5px; }
.cs-card-lines b, .cs-card-lines i { display: block; height: 6px; border-radius: 1px; background: #8f8aa8; }
.cs-card-lines b { width: 90%; height: 8px; background: #111; }
.cs-card-lines i:last-child { width: 60%; }
.cs-qr { position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px; background: repeating-conic-gradient(#111 0 25%, #fff7e3 0 50%) 0 0 / 6px 6px; }
.cs-bubble { position: absolute; right: 6%; top: 14%; width: 40%; min-height: 64px; border: 3px solid #111; border-radius: 10px; background: #fff; box-shadow: 4px 4px 0 #111; }
.cs-bubble::after { content: ''; position: absolute; left: -11px; bottom: 12px; width: 14px; height: 14px; border-left: 3px solid #111; border-bottom: 3px solid #111; background: #fff; transform: skewY(-35deg); }
.cs-bubble > span { position: absolute; inset: 8px 10px; color: #111; font-size: 12px; font-weight: 800; line-height: 1.3; opacity: 0; clip-path: inset(0 100% 0 0); animation: cs-type 9s steps(28) infinite; animation-delay: calc(var(--i) * 3s); }
@keyframes cs-type { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 14% { clip-path: inset(0 0 0 0); } 30% { opacity: 1; clip-path: inset(0 0 0 0); } 33.3%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }

.cs-character { background: radial-gradient(circle at 12% 20%, #70e0d8 0 2px, transparent 3px), radial-gradient(circle at 82% 14%, #fff 0 2px, transparent 3px), radial-gradient(circle at 64% 30%, #70e0d8 0 1.5px, transparent 2.5px), radial-gradient(circle at 30% 10%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 92% 46%, #fff 0 1.5px, transparent 2.5px), #000; }
.cs-character::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: #9a9a9a; box-shadow: inset 0 6px 0 #bdbdbd; }
.cs-fan { position: absolute; inset: 0; }
.cs-fan-card { position: absolute; z-index: 1; bottom: 12%; left: calc(6% + var(--i) * 22%); width: 23%; padding: 4px 4px 3px; border: 3px solid #111; border-radius: 8px; background: #fff7e3; box-shadow: 4px 4px 0 #111; transform: rotate(calc((var(--i) - 1.5) * 6deg)); animation: cs-pop 8s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
.cs-fan-avatar { display: block; width: 100%; aspect-ratio: 1; border-radius: 5px; object-fit: cover; }
.cs-fan-name { display: block; overflow: hidden; margin-top: 3px; color: #111; font-size: 10px; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
@keyframes cs-pop { 0%, 30%, 100% { z-index: 1; transform: rotate(calc((var(--i) - 1.5) * 6deg)); } 6%, 22% { z-index: 5; transform: translateY(-16%) scale(1.12) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) {
  .cs-bubble > span, .cs-fan-card { animation: none; }
  .cs-bubble > span:first-child { opacity: 1; clip-path: none; }
}