@font-face{font-family:'Orbitron';src:url('/static/fonts/Orbitron.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:'Geist';src:url('/static/fonts/Geist.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--bg:#0a0a0b;--s1:#111113;--s2:#161618;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);--txt:#ececee;--mut:#9ca3af;
--or:#f97316;--or2:#fb923c;--or-a:rgba(249,115,22,.12);--or-b:rgba(249,115,22,.45);--red:#ef4444;--green:#22c55e;--blue:#60a5fa}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:16px/1.5 'Geist',ui-sans-serif,system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{background:radial-gradient(60% 40% at 50% 0%,rgba(249,115,22,.08),transparent 70%),var(--bg);overscroll-behavior:none}
.mut{color:var(--mut)}.small{font-size:12px}.err{color:var(--red)}
button{font:inherit;cursor:pointer}
.btn{background:var(--or);color:#111;border:0;border-radius:12px;padding:12px 18px;font-weight:600}
.btn:disabled{opacity:.35}
.ghost{background:transparent;color:var(--mut);border:1px solid var(--line2);border-radius:10px;padding:9px 12px;font-size:14px}
input{width:100%;background:var(--s1);color:var(--txt);border:1px solid var(--line2);border-radius:12px;padding:13px;font:inherit;font-size:16px}
.login{max-width:360px;margin:14vh auto 0;padding:0 22px;text-align:center}
.login h1{font-family:Orbitron;letter-spacing:.16em;margin:14px 0 0}.login form{display:grid;gap:12px;margin-top:22px}
.login img{border-radius:18px}
#app{display:flex;flex-direction:column;height:100dvh;padding:calc(env(safe-area-inset-top) + 8px) 16px calc(env(safe-area-inset-bottom) + 12px)}
header{display:flex;align-items:center;gap:10px}
.brand{font-family:Orbitron;font-weight:700;letter-spacing:.18em;color:var(--or)}
.lo{margin-left:auto}
.state{font-size:13px;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--mut)}
.state.listening{color:var(--red);border-color:var(--red)}.state.thinking{color:var(--or2);border-color:var(--or-b)}
.state.speaking{color:var(--green);border-color:var(--green)}
#log{flex:1;overflow-y:auto;padding:14px 0;display:flex;flex-direction:column;gap:10px}
.msg{padding:10px 13px;border-radius:14px;max-width:88%;white-space:pre-wrap;overflow-wrap:anywhere}
.me{align-self:flex-end;background:var(--s2);border:1px solid var(--line)}
.bot{align-self:flex-start;background:var(--or-a);border:1px solid var(--or-b)}
.sys{align-self:center;color:var(--mut);font-size:13px}
#action{background:var(--s1);border:1px solid var(--or);border-radius:14px;padding:12px;margin-bottom:10px}
#action .lbl{margin:0;font-family:Orbitron;font-size:11px;letter-spacing:.14em;color:var(--or)}
#action-desc{margin:6px 0}
.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
footer{display:flex;flex-direction:column;align-items:center;gap:12px}
#timing{min-height:16px;margin:0;text-align:center}
.talk{width:min(62vw,240px);height:min(62vw,240px);border-radius:50%;border:2px solid var(--or);background:radial-gradient(circle,var(--or-a),transparent 70%);
color:var(--txt);font-family:Orbitron;font-size:15px;letter-spacing:.08em;text-transform:uppercase;user-select:none;-webkit-user-select:none;
-webkit-touch-callout:none;touch-action:none;transition:transform .12s,background .12s}
.talk.rec{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.06);animation:pulse 1.2s infinite}
.talk.busy{border-color:var(--or-b);color:var(--mut)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}100%{box-shadow:0 0 0 26px rgba(239,68,68,0)}}
#typed{display:flex;gap:8px;width:100%}#typed[hidden],#action[hidden]{display:none}