@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=IBM+Plex+Sans:wght@200;300;400;500;600;700&display=swap";:root{--bg-primary:#0c0e14;--bg-secondary:#13161f;--bg-tertiary:#1c2030;--bg-elevated:#252a3a;--bg-hover:#2a3045;--text-primary:#e8eaed;--text-secondary:#9aa0b4;--text-muted:#5a6178;--accent-blue:#3b82f6;--accent-green:#10b981;--accent-red:#ef4444;--accent-yellow:#f59e0b;--accent-purple:#8b5cf6;--border-color:#1f2435;--border-subtle:#181c2a;--glass-bg:#13161feb;--glass-border:#ffffff0a;--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 32px #00000080;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{overflow:hidden;width:100%;height:100%}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:IBM Plex Sans,sans-serif}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@keyframes pulse-ring{0%{transform:scale(.8);opacity:1}to{transform:scale(1.8);opacity:0}}@keyframes pulse-dot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}@keyframes slide-in-right{0%{transform:translate(16px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slide-up{0%{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes toast-progress{0%{width:100%}to{width:0%}}@keyframes incoming-pulse{0%,to{transform:scale(1);box-shadow:0 0 #10b98166}50%{transform:scale(1.04);box-shadow:0 0 0 24px #10b98100}}@keyframes dial-ripple{0%{transform:scale(1);opacity:.4}to{transform:scale(2.5);opacity:0}}@keyframes float-in{0%{transform:translateY(20px)scale(.96);opacity:0}to{transform:translateY(0)scale(1);opacity:1}}@keyframes glow-pulse{0%,to{box-shadow:0 0 8px #3b82f64d}50%{box-shadow:0 0 20px #3b82f680}}.animate-slide-in{animation:slide-in-right .25s cubic-bezier(.2,0,0,1)}.animate-slide-up{animation:slide-up .2s cubic-bezier(.2,0,0,1)}.animate-fade-in{animation:fade-in .25s ease-out}.animate-float-in{animation:float-in .35s cubic-bezier(.2,0,0,1)}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border)}.header-bar{display:flex;border-bottom:1px solid var(--border-color);backdrop-filter:blur(16px);background:linear-gradient(#13161ffa,#0c0e14f2);flex-shrink:0;align-items: center;gap:14px;height:54px;padding:0 18px}.header-brand{display:flex;align-items: center;gap:10px}.header-brand-icon{background:linear-gradient(135deg,var(--accent-blue),#2563eb);display:flex;border-radius:8px;justify-content:center;align-items: center;width:32px;height:32px;box-shadow:0 2px 8px #3b82f64d}.header-brand-icon svg{color:#fff}.header-status{display:flex;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:20px;align-items: center;gap:8px;padding:5px 12px}.header-settings-btn{display:flex;cursor:pointer;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);border-radius:10px;justify-content:center;align-items: center;width:36px;height:36px;transition:all .2s}.header-settings-btn:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--accent-blue)}.dialpad-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;display:flex;position:relative;overflow:hidden;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:50%;flex-direction:column;justify-content:center;align-items: center;width:72px;height:72px;transition:all .12s cubic-bezier(.2,0,0,1);font-family:IBM Plex Sans,sans-serif;font-size:24px;font-weight:300}.dialpad-btn:hover{background:var(--bg-hover);border-color:#3b82f640;transform:scale(1.04);box-shadow:0 0 16px #3b82f614}.dialpad-btn:active{background:#3b82f61f;border-color:#3b82f666;transform:scale(.92)}.dialpad-btn .sub-text{letter-spacing:2.5px;color:var(--text-muted);margin-top:-2px;font-size:8px;font-weight:600}.call-btn{cursor:pointer;display:flex;position:relative;color:#fff;border:none;border-radius:50%;justify-content:center;align-items: center;width:64px;height:64px;transition:all .2s cubic-bezier(.2,0,0,1);font-size:26px}.call-btn-green{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 20px #10b98140,inset 0 1px #ffffff26}.call-btn-green:hover{transform:scale(1.08);box-shadow:0 6px 28px #10b98173}.call-btn-green:active{transform:scale(.95)}.call-btn-red{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 20px #ef444440,inset 0 1px #ffffff26}.call-btn-red:hover{transform:scale(1.08);box-shadow:0 6px 28px #ef444473}.call-btn-red:active{transform:scale(.95)}.call-btn-blue{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 20px #3b82f640,inset 0 1px #ffffff26}.call-btn-blue:hover{transform:scale(1.08);box-shadow:0 6px 28px #3b82f673}.call-btn-blue:active{transform:scale(.95)}.nav-rail{display:flex;background:var(--bg-secondary);border-right:1px solid var(--border-color);flex-direction:column;flex-shrink:0;align-items: center;gap:2px;width:68px;padding-top:10px}.nav-item{display:flex;cursor:pointer;position:relative;color:var(--text-muted);-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:12px;justify-content:center;align-items: center;width:48px;height:48px;transition:all .15s cubic-bezier(.2,0,0,1);font-size:20px}.nav-item svg{transition:all .15s}.nav-item:hover{background:var(--bg-tertiary);color:var(--text-secondary)}.nav-item:hover svg{stroke-width:2}.nav-item.active{color:var(--accent-blue);background:#3b82f61a}.nav-item.active svg{stroke-width:2.2}.nav-item.active:before{content:"";position:absolute;background:var(--accent-blue);box-shadow:0 0 10px var(--accent-blue);border-radius:0 3px 3px 0;width:3px;height:22px;top:50%;left:-10px;transform:translateY(-50%)}.status-dot{display:inline-block;position:relative;border-radius:50%;flex-shrink:0;width:8px;height:8px}.status-dot.green{background:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.status-dot.yellow{background:var(--accent-yellow);box-shadow:0 0 8px var(--accent-yellow);animation:pulse-dot 1.5s ease infinite}.status-dot.red{background:var(--accent-red);box-shadow:0 0 8px var(--accent-red)}.input-field{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);outline:none;width:100%;padding:10px 14px;transition:all .2s;font-family:IBM Plex Sans,sans-serif;font-size:14px}.input-field:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px #3b82f61a,0 0 12px #3b82f60d}.input-field::placeholder{color:var(--text-muted)}.toggle-switch{background:var(--bg-tertiary);border:1px solid var(--border-color);cursor:pointer;position:relative;border-radius:12px;width:44px;height:24px;transition:all .25s cubic-bezier(.2,0,0,1)}.toggle-switch.active{background:var(--accent-blue);border-color:var(--accent-blue);box-shadow:0 0 12px #3b82f64d}.toggle-switch:after{content:"";position:absolute;background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .25s cubic-bezier(.2,0,0,1);top:2px;left:2px;box-shadow:0 1px 3px #0000004d}.toggle-switch.active:after{transform:translate(20px)}.toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:8px;bottom:20px;right:20px}.toast{border-radius:var(--radius-md);animation:slide-up .3s cubic-bezier(.2,0,0,1);position:relative;overflow:hidden;box-shadow:var(--shadow-lg);min-width:280px;max-width:380px;padding:12px 16px;font-size:13px}.toast-progress{position:absolute;animation:toast-progress 4s linear forwards;height:2px;bottom:0;left:0}.incoming-overlay{position:fixed;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:10000;display:flex;animation:fade-in .3s ease;background:#000000e0;flex-direction:column;justify-content:center;align-items: center;inset:0}.incoming-avatar{display:flex;animation:incoming-pulse 2s ease infinite;color:#fff;border-radius:50%;justify-content:center;align-items: center;width:120px;height:120px;font-size:48px;font-weight:200}.mono{font-family:JetBrains Mono,monospace}.message-bubble{animation:slide-up .2s ease-out;border-radius:16px;max-width:75%;padding:10px 14px;font-size:14px;line-height:1.4}.message-sent{background:linear-gradient(135deg,var(--accent-blue),#2563eb);color:#fff;border-bottom-right-radius:4px;align-self: flex-end}.message-received{background:var(--bg-elevated);color:var(--text-primary);border-bottom-left-radius:4px;align-self: flex-start}.tab-btn{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:8px;padding:7px 16px;transition:all .15s;font-family:IBM Plex Sans,sans-serif;font-size:13px;font-weight:500}.tab-btn.active{color:var(--accent-blue);background:#3b82f61f;box-shadow:inset 0 0 0 1px #3b82f626}.tab-btn:hover:not(.active){color:var(--text-secondary);background:var(--bg-tertiary)}.section-header{letter-spacing:-.3px;display:flex;align-items: center;gap:10px;font-size:18px;font-weight:300}.section-header svg{color:var(--accent-blue)}.icon-action-btn{border:1px solid var(--border-color);cursor:pointer;display:flex;background:var(--bg-tertiary);color:var(--text-secondary);border-radius:8px;justify-content:center;align-items: center;width:34px;height:34px;transition:all .15s}.icon-action-btn:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:#3b82f64d}.icon-action-btn.green{color:var(--accent-green);background:#10b9811a;border-color:#10b98133}.icon-action-btn.green:hover{background:#10b98133}.icon-action-btn.blue{color:var(--accent-blue);background:#3b82f61a;border-color:#3b82f633}.icon-action-btn.blue:hover{background:#3b82f633}.icon-action-btn.red{color:var(--accent-red);background:#ef44441a;border-color:#ef444433}.icon-action-btn.red:hover{background:#ef444433}.pill-btn{border-radius:var(--radius-md);cursor:pointer;border:1px solid var(--border-color);background:var(--bg-tertiary);color:var(--text-secondary);display:inline-flex;align-items: center;gap:8px;padding:10px 22px;transition:all .15s;font-family:IBM Plex Sans,sans-serif;font-size:13px;font-weight:500}.pill-btn:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:#3b82f64d}.pill-btn.primary{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff;box-shadow:0 2px 10px #3b82f640}.pill-btn.primary:hover{box-shadow:0 4px 16px #3b82f666}.pill-btn.success{background:var(--accent-green);border-color:var(--accent-green);color:#fff;box-shadow:0 2px 10px #10b98140}.pill-btn.danger{color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626);border:none}.pill-btn.danger-outline{color:var(--accent-red);background:#ef444414;border-color:#ef444440}.pill-btn.warn-outline{color:var(--accent-yellow);background:#f59e0b1a;border-color:#f59e0b40}.pill-btn.green-outline{color:var(--accent-green);background:#10b9811a;border-color:#10b98140}.panel-card{border-radius:var(--radius-md);background:var(--bg-tertiary);border:1px solid var(--border-color);padding:14px;transition:border-color .2s}.panel-card:hover{border-color:#3b82f633}.panel-card.active-card{border-color:var(--accent-blue);box-shadow:0 0 12px #3b82f614}.empty-state{text-align:center;color:var(--text-muted);display:flex;flex-direction:column;align-items: center;gap:12px;padding:48px 24px}.empty-state svg{color:var(--text-muted);opacity:.5}.empty-state-text{max-width:240px;font-size:14px;line-height:1.5}.call-control-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);cursor:pointer;display:flex;color:var(--text-primary);border-radius:16px;flex-direction:column;justify-content:center;align-items: center;gap:3px;width:56px;height:56px;transition:all .15s}.call-control-btn:hover{background:var(--bg-elevated);border-color:#3b82f64d}.call-control-btn.active-ctrl{border-color:var(--accent-blue);color:var(--accent-blue);background:#3b82f626}.call-control-label{color:var(--text-muted);font-size:8px;font-weight:500}@media (max-width:768px){.dialpad-btn{width:64px;height:64px;font-size:22px}.call-btn{width:56px;height:56px;font-size:22px}}