*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f1117;--bg-2:#161b27;--bg-3:#1e2535;--bg-4:#252d3d;
  --border:#3a4760;--text:#edf2f7;--text-muted:#a0aec0;--text-dim:#718096;
  --accent:#3b82f6;--accent-h:#2563eb;--accent-dim:rgba(59,130,246,.18);
  --green:#10b981;--green-dim:rgba(16,185,129,.18);
  --yellow:#f59e0b;--yellow-dim:rgba(245,158,11,.18);
  --red:#ef4444;--red-dim:rgba(239,68,68,.18);
  --purple:#8b5cf6;--purple-dim:rgba(139,92,246,.18);
  --r:10px;--rs:6px;--font:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  --sw:340px;--hh:56px;--tr:.18s ease;
}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.65}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ── Layout ── */
#app{display:flex;flex-direction:column;height:100vh}
#testing-banner{display:none;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(90deg,#7c3aed,#4f46e5);color:#fff;font-size:12px;
  font-weight:600;letter-spacing:.05em;padding:7px 16px;text-transform:uppercase}
#testing-banner.visible{display:flex}
#header{display:flex;align-items:center;gap:12px;padding:0 20px;height:var(--hh);
  background:var(--bg-2);border-bottom:1px solid var(--border);flex-shrink:0;z-index:10}.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.logo svg{color:var(--accent)}.logo .sub{font-weight:400;color:var(--text-muted);font-size:13px}
.spacer{flex:1}
#health-badge{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);
  padding:4px 10px;background:var(--bg-3);border:1px solid var(--border);border-radius:20px}
#health-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--text-dim)}
#health-badge.healthy .dot{background:var(--green);box-shadow:0 0 6px var(--green)}
#health-badge.degraded .dot{background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
#health-badge.unhealthy .dot{background:var(--red);box-shadow:0 0 6px var(--red)}
#btn-toggle-sidebar{display:none;background:none;border:none;color:var(--text-muted);
  cursor:pointer;padding:6px;border-radius:var(--rs)}
#btn-toggle-sidebar:hover{color:var(--text);background:var(--bg-3)}
#main{display:flex;flex:1;overflow:hidden}
#chat-pane{display:flex;flex-direction:column;flex:1;overflow:hidden}
#thread{flex:1;overflow-y:auto;padding:24px 0;display:flex;flex-direction:column;gap:6px}

/* ── Input ── */
#input-area{flex-shrink:0;display:flex;align-items:flex-end;gap:10px;
  padding:12px 20px 16px;background:var(--bg-2);border-top:1px solid var(--border)}
#msg-input{flex:1;background:var(--bg-3);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text);font-family:var(--font);font-size:15px;
  padding:10px 14px;resize:none;min-height:44px;max-height:140px;line-height:1.55;
  transition:border-color var(--tr);outline:none}
#msg-input:focus{border-color:var(--accent)}
#msg-input::placeholder{color:var(--text-muted)}
#msg-input:disabled{opacity:.5;cursor:not-allowed}
#btn-send{flex-shrink:0;width:44px;height:44px;background:var(--accent);border:none;
  border-radius:var(--r);color:#fff;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background var(--tr),transform var(--tr)}
#btn-send:hover:not(:disabled){background:var(--accent-h);transform:translateY(-1px)}
#btn-send:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ── Sidebar ── */
#sidebar{width:var(--sw);flex-shrink:0;background:var(--bg-2);
  border-left:1px solid var(--border);display:flex;flex-direction:column;
  overflow:hidden;transition:width var(--tr)}
#sidebar.hidden{width:0;overflow:hidden;border:none}
.sidebar-section{border-bottom:1px solid var(--border);overflow:hidden}
.sidebar-section.collapsed .sidebar-body{display:none}
.sidebar-header{display:flex;align-items:center;gap:8px;padding:12px 16px;
  cursor:pointer;user-select:none;font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);
  transition:color var(--tr)}
.sidebar-header:hover{color:var(--text)}
.sidebar-header .chev{margin-left:auto;transition:transform var(--tr)}
.sidebar-section:not(.collapsed) .chev{transform:rotate(180deg)}
.sidebar-header .badge{background:var(--accent-dim);color:var(--accent);
  font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px}
.sidebar-body{padding:0 12px 12px;overflow-y:auto;max-height:320px}

/* Dashboard */
#dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 0}
.dash-stat{background:var(--bg-3);border:1px solid var(--border);
  border-radius:var(--rs);padding:10px 12px}
.dash-stat .lbl{font-size:12px;color:var(--text-muted);margin-bottom:4px}
.dash-stat .val{font-size:24px;font-weight:700;color:var(--text)}
.dash-stat.blocked .val{color:var(--red)}.dash-stat.allowed .val{color:var(--green)}
.dash-stat.rate .val{color:var(--yellow)}

/* Decision log */
.decision-entry{display:flex;align-items:flex-start;gap:8px;padding:8px 4px;
  border-bottom:1px solid var(--border);cursor:pointer;border-radius:var(--rs);
  transition:background var(--tr)}
.decision-entry:last-child{border-bottom:none}
.decision-entry:hover{background:var(--bg-3)}
.decision-entry .odot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.decision-entry .odot.approved{background:var(--green)}
.decision-entry .odot.blocked{background:var(--red)}
.decision-entry .info{flex:1;min-width:0}
.decision-entry .cat{font-size:13px;font-weight:600;color:var(--text)}
.decision-entry .ts{font-size:12px;color:var(--text-muted)}

/* Scenarios */
.scenario-category{margin-bottom:10px}
.scenario-cat-title{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-muted);margin-bottom:6px}
.scenario-item{background:var(--bg-3);border:1px solid var(--border);
  border-radius:var(--rs);padding:8px 10px;margin-bottom:6px;cursor:pointer;
  transition:border-color var(--tr),background var(--tr)}
.scenario-item:hover{border-color:var(--accent);background:var(--accent-dim)}
.scenario-item .sname{font-size:13px;font-weight:600;color:var(--text)}
.scenario-item .sdesc{font-size:12px;color:var(--text-muted);margin-top:3px}
.obadge{display:inline-block;margin-top:5px;font-size:11px;font-weight:700;
  text-transform:uppercase;padding:2px 8px;border-radius:10px}
.obadge.block{background:var(--red-dim);color:var(--red)}
.obadge.flag{background:var(--yellow-dim);color:var(--yellow)}
.obadge.allow{background:var(--green-dim);color:var(--green)}
.scenario-item--allow{border-left:3px solid var(--green)}
.scenario-item--allow:hover{border-color:var(--green);background:var(--green-dim)}

/* ── Messages ── */
.msg-row{display:flex;padding:2px 20px;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg-row.user{justify-content:flex-end}
.msg-row.assistant{justify-content:flex-start}
.msg-row.system{justify-content:center}
.msg-col{display:flex;flex-direction:column;gap:4px;max-width:72%}
.msg-row.user .msg-col{align-items:flex-end}
.msg-row.assistant .msg-col{align-items:flex-start}
.bubble{border-radius:var(--r);padding:10px 14px;line-height:1.6;word-break:break-word}
.msg-row.user .bubble{background:var(--accent);color:#fff;border-bottom-right-radius:3px}
.msg-row.assistant .bubble{background:var(--bg-3);border:1px solid var(--border);
  color:var(--text);border-bottom-left-radius:3px}
.bubble .ts{display:block;font-size:11px;color:rgba(255,255,255,.55);margin-top:4px;text-align:right}
.msg-row.assistant .bubble .ts{color:var(--text-muted)}
.typing-indicator{display:flex;gap:4px;align-items:center;padding:10px 14px;
  background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r);
  border-bottom-left-radius:3px;width:fit-content}
.tdot{width:7px;height:7px;background:var(--text-muted);border-radius:50%;
  animation:bounce .9s infinite}
.tdot:nth-child(2){animation-delay:.15s}.tdot:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.sys-msg{display:inline-flex;gap:6px;align-items:center;background:var(--bg-3);
  border:1px solid var(--border);border-radius:20px;padding:5px 14px;
  font-size:13px;color:var(--text-muted)}
.sys-msg.error{background:var(--red-dim);border-color:var(--red);color:var(--red)}

/* ── Plan Card ── */
.plan-card{background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;width:100%;margin-top:6px}
.plan-card-hdr{display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--bg-3);border-bottom:1px solid var(--border)}
.plan-card-hdr .pico{color:var(--accent)}
.plan-card-hdr .ptitle{font-weight:700;font-size:14px;flex:1}
.plan-card-hdr .pid{font-size:12px;color:var(--text-muted);font-family:var(--mono)}
.plan-badge{font-size:12px;font-weight:700;text-transform:uppercase;padding:3px 10px;border-radius:10px}
.plan-badge.awaiting_approval{background:var(--yellow-dim);color:var(--yellow)}
.plan-badge.executing{background:var(--accent-dim);color:var(--accent)}
.plan-badge.completed{background:var(--green-dim);color:var(--green)}
.plan-badge.failed{background:var(--red-dim);color:var(--red)}
.plan-badge.rejected{background:var(--red-dim);color:var(--red)}
.plan-badge.idle{background:var(--bg-4);color:var(--text-muted)}
.task-list{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.task-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  background:var(--bg-3);border:1px solid var(--border);border-radius:var(--rs);
  transition:border-color var(--tr)}
.task-item.running{border-color:var(--accent)}
.task-item.succeeded{border-color:var(--green)}
.task-item.failed{border-color:var(--red)}
.ticon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;border-radius:50%;font-size:11px;font-weight:700;margin-top:2px}
.ticon.pending{background:var(--bg-4);color:var(--text-muted)}
.ticon.running{background:var(--accent-dim);color:var(--accent)}
.ticon.succeeded{background:var(--green-dim);color:var(--green)}
.ticon.failed{background:var(--red-dim);color:var(--red)}
.tinfo{flex:1;min-width:0}
.taction{font-weight:600;font-size:14px;color:var(--text)}
.tprovider{font-size:13px;color:var(--text-muted)}
.tdeps{font-size:12px;color:var(--text-dim);margin-top:2px}
.terr{font-size:13px;color:var(--red);margin-top:4px}
.tres{font-size:12px;color:var(--green);font-family:var(--mono);margin-top:4px;
  white-space:pre-wrap;word-break:break-all}
.spinning{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.approval-btns{display:flex;gap:10px;padding:12px 16px;
  border-top:1px solid var(--border);background:var(--bg-3)}
.btn-approve{flex:1;padding:10px;background:var(--green);border:none;
  border-radius:var(--rs);color:#fff;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:opacity var(--tr),transform var(--tr)}
.btn-approve:hover{opacity:.9;transform:translateY(-1px)}
.btn-approve:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-reject{flex:1;padding:10px;background:transparent;
  border:1px solid var(--red);border-radius:var(--rs);color:var(--red);
  font-weight:600;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:6px;transition:background var(--tr),transform var(--tr)}
.btn-reject:hover{background:var(--red-dim);transform:translateY(-1px)}
.btn-reject:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ── Security Card ── */
.security-card{border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;margin-top:6px;width:100%}
.security-card.approved{border-color:var(--green)}
.security-card.blocked{border-color:var(--red)}
.security-card-hdr{display:flex;align-items:center;gap:10px;padding:10px 14px;
  cursor:pointer;user-select:none;transition:filter var(--tr)}
.security-card.approved .security-card-hdr{background:var(--green-dim)}
.security-card.blocked .security-card-hdr{background:var(--red-dim)}
.security-card-hdr:hover{filter:brightness(1.12)}
.sec-outcome{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.security-card.approved .sec-outcome{color:var(--green)}
.security-card.blocked .sec-outcome{color:var(--red)}
.sec-reason{font-size:13px;color:var(--text-muted);flex:1}
.security-card-hdr .chev{color:var(--text-dim);transition:transform var(--tr)}
.security-card.expanded .security-card-hdr .chev{transform:rotate(180deg)}
.security-card-body{display:none;padding:12px 14px;background:var(--bg-3);
  border-top:1px solid var(--border);font-size:13px}
.security-card.expanded .security-card-body{display:block}
.reasoning-trace{background:var(--bg-4);border-left:3px solid var(--red);
  border-radius:0 var(--rs) var(--rs) 0;padding:10px 14px;margin-bottom:10px;
  font-size:13px;color:var(--text);font-style:italic;line-height:1.6}
.security-card.approved .reasoning-trace{border-left-color:var(--green)}
.score-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.score-lbl{color:var(--text-muted);width:150px;flex-shrink:0;font-size:13px}
.score-bar-wrap{flex:1;height:8px;background:var(--bg-4);border-radius:4px;overflow:hidden}
.score-bar{height:100%;border-radius:4px;transition:width .4s ease}
.score-bar.green{background:var(--green)}.score-bar.yellow{background:var(--yellow)}
.score-bar.red{background:var(--red)}
.score-val{color:var(--text);font-weight:600;width:38px;text-align:right;font-size:13px}
.sem-pass{color:var(--green);font-weight:700;font-size:12px}
.sem-fail{color:var(--red);font-weight:700;font-size:12px}
.score-threshold{color:var(--text-muted);font-size:12px}
.pipeline-stages{display:flex;align-items:flex-start;gap:0;margin-bottom:14px;padding:10px 12px;
  background:var(--bg-4);border-radius:var(--rs);overflow-x:auto}
.ps-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.ps-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;border:2px solid var(--border)}
.ps-label{font-size:11px;color:var(--text-muted);white-space:nowrap;text-align:center;
  max-width:72px;line-height:1.3}
.ps-conn{flex:1;height:2px;background:var(--border);margin-top:11px;min-width:12px;flex-shrink:0}
.ps-conn.ps-conn-passed{background:var(--green)}
.ps-step.ps-passed .ps-dot{background:var(--green-dim);border-color:var(--green);color:var(--green)}
.ps-step.ps-passed .ps-label{color:var(--green)}
.ps-step.ps-failed .ps-dot{background:var(--red-dim);border-color:var(--red);color:var(--red)}
.ps-step.ps-failed .ps-label{color:var(--red)}
.ps-step.ps-pending .ps-dot{background:transparent;border-color:var(--border);color:var(--text-dim)}
.ps-step.ps-unknown .ps-dot{background:transparent;border-color:var(--border);color:var(--text-dim)}
.reasoning-trace.structured{font-style:normal;padding:0;background:none;border-left:none}
.rt-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rt-decision{font-weight:700;font-size:12px;letter-spacing:.05em;padding:2px 8px;
  border-radius:3px;text-transform:uppercase}
.rt-decision.deny{background:var(--red-dim);color:var(--red)}
.rt-decision.allow{background:var(--green-dim);color:var(--green)}
.rt-meta{color:var(--text-muted);font-size:12px}
.rt-row{display:flex;gap:8px;margin-bottom:5px;font-size:13px}
.rt-k{color:var(--text-muted);width:80px;flex-shrink:0}
.rt-v{color:var(--text)}
.rt-failure{color:var(--red);font-weight:600}
.detail-grid{display:grid;grid-template-columns:140px 1fr;gap:5px 12px}
.detail-grid .dk{color:var(--text-muted);font-size:12px}
.detail-grid .dv{color:var(--text);font-size:12px;font-family:var(--mono);word-break:break-all}
.expand-raw{margin-top:10px;font-size:12px;color:var(--accent);cursor:pointer;
  display:inline-flex;gap:4px;align-items:center}
.raw-json{display:none;margin-top:8px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--rs);padding:10px;font-family:var(--mono);font-size:12px;
  color:var(--text-muted);overflow-x:auto;max-height:200px;overflow-y:auto;white-space:pre}
.raw-json.visible{display:block}

/* ── Status Pill ── */
.status-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:10px;
  margin-top:2px;align-self:flex-start}
.status-pill.verified{background:var(--green-dim);color:var(--green);border:1px solid rgba(16,185,129,.3)}
.status-pill.blocked{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.3)}
.status-pill svg{flex-shrink:0}

/* ── Empty state ── */
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;color:var(--text-dim);padding:40px 20px;text-align:center}
.empty-state svg{color:var(--border)}
.empty-state h2{font-size:19px;color:var(--text-muted)}
.empty-state p{font-size:14px;max-width:400px;line-height:1.75}

@media(max-width:768px){
  :root{--sw:100vw}
  #sidebar{position:fixed;right:0;top:0;bottom:0;z-index:50;
    transform:translateX(100%);transition:transform var(--tr)}
  #sidebar.open{transform:translateX(0)}
  #btn-toggle-sidebar{display:flex}
  .msg-col{max-width:88%}
}