:root { --bg:#f4f7ff; --fg:#0b1b3a; --idle:#1d4ed8; --listen:#15803d; --think:#b45309; --speak:#7e22ce; --bad:#b91c1c; --soft:#475569; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1220; --fg:#f1f5ff; --soft:#a8b3c7; } }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden;
       padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
main { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2vh; padding: 3vh 5vw; text-align: center; }
#orb { width: min(86vw, 58vh); height: min(86vw, 58vh); border-radius: 50%; border: 0; color: #fff; background: var(--idle);
       font-size: clamp(2rem, 8vw, 3.6rem); font-weight: 700; line-height: 1.15; cursor: pointer; padding: 1rem;
       box-shadow: 0 0 0 1.2vh color-mix(in srgb, var(--idle) 25%, transparent); transition: background .25s, box-shadow .25s; }
#orb:focus-visible { outline: 6px solid var(--fg); outline-offset: 6px; }
body[data-view="listening"] #orb { background: var(--listen); animation: pulse 1.6s ease-in-out infinite; }
body[data-view="thinking"] #orb { background: var(--think); }
body[data-view="speaking"] #orb { background: var(--speak); animation: pulse 1.2s ease-in-out infinite; }
body[data-view="pending"] #orb, body[data-view="denied"] #orb, body[data-view="error"] #orb { background: var(--soft); cursor: default; }
body[data-view="error"] #orb { background: var(--bad); }
@keyframes pulse { 50% { box-shadow: 0 0 0 3vh color-mix(in srgb, currentColor 0%, transparent), 0 0 0 2.4vh rgba(127,127,127,.25); } }
@media (prefers-reduced-motion: reduce) { #orb { animation: none !important; } }
#orb-label { white-space: pre-line; }
#caption { font-size: clamp(1.5rem, 6vw, 2.4rem); line-height: 1.3; min-height: 3.9em; margin: 0; max-width: 28ch; overflow: hidden; }
#notice { font-size: clamp(1.2rem, 4.5vw, 1.8rem); color: var(--soft); margin: 0; min-height: 1.4em; }
#again { font-size: clamp(1.2rem, 4.5vw, 1.8rem); padding: .7em 1.6em; border-radius: 999px; border: 3px solid var(--soft); background: transparent; color: var(--fg); }
#again[hidden] { display: none; }
body[data-view="locked"] #orb { display: none; }
#join { display: flex; flex-direction: column; gap: 1.2rem; width: min(92vw, 30rem); }
#join[hidden] { display: none; }
#join label { font-size: clamp(1.6rem, 6.5vw, 2.4rem); font-weight: 700; }
#join input { font-size: clamp(1.5rem, 6vw, 2.2rem); padding: .6em .8em; border-radius: 1rem; border: 3px solid var(--soft);
              background: transparent; color: var(--fg); text-align: center; width: 100%; }
#join input:focus-visible, #join button:focus-visible { outline: 6px solid var(--fg); outline-offset: 4px; }
#join button { font-size: clamp(1.4rem, 5.5vw, 2rem); padding: .7em 1.6em; border-radius: 999px; border: 0; background: var(--idle);
               color: #fff; font-weight: 700; cursor: pointer; }
#join button:disabled { opacity: .6; }