*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0f;--surface:#13131a;--surface2:#1c1c28;--border:#2a2a3d;--accent:#7c3aed;--accent-light:#a855f7;--accent-glow:#7c3aed4d;--text:#e2e2f0;--text-muted:#6b6b8a;--user-bubble:#1e1e2e;--dravon-bubble:#1a1130;--recording:#ef4444;--success:#22c55e}body{background:var(--bg);color:var(--text);height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}#root{flex-direction:column;height:100vh;display:flex}.app{background:var(--bg);flex-direction:column;height:100vh;display:flex}.header{border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.header-left{align-items:center;gap:12px;display:flex}.logo{filter:drop-shadow(0 0 8px #a855f799);font-size:28px}.header-title{color:var(--text);letter-spacing:-.02em;font-size:16px;font-weight:600}.header-sub{color:var(--text-muted);font-size:12px}.server-status{border:1px solid var(--border);border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;display:flex}.server-status.online{color:var(--success);background:#22c55e0d;border-color:#22c55e4d}.server-status.offline{color:var(--recording);background:#ef44440d;border-color:#ef44444d}.server-status.checking{color:var(--text-muted)}.messages{flex-direction:column;flex:1;gap:16px;padding:24px;display:flex;overflow-y:auto}.messages::-webkit-scrollbar{width:4px}.messages::-webkit-scrollbar-track{background:0 0}.messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.message{align-items:flex-end;gap:10px;max-width:75%;animation:.2s fadeUp;display:flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.message--user{flex-direction:row-reverse;align-self:flex-end}.message--dravon{align-self:flex-start}.message--error{align-self:center;max-width:90%}.avatar{flex-shrink:0;margin-bottom:2px;font-size:20px}.avatar--user{font-size:18px}.bubble{word-break:break-word;border-radius:18px;padding:12px 16px;font-size:15px;line-height:1.5}.bubble--user{background:var(--accent);color:#fff;box-shadow:0 0 20px var(--accent-glow);border-bottom-right-radius:4px}.bubble--dravon{background:var(--dravon-bubble);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:4px}.bubble--error{color:#fca5a5;background:#ef44441a;border:1px solid #ef44444d;border-radius:12px;font-size:13px}.bubble.thinking{align-items:center;gap:6px;padding:14px 20px;display:flex}.bubble.thinking span{background:var(--accent-light);border-radius:50%;width:7px;height:7px;animation:1.2s ease-in-out infinite pulse}.bubble.thinking span:nth-child(2){animation-delay:.2s}.bubble.thinking span:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,80%,to{opacity:.3;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}.controls{border-top:1px solid var(--border);background:var(--surface);flex-direction:column;flex-shrink:0;align-items:center;gap:16px;padding:24px;display:flex}.status-label{color:var(--text-muted);letter-spacing:.02em;font-size:13px}.mic-wrapper{justify-content:center;align-items:center;width:80px;height:80px;display:flex;position:relative}.mic-ring{border:2px solid var(--recording);opacity:.6;border-radius:50%;transition:transform 50ms;position:absolute;inset:-8px;box-shadow:0 0 20px #ef444466}.mic-btn{cursor:pointer;z-index:1;border:none;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;transition:all .15s;display:flex;position:relative}.mic-btn--idle{background:var(--accent);color:#fff;box-shadow:0 0 24px var(--accent-glow)}.mic-btn--idle:hover{background:var(--accent-light);transform:scale(1.05);box-shadow:0 0 32px #7c3aed80}.mic-btn--recording{background:var(--recording);color:#fff;animation:1.5s ease-in-out infinite recordPulse;box-shadow:0 0 24px #ef444466}@keyframes recordPulse{0%,to{box-shadow:0 0 24px #ef444466}50%{box-shadow:0 0 40px #ef4444b3}}.mic-btn--thinking,.mic-btn--speaking{background:var(--surface2);color:var(--accent-light);border:2px solid var(--accent);cursor:default;box-shadow:0 0 20px var(--accent-glow)}.mic-btn--error{color:var(--recording);border:2px solid var(--recording);background:#ef444433}.spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}