/* avatar-lab — internal lab styling. Dark, calm, tool-like. 375px-safe. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0b1020; --card: #121a30; --card2: #0f1628; --line: #1f2b4a;
  --ink: #e8edfa; --dim: #8fa0c4; --blue: #2f6df6; --green: #2fd67b; --red: #f0564a;
}
body { background: var(--bg); color: var(--ink); font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; min-height: 100vh; }
header { padding: 18px 22px 6px; }
.head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; max-width: 1060px; margin: 0 auto; }
.brand { font-weight: 800; letter-spacing: .18em; font-size: 15px; }
.brand span { color: var(--blue); }
.sub { color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.tabs { display: flex; gap: 6px; }
.tab { color: var(--dim); text-decoration: none; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.tab.active, .tab:hover { color: var(--ink); border-color: var(--blue); }

main { display: grid; grid-template-columns: minmax(300px, 560px) minmax(300px, 460px); gap: 18px; padding: 16px 22px 30px; justify-content: center; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }

.stage-card, .controls-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.stage-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.char-name { font-size: 19px; font-weight: 700; }
.char-meta { color: var(--dim); font-size: 12px; }
.state-badge { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); color: var(--dim); }
.state-badge[data-state="speaking"] { color: var(--green); border-color: var(--green); }
.state-badge[data-state="listening"] { color: var(--blue); border-color: var(--blue); }
.state-badge[data-state="thinking"] { color: #e9c46a; border-color: #e9c46a; }
.state-badge[data-state="interrupted"], .state-badge[data-state="error"] { color: var(--red); border-color: var(--red); }

.stage { position: relative; width: 100%; aspect-ratio: 1/1; background: radial-gradient(120% 100% at 50% 0%, #162240 0%, #0c1226 70%); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.stage canvas, .stage #svgHost { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage #svgHost svg { width: 100%; height: 100%; display: block; }

.captions { margin-top: 10px; min-height: 22px; color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }

.char-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.char-btn { flex: 1; min-width: 110px; background: var(--card2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; cursor: pointer; font-size: 14px; }
.char-btn em { display: block; font-style: normal; color: var(--dim); font-size: 11px; }
.char-btn.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }

.mode-row { display: flex; gap: 14px; align-items: center; margin-top: 10px; color: var(--dim); font-size: 13px; }
.mode-row .lbl { text-transform: uppercase; font-size: 10.5px; letter-spacing: .1em; }

.controls-card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--dim); margin-bottom: 12px; }
.group { border-top: 1px solid var(--line); padding: 12px 0; }
.group-title { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.group-title .hint { font-weight: 400; color: var(--dim); font-size: 11.5px; margin-left: 6px; }
.btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
button { background: var(--card2); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 9px 14px; cursor: pointer; font-size: 13.5px; }
button:hover { border-color: var(--blue); }
button.primary { background: var(--blue); border-color: var(--blue); font-weight: 600; }
button.danger { color: var(--red); border-color: #5a2622; }
button.active, .clip-btn.playing { border-color: var(--green); color: var(--green); }
.live-status { color: var(--dim); font-size: 12.5px; }

.state-btn { font-size: 12.5px; padding: 7px 11px; }

.slider-row { display: grid; grid-template-columns: 92px 1fr 84px; gap: 10px; align-items: center; margin: 8px 0; font-size: 12.5px; }
.slider-row .lbl { color: var(--dim); }
.slider-row .val { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--blue); }

.dev-toggle { width: 100%; margin-top: 10px; color: var(--dim); }
.dev-drawer { display: none; margin-top: 10px; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.dev-drawer.open { display: block; }
.dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 12.5px; }
.dev-grid .lbl { color: var(--dim); margin-right: 8px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.env-track { height: 8px; background: #0a0f1e; border-radius: 4px; margin: 10px 0; overflow: hidden; }
.env-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue), var(--green)); }
.chk { color: var(--dim); font-size: 12.5px; display: block; margin: 6px 0; }
.dev-note { color: var(--dim); font-size: 11.5px; margin-top: 8px; line-height: 1.45; }

footer { text-align: center; color: #5c6b8f; font-size: 11.5px; padding: 8px 20px 26px; }
footer code { color: var(--dim); }

/* Phones: the face stays on screen while a clip, the mic or a live agent drives it.
   The stage card's box steps aside so the face can stay pinned across the whole
   drive panel, and the face is a square of at most 40% of the screen height; the
   controls scroll under it. The face sits on a full-width band of the page
   background (a 100vmax spread clipped to the face's height plus 8px), so the
   text it scrolls over never peeks out beside it, and the drive panel headings
   stop below that band on an in-page jump. Scoped to the lab page
   (#photoCanvas): hybrid/ shares this sheet. Wider screens are unchanged. */
@media (max-width: 600px) {
  main:has(#photoCanvas) { gap: 0; }
  main:has(#photoCanvas) > .stage-card { display: contents; }
  main:has(#photoCanvas) .stage { position: sticky; top: 0; z-index: 2; width: min(100%, 40vh); width: min(100%, 40svh); margin: 0 auto; box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .7), 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax -8px); }
  main:has(#photoCanvas) > .controls-card { margin-top: 16px; }
  main:has(#photoCanvas) > .controls-card h2, main:has(#photoCanvas) > .controls-card .group-title { scroll-margin-top: calc(40vh + 24px); scroll-margin-top: calc(40svh + 24px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}