:root {
  --navy: #0b1f3a;
  --navy-2: #12305a;
  --gold: #f2b51d;
  --gold-soft: #ffe7a6;
  --bg: #f4f6fa;
  --panel: #ffffff;
  --text: #13213a;
  --muted: #5b6880;
  --bubble-user: var(--navy);
  --bubble-user-text: #ffffff;
  --bubble-bot: #ffffff;
  --border: #dde3ee;
  --radius: 18px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --size: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07111f;
    --panel: #0e1b30;
    --text: #e8edf6;
    --muted: #9aa8c0;
    --bubble-bot: #13243f;
    --border: #22375a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #07111f;
    --panel: #0e1b30;
    --text: #e8edf6;
    --muted: #9aa8c0;
    --bubble-bot: #13243f;
    --border: #22375a;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: var(--size)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.app {
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(280px, 38%) 1fr;
}

/* ---------- Boomer stage ---------- */
.stage {
  background: radial-gradient(circle at 50% 35%, var(--navy-2), var(--navy) 70%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  overflow: hidden;
}
.boomer {
  position: relative;
  width: min(100%, 440px);
  transform-origin: 50% 100%;
}
.boomer.drawn { aspect-ratio: 300 / 420; }
.bm-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 552 / 722;
  transform-origin: 50% 100%;
  transition: transform .25s ease;
  /* the photo stops at his waist, so fade the cut edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
}
.bm-photo .bm-base { display: block; width: 100%; height: 100%; }
.bm-jaw {
  position: absolute;
  visibility: hidden;
  background-repeat: no-repeat;
  background-size: 600% 100%;
  pointer-events: none;
}
/* Chat tab: upper body only. */
.app:not([data-tab="voice"]) .boomer:not(.drawn) { aspect-ratio: 552 / 470; overflow: hidden; }
.app:not([data-tab="voice"]) .boomer:not(.drawn) .bm-photo {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  -webkit-mask-size: 100% 65%;
  mask-size: 100% 65%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.app[data-state="speaking"] .bm-photo { transform: rotate(.8deg); }
.app[data-state="speaking"] .boomer.nod .bm-photo { transform: rotate(-.8deg) translateY(1px); }
.app[data-state="thinking"] .bm-photo { transform: rotate(-2deg); }
.app[data-state="listening"] .bm-photo { transform: scale(1.02); }
.boomer svg.bm { width: 100%; height: 100%; }
.boomer { filter: drop-shadow(0 18px 30px rgb(0 0 0 / .35)); }

/* Character rig: each layer moves on its own. */
.bm .bm-head, .bm .bm-mouth, .bm .bm-lids, .bm .bm-pupils, .bm .bm-brows, .bm .bm-ears, .bm .bm-arm-l, .bm .bm-arm-r {
  transform-box: fill-box;
  transition: transform .25s ease;
}
.bm .bm-head { transform-origin: 50% 90%; }
.bm .bm-mouth { transform-origin: 50% 0; transform: scaleY(0); transition: none; }
.bm .bm-smile { transition: opacity .08s; }
.bm .bm-lids { transform-origin: 50% 0; transform: scaleY(0); transition: transform .07s; }
.blink .bm .bm-lids { transform: scaleY(1); }
.bm .bm-arm-l { transform-origin: 80% 10%; }
.bm .bm-arm-r { transform-origin: 20% 10%; }
.bm .bm-ears { transform-origin: 50% 100%; }

.app[data-state="listening"] .bm .bm-ears { transform: scale(1.08); }
.app[data-state="listening"] .bm .bm-head { transform: rotate(-4deg); }
.app[data-state="listening"] .bm .bm-brows { transform: translateY(-5px); }
.app[data-state="thinking"] .bm .bm-pupils { transform: translate(5px, -6px); }
.app[data-state="thinking"] .bm .bm-brows { transform: translateY(-4px); }
.app[data-state="thinking"] .bm .bm-arm-r { transform: rotate(-28deg); }
.app[data-state="speaking"] .bm .bm-head { transform: rotate(1.5deg); }
.app[data-state="speaking"] .boomer.nod .bm .bm-head { transform: rotate(-1.5deg) translateY(1px); }
.app[data-state="speaking"] .bm .bm-arm-l { transform: rotate(14deg); }

@media (prefers-reduced-motion: reduce) {
  .bm-photo { transition: none; transform: none !important; }
  .bm .bm-head, .bm .bm-arm-l, .bm .bm-arm-r, .bm .bm-ears { transition: none; transform: none !important; }
}

.nameplate { text-align: center; }
.nameplate h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: .02em; color: var(--gold); }
.nameplate p { margin: 0; opacity: .85; }
.status { min-height: 1.5em; margin: 0; color: var(--gold-soft); font-weight: 600; }

/* State-driven motion. "speaking" follows the browser's real speech start/end events. */
@media (prefers-reduced-motion: no-preference) {
  .app[data-state="idle"] .boomer { animation: breathe 5s ease-in-out infinite; }
  .app[data-state="thinking"] .boomer { animation: breathe 3s ease-in-out infinite; }
  .app[data-state="speaking"] .boomer { animation: breathe 2.4s ease-in-out infinite; }
  .app[data-state="listening"] .boomer { animation: lean 1.4s ease-in-out infinite alternate; }
}
.app[data-state="listening"] .boomer > * { filter: drop-shadow(0 0 22px rgb(242 181 29 / .7)); }
@keyframes breathe { 50% { transform: translateY(-4px) scale(1.01); } }
@keyframes lean { to { transform: rotate(2deg) translateY(-2px); } }

/* ---------- Chat ---------- */
.chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}
.log {
  flex: 1;
  overflow-y: auto;
  padding: 24px clamp(16px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overscroll-behavior: contain;
}
.welcome { margin: auto 0; text-align: center; color: var(--muted); }
.welcome-title { font-size: 1.6rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.chips button {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 16px;
}
.chips button:hover { border-color: var(--gold); }

.msg { max-width: min(78ch, 88%); padding: 12px 16px; border-radius: var(--radius); word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--bubble-user); color: var(--bubble-user-text); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.msg.bot { align-self: flex-start; background: var(--bubble-bot); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.msg.bot p { margin: 0 0 .6em; }
.msg.bot p:last-child { margin-bottom: 0; }
.msg.bot ul, .msg.bot ol { margin: .3em 0 .6em; padding-left: 1.3em; }
.msg.bot a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.msg.bot code { background: rgb(127 127 127 / .15); padding: .1em .35em; border-radius: 5px; font-size: .92em; }
.msg.bot pre { background: #0a1426; color: #e7ecf5; padding: 12px; border-radius: 10px; overflow-x: auto; }
.msg.bot pre code { background: none; padding: 0; }
.msg.error { border-color: #d9534f; }
.msg .sources { margin-top: .6em; font-size: .8rem; color: var(--muted); }
.msg .sources a { color: inherit; }
.msg .retry { margin-top: 8px; border: 1px solid var(--border); background: transparent; color: inherit; border-radius: 8px; padding: 4px 10px; }
.typing::after { content: "▍"; animation: blink 1s steps(1) infinite; color: var(--gold); }
@keyframes blink { 50% { opacity: 0; } }

.composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px clamp(16px, 4vw, 48px) 6px;
}
.composer textarea {
  flex: 1;
  resize: none;
  max-height: 160px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}
.composer textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.icon, .send {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 0;
  display: grid;
  place-items: center;
}
.icon svg, .send svg { width: 24px; height: 24px; fill: currentColor; }
.send { background: var(--gold); color: var(--navy); }
.send:disabled { opacity: .5; cursor: default; }
.mic { background: var(--panel); color: var(--text); border: 1px solid var(--border); }
.mic.on { background: #d9534f; color: #fff; border-color: transparent; }
.stop { background: var(--navy-2); color: #fff; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px clamp(16px, 4vw, 48px); }
.toolbar button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: .9rem;
}
.toolbar button:disabled { opacity: .45; cursor: default; }
.toolbar button.attention { border-color: var(--gold); color: var(--text); font-weight: 600; }
.fine { margin: 4px 0 12px; padding: 0 clamp(16px, 4vw, 48px); font-size: .78rem; color: var(--muted); }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 4px;
  margin: 14px clamp(16px, 4vw, 48px) 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  align-self: center;
}
.tabs button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 8px 22px;
  border-radius: 10px;
  font-weight: 600;
}
.tabs button[aria-selected="true"] { background: var(--navy); color: var(--gold); }
.tabs button:focus-visible, .toolbar button:focus-visible, .chips button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Voice tab: full Boomer, captions, big mic ---------- */
.caption { display: none; }
.app[data-tab="voice"] { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.app[data-tab="voice"] .stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  justify-items: center;
  padding-block: 16px 8px;
  gap: 6px;
}
.app[data-tab="voice"] .boomer { height: 100%; width: auto; max-width: 100%; aspect-ratio: 552 / 722; }
.app[data-tab="voice"] .boomer.drawn { aspect-ratio: 300 / 420; }
.app[data-tab="voice"] .nameplate h1 { font-size: 1.6rem; }
.app[data-tab="voice"] .nameplate p { display: none; }
.app[data-tab="voice"] .log { display: none; }
.app[data-tab="voice"] .chat { border-top: 1px solid var(--border); }
.app[data-tab="voice"] .caption {
  display: grid;
  gap: 4px;
  text-align: center;
  padding: 12px clamp(16px, 6vw, 96px) 0;
  min-height: 5.5em;
}
.caption p { margin: 0; text-wrap: balance; }
.cap-user { color: var(--muted); font-size: .95rem; }
.cap-user:not(:empty)::before { content: "You: "; font-weight: 600; }
.cap-bot { font-size: 1.25rem; font-weight: 500; }
.app[data-tab="voice"] .composer { justify-content: center; }
.app[data-tab="voice"] .composer .mic { width: 72px; height: 72px; border-radius: 50%; background: var(--gold); color: var(--navy); border: 0; order: -1; }
.app[data-tab="voice"] .composer .mic svg { width: 34px; height: 34px; }
.app[data-tab="voice"] .composer .mic.on { background: #d9534f; color: #fff; }
.app[data-tab="voice"] .composer textarea { max-width: 420px; }
.app[data-tab="voice"] .toolbar, .app[data-tab="voice"] .fine { justify-content: center; text-align: center; }

/* Microphone picker: Voice tab only. */
.mic-picker { display: none; }
.app[data-tab="voice"] .mic-picker:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px clamp(16px, 4vw, 48px) 0;
  font-size: .9rem;
  color: var(--muted);
}
.mic-picker select {
  max-width: min(320px, 70vw);
  min-width: 0;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}
.mic-picker button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 10px;
  padding: 6px 12px;
}
.mic-meter {
  width: 90px;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.mic-meter span {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .08s linear;
}

/* ---------- Kiosk / lobby mode (?kiosk) ---------- */
.kiosk { --size: 1.2rem; }
.kiosk .chips button { padding: 14px 20px; }
.kiosk .icon, .kiosk .send { width: 60px; height: 60px; }

.attract {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: radial-gradient(circle at 50% 40%, var(--navy-2), var(--navy) 75%);
  display: grid;
}
.attract[hidden] { display: none; }
.attract-inner {
  border: 0;
  background: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.attract-img {
  display: block; height: 58vh; width: auto; max-width: 80vw; object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
}
@media (prefers-reduced-motion: no-preference) { .attract-img { animation: breathe 5s ease-in-out infinite; } }
.attract-title { font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 800; color: var(--gold); }
.attract-sub { font-size: clamp(1.1rem, 2.5vw, 1.6rem); opacity: .9; min-height: 1.5em; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .stage { flex-direction: row; padding: 10px 16px; gap: 12px; justify-content: flex-start; }
  .boomer { width: 84px; }
  .app[data-tab="voice"] .stage { flex-direction: column; }
  .tabs { margin-top: 10px; }