:root { --bg: #0d1117; --fg: #e6edf3; --muted: #8b949e; --accent: #2f81f7; --live: #f85149; --card: #161b22; --line: #30363d; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 24px 16px; min-height: 100vh; display: flex; flex-direction: column; }
h1 { margin: 0 0 8px; letter-spacing: .12em; font-weight: 600; }
.login { justify-content: center; align-items: center; }
.login form { display: flex; flex-direction: column; gap: 12px; width: min(320px, 100%); }
input, button { font: inherit; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); }
button { background: var(--accent); border-color: var(--accent); cursor: pointer; }
.err { color: var(--live); min-height: 1.4em; margin: 0; }
header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
header a { color: var(--muted); font-size: 14px; }
#state { color: var(--muted); font-size: 14px; }
#mic { margin: 28px auto; width: 168px; height: 168px; border-radius: 50%; border: 0; font-size: 18px; font-weight: 600;
  background: radial-gradient(circle at 50% 40%, #3b8cff, #1f4fa8); box-shadow: 0 0 0 0 rgba(47,129,247,.5); transition: transform .1s; }
#mic.live { background: radial-gradient(circle at 50% 40%, #ff6b63, #b62324); }
#mic.speaking { animation: pulse 1.2s infinite; }
#mic:active { transform: scale(.97); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(248,81,73,.55); } 100% { box-shadow: 0 0 0 28px rgba(248,81,73,0); } }
#log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.msg { padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); max-width: 92%; white-space: pre-wrap; }
.msg.you { align-self: flex-end; background: #1c2a3f; }
.msg.sys { align-self: center; background: none; border: 0; color: var(--muted); font-size: 14px; }
form.text { display: flex; gap: 8px; }
form.text input { flex: 1; min-width: 0; }
#cost { color: var(--muted); font-size: 13px; text-align: center; margin-top: 8px; }