@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0e1a;--surface:#111827;--surface2:#1a2235;--surface3:#212d42;
  --accent:#00e5ff;--accent2:#7c3aed;--accent3:#10b981;--accent4:#f59e0b;--accent5:#ef4444;
  --text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--border:#1e2d45;
  --font-mono:'Space Mono',monospace;--font:'DM Sans',sans-serif;
}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;display:flex;height:100vh;overflow:hidden}
#sidebar{width:224px;min-width:224px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;z-index:10}
.logo{padding:18px 16px 14px;border-bottom:1px solid var(--border)}
.logo-title{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:2px;text-transform:uppercase}
.logo-sub{font-size:11px;color:var(--text3);margin-top:2px}
.nav-section{padding:12px 12px 4px;font-size:10px;font-family:var(--font-mono);color:var(--text3);letter-spacing:1.5px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:8px;padding:8px 14px;margin:1px 8px;border-radius:6px;cursor:pointer;transition:all .15s;color:var(--text2);font-size:13px}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:linear-gradient(90deg,rgba(0,229,255,.12),rgba(0,229,255,.04));color:var(--accent);border-left:2px solid var(--accent);margin-left:6px;padding-left:12px}
.nav-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.nav-item.active .nav-dot{box-shadow:0 0 6px currentColor}
.status-bar{margin-top:auto;padding:12px;border-top:1px solid var(--border)}
.status-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text3);margin-bottom:4px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent3);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
#main{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg);transition:margin-right .3s ease}
#main.drawer-open{margin-right:460px}
.section{display:none;padding:24px;animation:fadeIn .2s ease}
.section.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page-header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.page-title{font-family:var(--font-mono);font-size:18px;color:var(--accent);letter-spacing:1px}
.page-desc{font-size:13px;color:var(--text2);margin-top:4px;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px}
.card-accent{border-left:3px solid var(--accent)}.card-green{border-left:3px solid var(--accent3)}
.card-amber{border-left:3px solid var(--accent4)}.card-red{border-left:3px solid var(--accent5)}
.card-purple{border-left:3px solid var(--accent2)}
.card h3{font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px}
.card h4{font-size:12px;font-weight:500;color:var(--text2);margin-bottom:8px}
.metric{background:var(--surface2);border-radius:8px;padding:14px;text-align:center}
.metric-val{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--accent)}
.metric-val.green{color:var(--accent3)}.metric-val.amber{color:var(--accent4)}.metric-val.red{color:var(--accent5)}
.metric-label{font-size:11px;color:var(--text3);margin-top:2px}
.flow-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.flow-node{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:12px;font-family:var(--font-mono)}
.flow-node.source{border-color:var(--accent);color:var(--accent)}.flow-node.proc{border-color:#7c3aed;color:#a78bfa}
.flow-node.store{border-color:var(--accent3);color:var(--accent3)}.flow-node.dest{border-color:var(--accent4);color:var(--accent4)}
.flow-arrow{color:var(--text3);font-size:16px}
.flow-badge{font-size:10px;background:rgba(0,229,255,.1);color:var(--accent);padding:2px 6px;border-radius:3px;border:1px solid rgba(0,229,255,.2);font-family:var(--font-mono)}
.flow-badge.hl7{background:rgba(124,58,237,.1);color:#a78bfa;border-color:rgba(124,58,237,.2)}
.flow-badge.dicom{background:rgba(16,185,129,.1);color:var(--accent3);border-color:rgba(16,185,129,.2)}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:4px;margin:2px;background:var(--surface2);border:1px solid var(--border);color:var(--text2)}
.tag.blue{background:rgba(0,229,255,.08);color:var(--accent);border-color:rgba(0,229,255,.2)}
.tag.green{background:rgba(16,185,129,.08);color:var(--accent3);border-color:rgba(16,185,129,.2)}
.tag.amber{background:rgba(245,158,11,.08);color:var(--accent4);border-color:rgba(245,158,11,.2)}
.tag.red{background:rgba(239,68,68,.08);color:var(--accent5);border-color:rgba(239,68,68,.2)}
.tag.purple{background:rgba(124,58,237,.08);color:#a78bfa;border-color:rgba(124,58,237,.2)}
.step{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start}
.step-n{min-width:20px;height:20px;background:var(--accent);color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;font-family:var(--font-mono)}
.step-n.green{background:var(--accent3)}.step-n.amber{background:var(--accent4)}.step-n.red{background:var(--accent5)}.step-n.purple{background:var(--accent2)}
.step-body{font-size:12px;color:var(--text2);line-height:1.6;padding-top:2px}
.step-body strong{color:var(--text);font-weight:500}
.table{width:100%;border-collapse:collapse;font-size:12px}
.table th{text-align:left;padding:8px 10px;color:var(--text3);font-weight:500;border-bottom:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.table td{padding:8px 10px;border-bottom:1px solid rgba(30,45,69,.5);color:var(--text2)}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:rgba(255,255,255,.02)}
.crisis-card{border-radius:8px;padding:12px 14px;margin-bottom:10px;border-left:3px solid}
.crisis-1{background:rgba(239,68,68,.06);border-color:var(--accent5)}
.crisis-2{background:rgba(245,158,11,.06);border-color:var(--accent4)}
.crisis-3{background:rgba(16,185,129,.06);border-color:var(--accent3)}
.crisis-card h4{font-size:12px;font-weight:600;margin-bottom:4px}
.crisis-1 h4{color:var(--accent5)}.crisis-2 h4{color:var(--accent4)}.crisis-3 h4{color:var(--accent3)}
.crisis-card p{font-size:12px;color:var(--text2);line-height:1.5}
.compare-row{display:grid;grid-template-columns:180px 1fr 1fr;gap:1px;background:var(--border);margin-bottom:1px}
.compare-cell{background:var(--surface2);padding:9px 12px;font-size:12px}
.compare-cell.header{font-family:var(--font-mono);font-size:11px;color:var(--text3);font-weight:500}
.compare-cell.label{color:var(--text);font-weight:500}
.mirth{color:var(--accent)}.rhap{color:var(--accent2)}
.kpi-bar{margin-bottom:10px;cursor:pointer;border-radius:4px;padding:4px;transition:background .1s}
.kpi-bar:hover{background:rgba(255,255,255,.03)}
.kpi-label{display:flex;justify-content:space-between;margin-bottom:3px;font-size:11px;color:var(--text2)}
.kpi-track{height:5px;background:var(--surface2);border-radius:3px;overflow:hidden}
.kpi-fill{height:100%;border-radius:3px;transition:width 1s ease}
.alert{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:6px;padding:10px 12px;font-size:12px;color:#fca5a5;margin-bottom:8px;display:flex;gap:8px;flex-direction:column}
.alert .alert-row{display:flex;gap:8px;align-items:flex-start}
.alert.info{background:rgba(0,229,255,.06);border-color:rgba(0,229,255,.15);color:#7dd3fc}
.alert.success{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.15);color:#6ee7b7}
.alert.amber{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.15);color:#fcd34d}
.alert.clickable{cursor:pointer;transition:all .15s}
.alert.clickable:hover{filter:brightness(1.15);transform:translateX(2px)}
.alert-expand{font-size:12px;color:var(--text2);padding:8px 0 0;border-top:1px solid rgba(255,255,255,.06);margin-top:4px;display:none}
.alert-expand.open{display:block}
.divider{height:1px;background:var(--border);margin:14px 0}

/* ══ DRAWER (Agent Panel) ══════════════════ */
.drawer{position:fixed;right:-464px;top:0;width:460px;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:500;transition:right .3s ease;display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.5)}
.drawer.open{right:0}
.drawer-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}
.drawer-title{font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:1px}
.drawer-close{cursor:pointer;color:var(--text3);font-size:20px;line-height:1;padding:2px 4px}
.drawer-close:hover{color:var(--text)}
.agent-picker{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0}
.agent-chip{padding:5px 10px;border-radius:20px;font-size:11px;font-family:var(--font-mono);cursor:pointer;border:1px solid var(--border);color:var(--text2);transition:all .15s;white-space:nowrap}
.agent-chip:hover{border-color:var(--text2);color:var(--text)}
.agent-chip.active{border-color:var(--accent);color:var(--accent);background:rgba(0,229,255,.08)}
.agent-chip.crisis-chip{border-color:var(--accent5);color:var(--accent5)}
.agent-chip.crisis-chip.active{background:rgba(239,68,68,.08)}
.drawer-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.drawer-msg{border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.65}
.drawer-msg.user{background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.15);color:var(--text);margin-left:16px}
.drawer-msg.assistant{background:var(--surface2);border:1px solid var(--border);color:var(--text2);white-space:pre-wrap}
.drawer-msg.thinking{color:var(--text3);font-style:italic;font-size:12px}
.drawer-input-area{padding:14px;border-top:1px solid var(--border);flex-shrink:0}
.drawer-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font-family:var(--font);font-size:13px;resize:none;outline:none;min-height:56px}
.drawer-input:focus{border-color:var(--accent)}
.drawer-actions{display:flex;gap:8px;margin-top:8px;align-items:center}

/* ══ BUTTONS ══════════════════════════════ */
.btn{padding:8px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;font-family:var(--font-mono);transition:all .15s;letter-spacing:.5px}
.btn-primary{background:var(--accent);color:#000}
.btn-primary:hover{background:#00ccdd}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text2)}
.btn-ghost:hover{border-color:var(--text2);color:var(--text)}
.btn-crisis{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:var(--accent5);width:100%;padding:9px 16px}
.btn-crisis:hover{background:rgba(239,68,68,.22)}
.btn-agent{background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.25);color:var(--accent);font-size:11px;padding:5px 10px}
.btn-agent:hover{background:rgba(0,229,255,.15)}

/* ══ COMMAND PALETTE ══════════════════════ */
.cp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:2000;display:none;align-items:flex-start;justify-content:center;padding-top:80px}
.cp-overlay.open{display:flex}
.cp-box{background:var(--surface);border:1px solid rgba(0,229,255,.25);border-radius:12px;width:560px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.7)}
.cp-input-row{display:flex;align-items:center;padding:14px 16px;gap:10px;border-bottom:1px solid var(--border)}
.cp-input-icon{color:var(--accent);font-size:15px}
.cp-input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:14px;font-family:var(--font)}
.cp-results{max-height:360px;overflow-y:auto}
.cp-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .1s}
.cp-item:hover,.cp-item.selected{background:var(--surface2)}
.cp-item-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:var(--surface2)}
.cp-item-label{font-size:13px;color:var(--text)}
.cp-item-desc{font-size:11px;color:var(--text3);margin-top:1px}
.cp-section-header{padding:8px 16px 4px;font-size:10px;font-family:var(--font-mono);color:var(--text3);letter-spacing:1.5px;text-transform:uppercase}
.cp-hint{padding:10px 16px;font-size:11px;color:var(--text3);border-top:1px solid var(--border);display:flex;gap:16px}
.cp-kbd{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:10px;font-family:var(--font-mono)}

/* ══ TOOLTIPS ═════════════════════════════ */
.tooltip-panel{position:fixed;z-index:3000;background:var(--surface);border:1px solid rgba(0,229,255,.3);border-radius:10px;padding:14px 16px;max-width:320px;box-shadow:0 10px 40px rgba(0,0,0,.6);display:none;pointer-events:none}
.tooltip-panel.visible{display:block;animation:fadeIn .15s ease}
.tooltip-ttl{font-family:var(--font-mono);font-size:12px;color:var(--accent);margin-bottom:6px}
.tooltip-body{font-size:12px;color:var(--text2);line-height:1.6}
.tooltip-impact{margin-top:8px;font-size:11px;padding:4px 8px;border-radius:4px;font-weight:500}
.tooltip-impact.red{background:rgba(239,68,68,.1);color:var(--accent5)}
.tooltip-impact.amber{background:rgba(245,158,11,.1);color:var(--accent4)}
.tooltip-impact.green{background:rgba(16,185,129,.1);color:var(--accent3)}
.tooltip-cta{margin-top:8px;font-size:11px;color:var(--accent);cursor:pointer;pointer-events:all;text-decoration:underline}

/* ══ TOASTS ═══════════════════════════════ */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:4000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 16px;font-size:12px;color:var(--text);animation:slideUp .2s ease;max-width:300px;pointer-events:all}
.toast.success{border-color:var(--accent3)}.toast.error{border-color:var(--accent5)}.toast.info{border-color:var(--accent)}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ══ CRISIS MODE ══════════════════════════ */
body.crisis-active{--border:rgba(239,68,68,.3)}
body.crisis-active #sidebar{border-right-color:rgba(239,68,68,.4)}
.crisis-pulse{animation:crisisPulse 2s infinite}
@keyframes crisisPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}60%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}

/* ══ SVG FLOW ═════════════════════════════ */
#flow-svg-wrap{overflow-x:auto;padding:10px 4px}
.fn-group{cursor:pointer}
.fn-group:hover .fn-rect{filter:brightness(1.35)}
.fn-rect{transition:filter .2s}
.fe-path{stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset .6s ease,opacity .4s;opacity:.55}
.fe-path.lit{stroke-dashoffset:0;opacity:1}

/* ══ STREAMING CURSOR ═════════════════════ */
.streaming::after{content:'▋';animation:blink .7s infinite;color:var(--accent)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ══ INTERVIEW CHAT ═══════════════════════ */
.chat-wrap{display:flex;flex-direction:column;gap:10px;max-height:460px;overflow-y:auto;padding:2px 0;margin-bottom:12px}
.chat-msg{padding:12px 14px;border-radius:8px;font-size:13px;line-height:1.65;white-space:pre-wrap}
.chat-msg.ai{background:var(--surface2);border-left:3px solid var(--accent2);color:var(--text2)}
.chat-msg.user{background:rgba(0,229,255,.06);border-left:3px solid var(--accent);color:var(--text);margin-left:20px}
.chat-input-row{display:flex;gap:8px}
.chat-input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-family:var(--font);font-size:13px;outline:none}
.chat-input:focus{border-color:var(--accent2)}

/* ══ HIGHLIGHT on search ══════════════════ */
.hl{background:rgba(0,229,255,.25);border-radius:2px;color:var(--accent)}

/* ══ MOBILE NAVIGATION ═════════════════════════════════════ */

/* Hamburger button - hidden on large screens by default */
.mobile-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px 14px;
  margin-left: 0;
  z-index: 101;
  flex-shrink: 0;
}

.mobile-hamburger span {
  width: 26px;
  height: 2.5px;
  background: var(--accent);
  border-radius: 2px;
  transition: all .3s ease;
}

.mobile-hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(10px, 10px);
}

.mobile-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.mobile-hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Nav drawer overlay */
.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: none;
  opacity: 0;
  transition: opacity .3s ease;
}

.nav-drawer-overlay.open {
  display: block;
  opacity: 1;
}

/* Nav drawer - hidden on desktop by default */
.nav-drawer {
  position: fixed;
  left: -75vw;
  top: 0;
  width: 75vw;
  max-width: 320px;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 250;
  overflow-y: auto;
  transition: left .3s ease;
  display: flex !important;
  flex-direction: column;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3);
}

.nav-drawer.open {
  left: 0;
}

.nav-drawer-header {
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.nav-drawer-logo {
  font-size: 13px;
  font-weight: 600;
}

.nav-drawer-close {
  cursor: pointer;
  font-size: 20px;
  color: var(--text3);
  line-height: 1;
}

.nav-drawer-close:hover {
  color: var(--text);
}

.nav-drawer-section {
  padding: 12px 0;
  border-bottom: 1px solid rgba(30, 45, 69, 0.3);
}

.nav-drawer-section:last-child {
  border-bottom: none;
}

.nav-drawer-section-title {
  padding: 10px 14px 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.nav-drawer-item {
  padding: 14px 14px;
  color: var(--text2);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  border-left: 3px solid transparent;
  line-height: 1.4;
}

.nav-drawer-item:hover {
  background: var(--surface2);
  color: var(--text);
}

.nav-drawer-item.active {
  background: rgba(0, 229, 255, 0.08);
  color: var(--accent);
  border-left-color: var(--accent);
}

/* Bottom navigation - hidden on desktop by default */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: none !important;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.bottom-nav.visible {
  display: flex;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text3);
  transition: all .15s;
  flex: 1;
  height: 100%;
  min-width: 50px;
  border-radius: 6px;
  margin: 0 2px;
}

.bottom-nav-item:hover {
  color: var(--accent);
  background: rgba(0, 229, 255, 0.08);
}

.bottom-nav-item.active {
  color: var(--accent);
  background: rgba(0, 229, 255, 0.12);
}

.bottom-nav-icon {
  font-size: 20px;
}

.bottom-nav-label {
  font-size: 11px;
  font-family: var(--font-mono);
  white-space: nowrap;
  font-weight: 500;
}

/* ══ RESPONSIVE DESIGN ═════════════════════════════════════ */

/* DESKTOP (>1024px) - Default, hamburger hidden */
@media (min-width: 1025px) {
  .mobile-hamburger { display: none !important; }
  .bottom-nav { display: none !important; }
  .nav-drawer { display: none !important; }
  .nav-drawer-overlay { display: none !important; }
}

/* TABLET (768px - 1024px) */
@media (max-width: 1024px) {
  .grid4 { grid-template-columns: 1fr 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .compare-row { grid-template-columns: 140px 1fr 1fr; }
  #main { padding: 16px; }
  .page-header { margin-bottom: 16px; padding-bottom: 12px; }
  .page-title { font-size: 16px; }
  .section { padding: 16px; }

  /* Show hamburger + drawer (like mobile) */
  #sidebar { display: none !important; }
  .mobile-hamburger { display: flex !important; }
  .bottom-nav { display: flex !important; }

  #main { padding-bottom: 70px; }
}

/* MOBILE (<768px) */
@media (max-width: 768px) {
  /* Layout */
  body {
    flex-direction: column;
    height: auto;
    overflow: visible !important;
  }

  /* Show hamburger and bottom nav */
  .mobile-hamburger {
    display: flex !important;
    order: -1;
    flex-shrink: 0;
    width: auto;
    height: 44px;
  }
  .bottom-nav { display: flex !important; }

  /* Sidebar → Top Navigation */
  #sidebar {
    width: 100%;
    min-width: unset;
    border-right: none;
    border-bottom: 1px solid var(--border);
    height: auto;
    flex-direction: row;
    overflow: visible;
    padding: 0;
    z-index: 100;
    position: sticky;
    top: 0;
    align-items: center;
    gap: 0;
  }

  .logo {
    padding: 10px 12px 10px 4px;
    border-bottom: none;
    border-right: none;
    white-space: nowrap;
    flex: 1;
    min-width: 120px;
  }
  .logo-title { font-size: 9px; letter-spacing: 1px; }
  .logo-sub { display: none; }

  /* CRISIS button stays visible, repositioned (now div:nth-child(3)) */
  #sidebar > div:nth-child(3) {
    padding: 8px 10px 8px auto;
    display: flex;
    align-items: center;
    margin-left: 8px;
    flex-shrink: 0;
  }

  #sidebar > div:nth-child(3) .btn-crisis {
    width: auto;
    padding: 6px 10px;
    font-size: 10px;
  }

  /* Navigation → Hamburger indicator (repurposed for command palette hint) */
  #sidebar::before {
    content: '⌘K';
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 14px;
    font-size: 12px;
    color: var(--accent);
    font-family: var(--font-mono);
    cursor: help;
  }

  .nav-section { display: none; }
  .nav-item { display: none; }
  .status-bar { display: none; }

  /* Main content full width + space for bottom nav */
  #main {
    width: 100%;
    min-height: auto;
    padding: 12px;
    padding-bottom: 90px;
    margin-right: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Drawer → Bottom sheet modal */
  .drawer {
    position: fixed;
    bottom: -100vh;
    right: 0;
    top: unset;
    width: 100%;
    height: auto;
    max-height: 85vh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    transition: bottom .3s ease, transform .1s ease-out, opacity .1s ease-out;
    z-index: 500;
    box-shadow: 0 -8px 40px rgba(0,0,0,.5);
  }

  .drawer.open {
    bottom: 0;
    right: 0;
  }

  .drawer-header {
    padding: 14px 16px;
    cursor: grab;
    user-select: none;
    padding-top: 8px;
  }

  .drawer-header:active {
    cursor: grabbing;
  }

  .drawer-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--text3);
    border-radius: 2px;
    margin: 0 auto 10px;
    opacity: 0.4;
  }

  .drawer-messages { max-height: 40vh; }

  /* Grids → Single column */
  .grid4 { grid-template-columns: 1fr; gap: 10px; }
  .grid3 { grid-template-columns: 1fr; gap: 10px; }
  .grid2 { grid-template-columns: 1fr; gap: 10px; }

  /* Typography */
  .page-header { margin-bottom: 12px; padding-bottom: 8px; }
  .page-title { font-size: 14px; }
  .page-desc { font-size: 12px; }
  body { font-size: 13px; }

  /* Cards & spacing */
  .card { padding: 12px; border-radius: 8px; }
  .card h3 { font-size: 12px; margin-bottom: 8px; }
  .card h4 { font-size: 11px; }

  /* Metric */
  .metric { padding: 12px; border-radius: 6px; }
  .metric-val { font-size: 18px; }
  .metric-label { font-size: 10px; }

  /* Alerts */
  .alert { padding: 8px 10px; margin-bottom: 6px; }
  .alert .alert-row { gap: 6px; }

  /* Buttons */
  .btn { padding: 7px 12px; font-size: 11px; }
  .btn-agent { font-size: 10px; padding: 4px 8px; }

  /* Tables */
  .table { font-size: 11px; }
  .table th { padding: 6px 8px; font-size: 10px; }
  .table td { padding: 6px 8px; }

  /* Compare row */
  .compare-row { grid-template-columns: 100px 1fr 1fr; }
  .compare-cell { padding: 6px 8px; font-size: 11px; }

  /* Flow */
  .flow-node { padding: 4px 8px; font-size: 11px; }
  .flow-badge { font-size: 9px; padding: 1px 4px; }

  /* Agent chips */
  .agent-picker { padding: 8px 12px; gap: 4px; }
  .agent-chip { padding: 4px 8px; font-size: 10px; }

  /* Command palette */
  .cp-box { width: 90vw; max-width: 90%; }
  .cp-input { font-size: 13px; }

  /* Tooltips */
  .tooltip-panel { max-width: 280px; padding: 12px 14px; }

  /* Chat */
  .chat-msg { padding: 10px 12px; font-size: 12px; }
  .chat-input { font-size: 12px; padding: 8px 10px; }

  /* Tags */
  .tag { font-size: 10px; padding: 1px 6px; }

  /* Steps */
  .step { gap: 8px; margin-bottom: 8px; }
  .step-body { font-size: 11px; }

  /* Flow SVG */
  #flow-svg-wrap { padding: 8px 2px; }

  /* KPI */
  .kpi-bar { padding: 3px; margin-bottom: 8px; }
  .kpi-label { font-size: 10px; }

  /* Toast */
  #toast-container { bottom: 12px; right: 12px; }
  .toast { max-width: 85vw; }
}

/* SMALL MOBILE (<480px) */
@media (max-width: 480px) {
  .logo { padding: 8px 10px 8px 12px; }
  .logo-title { font-size: 8px; }

  #main { padding: 8px; }

  .page-title { font-size: 13px; }
  .page-desc { font-size: 11px; }
  body { font-size: 12px; }

  .card { padding: 10px; }
  .card h3 { font-size: 11px; margin-bottom: 6px; }

  .metric-val { font-size: 16px; }
  .metric-label { font-size: 9px; }

  .btn { padding: 6px 10px; font-size: 10px; }

  .compare-row { grid-template-columns: 80px 1fr 1fr; gap: 0; }
  .compare-cell { padding: 5px 6px; font-size: 10px; }

  .drawer-messages { max-height: 50vh; }

  .alert { font-size: 11px; padding: 6px 8px; }
  .alert-row { gap: 4px; }

  .chat-msg { padding: 8px 10px; font-size: 11px; }

  .table { font-size: 10px; }
  .table th { padding: 5px 6px; font-size: 9px; }
  .table td { padding: 5px 6px; }

  .cp-box { width: 95vw; }
  .cp-input { font-size: 12px; }

  #sidebar { position: relative; }
}

/* Hidden on mobile (restore with JS toggle if needed) */
@media (max-width: 768px) {
  .page-header { border-bottom: 1px solid var(--border); }
}