/* Sentinel Prime voice lane — MERIDIAN styling. Depends on the mockup tokens when present
   (--x-cyan, --x-amber, --x-mint, --t0..--t3, --fm, --fu, --glass, --line); falls back to its own. */
.sv-root{
  --sv-cyan:var(--x-cyan,#00e5ff); --sv-accent:var(--ng-accent,#2dd9ff); --sv-amber:var(--x-amber,#ffb02e);
  --sv-mint:var(--x-mint,#00ffc8); --sv-red:var(--x-red,#ff4d6b); --sv-idle:var(--idle,#6b7686);
  --sv-t0:var(--t0,#eaf6ff); --sv-t1:var(--t1,#c9dcec); --sv-t2:var(--t2,#7fa0b8); --sv-t3:var(--t3,#4a7490);
  --sv-fm:var(--fm,'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace);
  --sv-fu:var(--fu,'Inter',-apple-system,system-ui,sans-serif);
  --sv-glass:var(--glass,rgba(10,20,38,.5)); --sv-line:var(--line,rgba(120,200,255,.10));
  --lvl:0; --hue:var(--sv-cyan);
  font-family:var(--sv-fu); color:var(--sv-t1); display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:24px 16px; max-width:720px; margin:0 auto; box-sizing:border-box; width:100%;
}
.sv-root[data-state=thinking]{--hue:var(--sv-amber)}
.sv-root[data-state=speaking]{--hue:var(--sv-mint)}
.sv-root[data-state=error]{--hue:var(--sv-red)}
.sv-root[data-state=off],.sv-root[data-state=boot]{--hue:var(--sv-idle)}
.sv-root .mono{font-family:var(--sv-fm);font-variant-numeric:tabular-nums}

/* ---- orb ---- */
.sv-stage{display:flex;flex-direction:column;align-items:center;gap:14px}
.sv-orb{position:relative;width:168px;height:168px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.sv-orb-core{
  position:absolute;inset:34px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, color-mix(in srgb,var(--hue) 85%,white) 0%, var(--hue) 28%, color-mix(in srgb,var(--hue) 45%,#03060c) 70%, #03060c 100%);
  box-shadow:0 0 calc(18px + 60px*var(--lvl)) calc(2px + 10px*var(--lvl)) color-mix(in srgb,var(--hue) 55%,transparent), inset 0 0 22px rgba(255,255,255,.12);
  transform:scale(calc(.92 + .22*var(--lvl))); transition:transform 60ms linear, background 320ms;
}
.sv-orb-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb,var(--hue) 22%,transparent) 0%, transparent 62%);opacity:calc(.4 + .6*var(--lvl));pointer-events:none}
.sv-orb-ring{position:absolute;inset:14px;border-radius:50%;border:1px solid color-mix(in srgb,var(--hue) 45%,transparent);opacity:.7}
.sv-orb-ring-b{inset:2px;border-style:dashed;border-color:color-mix(in srgb,var(--hue) 28%,transparent);opacity:.5}
.sv-root[data-state=idle] .sv-orb-core{animation:sv-breathe 4.2s ease-in-out infinite}
.sv-root[data-state=listening] .sv-orb-ring-a{animation:sv-pulse 1.5s ease-out infinite}
.sv-root[data-state=thinking] .sv-orb-ring-b{animation:sv-spin 1.6s linear infinite;border-style:dashed;opacity:.9}
.sv-root[data-state=speaking] .sv-orb-ring-a{animation:sv-pulse 1.1s ease-out infinite}
.sv-root[data-state=speaking] .sv-orb-ring-b{animation:sv-pulse 1.1s ease-out .35s infinite}
.sv-root[data-state=off] .sv-orb-core{filter:saturate(.2) brightness(.6)}
@keyframes sv-breathe{0%,100%{transform:scale(.92)}50%{transform:scale(.98)}}
@keyframes sv-pulse{0%{transform:scale(.86);opacity:.9}100%{transform:scale(1.22);opacity:0}}
@keyframes sv-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sv-orb *{animation:none!important}}

.sv-status{text-align:center;min-height:38px}
.sv-state-label{display:block;font-family:var(--sv-fm);font-size:11px;letter-spacing:.22em;color:var(--hue);text-shadow:0 0 10px color-mix(in srgb,var(--hue) 60%,transparent)}
.sv-state-sub{display:block;font-size:13px;color:var(--sv-t2);margin-top:4px;min-height:18px}

/* ---- transcript ---- */
.sv-transcript{width:100%;background:var(--sv-glass);border:1px solid var(--sv-line);border-radius:var(--r3,14px);padding:12px 16px;display:flex;flex-direction:column;gap:8px;backdrop-filter:blur(8px)}
.sv-line{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:baseline;min-height:22px}
.sv-who{font-family:var(--sv-fm);font-size:10px;letter-spacing:.14em;color:var(--sv-t3)}
.sv-line-ai .sv-who{color:var(--sv-cyan)}
.sv-text{font-size:15px;line-height:1.55;color:var(--sv-t0);word-break:break-word}
.sv-user-text.sv-partial{color:var(--sv-t2);font-style:italic}
.sv-ai-text:empty::before{content:"…";color:var(--sv-t3)}
.sv-user-text:empty::before{content:"…";color:var(--sv-t3)}

.sv-metrics{font-size:11px;color:var(--sv-t2);min-height:14px;letter-spacing:.02em}

/* ---- controls ---- */
.sv-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;width:100%}
.sv-btn{font:inherit;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--sv-fm);color:var(--sv-t1);background:var(--sv-glass);border:1px solid var(--sv-line);border-radius:var(--r2,8px);padding:8px 14px;cursor:pointer;transition:border-color 160ms,color 160ms,background 160ms}
.sv-btn:hover{border-color:color-mix(in srgb,var(--sv-cyan) 50%,transparent);color:var(--sv-t0)}
.sv-btn-power{border-color:color-mix(in srgb,var(--sv-cyan) 55%,transparent);color:var(--sv-cyan)}
.sv-btn[aria-pressed=true]{background:color-mix(in srgb,var(--sv-cyan) 14%,transparent);color:var(--sv-cyan);border-color:color-mix(in srgb,var(--sv-cyan) 45%,transparent)}
.sv-typed{display:flex;gap:6px;flex:1 1 260px;min-width:220px}
.sv-typed-input{flex:1;font:inherit;font-size:13px;color:var(--sv-t0);background:rgba(4,9,18,.6);border:1px solid var(--sv-line);border-radius:var(--r2,8px);padding:8px 12px;outline:none}
.sv-typed-input:focus{border-color:color-mix(in srgb,var(--sv-cyan) 55%,transparent)}
.sv-hint{width:100%;text-align:center;font-size:10.5px;color:var(--sv-t3);letter-spacing:.04em}
.sv-hint kbd{font:inherit;border:1px solid var(--sv-line);border-radius:4px;padding:0 5px;color:var(--sv-t2)}
.sv-log{width:100%;max-height:160px;overflow:auto;font-size:10.5px;color:var(--sv-t3);white-space:pre-wrap}

@media (max-width:560px){.sv-orb{width:132px;height:132px}.sv-orb-core{inset:26px}.sv-text{font-size:14px}}

/* ---------------------------------------------- hands-free mic privacy flag
 * Always-on listening must be visible. This dot is shown whenever the mic
 * stream is actually open (voice.js toggles [hidden] from _reflectHandsFree /
 * stopAll), and the "Hands-free" button next to it is a real off switch: it
 * closes the stream, it does not merely set a flag. */
.sv-mic-flag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px;
  border: 1px solid color-mix(in srgb, #ff5470 55%, transparent); border-radius: 999px;
  color: #ff8fa3; font-size: 11px; letter-spacing: .08em; }
.sv-mic-flag[hidden] { display: none; }
.sv-mic-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5470;
  box-shadow: 0 0 6px #ff5470; animation: sv-mic-pulse 2s ease-in-out infinite; }
@keyframes sv-mic-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .sv-mic-dot { animation: none } }
.sv-btn-wake[data-on="1"] { color: #37e8ff; border-color: color-mix(in srgb, #37e8ff 55%, transparent); }