:root { --bg:#fff; --fg:#1a1a1a; --muted:#6b7280; --me:#2563eb; --bot:#f1f2f4; --line:#e5e7eb; }
  @media (prefers-color-scheme: dark) { :root { --bg:#111418; --fg:#e8eaed; --muted:#9aa0a6; --bot:#1e2329; --line:#2a2f36; } }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 system-ui,sans-serif;
         height:100dvh; display:flex; flex-direction:column; }
  header { display:flex; gap:8px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); }
  header h1 { font-size:18px; margin:0; flex:1; }
  header button { background:none; border:1px solid var(--line); color:var(--fg); border-radius:8px; padding:6px 10px; }
  #log { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
  .m { max-width:85%; padding:10px 14px; border-radius:14px; white-space:pre-wrap; word-wrap:break-word; }
  .user { align-self:flex-end; background:var(--me); color:#fff; }
  .bot { align-self:flex-start; background:var(--bot); }
  .err { align-self:center; color:#dc2626; font-size:14px; }
  form { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }
  textarea { flex:1; resize:none; font:inherit; color:var(--fg); background:var(--bg);
             border:1px solid var(--line); border-radius:10px; padding:10px; }
  form button { background:var(--me); color:#fff; border:0; border-radius:10px; padding:0 18px; font-size:16px; }
  form button:disabled { opacity:.5; }
  #usage { color:var(--muted); font-size:12px; padding:0 16px 8px; }
#login { margin:auto; width:min(340px,90vw); display:flex; flex-direction:column; gap:10px; }
#login input { font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px; }
#login button { background:var(--me); color:#fff; border:0; border-radius:10px; padding:10px; font-size:16px; }
.hidden { display:none !important; }

#vbar { display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:0 16px 8px; font-size:13px; color:var(--muted); }
#vstatus { margin-left:auto; }
#mic { background:var(--bot); color:var(--fg); border:1px solid var(--line); border-radius:10px; padding:0 14px; font-size:20px; }
#mic.on { background:#dc2626; border-color:#dc2626; }
form { align-items:stretch; }