*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:#0f0f0f;color:#e0e0e0;height:100vh;display:flex;flex-direction:column}header{padding:1rem 1.5rem;border-bottom:1px solid #222;display:flex;align-items:center;gap:1rem;flex-shrink:0}header h1{font-size:1rem;font-weight:600;color:#fff}#status-bar{display:flex;gap:.75rem;margin-left:auto;font-size:.75rem}.dot{width:8px;height:8px;border-radius:50%;background:#444;display:inline-block;margin-right:4px;transition:background .3s}.dot.ok{background:#22c55e}.dot.warn{background:#f59e0b;animation:pulse 1s infinite}.dot.err{background:#ef4444}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.status-item{display:flex;align-items:center;color:#888}main{flex:1;display:flex;flex-direction:column;padding:1.5rem;gap:1rem;overflow:hidden}#transcript{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;scroll-behavior:smooth}.turn{display:flex;flex-direction:column;gap:.2rem}.turn.user{align-items:flex-end}.turn.agent{align-items:flex-start}.turn.system{align-items:center}.turn-label{font-size:.65rem;color:#555;text-transform:uppercase;letter-spacing:.05em;padding:0 .25rem}.msg{padding:.6rem .9rem;border-radius:.75rem;max-width:75%;font-size:.9rem;line-height:1.55;position:relative}.turn.user .msg{background:#1e293b;color:#93c5fd;border-bottom-right-radius:.2rem}.turn.agent .msg{background:#1a1a1a;border:1px solid #2a2a2a;border-bottom-left-radius:.2rem}.turn.system .msg{background:transparent;color:#555;font-size:.75rem;font-style:italic;max-width:100%;text-align:center}.cursor:after{content:"▋";animation:blink .7s step-end infinite;color:#555;margin-left:2px}@keyframes blink{50%{opacity:0}}.thinking-dots span{animation:dot-bounce 1.2s infinite;display:inline-block;color:#666}.thinking-dots span:nth-child(2){animation-delay:.2s}.thinking-dots span:nth-child(3){animation-delay:.4s}@keyframes dot-bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-4px)}}.latency{display:flex;gap:.4rem;margin-top:.25rem;padding:0 .1rem}.badge{font-size:.6rem;padding:.1rem .4rem;border-radius:.3rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}.badge.ttfa{background:#1e3a2f;color:#4ade80}.badge.total{background:#1e2a3a;color:#60a5fa}.badge.stt{background:#2a1e3a;color:#c084fc}#controls{display:flex;gap:1rem;justify-content:center;padding:1rem 0 .5rem;flex-shrink:0}button{padding:.75rem 2rem;border-radius:.5rem;border:none;font-size:1rem;cursor:pointer;transition:background .2s}#btn-connect{background:#3b82f6;color:#fff}#btn-connect:hover{background:#2563eb}#btn-disconnect{background:#ef4444;color:#fff}#btn-disconnect:hover{background:#dc2626}button:disabled{background:#374151;cursor:not-allowed;color:#888}#log{font-family:monospace;font-size:.65rem;color:#444;height:5rem;overflow-y:auto;padding:.5rem 1.5rem;border-top:1px solid #181818;flex-shrink:0}