.container{background:var(--surface);border-radius:6px;padding:32px;width:100%;box-shadow:0 1px 3px var(--shadow),0 1px 2px #0000000f;border:1px solid var(--border-color)}.header{text-align:center;margin-bottom:40px}.header h1{font-size:28px;font-weight:600;margin-bottom:8px;color:var(--text-primary);letter-spacing:-.02em}.subtitle{color:var(--text-secondary);font-size:14px}.status-container{margin-bottom:30px;display:flex;justify-content:center}.status-indicator{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:4px;background:var(--surface-light);transition:all .2s ease;border:1px solid var(--border-color)}.status-dot{width:8px;height:8px;border-radius:50%;transition:all .2s ease}.status-disconnected .status-dot{background:var(--text-secondary)}.status-connecting .status-dot{background:var(--warning-color)}.status-connected .status-dot{background:var(--success-color)}.status-text{font-size:13px;font-weight:500;color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em}.visual-feedback{min-height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:30px;position:relative}.loader-container{display:flex;flex-direction:column;align-items:center;gap:20px}.loader{position:relative;width:80px;height:80px}.loader-ring{position:absolute;width:100%;height:100%;border:2px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.loader-ring:nth-child(1){animation-delay:0s}.loader-ring:nth-child(2){animation-delay:.2s;border-top-color:var(--primary-hover)}.loader-ring:nth-child(3){animation-delay:.4s;border-top-color:var(--primary-color)}.loader-text{color:var(--text-secondary);font-size:14px;font-weight:500}.active-call-indicator{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}.pulse-ring{position:absolute;width:100%;height:100%;border:1px solid var(--success-color);border-radius:50%;opacity:.3}.mic-icon{position:relative;z-index:1;width:48px;height:48px;color:var(--success-color)}.mic-icon svg{width:100%;height:100%}.volume-indicator{display:flex;align-items:center;justify-content:center;gap:4px;height:60px}.volume-bars{display:flex;align-items:center;gap:4px;height:60px}.volume-bar{width:4px;background:var(--success-color);border-radius:2px;transition:transform .1s ease,opacity .1s ease}.volume-bar:nth-child(1){height:20px}.volume-bar:nth-child(2){height:35px}.volume-bar:nth-child(3){height:50px}.volume-bar:nth-child(4){height:35px}.volume-bar:nth-child(5){height:20px}.controls{display:flex;gap:16px;margin-bottom:20px}.btn{flex:1;padding:12px 20px;border:1px solid transparent;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.btn-primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}.btn-primary:active:not(:disabled){background:var(--primary-hover)}.btn-secondary{background:var(--secondary-color);color:#fff;border-color:var(--secondary-color)}.btn-secondary:hover:not(:disabled){background:var(--secondary-hover);border-color:var(--secondary-hover)}.btn-secondary:active:not(:disabled){background:var(--secondary-hover)}.btn-icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.btn-icon svg{width:100%;height:100%}.progress-messages{min-height:60px;margin-bottom:16px}.progress-message{padding:10px 14px;background:var(--surface-light);border-radius:4px;margin-bottom:6px;font-size:13px;color:var(--text-primary);border-left:2px solid var(--primary-color);animation:slideIn .2s ease}.progress-message.success{border-left-color:var(--success-color);color:var(--success-color)}.progress-message.error{border-left-color:var(--secondary-color);color:var(--secondary-color)}.error-display{padding:12px 14px;background:#fef2f2;border:1px solid #fecaca;border-radius:4px;color:var(--secondary-color);font-size:13px;margin-bottom:16px;animation:slideIn .2s ease}.config-info{text-align:center;padding-top:20px;border-top:1px solid var(--border-color);color:var(--text-secondary);font-size:12px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.container{padding:24px}.header h1{font-size:24px}.controls{flex-direction:column}.btn{width:100%}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #2563eb;--primary-hover: #1d4ed8;--secondary-color: #dc2626;--secondary-hover: #b91c1c;--success-color: #059669;--warning-color: #d97706;--background: #f8fafc;--surface: #ffffff;--surface-light: #f1f5f9;--text-primary: #0f172a;--text-secondary: #64748b;--border-color: #e2e8f0;--shadow: rgba(0, 0, 0, .08)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--background);color:var(--text-primary);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}#root{width:100%;max-width:500px}