*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d0f;--bg-surface: #16161a;--bg-card: #1e1e24;--border: #2a2a33;--text: #e8e8f0;--text-muted: #6b6b80;--accent: #7c6aff;--accent-glow: #7c6aff55;--record: #ff4d6a;--record-glow: #ff4d6a55;--process: #f0a500;--speak: #22d3a0;--speak-glow: #22d3a055;--radius: 16px;--font: system-ui, -apple-system, sans-serif}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100%;max-width:680px;margin:0 auto}.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}.app-logo{font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--accent)}.toggle-btn{background:none;border:1px solid var(--border);color:var(--text-muted);font-size:12px;padding:4px 10px;border-radius:20px;cursor:pointer;transition:color .2s,border-color .2s}.toggle-btn:hover{color:var(--text);border-color:var(--accent)}.app-main{display:flex;flex-direction:column;flex:1;overflow:hidden}.transcript-wrapper{flex:1;overflow-y:auto;padding:16px 20px 0}.voice-area{display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px 20px 40px;flex-shrink:0}.ring-wrapper{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center}.btn-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.ring{color:var(--accent)}.voice-btn--recording~* .ring,.ring-recording{color:var(--record)}.ring-pulse{animation:ringPulse 1.2s ease-in-out infinite}.ring-speak{animation:ringPulse .8s ease-in-out infinite;color:var(--speak)}@keyframes ringPulse{0%,to{transform:scale(1);opacity:.25}50%{transform:scale(1.1);opacity:.5}}.voice-btn{position:relative;width:80px;height:80px;border-radius:50%;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;background:var(--bg-card);box-shadow:0 0 0 2px var(--border),0 8px 24px #0008;transition:background .2s,box-shadow .2s,transform .1s;user-select:none;-webkit-user-select:none;touch-action:none}.voice-btn:hover{background:#242430;box-shadow:0 0 0 2px var(--accent),0 8px 32px var(--accent-glow)}.voice-btn:active,.voice-btn--recording{transform:scale(.96);background:#200a10;box-shadow:0 0 0 3px var(--record),0 8px 40px var(--record-glow);color:var(--record)}.voice-btn--locked{transform:scale(.96);background:#1a0810;box-shadow:0 0 0 3px var(--record),0 0 60px var(--record-glow);color:var(--record)}.voice-btn--processing{background:#1a1200;box-shadow:0 0 0 2px var(--process),0 8px 40px #f0a50033;color:var(--process);cursor:default}.voice-btn--speaking{background:#001a15;box-shadow:0 0 0 2px var(--speak),0 8px 40px var(--speak-glow);color:var(--speak);cursor:default}.voice-btn__hint{position:absolute;bottom:-28px;white-space:nowrap;font-size:11px;color:var(--text-muted);pointer-events:none}.icon-spin{animation:spin .8s linear infinite;transform-origin:center}@keyframes spin{to{transform:rotate(360deg)}}.icon-active{filter:drop-shadow(0 0 6px var(--record))}.status-indicator{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted)}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot--idle{background:var(--accent)}.status-dot--recording{background:var(--record);animation:dotPulse 1s ease-in-out infinite}.status-dot--locked{background:var(--record);animation:dotPulse .6s ease-in-out infinite}.status-dot--processing{background:var(--process);animation:dotPulse 1.2s ease-in-out infinite}.status-dot--speaking{background:var(--speak);animation:dotPulse .8s ease-in-out infinite}.status-dot--disconnected{background:var(--border)}@keyframes dotPulse{0%,to{opacity:1}50%{opacity:.3}}.transcript-panel{display:flex;flex-direction:column;gap:12px;padding-bottom:8px}.transcript-panel--empty{align-items:center;justify-content:center;min-height:80px;color:var(--text-muted);font-size:14px}.transcript-entry{display:flex;flex-direction:column;gap:4px}.transcript-entry--user{align-items:flex-end}.transcript-entry--assistant{align-items:flex-start}.transcript-bubble{max-width:80%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.5}.transcript-entry--user .transcript-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}.transcript-entry--assistant .transcript-bubble{background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:4px}.transcript-timing{font-size:10px;color:var(--text-muted);padding:0 4px;font-variant-numeric:tabular-nums}.error-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#2a0a10;border:1px solid var(--record);color:#ffb3c0;padding:12px 18px;border-radius:12px;font-size:13px;display:flex;align-items:center;gap:12px;cursor:pointer;max-width:90vw;box-shadow:0 4px 24px #0008;z-index:100}.error-toast button{background:none;border:none;color:inherit;cursor:pointer;font-size:14px;opacity:.7;flex-shrink:0}