*{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}.header-right{align-items:center;gap:10px;display:flex}.mode-toggle{text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:600;transition:all .2s}.mode-toggle:hover{border-color:var(--accent);color:var(--accent)}.mode-toggle.active{border-color:var(--accent);color:var(--accent);background:#a855f726}.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{to{transform:rotate(360deg)}}.anim-page{background:#0d0d14;flex-direction:column;justify-content:center;align-items:center;gap:28px;height:100vh;font-family:Inter,-apple-system,sans-serif;display:flex;position:relative;overflow:hidden}.server-status-anim{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:20px;align-items:center;gap:5px;padding:5px 10px;font-size:11px;font-weight:500;display:flex;position:absolute;top:16px;right:16px}.server-status-anim.online{color:#4ade80;background:#22c55e1f}.server-status-anim.offline{color:#f87171;background:#ef44441f}.server-status-anim.checking{color:#94a3b8;background:#64748b1f}.server-status-anim .spin{animation:1s linear infinite spin}.face-container{justify-content:center;align-items:center;display:flex;position:relative}.listen-ring{opacity:.5;border:3px solid #7c3aed;border-radius:50%;transition:transform 50ms;animation:1.5s ease-in-out infinite ringPulse;position:absolute;inset:-24px}@keyframes ringPulse{0%,to{opacity:.3}50%{opacity:.7}}.think-dots{gap:8px;display:flex;position:absolute;top:-44px}.think-dots span{background:#7c3aed;border-radius:50%;width:10px;height:10px;animation:.8s ease-in-out infinite thinkBounce}@keyframes thinkBounce{0%,to{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-10px)}}.face{z-index:1;background:#13131f;border:1px solid #7c3aed40;border-radius:48px;flex-direction:column;align-items:center;gap:32px;padding:48px 56px;transition:box-shadow .3s;display:flex;position:relative;box-shadow:0 12px 48px #00000080}.state--listening .face{box-shadow:0 0 0 3px #7c3aed66,0 12px 48px #7c3aed33}.state--thinking .face{box-shadow:0 0 0 3px #facc1540,0 12px 48px #facc1514}.state--speaking .face{box-shadow:0 0 0 3px #22c55e40,0 12px 48px #22c55e1a}.eyes{gap:44px;display:flex}.eye{background:#d8b4fe;border-radius:999px;justify-content:center;align-items:center;width:60px;height:12px;transition:height .15s,box-shadow .3s,border-radius .15s;display:flex;position:relative;overflow:hidden}.eye--blink{height:0!important}.eye--listening{background:#c4b5fd;height:22px;box-shadow:0 0 14px #a78bfab3}.eye--thinking{background:#a78bfa;height:6px;box-shadow:0 0 6px #a78bfa4d}.eye--speaking{background:#e9d5ff;height:12px;box-shadow:0 0 8px #c084fc66}.pupil-dot{background:#4c1d95;border-radius:50%;flex-shrink:0;width:8px;height:8px;transition:transform .12s ease-out;position:absolute}.mouth-svg{transition:opacity .15s;display:block;overflow:visible}.mouth-svg path,.mouth-svg ellipse{transition:d .15s}.speech-area{text-align:center;flex-direction:column;gap:8px;max-width:400px;min-height:60px;display:flex}.speech-you{color:#6b7280;font-size:14px}.speech-dravon{color:#c4b5fd;font-size:15px;font-weight:500;line-height:1.5}.new-session-btn{color:#6b7280;cursor:pointer;letter-spacing:.03em;background:0 0;border:1px solid #ffffff1a;border-radius:999px;padding:6px 16px;font-size:12px;transition:all .15s}.new-session-btn:hover:not(:disabled){color:#a78bfa;border-color:#7c3aed}.new-session-btn:disabled{opacity:.4;cursor:default}.status-row{flex-direction:column;align-items:center;gap:12px;display:flex}.mode-toggle-anim{text-transform:uppercase;letter-spacing:.08em;color:#6b7280;cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:20px;padding:3px 10px;font-size:10px;font-weight:700;transition:all .2s}.mode-toggle-anim:hover{color:#a78bfa;border-color:#a78bfa}.mode-toggle-anim.active{color:#a78bfa;background:#a78bfa1f;border-color:#a78bfa}.status-text{color:#4b5563;letter-spacing:.04em;font-size:13px}.mic-btn-anim{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;transition:all .15s;display:flex}.mic-btn-anim--idle{color:#fff;background:#7c3aed;box-shadow:0 4px 20px #7c3aed66}.mic-btn-anim--idle:hover{background:#6d28d9;transform:scale(1.05)}.mic-btn-anim--listening{color:#fff;background:#ef4444;animation:1s ease-in-out infinite micPulse;box-shadow:0 4px 20px #ef444480}@keyframes micPulse{0%,to{box-shadow:0 4px 20px #ef444480}50%{box-shadow:0 4px 32px #ef4444cc}}.mic-btn-anim--thinking,.mic-btn-anim--speaking{color:#a78bfa;cursor:default;background:#7c3aed1f}.try-orb-link{color:#9ca3af;border:1px solid #7c3aed33;border-radius:20px;padding:6px 14px;font-size:12px;text-decoration:none;transition:all .2s}.try-orb-link:hover{color:#7c3aed;background:#7c3aed0f;border-color:#7c3aed80}.eq-bars{justify-content:center;align-items:center;gap:5px;width:80px;height:40px;display:flex}.eq-bar{transform-origin:50%;background:linear-gradient(#e0d7ff,#a78bfa);border-radius:3px;width:6px;height:28px;transition:transform 50ms ease-out;transform:scaleY(.15);box-shadow:0 0 6px #a78bfa80}.orb-page{background:#0a0a0f;flex-direction:column;justify-content:center;align-items:center;gap:24px;height:100vh;font-family:Inter,-apple-system,sans-serif;display:flex;position:relative;overflow:hidden}.orb-server-status{border-radius:20px;align-items:center;gap:5px;padding:5px 10px;font-size:11px;font-weight:500;display:flex;position:absolute;top:16px;right:16px}.orb-server-status.online{color:#4ade80;background:#22c55e26}.orb-server-status.offline{color:#f87171;background:#ef444426}.orb-server-status.checking{color:#94a3b8;background:#94a3b81a}.orb-server-status .spin{animation:1s linear infinite orb-spin}.orb-back{color:#64748b;font-size:13px;text-decoration:none;transition:color .2s;position:absolute;top:18px;left:16px}.orb-back:hover{color:#94a3b8}@keyframes orb-spin{to{transform:rotate(360deg)}}.orb-btn{cursor:pointer;background:0 0;border:none;border-radius:50%;padding:0;transition:transform .15s}.orb-btn:active{transform:scale(.96)}.orb-btn:disabled{cursor:default}.orb-status{color:#64748b;letter-spacing:.02em;min-height:20px;font-size:14px}.orb-speech{text-align:center;flex-direction:column;align-items:center;gap:8px;max-width:480px;padding:0 24px;display:flex}.orb-you{color:#475569;font-size:13px}.orb-reply{color:#c4b5fd;font-size:15px;line-height:1.5}