*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a0a0b;--bg-card:#141416;--border:#27272a;--fg:#fafafa;--fg-dim:#a1a1aa;--fg-muted:#71717a;--accent:#a78bfa;--accent-dim:#7c3aed;--destructive:#ef4444;--success:#22c55e}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
.h-dvh{height:100dvh}
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-1{flex:1}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-2{gap:8px}
.gap-3{gap:12px}
.gap-4{gap:16px}
.sticky{position:sticky}
.top-0{top:0}
.bottom-0{bottom:0}
.z-10{z-index:10}
.border-b{border-bottom:1px solid var(--border)}
.border-t{border-top:1px solid var(--border)}
.bg-background\/80{background:color-mix(in srgb,var(--bg) 80%,transparent)}
.backdrop-blur{backdrop-filter:blur(12px)}
.bg-background{background:var(--bg)}
.px-4{padding-left:16px;padding-right:16px}
.py-3{padding-top:12px;padding-bottom:12px}
.py-6{padding-top:24px;padding-bottom:24px}
.py-12{padding-top:48px;padding-bottom:48px}
.overflow-y-auto{overflow-y:auto}
.max-w-2xl{max-width:672px}
.mx-auto{margin-left:auto;margin-right:auto}
.text-lg{font-size:1.125rem}
.font-semibold{font-weight:600}
.text-sm{font-size:0.875rem}
.text-xs{font-size:0.75rem}
.text-center{text-align:center}
.text-muted-foreground{color:var(--fg-muted)}
.relative{position:relative}
.hidden{display:none}
.space-y-4>*+*{margin-top:16px}
.mb-6{margin-bottom:24px}
.mt-4{margin-top:16px}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:0.75rem;font-weight:500;transition:all .3s}
.badge::before{content:'';width:6px;height:6px;border-radius:50%}
.badge-idle{background:color-mix(in srgb,var(--fg-muted) 15%,transparent);color:var(--fg-muted)}
.badge-idle::before{background:var(--fg-muted)}
.badge-connecting{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.badge-connecting::before{background:var(--accent);animation:pulse 1s infinite}
.badge-active{background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success)}
.badge-active::before{background:var(--success);box-shadow:0 0 8px var(--success)}
.badge-error{background:color-mix(in srgb,var(--destructive) 15%,transparent);color:var(--destructive)}
.badge-error::before{background:var(--destructive)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Icon button */
.icon-btn{background:none;border:none;color:var(--fg-dim);cursor:pointer;padding:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:.15s}
.icon-btn:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}

/* Transcript messages */
.message{display:flex;gap:10px;align-items:flex-start;animation:fadeIn .3s}
.message-user{flex-direction:row-reverse}
.message-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:600}
.message-avatar.user{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
.message-avatar.assistant{background:color-mix(in srgb,var(--success) 20%,transparent);color:var(--success)}
.message-bubble{max-width:80%;padding:10px 14px;border-radius:12px;font-size:0.875rem;line-height:1.5;word-break:break-word}
.message-user .message-bubble{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--fg);border-bottom-right-radius:4px}
.message-assistant .message-bubble{background:var(--bg-card);color:var(--fg);border-bottom-left-radius:4px}
.message.interrupted .message-bubble{opacity:.5}
.message-time{font-size:0.65rem;color:var(--fg-muted);margin-top:4px}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Text input */
.text-input{width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:10px 44px 10px 16px;color:var(--fg);font-size:0.875rem;outline:none;transition:.15s}
.text-input:focus{border-color:var(--accent)}
.text-input:disabled{opacity:.4}
.send-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:var(--accent);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.send-btn:hover{background:var(--accent-dim)}
.send-btn:disabled{opacity:.3;cursor:default}

/* Mic button */
.mic-btn{width:52px;height:52px;border-radius:50%;border:2px solid var(--border);background:var(--bg-card);color:var(--fg-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0}
.mic-btn:hover{border-color:var(--fg-muted);color:var(--fg)}
.mic-btn.active{background:var(--destructive);border-color:var(--destructive);color:#fff;box-shadow:0 0 20px rgba(239,68,68,.4)}
.mic-btn.active .pulse-ring{animation:pulse-ring 1.5s infinite}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}70%{box-shadow:0 0 0 20px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}

/* Audio visualizer */
#visualizer{display:none;width:100%;height:48px;align-items:center;justify-content:center;gap:2px}
#visualizer.active{display:flex}
.vis-bar{width:4px;border-radius:2px;background:var(--accent);transition:height .05s;min-height:4px}