/* ── LOGIN ─────────────────────────────────────────── */
#login-screen{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:var(--bg);transition:opacity 0.45s,transform 0.45s;}
#login-screen.hidden{opacity:0;transform:scale(0.97);pointer-events:none;}
.lcard{width:460px;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:44px 48px;box-shadow:0 40px 80px rgba(0,0,0,0.65),var(--amber-glow);position:relative;}
.lcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--amber);border-radius:4px 4px 0 0;}
.logo-row{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
.logo-mark{width:46px;height:46px;background:var(--amber);border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;color:#000;}
.logo-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;letter-spacing:0.04em;}
.logo-sub{font-size:11px;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;margin-top:2px;}
.lcard-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:30px;margin-bottom:6px;}
.lcard-desc{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:24px;}
.pill-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px;}
.pill{display:flex;align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--border);border-radius:2px;padding:4px 9px;font-size:11px;color:var(--muted);}
.pill .tick{color:var(--green);}
.fl{font-size:10.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.fi{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:12px 14px;font-family:'Barlow',sans-serif;font-size:14px;color:var(--text);outline:none;transition:border-color 0.2s;margin-bottom:16px;}
.fi:focus{border-color:var(--amber);}
.fi::placeholder{color:var(--dim);}
.fi.err{border-color:var(--red)!important;}
.pb{width:100%;background:var(--amber);border:none;border-radius:3px;padding:13px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:0.08em;text-transform:uppercase;color:#000;cursor:pointer;transition:background 0.15s;}
.pb:hover{background:#ffb800;}
.pb:disabled{opacity:0.5;cursor:not-allowed;}
.err-msg{font-size:12px;color:var(--red);margin-top:8px;display:none;}
.err-msg.show{display:block;}
.proxy-row{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:3px;margin-bottom:16px;font-size:12.5px;color:var(--muted);}
.pdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pdot.ok{background:var(--green);box-shadow:0 0 7px rgba(34,197,94,0.5);}
.pdot.err{background:var(--red);}
.pdot.chk{background:var(--amber);animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

/* ── CONTROL PANEL OVERLAY ──────────────────────────── */
#cp-overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:flex-end;padding:54px 0 0 0;}
#cp-overlay.visible{display:flex;}
.cp-panel{width:380px;height:calc(100vh - 54px);background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;animation:slideIn 0.25s ease;overflow:hidden;}
@keyframes slideIn{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
.cp-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.cp-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;letter-spacing:0.05em;}
.cp-close{background:none;border:1px solid var(--border);border-radius:3px;width:28px;height:28px;cursor:pointer;color:var(--muted);font-size:16px;display:flex;align-items:center;justify-content:center;transition:all 0.15s;}
.cp-close:hover{border-color:var(--border-lt);color:var(--text);}
.cp-body{flex:1;overflow-y:auto;padding:20px;}
.cp-body::-webkit-scrollbar{width:3px;}
.cp-body::-webkit-scrollbar-thumb{background:var(--border);}
.cp-section{margin-bottom:24px;}
.cp-section-title{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--amber);margin-bottom:12px;padding-bottom:5px;border-bottom:1px solid var(--amber-border);}
.cp-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cp-label{font-size:12.5px;color:var(--muted);}
.cp-input{width:100px;background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:6px 10px;font-family:'Barlow',sans-serif;font-size:13px;color:var(--text);outline:none;text-align:right;transition:border-color 0.2s;}
.cp-input:focus{border-color:var(--amber);}
.cp-unit{font-size:11px;color:var(--dim);margin-left:5px;width:24px;}
.cp-save{width:100%;background:var(--amber);border:none;border-radius:3px;padding:11px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:0.08em;text-transform:uppercase;color:#000;cursor:pointer;transition:background 0.15s;margin-top:8px;}
.cp-save:hover{background:#ffb800;}
.cp-note{font-size:11.5px;color:var(--dim);margin-top:10px;line-height:1.5;font-style:italic;}

/* ── TOAST ──────────────────────────────────────────── */
.toast{position:fixed;bottom:20px;right:20px;background:var(--surface);border:1px solid var(--green);border-left:3px solid var(--green);border-radius:3px;padding:12px 16px;font-size:13px;color:var(--text);box-shadow:0 8px 32px rgba(0,0,0,0.4);z-index:999;transform:translateY(80px);opacity:0;transition:transform 0.3s,opacity 0.3s;max-width:300px;}
.toast.show{transform:translateY(0);opacity:1;}
.toast-title{font-weight:600;color:var(--green);margin-bottom:2px;font-size:12px;}

/* ── VOICE CONTROLS ─────────────────────────────────── */
.voice-bar{display:flex;align-items:center;gap:6px;padding:0 4px;}
.vc-divider{width:1px;height:18px;background:var(--border);}
.vc-btn{width:30px;height:30px;border-radius:3px;border:1px solid var(--border);background:var(--surface2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;font-size:13px;position:relative;}
.vc-btn:hover{border-color:var(--border-lt);}
.vc-btn.active{background:var(--amber-dim);border-color:var(--amber-border);}
.vc-btn.recording{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.4);animation:recPulse 1s infinite;}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.3)}50%{box-shadow:0 0 0 5px rgba(239,68,68,0)}}
.vc-btn.speaking{background:var(--amber-dim);border-color:var(--amber-border);animation:spkPulse 1s infinite;}
@keyframes spkPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,168,0,0.3)}50%{box-shadow:0 0 0 5px rgba(245,168,0,0)}}
.vc-label{font-size:10px;color:var(--dim);letter-spacing:0.06em;text-transform:uppercase;}
.vc-status{font-size:10px;color:var(--dim);letter-spacing:0.04em;min-width:60px;}
.vc-status.on{color:var(--amber);}
.vc-status.rec{color:var(--red);}

/* STT mic button inside input area */
.mic-btn{width:40px;height:40px;background:var(--surface2);border:1px solid var(--border);border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;font-size:15px;flex-shrink:0;}
.mic-btn:hover{border-color:var(--border-lt);}
.mic-btn.recording{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.4);animation:recPulse 1s infinite;}
.mic-btn.disabled{opacity:0.3;cursor:not-allowed;}

/* ── COMING SOON ────────────────────────────────────── */
.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;padding:40px;}
.cs-icon{font-size:48px;opacity:0.25;}
.cs-agent-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:28px;color:var(--text);letter-spacing:0.04em;}
.cs-agent-desc{font-size:14px;color:var(--muted);text-align:center;max-width:380px;line-height:1.7;}
.cs-tag{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:5px 12px;border-radius:2px;background:var(--surface2);border:1px solid var(--border);color:var(--dim);}

/* ── GUIDE MODAL ─────────────────────────────────────── */
#guide-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.75);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;}
#guide-overlay.visible{display:flex;}
.guide-modal{width:740px;max-width:95vw;max-height:88vh;background:var(--surface);border:1px solid var(--border);border-radius:4px;display:flex;flex-direction:column;animation:slideIn 0.25s ease;box-shadow:0 40px 80px rgba(0,0,0,0.6);}
.guide-modal::before{content:'';height:3px;background:linear-gradient(90deg,var(--amber),#818CF8);border-radius:4px 4px 0 0;flex-shrink:0;}
.guide-hdr{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.guide-hdr-left{display:flex;flex-direction:column;gap:3px;}
.guide-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;letter-spacing:0.04em;}
.guide-subtitle{font-size:11.5px;color:var(--muted);}
.guide-close{background:none;border:1px solid var(--border);border-radius:3px;width:30px;height:30px;cursor:pointer;color:var(--muted);font-size:16px;display:flex;align-items:center;justify-content:center;transition:all 0.15s;flex-shrink:0;}
.guide-close:hover{border-color:var(--border-lt);color:var(--text);}
.guide-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto;}
.guide-tab{padding:10px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:0.05em;color:var(--muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:all 0.15s;white-space:nowrap;}
.guide-tab:hover{color:var(--text);}
.guide-tab.active{color:var(--amber);border-bottom-color:var(--amber);}
.guide-body{flex:1;overflow-y:auto;padding:24px;}
.guide-body::-webkit-scrollbar{width:3px;}
.guide-body::-webkit-scrollbar-thumb{background:var(--border);}
.guide-page{display:none;}
.guide-page.active{display:block;}
.g-section{margin-bottom:24px;}
.g-section-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:0.04em;color:var(--amber);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--amber-border);}
.g-p{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:10px;}
.g-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.g-step{display:flex;gap:12px;align-items:flex-start;}
.g-step-num{width:22px;height:22px;border-radius:50%;background:var(--amber);color:#000;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.g-step-body{flex:1;}
.g-step-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
.g-step-desc{font-size:12px;color:var(--muted);line-height:1.6;}
.g-tip{display:flex;gap:10px;background:var(--amber-dim);border:1px solid var(--amber-border);border-radius:3px;padding:11px 13px;margin-bottom:10px;}
.g-tip-icon{font-size:14px;flex-shrink:0;margin-top:1px;}
.g-tip-text{font-size:12.5px;color:var(--muted);line-height:1.6;}
.g-tip-text strong{color:var(--amber);}
.g-warn{display:flex;gap:10px;background:rgba(239,68,68,0.07);border:1px solid rgba(239,68,68,0.2);border-radius:3px;padding:11px 13px;margin-bottom:10px;}
.g-warn-text{font-size:12.5px;color:var(--muted);line-height:1.6;}
.g-agent-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.g-agent-card{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:13px;}
.g-agent-card-icon{font-size:20px;margin-bottom:6px;}
.g-agent-card-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:var(--amber);margin-bottom:3px;}
.g-agent-card-desc{font-size:11.5px;color:var(--muted);line-height:1.55;}
.g-kbd{display:inline-block;background:var(--surface3);border:1px solid var(--border);border-radius:2px;padding:1px 6px;font-family:monospace;font-size:11px;color:var(--text);}
.g-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0;}
.g-flow-step{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:5px 10px;font-size:12px;color:var(--muted);}
.g-flow-step.amber{border-color:var(--amber-border);color:var(--amber);background:var(--amber-dim);}
.g-flow-arrow{color:var(--dim);font-size:14px;}

/* ── LIGHT MODE ─────────────────────────────────────── */
body.light {
  --bg:#F0F0F4;--surface:#FFFFFF;--surface2:#EAEAEF;--surface3:#E2E2E9;
  --border:#C8C8D6;--border-lt:#B8B8C8;--text:#16161C;--muted:#52525E;--dim:#8888A0;
  --amber-dim:rgba(245,168,0,0.13);--amber-border:rgba(245,168,0,0.38);
  --amber-glow:0 0 24px rgba(245,168,0,0.10);
}
body.light::before{opacity:0.05;}
body.light .msg.scout .msg-bubble,body.light .msg.agent .msg-bubble{background:#FFFDF5;}
body.light .msg.user .msg-bubble{background:var(--surface2);}
body.light .t-dots{background:#FFFDF5;}
body.light .lcard{box-shadow:0 20px 48px rgba(0,0,0,0.10),var(--amber-glow);}
body.light .quote-placeholder{background:transparent;}