:root {
  --bg: #f4ece3;
  --bg-2: #f8f1e8;
  --surface: #fffdf9;
  --surface-2: #fff7ef;
  --ink: #2a211c;
  --muted: #6d5a50;
  --line: #e6d8cc;
  --accent: #e25745;
  --accent-deep: #c44536;
  --accent-soft: #fff1ee;
  --mint: #1f8a63;
  --mint-soft: #e7f7ef;
  --sky-soft: #e7f2fb;
  --warn-soft: #fff4d6;
  --shadow: 0 10px 30px rgba(42, 33, 28, 0.08);
  --radius: 16px;
  --radius-sm: 12px;
  --header-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --safe-l: max(12px, env(safe-area-inset-left));
  --safe-r: max(12px, env(safe-area-inset-right));
  --safe-b: max(10px, env(safe-area-inset-bottom));
  --kb: 0px;
}

*, *::before, *::after { box-sizing: border-box; }

:root[data-theme="dark"] {
  --bg: #211c1a;
  --bg-2: #2a2320;
  --surface: #342b27;
  --surface-2: #3d312c;
  --ink: #fff7ef;
  --muted: #d2bfb3;
  --line: #5a473e;
  --accent-soft: #512f2b;
  --mint-soft: #193b2f;
  --sky-soft: #243747;
  --warn-soft: #493d24;
  --shadow: 0 10px 30px rgba(0, 0, 0, .24);
}

.mochi-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .92) 0 8%, transparent 35%),
    radial-gradient(circle at 20% 10%, #ffe6d1 0, transparent 42%),
    linear-gradient(145deg, #f7e8dc, #f4d7c9 58%, #eed0c8);
  opacity: 1;
  visibility: visible;
  transition: opacity .52s var(--ease), visibility 0s linear .52s;
}
.mochi-intro.intro-out { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-halo {
  position: absolute;
  width: min(58vw, 520px); height: min(58vw, 520px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.8), rgba(255,193,164,.16) 48%, transparent 70%);
  filter: blur(2px);
  animation: intro-halo 3.6s ease-in-out both;
}
.intro-stage { position: relative; width: min(62vw, 430px); height: min(62vw, 430px); perspective: 900px; display: grid; place-items: center; }
.intro-mochi { position: relative; width: 58%; height: 58%; transform-style: preserve-3d; animation: intro-float 3.6s var(--ease) both; }
.intro-face {
  position: absolute; inset: 14% 5% 11%; border-radius: 43% 43% 39% 39% / 38% 38% 47% 47%;
  background: linear-gradient(145deg, #fffdfa 0 18%, #f9d8c5 52%, #edb39e 100%);
  border: 1px solid rgba(176, 99, 75, .28);
  box-shadow: inset -18px -20px 28px rgba(191, 100, 75, .16), inset 12px 10px 20px rgba(255,255,255,.9), 12px 19px 0 rgba(190, 103, 79, .17), 23px 29px 30px rgba(122, 61, 48, .18);
  transform: translateZ(28px) rotateX(3deg);
}
.intro-face::after { content: ''; position: absolute; inset: 5px; border-radius: inherit; border: 1px solid rgba(255,255,255,.62); transform: translateZ(2px); }
.intro-ear { position: absolute; top: 5%; width: 27%; height: 34%; border-radius: 54% 46% 52% 48%; background: linear-gradient(145deg, #fffaf5, #edb49f); border: 1px solid rgba(176,99,75,.26); box-shadow: inset -7px -8px 11px rgba(181,88,68,.16), 7px 10px 0 rgba(190,103,79,.13); transform: translateZ(6px); }
.intro-ear-left { left: 0; transform: rotate(-22deg) translateZ(6px); }
.intro-ear-right { right: 0; transform: rotate(22deg) translateZ(6px); }
.intro-foot { position: absolute; bottom: 2%; width: 22%; height: 13%; border-radius: 50%; background: linear-gradient(#f6c5b0, #df9e8b); box-shadow: 5px 8px 0 rgba(174,83,68,.14); transform: translateZ(20px); }
.intro-foot-left { left: 17%; transform: rotate(8deg) translateZ(20px); }
.intro-foot-right { right: 17%; transform: rotate(-8deg) translateZ(20px); }
.intro-shine { position: absolute; left: 17%; top: 12%; width: 28%; height: 16%; border-radius: 50%; background: rgba(255,255,255,.72); filter: blur(3px); transform: rotate(-20deg) translateZ(8px); }
.intro-eye { position: absolute; top: 43%; width: 8%; height: 11%; border-radius: 50%; background: #4a2b2a; box-shadow: 1px 2px 0 rgba(255,255,255,.55); }
.intro-eye-left { left: 32%; } .intro-eye-right { right: 32%; }
.intro-mouth { position: absolute; left: 45%; top: 58%; width: 10%; height: 8%; border-bottom: 3px solid #6d3935; border-radius: 0 0 50% 50%; }
.intro-blush { position: absolute; top: 57%; width: 15%; height: 7%; border-radius: 50%; background: rgba(235,113,104,.35); filter: blur(3px); }
.intro-blush-left { left: 16%; } .intro-blush-right { right: 16%; }
.intro-wordmark { position: absolute; bottom: 14%; color: #6d3b35; font: 800 clamp(1rem, 2.5vw, 1.4rem)/1 'Baloo 2', sans-serif; letter-spacing: .34em; text-indent: .34em; animation: intro-word 3.6s ease both; }
@keyframes intro-float { 0% { opacity: 0; transform: translateY(35px) rotateX(-18deg) rotateY(-32deg) scale(.72); } 22% { opacity: 1; } 55% { transform: translateY(-8px) rotateX(8deg) rotateY(18deg) scale(1); } 78% { transform: translateY(5px) rotateX(2deg) rotateY(-8deg) scale(1.02); } 100% { transform: translateY(0) rotateX(0) rotateY(0) scale(1); } }
@keyframes intro-halo { 0%, 100% { opacity: .55; transform: scale(.82); } 48% { opacity: 1; transform: scale(1.08); } }
@keyframes intro-word { 0%, 42% { opacity: 0; transform: translateY(10px); } 62%, 100% { opacity: 1; transform: translateY(0); } }
.intro-reduced .intro-mochi, .intro-reduced .intro-halo, .intro-reduced .intro-wordmark { animation: none; }
.intro-reduced .intro-mochi { opacity: 1; transform: none; }
.intro-reduced .intro-wordmark { opacity: 1; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

html { background: var(--bg); }

body {
  font-family: Nunito, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 12% -8%, #ffe8d2 0%, transparent 60%),
    radial-gradient(700px 380px at 100% 0%, #ffd9d0 0%, transparent 55%),
    var(--bg);
  min-height: 100svh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--kb);
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.55;
}

.o1 { width: 180px; height: 180px; background: #fff6; top: 8%; left: 4%; }
.o2 { width: 120px; height: 120px; background: #ffb37a44; top: 62%; right: 6%; }
.o3 { width: 80px; height: 80px; background: #9fd7ff44; top: 28%; right: 18%; }

.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 10px var(--safe-r) 8px var(--safe-l);
  flex-shrink: 0;
}

.brand {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(42, 33, 28, 0.06);
}

.brand-copy { min-width: 0; }

.brand h1 {
  margin: 0;
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tagline {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions { display: flex; align-items: center; gap: 6px; min-width: 0; }
.top-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(100%, 72vw);
}
.mobile-menu-toggle { display: none; flex: 0 0 auto; }

.auth {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.who {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-short { display: inline; }
.label-full { display: none; }

.btn {
  appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 12px;
  padding: 8px 11px;
  min-height: 40px;
  color: #fff;
  background: var(--accent);
  box-shadow: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  touch-action: manipulation;
}

.btn:hover { background: var(--accent-deep); }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn.ghost:hover { background: var(--surface-2); }
.btn.tiny {
  background: var(--surface);
  color: var(--accent-deep);
  border-color: var(--line);
  min-height: 36px;
  padding: 6px 10px;
  font-size: 0.78rem;
  margin-top: 8px;
  width: 100%;
}
.btn.send {
  min-width: 64px;
  min-height: 44px;
  border-radius: 14px;
  background: var(--mint);
}
.btn.send:hover { background: #187555; }
.btn:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

a.btn { color: #fff; }
a.btn.ghost { color: var(--ink); }

.count-badge,
#command-count {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0 6px;
  line-height: 1;
}

.stage-wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
}

.companion {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.podium {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.mood-label {
  margin: 2px 0 0;
  font-family: "Baloo 2", sans-serif;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.2;
  text-align: center;
}

.mochi {
  width: 92px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: bob 2.8s ease-in-out infinite;
}

.mochi-body {
  width: 78px;
  height: 74px;
  margin: 10px auto 0;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 32% 28%, #fff8 0 18%, transparent 19%),
    radial-gradient(circle at 50% 40%, #ffe1c4, #ffb089 62%, #f08a78);
  box-shadow:
    inset -10px -12px 18px rgba(180, 70, 70, 0.22),
    inset 10px 8px 14px rgba(255, 255, 255, 0.5),
    8px 10px 0 rgba(90, 40, 50, 0.08);
  position: relative;
  transform: rotateX(8deg) rotateY(-12deg);
}

.mochi-shine {
  position: absolute;
  width: 24px;
  height: 12px;
  border-radius: 50%;
  background: #fff9;
  top: 10px;
  left: 14px;
  transform: rotate(-18deg);
}

.mochi-ear {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ffd0c0, #f4a090);
  box-shadow: inset -4px -4px 8px rgba(150, 50, 50, 0.2);
  z-index: 0;
}

.mochi-ear.left { top: 4px; left: 8px; transform: rotate(-18deg); }
.mochi-ear.right { top: 4px; right: 8px; transform: rotate(18deg); }

.mochi-blush {
  position: absolute;
  width: 14px;
  height: 8px;
  border-radius: 50%;
  background: #ff8aa088;
  top: 42px;
}

.mochi-blush.left { left: 12px; }
.mochi-blush.right { right: 12px; }

.mochi-eyes {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.mochi-eyes span {
  width: 8px;
  height: 11px;
  background: #3a2430;
  border-radius: 50%;
  box-shadow: inset 2px -2px 0 1px #fff;
  animation: blink 4.8s infinite;
}

.mochi-mouth {
  position: absolute;
  width: 14px;
  height: 8px;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  border-bottom: 3px solid #3a2430;
  border-radius: 0 0 10px 10px;
}

.mochi-feet {
  position: absolute;
  bottom: 4px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
}

.mochi-feet span {
  width: 16px;
  height: 9px;
  background: #e88976;
  border-radius: 40%;
}

.mochi-shadow {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -4px;
  height: 10px;
  background: #6b3a5522;
  border-radius: 50%;
  filter: blur(2px);
  animation: shadowpulse 2.8s ease-in-out infinite;
}

.mochi[data-mood="think"] { animation: wobble 0.7s ease-in-out infinite; }
.mochi[data-mood="think"] .mochi-eyes span { height: 4px; border-radius: 8px; animation: none; }
.mochi[data-mood="happy"] { animation: hop 0.55s var(--ease) 2; }
.mochi[data-mood="happy"] .mochi-mouth {
  width: 18px;
  height: 10px;
  border: 0;
  background: #3a2430;
  border-radius: 0 0 10px 10px;
  bottom: 18px;
}
.mochi[data-mood="listen"] { animation: lean 1.4s ease-in-out infinite; }
.mochi[data-mood="sad"] { animation: droop 1.6s ease-in-out infinite; }
.mochi[data-mood="sad"] .mochi-mouth {
  border-bottom: 0;
  border-top: 3px solid #3a2430;
  border-radius: 10px 10px 0 0;
  height: 8px;
  bottom: 22px;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes shadowpulse {
  0%, 100% { transform: scaleX(1); opacity: 0.7; }
  50% { transform: scaleX(0.82); opacity: 0.4; }
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}
@keyframes wobble {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-4px); }
}
@keyframes hop {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-16px) scale(1.05, 0.95); }
  70% { transform: translateY(3px) scale(0.97, 1.04); }
}
@keyframes lean {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@keyframes droop {
  0%, 100% { transform: translateY(4px) rotate(3deg); }
  50% { transform: translateY(8px) rotate(-2deg); }
}

.commands-panel {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.commands-panel.open {
  display: flex;
  position: fixed;
  left: var(--safe-l);
  right: var(--safe-r);
  bottom: calc(var(--safe-b) + var(--kb));
  z-index: 30;
  max-height: min(70dvh, 460px);
}

.commands-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 33, 28, 0.28);
  z-index: 25;
  border: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel-head h2 {
  margin: 0;
  font-family: "Baloo 2", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.panel-hint {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.command-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  overflow: auto;
  min-height: 0;
}

.command-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  min-width: 0;
}

.command-list li span {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.command-list button.x {
  border: 0;
  background: var(--accent-soft);
  color: var(--accent-deep);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  flex-shrink: 0;
  touch-action: manipulation;
}

.empty-cmd {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
  padding: 8px 2px;
  background: transparent;
  border: 0;
}

.chat {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto auto;
  overflow: hidden;
}

.chat-wait {
  margin: 0 10px 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  min-width: 0;
}

.chat-wait[hidden] { display: none !important; }

.chat-wait-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.chat-wait-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-wait-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--muted);
}

.chat-wait-steps li.done { color: #14553a; }
.chat-wait-steps li.now { color: var(--ink); }

.chat-wait-steps li span:first-child,
.wait-dot {
  width: 14px;
  flex-shrink: 0;
  text-align: center;
}

.wait-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(226, 87, 69, 0.35);
  animation: wait-pulse 1.6s ease-out infinite;
}

@keyframes wait-pulse {
  0% { box-shadow: 0 0 0 0 rgba(226, 87, 69, 0.35); }
  70% { box-shadow: 0 0 0 8px rgba(226, 87, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 87, 69, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .wait-dot { animation: none; }
}

.chat-wait-context {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.chat-wait-while {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.chat-wait-while[hidden] { display: none !important; }

.chat-wait-while-label {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.chat-continue,
.recent-tasks,
.task-center {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 10px 8px;
  min-width: 0;
}

.chat-continue {
  gap: 4px;
  padding: 0 10px 6px;
}

.chat-continue .btn.tiny {
  width: auto;
  margin-top: 0;
  min-height: 28px;
  padding: 3px 9px;
  font-size: 0.72rem;
  border-radius: 999px;
  flex: 0 0 auto;
}

.chat-continue[hidden],
.recent-tasks[hidden],
.task-center[hidden] { display: none !important; }

.recent-tasks,
.task-center {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.recent-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.recent-tasks ul,
.task-center ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recent-tasks li,
.task-center li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.recent-tasks li span,
.task-center li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
}

.chat-wait-steps li.todo { color: var(--muted); }

.task-center li .task-status {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.task-center li.processing .task-status { color: var(--accent-deep); }
.task-center li.completed .task-status { color: #14553a; }
.task-center li.failed .task-status { color: var(--accent-deep); }

.messages {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.bubble {
  max-width: min(88%, 36rem);
  min-width: 0;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 600;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bubble .code-wrap {
  margin: 8px 0 0;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #1f1714;
}

.bubble .code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: #2a201c;
}

.bubble .code-lang {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cbb8ab;
}

.bubble .code-copy {
  border: 1px solid #4a3b35;
  background: transparent;
  color: #f6efe6;
  border-radius: 999px;
  min-height: 24px;
  padding: 2px 8px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}

.bubble .code-copy:hover { background: #3a2c27; }
.bubble .code-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bubble .code-block {
  margin: 0;
  padding: 10px 12px;
  max-height: min(28rem, 60vh);
  max-width: 100%;
  overflow: auto;
  color: #f6efe6;
  font: 0.82rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}

.bubble .code-block code {
  font: inherit;
  white-space: pre;
}

.table-scroll { max-width: 100%; overflow-x: auto; margin: 8px 0; }
.table-scroll table { border-collapse: collapse; min-width: 100%; font-size: 0.82rem; }
.table-scroll th, .table-scroll td { padding: 6px 8px; border: 1px solid var(--line); text-align: left; white-space: nowrap; }
.table-scroll th { background: var(--surface-2); font-weight: 800; }

.bubble.user {
  align-self: flex-end;
  background: #fff1e4;
  color: var(--ink);
  border-bottom-right-radius: 6px;
  border: 1px solid #f0d7bf;
}

.bubble.assistant {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}

.msg-body { min-width: 0; }
.msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.msg-act {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  min-height: 26px;
  padding: 2px 8px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
.msg-act:hover { color: var(--ink); background: #fff; }
.msg-act[aria-pressed="true"] { color: var(--accent-deep); background: var(--accent-soft); border-color: #efb1a7; }
.voice-act span { min-width: 2.1rem; }
.msg-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bubble .cue {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--mint-soft);
  color: #14553a;
}

.bubble .cue.removed { background: var(--accent-soft); color: #8a2a20; }
.bubble .cue.accepted { background: var(--warn-soft); color: #6a4a00; }
.bubble .cue.new-chat { background: var(--sky-soft); color: #1b4d7a; }
.bubble .cue.error { background: var(--accent-soft); color: #8a2a20; }

.typing {
  align-self: flex-start;
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: dots 1s infinite;
}

.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }

.composer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px var(--safe-b);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.composer-row {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

#chat-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 52px;
  max-height: 128px;
  overflow-y: auto;
  align-self: center;
}

.composer-row > .attach-wrap,
.composer-row > .mic-button,
.composer-row > #send-btn {
  flex: 0 0 auto;
  min-width: 0;
}

.attach-wrap { position: relative; }
.icon-attach {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.icon-attach:hover, .icon-attach[aria-expanded="true"], .mic-button.listening { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.mic-button.listening { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.attach-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 140px;
  padding: 6px;
  z-index: 8;
  animation: popin 160ms var(--ease);
}
.attach-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.attach-menu button:hover { background: var(--surface-2); }
.edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.76rem;
  font-weight: 800;
}
.edit-bar[hidden] { display: none !important; }

.attachment-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}
.attachment-preview[hidden] { display: none !important; }
.attachment-preview img { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.attachment-preview span:not(.file-badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview button { margin-left: auto; border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; flex: 0 0 auto; }
.file-badge { padding: 4px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-deep); font-size: 0.62rem; letter-spacing: 0.04em; }
.icon-x {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 800;
  cursor: pointer;
}
.msg-image {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  margin: 0 0 8px;
  cursor: zoom-in;
  max-width: min(240px, 70vw);
}
.msg-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
}
.msg-image.generated {
  max-width: min(100%, 360px);
}
.msg-image.generated img {
  object-fit: contain;
  max-height: min(360px, 50vh);
}
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 10, 0.72);
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(920px, 100%); max-height: 80dvh; border-radius: 16px; }
.lightbox .icon-x { position: absolute; top: 16px; right: 16px; }

.layer {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: auto;
  padding: calc(72px + env(safe-area-inset-top)) 16px 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.layer[hidden] { display: none; }
.home-card, .wait-shell {
  width: min(720px, 100%);
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px 22px;
  box-shadow: var(--shadow);
  animation: popin 220ms var(--ease);
}
.kicker {
  margin: 0 0 6px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-deep);
}
.home-card h2, .wait-head h2 {
  margin: 0;
  font-family: "Baloo 2", Nunito, sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  line-height: 1.15;
}
.lede { font-size: 1.05rem; font-weight: 700; margin: 10px 0 6px; }
.home-sub { color: var(--muted); line-height: 1.45; }
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.how-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
}
.how-list li {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 0.86rem;
}
.how-list { flex-direction: column; }
.how-list li { border-radius: 12px; }
.task-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.task-pick, .mode-chip, .opt {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 12px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.task-pick strong, .task-pick span { display: block; }
.task-pick span { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }
.task-pick.on, .mode-chip.on { border-color: var(--accent); background: var(--accent-soft); }
.custom-task { display: grid; gap: 6px; font-weight: 700; margin: 8px 0 16px; }
.custom-task input, .ask-form input, #challenge-form input {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  font: inherit;
}
.wait-layer { padding-top: calc(64px + env(safe-area-inset-top)); }
.wait-shell { width: min(1040px, 100%); }
.wait-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; flex-wrap: wrap; }
.autopilot-pill {
  background: var(--mint-soft);
  color: #14553a;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 800;
}
.wait-grid { display: grid; gap: 16px; margin-top: 16px; }
.bar {
  height: 12px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
}
#progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #e25745, #f08a78);
  transition: width 240ms ease;
}
.wait-meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 0.82rem; margin: 8px 0 12px; }
.timeline { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.timeline li { display: flex; gap: 8px; color: var(--muted); font-weight: 700; }
.timeline li.done { color: #14553a; }
.timeline li.now { color: var(--ink); }
.mode-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.activity-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  min-height: 160px;
}
.opt-row { display: grid; gap: 8px; }
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.stat-row div, .history-list li, .result-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.stat-row b { display: block; font-size: 1.1rem; }
.stat-row span { color: var(--muted); font-size: 0.78rem; }
.history-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.history-header h2 { margin: 0; }
.history-header-back { flex: 0 0 auto; min-height: 38px; padding-inline: 12px; }
.history-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.history-list strong, .history-list span { display: block; }
.history-open {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.history-open:hover, .history-item.active-chat .history-open {
  border-color: var(--accent);
  background: var(--surface-2);
}
.history-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.history-search { display: block; margin: 14px 0; }
.history-search input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; }
.history-actions { display: flex; gap: 6px; padding: 5px 4px 0; }
.history-actions .msg-act { font-size: 0.68rem; }
.history-item { min-width: 0; }
.result-card { white-space: pre-wrap; font-weight: 600; line-height: 1.45; }
.ask-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 10px; }
body.overlay-open .stage-wrap { filter: blur(2px); }
body.dialog-open { overflow: hidden; }
.confirm-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px var(--safe-r) 20px var(--safe-l); background: rgba(42, 33, 28, .28); backdrop-filter: blur(5px); opacity: 0; transition: opacity .16s ease; }
.confirm-backdrop[hidden] { display: none; }
.confirm-backdrop.is-open { opacity: 1; }
.confirm-modal { width: min(430px, calc(100vw - 32px)); max-width: 100%; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 24px 70px rgba(42, 33, 28, .2); transform: translateY(8px) scale(.98); transition: transform .16s var(--ease); }
.confirm-backdrop.is-open .confirm-modal { transform: translateY(0) scale(1); }
.confirm-modal h2 { margin: 3px 0 8px; font: 800 1.35rem/1.15 'Baloo 2', Nunito, sans-serif; letter-spacing: -.02em; }
.confirm-modal p:not(.kicker) { margin: 0; color: var(--muted); line-height: 1.5; }
.confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
@media (max-width: 560px) {
  .history-header { align-items: flex-start; }
  .history-header-back { min-height: 40px; padding-inline: 10px; }
  .confirm-modal { padding: 20px; border-radius: 17px; } .confirm-actions { display: grid; grid-template-columns: 1fr 1fr; } .confirm-actions .btn { width: 100%; } }


textarea {
  width: 100%;
  min-width: 0;
  resize: none;
  min-height: 44px;
  max-height: 128px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  background: #fff;
  color: var(--ink);
}

textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, white);
  border-color: var(--accent);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + var(--safe-b) + var(--kb));
  transform: translate(-50%, 12px);
  max-width: calc(100vw - 24px);
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
  transition: 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes popin {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes dots {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

@media (max-width: 767px) {
  .topbar { align-items: center; padding-top: 8px; padding-bottom: 6px; }
  .mobile-menu-toggle { display: inline-flex; min-height: 38px; padding: 7px 10px; }
  .top-actions { display: none; position: absolute; top: calc(100% + 6px); right: var(--safe-r); z-index: 12; width: min(220px, calc(100vw - 24px)); max-width: none; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
  .top-actions.mobile-open { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .top-actions > .btn, .top-actions > .auth { width: 100%; justify-content: flex-start; }
  .stage-wrap { gap: 6px; padding-bottom: max(6px, var(--safe-b)); }
  .companion { gap: 8px; align-items: flex-start; }
  .podium { padding-top: 2px; }
  .mochi { transform: scale(0.86); transform-origin: top center; margin-bottom: -12px; }
  .commands-panel.open { max-height: min(62dvh, 420px); }
  .bubble { max-width: 94%; }
  .msg-actions { gap: 4px; }
}

@media (max-width: 560px) {
  .composer-row {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-rows: auto auto;
    gap: 8px;
  }
  #chat-input {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 48px;
  }
  .composer-row > .attach-wrap { grid-column: 2; grid-row: 2; }
  .composer-row > .mic-button { grid-column: 3; grid-row: 2; }
  .composer-row > #send-btn { grid-column: 4; grid-row: 2; }
}

@media (max-width: 370px) {
  .tagline { display: none; }
  .brand h1 { font-size: 0.95rem; }
  .btn { padding: 7px 8px; min-height: 36px; font-size: 0.76rem; }
  .btn.send { min-height: 44px; }
  .top-actions { max-width: 68vw; gap: 4px; }
  #nav-history .label-short { display: inline; }
}

@media (min-width: 430px) {
  .brand h1 { font-size: 1.15rem; }
  .brand-mark { width: 40px; height: 40px; }
  .mochi { width: 110px; height: 120px; }
  .mochi-body { width: 94px; height: 88px; }
}

@media (min-width: 520px) {
  .label-short { display: none; }
  .label-full { display: inline; }
  .tagline { display: block; }
  .btn { font-size: 0.86rem; padding: 8px 12px; }
}

@media (min-width: 768px) {
  .mobile-menu-toggle { display: none !important; }
  .topbar { padding: 14px 20px 10px; }
  .messages, .composer {
    max-width: 760px;
    margin-inline: auto;
  }
  .composer { width: 100%; }
  .bubble { max-width: min(78%, 36rem); font-size: 0.98rem; }
}

.settings-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.documentation-card { max-width: 920px; }
.docs-intro { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--accent-soft); line-height: 1.55; }
.docs-flow { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:16px 0; color:var(--muted); font-weight:800; }
.docs-flow span { padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); }
.docs-section { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.docs-section h3 { margin:2px 0 8px; font-size:1.12rem; }
.docs-section p { color:var(--muted); line-height:1.55; }
.docs-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.docs-grid article { padding:13px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.docs-grid h4 { margin:0 0 4px; }
.docs-grid p { margin:0; font-size:.9rem; }
.docs-plans { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.docs-plans span { padding:9px 11px; border-radius:10px; border:1px solid var(--line); color:var(--ink); font-weight:800; background:var(--surface); }
.docs-callout { padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--warn-soft); }
.docs-callout p:last-child { margin-bottom:0; color:var(--ink); }
.docs-faq { display:grid; gap:8px; }
.docs-faq details { padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.docs-faq summary { cursor:pointer; font-weight:800; }
.docs-faq p { margin:8px 0 0; }
.docs-list { margin:0; padding-left:20px; color:var(--muted); line-height:1.7; }
@media (max-width: 700px) { .docs-grid { grid-template-columns:1fr; } .docs-flow b { display:none; } .documentation-card { padding:18px; } }

.settings-head h2 { margin:0; }
.settings-group { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.theme-options { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.theme-options [aria-pressed="true"] { color:var(--accent-deep); border-color:var(--accent); background:var(--accent-soft); }
.settings-note { color:var(--muted); margin:8px 0 12px; }
.profile-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.profile-head h2 { margin:0; }
.profile-view { margin-top:18px; }
.profile-summary { display:flex; align-items:center; gap:16px; }
.profile-summary h3 { margin:0; font-size:1.25rem; }
.profile-summary p { margin:5px 0 0; color:var(--muted); }
.profile-username { font-weight:800; color:var(--accent-deep)!important; }
.profile-avatar { width:88px; height:88px; border-radius:28px; object-fit:cover; background:#f4d3c4; border:2px solid rgba(255,255,255,.9); box-shadow:var(--shadow); }
.avatar-placeholder { display:grid; place-items:center; color:var(--accent-deep); font-size:2rem; font-weight:900; }
.wallet-status { display:flex; justify-content:space-between; gap:16px; margin:20px 0 16px; padding:13px 15px; border:1px solid var(--line); border-radius:14px; color:var(--muted); }
.profile-form { display:grid; gap:12px; margin-top:18px; }
.profile-form label { display:grid; gap:6px; color:var(--muted); font-weight:800; }
.profile-form input, .profile-form textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 12px; font:inherit; color:var(--ink); background:var(--surface); }
.profile-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.profile-empty { text-align:center; padding:24px 8px; }
.profile-empty h3 { margin:0 0 8px; }
.profile-empty p { color:var(--muted); }
.profile-loading { color:var(--muted); }
@media (max-width: 560px) { .profile-summary { align-items:flex-start; } .profile-avatar { width:72px; height:72px; border-radius:22px; } .wallet-status { align-items:flex-start; flex-direction:column; gap:4px; } .profile-actions { display:grid; grid-template-columns:1fr 1fr; } .profile-actions .btn { width:100%; } }

@media (min-width: 900px) {
  .wait-grid { grid-template-columns: 1.1fr 0.9fr; }
  .layer { padding-top: 88px; }
  .topbar {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: 16px 24px 12px;
  }
  .stage-wrap {
    flex-direction: row;
    align-items: stretch;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 20px;
    gap: 16px;
  }
  #commands-toggle { display: none; }
  .companion {
    flex-direction: column;
    width: 300px;
    max-width: 300px;
    flex: 0 0 300px;
    align-items: stretch;
  }
  .podium { padding-top: 8px; }
  .mochi { width: 168px; height: 184px; margin-inline: auto; }
  .mochi-body { width: 144px; height: 136px; margin-top: 16px; }
  .mochi-ear { width: 40px; height: 40px; }
  .mochi-ear.left { left: 14px; }
  .mochi-ear.right { right: 14px; }
  .mochi-eyes { top: 54px; gap: 30px; }
  .mochi-eyes span { width: 12px; height: 17px; }
  .mochi-blush { top: 78px; width: 22px; height: 12px; }
  .mochi-mouth { width: 22px; bottom: 38px; }
  .mochi-feet { left: 32px; right: 32px; bottom: 6px; }
  .mochi-feet span { width: 26px; height: 14px; }
  .mood-label { font-size: 1.05rem; color: #5a4038; }
  .commands-panel,
  .commands-panel.open {
    display: flex;
    position: static;
    max-height: none;
    flex: 1;
    min-height: 0;
    box-shadow: none;
  }
  .chat { border-radius: 22px; }
  .messages { padding: 20px 20px 10px; }
  .composer { padding: 10px 16px 16px; }
}

@media (min-width: 1280px) {
  .topbar, .stage-wrap { max-width: 1320px; }
  .companion { width: 320px; flex-basis: 320px; max-width: 320px; }
  .messages, .composer { max-width: 780px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}