:root {
  --navy:       #1B3A6B;
  --navy-mid:   #244d8f;
  --navy-light: #3a6bc4;
  --blue:       #0066CC;
  --blue-light: #3d8fe0;
  --blue-pale:  #e8f1fb;
  --red:        #C0392B;
  --red-light:  #e74c3c;
  --red-pale:   #fdf0ef;
  --green:      #1A7F4B;
  --green-light:#27ae60;
  --green-pale: #edf7f2;
  --amber:      #d97706;
  --amber-pale: #fef3cd;
  --surface:    #F8F9FA;
  --surface2:   #F0F2F5;
  --surface3:   #E4E8EE;
  --border:     #D1D9E6;
  --border2:    #B8C4D8;
  --text:       #0F1923;
  --text2:      #3D4F6B;
  --text3:      #6B7FA3;
  --text4:      #9BACC8;
  --white:      #FFFFFF;
  --mono:       'DM Mono', monospace;
  --sans:       'DM Sans', sans-serif;
  --serif:      'Instrument Serif', serif;
  --shadow-sm:  0 1px 3px rgba(27,58,107,.08), 0 1px 2px rgba(27,58,107,.04);
  --shadow-md:  0 4px 12px rgba(27,58,107,.10), 0 2px 4px rgba(27,58,107,.06);
  --shadow-lg:  0 12px 32px rgba(27,58,107,.14), 0 4px 8px rgba(27,58,107,.08);
  --r:          6px;
  --r-lg:       10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:var(--sans);font-size:14px;color:var(--text);background:var(--surface);-webkit-font-smoothing:antialiased}
:root{--ribbon-h:31px;--header-h:52px;--app-top:calc(var(--ribbon-h) + var(--header-h))}
body{padding-top:var(--ribbon-h)}
button{font-family:var(--sans);cursor:pointer;border:none;background:none}
input{font-family:var(--sans)}

/* ── HEADER ─────────────────────────────────────────────────── */
#hdr{
  height:52px;background:var(--white);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 16px;gap:16px;
  position:relative;z-index:100;box-shadow:var(--shadow-sm);
}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0;cursor:pointer;transition:opacity .15s}
.logo:hover{opacity:.8}
.logo-mark{width:28px;height:28px;background:var(--navy);border-radius:6px;display:flex;align-items:center;justify-content:center}
.logo-mark svg{width:16px;height:16px;fill:white}
.logo-text{font-size:15px;font-weight:600;color:var(--navy);letter-spacing:-.3px}
.logo-text span{font-weight:300;color:var(--text3);margin-left:3px;font-size:13px}
nav{display:flex;gap:2px;margin-left:8px}
.nav-btn{padding:6px 14px;border-radius:var(--r);font-size:13px;font-weight:500;color:var(--text3);transition:all .15s;background:none;border:none;cursor:pointer}
.nav-btn:hover{color:var(--navy);background:var(--surface2)}
.nav-btn.active{color:var(--navy);background:var(--blue-pale);font-weight:600}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.phase-strip{display:flex;align-items:center;gap:4px}
.phase-dot{width:8px;height:8px;border-radius:50%;background:var(--surface3)}
.phase-dot.done{background:var(--green)}
.phase-dot.active{background:var(--blue);box-shadow:0 0 0 2px var(--blue-pale)}
.phase-dot.current{background:var(--amber)}
.status-pill{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.status-pill.idle{background:var(--surface2);color:var(--text3)}
.status-pill.live{background:var(--red-pale);color:var(--red);animation:pulse-pill 2s infinite}
@keyframes pulse-pill{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes spin{to{transform:rotate(360deg)}}
.timer-display{font-family:var(--mono);font-size:16px;font-weight:500;color:var(--navy);letter-spacing:1px;min-width:54px;text-align:center}
.btn-primary{padding:7px 16px;background:var(--navy);color:white;border-radius:var(--r);font-size:13px;font-weight:600;transition:all .15s;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--navy-mid);box-shadow:var(--shadow-md)}
.btn-primary.start{background:var(--green);color:white}
.btn-primary.start:hover{background:var(--green-light)}
.btn-primary.stop{background:var(--red);color:white}

/* ── MAIN LAYOUT ─────────────────────────────────────────────── */
#app{display:flex;height:calc(100vh - var(--app-top));overflow:hidden}

/* ── LEFT PANEL ──────────────────────────────────────────────── */
#left{
  width:220px;flex-shrink:0;background:var(--white);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
}
.panel-section{padding:12px;border-bottom:1px solid var(--border)}
.panel-label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text4);margin-bottom:8px}

/* scenario cards */
#scenarios-section{display:none}
.scen-card{
  padding:10px 11px;border-radius:var(--r);border:1px solid var(--border);
  margin-bottom:6px;cursor:pointer;transition:all .15s;background:var(--white);
}
.scen-card:hover{border-color:var(--navy-light);background:var(--blue-pale)}
.scen-card.active{border-color:var(--navy);background:var(--blue-pale);box-shadow:var(--shadow-sm)}
.scen-card-title{font-size:12px;font-weight:600;color:var(--navy);line-height:1.3;margin-bottom:3px}
.scen-card-meta{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:6px}
.risk-badge{font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px;letter-spacing:.3px}
.risk-badge.HIGH{background:var(--red-pale);color:var(--red)}
.risk-badge.CRITICAL{background:#fde8e8;color:#9b1c1c}
.risk-badge.MEDIUM{background:var(--amber-pale);color:var(--amber)}

/* layer toggles */
.layer-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0}
.layer-name{font-size:12px;color:var(--text2);display:flex;align-items:center;gap:6px}
.layer-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.toggle{width:28px;height:16px;background:var(--surface3);border-radius:8px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.toggle.on{background:var(--blue)}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;background:white;border-radius:50%;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle.on::after{transform:translateX(12px)}

/* agencies */
.agency-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.ag-tab{padding:4px 8px;border-radius:4px;font-size:11px;font-weight:500;border:1px solid var(--border);color:var(--text3);cursor:pointer;transition:all .12s}
.ag-tab:hover{border-color:var(--navy-light);color:var(--navy)}
.ag-tab.active{background:var(--navy);color:white;border-color:var(--navy)}

/* ── MAP CENTRE ──────────────────────────────────────────────── */
#centre{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}
#map{flex:1;position:relative}
#map-el{width:100%;height:100%}

/* map overlays */
/* venue search removed */
.map-btn{width:32px;height:32px;border-radius:var(--r);background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border:1px solid var(--border);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text2);cursor:pointer;transition:all .15s;font-family:var(--mono)}
.map-btn:hover{background:white;border-color:var(--navy);color:var(--navy)}
.map-btn.on{background:var(--navy);color:white;border-color:var(--navy)}
#map-btns{position:absolute;top:12px;right:12px;z-index:10;display:flex;flex-direction:column;gap:4px}

/* ai ticker */
#ai-ticker{
  height:36px;background:rgba(27,58,107,.96);backdrop-filter:blur(12px);
  display:flex;align-items:center;padding:0 14px;gap:8px;flex-shrink:0;
}
.ticker-icon{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
#ticker-text{font-size:12px;color:rgba(255,255,255,.85);letter-spacing:.1px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* deterrence bar */
#det-bar{
  height:44px;background:var(--white);border-top:1px solid var(--border);
  display:flex;align-items:center;padding:0 12px;gap:6px;flex-shrink:0;overflow-x:auto;
}
#det-bar::-webkit-scrollbar{height:3px}
#det-pills{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.det-label{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);margin-right:4px;white-space:nowrap;flex-shrink:0}
.det-pill{
  padding:5px 11px;border-radius:20px;font-size:11px;font-weight:600;
  border:1px solid var(--border);color:var(--text2);cursor:pointer;transition:all .15s;
  white-space:nowrap;flex-shrink:0;
}
.det-pill:hover{border-color:var(--navy);color:var(--navy)}
.det-pill.on{background:var(--navy);color:white;border-color:var(--navy);box-shadow:var(--shadow-sm)}

/* drone telemetry */
#drone-telemetry{
  position:absolute;top:12px;left:12px;z-index:10;
  background:rgba(15,25,35,.82);backdrop-filter:blur(10px);
  border:1px solid rgba(0,212,255,.25);border-radius:var(--r);
  padding:8px 10px;min-width:140px;display:none;
}
.telem-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:3px}
.telem-row:last-child{margin-bottom:0}
.telem-lbl{font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:rgba(0,212,255,.6)}
.telem-val{font-size:12px;font-weight:600;font-family:var(--mono);color:#e0f4ff}
.telem-val.alert{color:#ff4444;animation:telemAlert .6s infinite}
@keyframes telemAlert{0%,100%{opacity:1}50%{opacity:.4}}
/* event log */
#evlog-bar{
  height:28px;background:var(--surface2);border-top:1px solid var(--border);
  display:flex;align-items:center;padding:0 12px;gap:12px;overflow:hidden;flex-shrink:0;
}
.evlog-item{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0}
.evlog-time{font-family:var(--mono);font-size:10px;color:var(--text4)}
.evlog-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}

/* ── RIGHT PANEL ─────────────────────────────────────────────── */
#right{
  width:300px;flex-shrink:0;background:var(--white);border-left:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
}
#right-top{padding:14px;border-bottom:1px solid var(--border);flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0}
#right-content{flex:1;overflow-y:auto;min-height:0}
.phase-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.phase-title{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:-.1px}
.dec-timer{font-family:var(--mono);font-size:18px;font-weight:500;color:var(--red);letter-spacing:1px}
.dec-timer-bar{height:3px;background:var(--surface3);border-radius:2px;margin-top:6px;margin-bottom:6px;overflow:hidden;display:none}
.dec-timer-bar-fill{height:100%;background:var(--red);border-radius:2px;transition:width .5s linear;width:100%}
.phase-progress{display:flex;gap:4px;margin-bottom:12px}
#roof-bar{display:none;margin-bottom:8px;padding:6px 10px;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--r)}
.roof-bar-label{font-size:10px;font-weight:700;color:var(--red);letter-spacing:.4px;text-transform:uppercase;margin-bottom:4px;display:flex;justify-content:space-between}
.roof-bar-track{height:5px;background:#fee2e2;border-radius:3px;overflow:hidden}
.roof-bar-fill{height:100%;background:var(--red);border-radius:3px;transition:width 1s linear;width:100%}
.pp-step{flex:1;height:3px;border-radius:2px;background:var(--surface3)}
.pp-step.done{background:var(--green)}
.pp-step.active{background:var(--blue)}

/* situation card */
.sit-card{
  background:linear-gradient(135deg,#f0f5ff 0%,#e8f1fb 100%);
  border:1px solid #c5d8f5;border-radius:var(--r-lg);padding:12px;margin-bottom:10px;
}
.sit-card-hdr{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.sit-card-body{font-size:12px;color:var(--text2);line-height:1.6}
.sit-card-body strong{color:var(--text);font-weight:600}

/* decision options */
.dec-opts{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.dec-opt{
  padding:10px 12px;border-radius:var(--r);border:1.5px solid var(--border);
  cursor:pointer;transition:all .15s;background:var(--white);position:relative;
  border-left-width:4px;
}
.dec-opt.risk-border-low{border-left-color:var(--green)}
.dec-opt.risk-border-med{border-left-color:var(--amber)}
.dec-opt.risk-border-high{border-left-color:var(--red)}
.dec-opt-preview{
  display:none;position:absolute;left:100%;top:0;margin-left:8px;
  width:180px;padding:8px 10px;background:var(--navy);color:white;
  border-radius:var(--r);font-size:11px;line-height:1.5;z-index:50;
  box-shadow:var(--shadow-lg);pointer-events:none;
}
.dec-opt-preview::before{content:'';position:absolute;left:-5px;top:12px;
  border:5px solid transparent;border-right-color:var(--navy);border-left:0;}
.dec-opt:hover .dec-opt-preview{display:block;}
.dec-opt:hover{border-color:var(--navy-light);background:var(--blue-pale)}
.dec-opt.selected{border-color:var(--navy);background:var(--blue-pale)}
.dec-opt-row{display:flex;align-items:flex-start;gap:8px}
.dec-opt-letter{width:20px;height:20px;border-radius:4px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text3);flex-shrink:0;margin-top:1px}
.dec-opt.selected .dec-opt-letter{background:var(--navy);color:white}
.dec-opt-text{font-size:12px;font-weight:500;color:var(--text2);line-height:1.4;flex:1}
.dec-opt.selected .dec-opt-text{color:var(--navy)}
.dec-opt-risk{font-size:10px;font-weight:700;margin-top:3px;letter-spacing:.3px}
.risk-high{color:var(--red)}
.risk-med{color:var(--amber)}
.risk-low{color:var(--green)}
.btn-confirm{width:100%;padding:10px;background:var(--navy);color:white;border-radius:var(--r);font-size:13px;font-weight:600;transition:all .15s;box-shadow:var(--shadow-sm);margin-bottom:10px}
.btn-confirm:hover{background:var(--navy-mid);box-shadow:var(--shadow-md)}
.btn-confirm:disabled{background:var(--surface3);color:var(--text4);box-shadow:none;cursor:not-allowed}

/* ai copilot — callout button + collapsed/expanded flyout */
#copilot-callout{flex-shrink:0;border-top:1px solid var(--border);background:var(--white)}
#copilot-toggle{
  width:100%;padding:9px 14px;display:flex;align-items:center;gap:7px;
  background:none;border:none;cursor:pointer;font-family:var(--sans);
  transition:background .15s;
}
#copilot-toggle:hover{background:var(--surface2)}
.copilot-callout-icon{width:20px;height:20px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-size:9px;color:white;flex-shrink:0}
.copilot-callout-label{font-size:12px;font-weight:600;color:var(--navy)}
.copilot-callout-status{font-size:11px;color:var(--text4);margin-left:auto}
.copilot-callout-chevron{font-size:9px;color:var(--text4);transition:transform .2s;margin-left:4px}
#copilot{display:flex;flex-direction:column;overflow:hidden;transition:max-height .25s ease,opacity .2s ease;border-top:1px solid var(--surface2)}
#copilot.copilot-collapsed{max-height:0;opacity:0;pointer-events:none}
#copilot.copilot-expanded{max-height:320px;opacity:1;pointer-events:all}
#copilot-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.copilot-tab{flex:1;padding:7px 10px;font-size:11px;font-weight:600;color:var(--text3);border-bottom:2px solid transparent;transition:all .15s;background:none;cursor:pointer}
.copilot-tab.active{color:var(--navy);border-bottom-color:var(--navy)}
.copilot-tab:hover:not(.active){color:var(--text2);background:var(--surface2)}
#copilot-chat-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
#copilot-msgs{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:0}
.msg{display:flex;gap:7px;align-items:flex-start}
.msg-avatar{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;margin-top:1px}
.msg-avatar.ai{background:var(--navy);color:white}
.msg-avatar.user{background:var(--surface2);color:var(--text3)}
.msg-bubble{padding:8px 10px;border-radius:var(--r);font-size:12px;line-height:1.55;max-width:220px}
.msg-bubble.ai{background:linear-gradient(135deg,#f0f5ff,#e8f1fb);color:var(--text2);border:1px solid #d0e3f8}
.msg-bubble.user{background:var(--navy);color:rgba(255,255,255,.9);margin-left:auto}
.msg.user{flex-direction:row-reverse}
.msg-typing{display:flex;align-items:center;gap:3px;padding:10px}
.typing-dot{width:5px;height:5px;border-radius:50%;background:var(--text4);animation:typing .8s infinite}
.typing-dot:nth-child(2){animation-delay:.15s}
.typing-dot:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
#copilot-input-wrap{padding:8px 10px;border-top:1px solid var(--border);display:flex;gap:6px;flex-shrink:0}
#copilot-input{
  flex:1;padding:7px 10px;border-radius:var(--r);border:1px solid var(--border);
  font-size:12px;font-family:var(--sans);color:var(--text);background:var(--surface);
  resize:none;min-height:32px;max-height:80px;
}
#copilot-input:focus{outline:none;border-color:var(--blue);background:white}
.btn-send{width:30px;height:30px;border-radius:var(--r);background:var(--navy);color:white;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;margin-top:1px;transition:background .15s}
.btn-send:hover{background:var(--navy-mid)}
#copilot-intel-panel{overflow-y:auto}

/* unread badge on copilot callout */
#copilot-unread{
  display:none;min-width:16px;height:16px;border-radius:8px;
  background:var(--red);color:white;font-size:9px;font-weight:700;
  padding:0 4px;align-items:center;justify-content:center;
}
#copilot-unread.visible{display:flex}

/* deterrence tooltip */
.det-pill{position:relative}
.det-tooltip{
  display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--navy);color:white;font-size:10px;line-height:1.5;
  padding:7px 10px;border-radius:var(--r);white-space:nowrap;z-index:100;
  pointer-events:none;box-shadow:var(--shadow-md);min-width:180px;
}
.det-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--navy);}
.det-pill:hover .det-tooltip{display:block}

/* deployment toast */
#deploy-toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:white;font-size:12px;font-weight:600;
  padding:8px 16px;border-radius:20px;z-index:200;
  opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;
}
#deploy-toast.show{opacity:1}

/* first-run tutorial */
#tutorial-overlay{
  position:fixed;inset:0;background:rgba(15,25,35,.82);z-index:500;
  display:flex;align-items:center;justify-content:center;
}
#tutorial-overlay.hidden{display:none}
.tutorial-card{
  background:var(--white);border-radius:16px;padding:32px;max-width:440px;width:90%;
  box-shadow:var(--shadow-lg);
}
.tutorial-step-dots{display:flex;gap:6px;margin-bottom:20px}
.tut-dot{width:8px;height:8px;border-radius:50%;background:var(--surface3)}
.tut-dot.active{background:var(--navy)}
.tutorial-icon{font-size:36px;margin-bottom:12px}
.tutorial-title{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:8px}
.tutorial-body{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:24px}
.tutorial-actions{display:flex;gap:8px}
.tut-btn-skip{flex:1;padding:10px;border-radius:var(--r);background:var(--surface2);color:var(--text3);font-size:13px;font-weight:600;border:none;cursor:pointer}
.tut-btn-next{flex:2;padding:10px;border-radius:var(--r);background:var(--navy);color:white;font-size:13px;font-weight:600;border:none;cursor:pointer}
.tut-btn-next:hover{background:var(--navy-mid)}

/* agency progress */
#agency-progress{font-size:10px;color:var(--text4);margin-top:5px;margin-left:1px}

/* right panel scroll fade */
#right-top{position:relative}
#right-top::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:32px;
  background:linear-gradient(transparent,var(--white));
  pointer-events:none;z-index:5;
}

/* welcome scenario cards — risk badge inline */
.welcome-scen-btn .wsb-meta{display:flex;align-items:center;gap:5px;margin-top:4px}
.wsb-badge{font-size:9px;font-weight:700;padding:1px 6px;border-radius:3px;letter-spacing:.3px}
.wsb-badge.CRITICAL{background:var(--red-pale);color:var(--red)}
.wsb-badge.HIGH{background:var(--amber-pale);color:var(--amber)}
.wsb-badge.MED,.wsb-badge.LOW{background:var(--surface2);color:var(--text3)}

/* ── WELCOME SCREEN (overlays right panel) ──────────────────── */
#welcome-screen{
  position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(248,249,250,.97) 0%,rgba(235,242,252,.97) 100%);
  z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px;text-align:center;
}
.welcome-logo{font-family:var(--serif);font-size:32px;color:var(--navy);margin-bottom:6px;font-style:italic}
.welcome-sub{font-size:13px;color:var(--text3);margin-bottom:24px}
.welcome-ai-bubble{
  background:linear-gradient(135deg,#f0f5ff 0%,#e8f1fb 100%);
  border:1px solid #c5d8f5;border-radius:12px;padding:16px 18px;
  text-align:left;width:100%;max-width:320px;margin-bottom:20px;
  box-shadow:var(--shadow-sm);
}
.welcome-ai-label{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.welcome-ai-text{font-size:13px;color:var(--text2);line-height:1.65}
.welcome-input-wrap{width:100%;max-width:320px;position:relative}
#welcome-input{
  width:100%;padding:12px 44px 12px 14px;border-radius:var(--r-lg);
  border:1.5px solid var(--border2);font-size:13px;font-family:var(--sans);
  color:var(--text);background:var(--surface);
}
#welcome-input:focus{outline:none;border-color:var(--blue);background:white;box-shadow:0 0 0 3px rgba(0,102,204,.1)}
.welcome-send{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:var(--r);background:var(--navy);
  color:white;display:flex;align-items:center;justify-content:center;font-size:14px;
  cursor:pointer;transition:background .15s;
}
.welcome-send:hover{background:var(--navy-mid)}
.welcome-divider{width:100%;max-width:320px;display:flex;align-items:center;gap:10px;margin:14px 0}
.welcome-divider::before,.welcome-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.welcome-divider-text{font-size:11px;color:var(--text4);white-space:nowrap}
.welcome-scen-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;max-width:320px}
.welcome-scen-btn{
  padding:9px 10px;border-radius:var(--r);border:1px solid var(--border);
  text-align:left;cursor:pointer;transition:all .15s;background:var(--white);
}
.welcome-scen-btn:hover{border-color:var(--navy-light);background:var(--blue-pale)}
.wsb-title{font-size:11px;font-weight:600;color:var(--navy);line-height:1.3;margin-bottom:2px}
.wsb-venue{font-size:10px;color:var(--text3)}

/* ── PHASE INTERRUPT — bottom-anchored card, map stays visible ── */
#phase-interrupt{
  position:absolute;bottom:0;left:0;right:0;
  z-index:30;display:none;flex-direction:column;
  pointer-events:none;
}
#phase-interrupt.show{display:flex}
.interrupt-card{
  background:var(--white);border-radius:12px 12px 0 0;padding:20px 24px 16px;width:100%;
  box-shadow:0 -4px 24px rgba(15,25,35,.18);animation:slideUp .3s ease-out;
  pointer-events:all;border-top:3px solid var(--navy);
}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.interrupt-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px}
.interrupt-badge.threat{background:var(--red-pale);color:var(--red)}
.interrupt-badge.detection{background:var(--amber-pale);color:var(--amber)}
.interrupt-title{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:4px;line-height:1.3}
.interrupt-body{font-size:12px;color:var(--text2);line-height:1.55;margin-bottom:12px}
.interrupt-body strong{color:var(--text)}
.interrupt-actions{display:flex;gap:8px}
.btn-interrupt{flex:1;padding:9px;border-radius:var(--r);font-size:12px;font-weight:600;transition:all .15s}
.btn-interrupt.primary{background:var(--navy);color:white}
.btn-interrupt.primary:hover{background:var(--navy-mid)}
.btn-interrupt.secondary{background:var(--surface2);color:var(--text2)}
.btn-interrupt.secondary:hover{background:var(--surface3)}

/* ── DEBRIEF SCREEN ──────────────────────────────────────────── */
#debrief-screen{
  position:fixed;top:var(--app-top);left:0;right:0;bottom:0;background:var(--surface);z-index:200;
  pointer-events:auto;
  display:none;flex-direction:column;overflow:hidden;
}
#debrief-screen.show{display:flex}
#debrief-hdr{
  height:60px;background:var(--white);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:16px;flex-shrink:0;
}
#debrief-body{flex:1;display:grid;grid-template-columns:1fr 1fr 300px;gap:0;overflow:hidden;min-height:0}
.debrief-title-wrap{flex:1}
.debrief-title{font-size:18px;font-weight:700;color:var(--navy)}
.debrief-sub{font-size:12px;color:var(--text3)}
.grade-badge{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;font-family:var(--serif);box-shadow:var(--shadow-md)}
.grade-badge.A{background:var(--green-pale);color:var(--green)}
.grade-badge.B{background:var(--blue-pale);color:var(--blue)}
.grade-badge.C{background:var(--amber-pale);color:var(--amber)}
.grade-badge.D,.grade-badge.F{background:var(--red-pale);color:var(--red)}
/* debrief-body defined above */
.db-col{overflow-y:auto;padding:20px;border-right:1px solid var(--border);overscroll-behavior:contain}
.db-col:last-child{border-right:none}
.db-section{margin-bottom:20px}
.db-section-title{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--text4);margin-bottom:12px}
#db-writeup p{margin:0}
.metric-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.metric-label{font-size:12px;color:var(--text2);flex:1}
.metric-bar-wrap{width:100px;height:6px;background:var(--surface3);border-radius:3px;overflow:hidden}
.metric-bar{height:100%;border-radius:3px;transition:width .8s ease-out}
.metric-bar.green{background:var(--green)}
.metric-bar.blue{background:var(--blue)}
.metric-bar.amber{background:var(--amber)}
.metric-bar.red{background:var(--red)}
.metric-val{font-size:12px;font-weight:600;color:var(--text);font-family:var(--mono);min-width:32px;text-align:right}
.timeline-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.tl-time{font-family:var(--mono);font-size:10px;color:var(--text4);min-width:38px;padding-top:2px}
.tl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:3px}
.tl-dot.start{background:var(--blue)}
.tl-dot.decision{background:var(--navy)}
.tl-dot.asset{background:var(--green)}
.tl-dot.event{background:var(--amber)}
.tl-content{}
.tl-event{font-size:12px;font-weight:600;color:var(--text);line-height:1.3}
.tl-detail{font-size:11px;color:var(--text3)}
.dec-review-card{padding:12px;border-radius:var(--r);border:1px solid var(--border);margin-bottom:8px;background:var(--white)}
.dec-review-phase{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text4);margin-bottom:4px}
.dec-review-choice{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:4px}
.dec-review-impact{font-size:12px;color:var(--text2);line-height:1.5}
.db-ai-chat{display:flex;flex-direction:column;height:100%}
.db-ai-msgs{flex:1;overflow-y:auto;padding-bottom:10px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.db-ai-input-wrap{display:flex;gap:6px;margin-top:10px;border-top:1px solid var(--border);padding-top:10px;flex-shrink:0}
#db-ai-input{flex:1;padding:8px 10px;border-radius:var(--r);border:1px solid var(--border);font-size:12px;font-family:var(--sans);resize:none}
#db-ai-input:focus{outline:none;border-color:var(--blue)}
.debrief-footer{padding:12px 24px;background:var(--white);border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;flex-shrink:0}
.btn-debrief{padding:9px 20px;border-radius:var(--r);font-size:13px;font-weight:600;transition:all .15s}
.btn-debrief.secondary{background:var(--surface2);color:var(--text2)}
.btn-debrief.secondary:hover{background:var(--surface3)}
.btn-debrief.primary{background:var(--navy);color:white}
.btn-debrief.primary:hover{background:var(--navy-mid)}

/* ── POI TOOLTIP ─────────────────────────────────────────────── */
.poi-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.poi-wrap:hover .poi-tooltip{opacity:1;transform:translateX(-50%) translateY(-2px)}
.poi-tooltip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(0);
  background:var(--navy);border-radius:var(--r);padding:5px 9px;white-space:nowrap;
  pointer-events:none;opacity:0;transition:all .18s;z-index:999;box-shadow:var(--shadow-md);
}
.poi-tooltip .ptt{font-size:10px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.5px;text-transform:uppercase;display:block}
.poi-tooltip .ptl{font-size:12px;color:white;display:block}
.poi-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--navy)}
.poi-icon-el{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:filter .15s}
.poi-icon-el:hover{filter:brightness(1.2)}

/* view overlay panels */
#view-overlay{
  position:fixed;top:var(--app-top);left:0;right:0;bottom:0;
  background:var(--surface);z-index:150;
  display:none;flex-direction:column;overflow:hidden;
}
#view-overlay.show{display:flex}
.view-panel{flex:1;overflow-y:auto;padding:24px 32px}
.view-hdr{margin-bottom:24px}
.view-hdr h1{font-size:22px;font-weight:600;color:var(--navy);margin-bottom:4px}
.view-hdr p{font-size:13px;color:var(--text3)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:24px}
.info-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;transition:all .15s;cursor:pointer}
.info-card:hover{border-color:var(--navy-light);box-shadow:var(--shadow-md)}
.info-card-icon{font-size:24px;margin-bottom:10px}
.info-card-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:4px}
.info-card-sub{font-size:12px;color:var(--text3);line-height:1.5}
.info-card-meta{display:flex;align-items:center;gap:6px;margin-top:10px}
.coming-soon{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:var(--amber-pale);color:var(--amber);border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.4px}
.stat-row{display:flex;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.stat-box{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 20px;flex:1;min-width:120px}
.stat-box-val{font-size:28px;font-weight:700;color:var(--navy);font-family:var(--mono);margin-bottom:2px}
.stat-box-lbl{font-size:11px;color:var(--text4);letter-spacing:.4px;text-transform:uppercase}
.section-title{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--text4);margin-bottom:12px}
.planner-input-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-bottom:16px}
.planner-input{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r);font-size:13px;font-family:var(--sans);resize:vertical;min-height:80px;color:var(--text)}
.planner-input:focus{outline:none;border-color:var(--blue)}
.planner-btn{padding:9px 20px;background:var(--navy);color:white;border:none;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans);margin-top:8px}
.planner-response{background:linear-gradient(135deg,#f0f5ff,#e8f1fb);border:1px solid #c5d8f5;border-radius:var(--r-lg);padding:14px;font-size:12px;color:var(--text2);line-height:1.65;display:none}
.aar-table{width:100%;border-collapse:collapse;font-size:12px}
.aar-table th{padding:8px 12px;text-align:left;background:var(--surface2);color:var(--text3);font-weight:600;letter-spacing:.3px;font-size:11px}
.aar-table td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--text2)}
.aar-table tr:hover td{background:var(--surface)}

/* scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}

/* maplibre overrides */
.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{display:none!important}
.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{display:none!important}
.maplibregl-popup.poi-popup .maplibregl-popup-content{background:transparent!important;padding:0!important;box-shadow:none!important;border:none!important}
.maplibregl-popup.poi-popup .maplibregl-popup-tip{display:none!important}

/* animations */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeIn .3s ease-out}
@keyframes droneRing{0%{transform:scale(.8);opacity:.8}100%{transform:scale(2.2);opacity:0}}

/* welcome anim */
.welcome-ai-text .cursor{display:inline-block;width:2px;height:13px;background:var(--blue);margin-left:2px;vertical-align:middle;animation:blink .7s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── Accordion sidebar ──────────────────────────────────────────── */
.panel-header{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;user-select:none;
  padding:12px;margin:-12px -12px 0 -12px;
  transition:background 0.15s;
}
.panel-header:hover{background:var(--surface2)}
.panel-header .panel-label{margin-bottom:0}
.panel-chevron{
  font-size:9px;color:var(--text4);
  transition:transform 0.25s ease;
  transform:rotate(0deg);flex-shrink:0;margin-left:4px;
}
.panel-section.collapsed .panel-chevron{transform:rotate(-90deg)}
.panel-content{
  overflow:hidden;
  transition:max-height 0.3s ease, opacity 0.2s ease;
  opacity:1;
}
.panel-section.collapsed .panel-content{
  max-height:0 !important;
  opacity:0;
}
#scenarios-content{
  max-height:280px;overflow-y:auto;padding-top:8px;
}
#scenarios-content::-webkit-scrollbar{width:4px}
#scenarios-content::-webkit-scrollbar-track{background:transparent}
#scenarios-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.panel-section{padding:12px;border-bottom:1px solid var(--border)}

/* ── OSINT SYSTEM v5.16 ──────────────────────────────────────── */

/* Right panel tabs */
.right-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin:8px -14px 0;padding:0 14px}
.right-tab{flex:1;padding:7px 4px;font-size:11px;font-weight:600;letter-spacing:.3px;border:none;background:none;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;font-family:var(--sans)}
.right-tab:hover{color:var(--text2)}
.right-tab.active{color:var(--navy);border-bottom-color:var(--navy)}

/* Intel feed items */
.intel-item{margin:0 12px 8px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .2s}
.intel-item.fired{border-color:#c5d8f5}
.intel-item.pending{opacity:.55}
.intel-item-hdr{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--surface2);border-bottom:1px solid var(--border)}
.intel-src{font-size:10px;font-weight:700;color:var(--text2);letter-spacing:.3px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intel-class{font-size:9px;font-weight:700;letter-spacing:.5px;padding:2px 5px;border-radius:3px;flex-shrink:0}
.intel-class.flash{background:#fef2f2;color:var(--red)}
.intel-class.secret{background:#fef3cd;color:#92400e}
.intel-class.confidential{background:#eff6ff;color:var(--blue)}
.intel-class.unclassified{background:var(--surface3);color:var(--text4)}
.intel-ts{font-size:10px;color:var(--text4);font-family:var(--mono);flex-shrink:0}
.intel-ts.pending{color:var(--amber)}
.intel-item-body{padding:8px 10px;font-size:11px;color:var(--text2);line-height:1.6}
.intel-item-body.redacted{color:var(--text4);letter-spacing:.08em;font-family:var(--mono);font-size:10px}
.intel-action-note{padding:5px 10px 7px;font-size:10px;color:var(--blue);font-style:italic;border-top:1px solid #e8f0fb}

/* Pre-sim briefing fragments */
.brief-frag{padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);font-size:11px}
.brief-frag-src{font-size:10px;font-weight:700;color:var(--blue);letter-spacing:.3px;margin-bottom:3px}
.brief-frag-text{color:var(--text2);line-height:1.55}

/* Threat assessment options */
.assess-opt{padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all .15s;background:var(--white)}
.assess-opt:hover{border-color:var(--blue);background:#f0f6ff}
.assess-opt.selected{border-color:var(--navy);background:#eef4ff}