:root{--sa:#E8A33D;--tl:#54B9A8;--bl:#7aa2f7;--ink:#ECE7DE;--mut:#9aa6b6}
*{box-sizing:border-box;margin:0;font-family:ui-sans-serif,system-ui,sans-serif}
body{min-height:100vh;display:grid;place-items:center;background:#0a0d13}
.app{width:392px;max-width:96vw;background:radial-gradient(130% 120% at 50% -5%,#1c2536,#0b0e15 60%);
  border:1px solid rgba(255,255,255,.07);border-radius:26px;padding:18px;color:var(--ink);
  display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.top{display:flex;justify-content:space-between;align-items:center}
.pill{display:inline-flex;gap:7px;align-items:center;font:600 11px/1 ui-monospace,monospace;
  letter-spacing:.05em;padding:6px 11px;border-radius:999px;background:rgba(84,185,168,.15);color:var(--tl)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--tl);box-shadow:0 0 0 4px rgba(84,185,168,.18)}
.chip{font:700 10px/1 ui-monospace,monospace;padding:5px 9px;border-radius:7px;
  background:rgba(232,163,61,.16);color:var(--sa)}
.orbwrap{display:flex;flex-direction:column;align-items:center;gap:9px;padding:8px 0 2px}
.orb{width:108px;height:108px;border-radius:50%;
  background:conic-gradient(from 210deg,var(--sa),var(--tl),var(--bl),var(--sa));
  transform:scale(var(--amp,1));transition:transform .08s linear}
.orbcap{font:500 11px/1 ui-monospace,monospace;color:#6b7686}
.chat{display:flex;flex-direction:column;gap:8px;min-height:96px;background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:12px}
.bub{font:500 12.5px/1.5 ui-sans-serif;padding:9px 13px;border-radius:13px;max-width:88%}
.bub.u{align-self:flex-end;background:#212d3e;border:1px solid rgba(255,255,255,.08)}
.bub.a{align-self:flex-start;background:rgba(84,185,168,.12);border:1px solid rgba(84,185,168,.28)}
.ground{align-self:flex-start;font:600 9.5px/1 ui-monospace,monospace;color:var(--tl);padding-left:4px}
.ground.blocked{color:#DB6A6A}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sel{font:500 11px/1 ui-monospace,monospace;color:var(--mut);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:8px 11px;outline:none}
.sel::placeholder{color:#5b6678}
.sel#record{flex:1;min-width:0}
.sel.ghost{opacity:.5;white-space:nowrap}
.mic{width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;font-size:23px;flex:none;
  background:conic-gradient(from 210deg,var(--sa),var(--tl),var(--sa));box-shadow:0 8px 24px rgba(232,163,61,.35)}
.app[data-state="listening"] .orb{animation:ripple 1.2s ease-in-out infinite}
.app[data-state="checking"] .orb{animation:spin 2.2s linear infinite}
.app[data-state="speaking"] .orb{animation:breathe 3s ease-in-out infinite}
@keyframes ripple{0%,100%{box-shadow:0 0 0 0 rgba(84,185,168,.4)}50%{box-shadow:0 0 0 16px rgba(84,185,168,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.orb{animation:none!important}}