/* ==========================================================================
   AI Agent Discovery — Visual System
   ServiceNow-inspired light theme (default) + dark glassmorphic
   ========================================================================== */

:root {
  /* Canvas — warm light gray page, white cards */
  --bg-0: #f0f2f5;
  --bg-1: #ffffff;
  --bg-2: #f4f5f7;
  --bg-3: #e8eaed;

  --line: rgba(0,0,0,0.10);
  --line-soft: rgba(0,0,0,0.06);

  /* Text */
  --fg:   #111827;
  --fg-1: #1f2937;
  --fg-2: #374151;
  --fg-3: #6b7280;
  --muted: #6b7280;
  --dim:   #9ca3af;

  /* Semantic — professional palette */
  --accent:  #2563eb;
  --accent2: #7c3aed;
  --ok:   #16a34a;
  --warn: #d97706;
  --crit: #dc2626;

  /* Card surface */
  --glass-bg: #ffffff;
  --glass-stroke: rgba(0,0,0,0.09);

  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}

[data-theme="dark"] {
  --bg-0: oklch(0.19 0.014 260);
  --bg-1: oklch(0.22 0.016 260);
  --bg-2: oklch(0.26 0.018 260);
  --bg-3: oklch(0.32 0.022 260);
  --line: oklch(0.58 0.022 260 / 0.48);
  --line-soft: oklch(0.58 0.022 260 / 0.30);
  --fg:   oklch(0.985 0.003 240);
  --fg-1: oklch(0.975 0.005 240);
  --fg-2: oklch(0.96 0.008 240);
  --fg-3: oklch(0.86 0.010 240);
  --muted: oklch(0.78 0.014 240);
  --dim:   oklch(0.62 0.012 240);
  --accent:  oklch(0.82 0.22 245);
  --accent2: oklch(0.78 0.22 270);
  --ok:   oklch(0.88 0.22 155);
  --warn: oklch(0.92 0.24 65);
  --crit: oklch(0.84 0.26 20);
  --glass-bg: oklch(0.28 0.022 260 / 0.85);
  --glass-stroke: oklch(0.65 0.026 260 / 0.40);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "tnum";
}

/* Background atmosphere — plain in light mode, atmospheric in dark */
.app-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bg-0);
}
[data-theme="dark"] .app-bg {
  background:
    radial-gradient(900px 600px at 8% -8%, oklch(0.32 0.13 270 / 0.4), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, oklch(0.32 0.13 25 / 0.18), transparent 60%),
    radial-gradient(1100px 700px at 50% 110%, oklch(0.32 0.13 200 / 0.18), transparent 60%),
    var(--bg-0);
}
[data-theme="dark"] .app-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, oklch(0.55 0.04 265 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.55 0.04 265 / 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* ============ Top nav ============ */
.topnav {
  display: flex; align-items: center; gap: 28px;
  padding: 16px 24px; border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(150%);
  background: oklch(0.16 0.02 265 / 0.65);
  position: sticky; top: 0; z-index: 50;
}
[data-theme="dark"] .topnav { background: oklch(0.16 0.02 265 / 0.65); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: conic-gradient(from 180deg at 50% 50%, var(--accent), var(--accent2), var(--crit), var(--accent));
  position: relative; flex-shrink: 0;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 5px; border-radius: 6px;
  background: var(--bg-0);
}
.brand-mark::before {
  content: ""; position: absolute; inset: 11px; border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 12px var(--accent2);
}
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.brand-name .muted { font-weight: 400; opacity: 0.7; }

.nav-tabs { display: flex; gap: 4px; }
.nav-tab {
  background: transparent; border: 0; color: var(--muted);
  padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer;
  border-radius: var(--r-sm); position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s, background .15s;
  text-decoration: none;
}
.nav-tab:hover { color: var(--fg); background: oklch(0.55 0.04 265 / 0.06); }
.nav-tab.on { color: var(--fg); background: oklch(0.55 0.04 265 / 0.1); }
.nav-tab.on::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -15px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
}

.nav-spacer { flex: 1; }
.nav-meta { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; }
.nav-meta .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 var(--ok); animation: pulse 1.8s infinite;
}
.live-clock { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-display); letter-spacing: -0.003em; }
.live-clock .lc-date { color: var(--muted); font-size: 12px; }
.live-clock .lc-sep { color: var(--dim); }
.live-clock .lc-time { color: var(--fg-2); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.live-clock .lc-tz { color: var(--dim); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 2px; padding: 2px 5px; border: 1px solid var(--line-soft); border-radius: 3px; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.78 0.14 165 / 0.5); }
  70% { box-shadow: 0 0 0 6px oklch(0.78 0.14 165 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.78 0.14 165 / 0); }
}
.nav-user-wrap { position: relative; }

.nav-user {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  font-size: 11px; font-weight: 600; color: white;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; flex-shrink: 0;
  overflow: hidden;
  transition: opacity 0.15s;
  padding: 0;
}
.nav-user:hover { opacity: 0.85; }
.nav-user-pic { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

.nav-user-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg-2); border: 1px solid var(--glass-stroke);
  border-radius: 10px; padding: 12px; min-width: 200px;
  box-shadow: 0 8px 32px oklch(0 0 0 / 0.5);
  z-index: 200;
}
.num-name  { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.num-email { font-size: 11.5px; color: var(--muted); margin-bottom: 12px; }
.num-logout {
  width: 100%; padding: 7px 10px; border-radius: 6px;
  background: oklch(0.84 0.26 20 / 0.12); border: 1px solid oklch(0.84 0.26 20 / 0.3);
  color: var(--crit); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background 0.15s;
}
.num-logout:hover { background: oklch(0.84 0.26 20 / 0.20); }

/* ── Login screen ──────────────────────────────────────────────────────────── */
.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-0);
}
.login-card {
  background: var(--glass-bg); border: 1px solid var(--glass-stroke);
  border-radius: 18px; padding: 40px 44px 44px;
  max-width: 380px; width: 100%; text-align: center;
  box-shadow: 0 24px 64px oklch(0 0 0 / 0.5);
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 24px; }
.login-brand-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: conic-gradient(from 180deg, var(--accent), var(--accent2), var(--accent));
}
.login-brand-name { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--fg); }
.login-brand-sub  { font-size: 12.5px; color: var(--muted); margin-top: -4px; }
.login-desc { font-size: 13px; color: var(--fg-3); line-height: 1.6; margin-bottom: 28px; }
.login-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px; border-radius: 10px;
  background: var(--fg); color: var(--bg-0);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: opacity 0.15s; white-space: nowrap;
}
.login-btn:hover { opacity: 0.88; }
.login-google-icon { flex-shrink: 0; }

/* ============ App shell — sidebar layout ============ */
html, body { height: 100%; overflow: hidden; }

.app-shell {
  display: flex; height: 100vh; overflow: hidden;
}

/* ── Sidebar ── */
.sdb {
  width: 224px; flex-shrink: 0;
  background: #1e293b;
  display: flex; flex-direction: column;
  transition: width 0.2s ease;
  overflow: hidden;
  z-index: 40;
}
.sdb-collapsed { width: 56px; }

.sdb-top {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  min-height: 60px;
}
.sdb-brand-mark {
  height: 22px; width: auto; flex-shrink: 0; object-fit: contain;
  mix-blend-mode: screen;
}
.sdb-brand-name {
  color: #f1f5f9; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; letter-spacing: -0.01em; flex: 1; min-width: 0;
}
.sdb-toggle {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  background: transparent; border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  padding: 0;
}
.sdb-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sdb-collapsed .sdb-toggle { margin: 0 auto; }

.sdb-nav { flex: 1; overflow-y: auto; padding: 10px 0; }
.sdb-nav::-webkit-scrollbar { width: 0; }

.sdb-section-label {
  padding: 12px 16px 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: rgba(255,255,255,0.28);
  white-space: nowrap;
}
.sdb-collapsed .sdb-section-label { visibility: hidden; height: 0; padding: 0; }

.sdb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px;
  color: rgba(255,255,255,0.60); font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
  border-right: 3px solid transparent;
}
.sdb-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.90); }
.sdb-item-on {
  background: rgba(37,99,235,0.22);
  color: #93c5fd;
  border-right-color: #2563eb;
}
.sdb-item svg { flex-shrink: 0; width: 16px; height: 16px; }
.sdb-collapsed .sdb-item { padding: 10px 0; justify-content: center; }
.sdb-collapsed .sdb-item-label { display: none; }

.sdb-bottom {
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sdb-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
}
.sdb-user-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: white;
  overflow: hidden;
}
.sdb-user-pic { width: 100%; height: 100%; object-fit: cover; }
.sdb-user-info { flex: 1; min-width: 0; }
.sdb-user-name { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdb-logout {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 11px; color: rgba(255,255,255,0.35);
  transition: color .15s; font-family: inherit;
}
.sdb-logout:hover { color: #fca5a5; }
.sdb-collapsed .sdb-user-info { display: none; }
.sdb-collapsed .sdb-user-row { justify-content: center; }

/* ── Main content area ── */
.main-area {
  flex: 1; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  background: var(--bg-0);
}

.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 20px 28px 0;
  gap: 16px;
  flex-shrink: 0;
  max-width: 1800px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box;
}
.page-header-left { display: flex; flex-direction: column; gap: 2px; }
.page-breadcrumb {
  font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 5px;
  letter-spacing: 0.01em; font-weight: 500; text-transform: uppercase;
}
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px; font-weight: 800; letter-spacing: -0.04em;
  color: var(--fg); line-height: 1.1;
}
.page-actions {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0; padding-bottom: 2px;
}
.live-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--muted); font-weight: 500;
}
.live-dot-small {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.live-dot-small.ok   { background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 1.8s infinite; }
.live-dot-small.warn { background: var(--warn); animation: pulse 1s infinite; }
.live-dot-small.dim  { background: var(--dim); }

.screen-body {
  padding: 20px 28px 48px;
  max-width: 1800px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box;
}

/* Old app container — keep for compatibility within screen components */
.app {
  max-width: 1800px; margin: 0 auto;
}
.page-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
}
.page-h h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px; font-weight: 700; letter-spacing: -0.035em;
  line-height: 1.1; color: var(--fg-1);
}
.page-h .sub { color: var(--muted); font-size: 13px; margin-top: 6px; letter-spacing: -0.003em; }

/* Executive hero — subtle glow on top of base h1 style */
@keyframes headline-glow {
  0%, 100% { text-shadow: 0 0 0px transparent; }
  50%       { text-shadow: 0 0 40px oklch(0.75 0.16 222 / 0.45), 0 0 80px oklch(0.75 0.16 222 / 0.15); }
}
.exec-hero-h1 {
  animation: headline-glow 4s ease-in-out infinite;
}
.exec-hero-sub { font-size: 13px !important; margin-top: 8px !important; letter-spacing: -0.01em !important; }
.exec-hero-sub .sub-live { color: var(--ok); font-weight: 500; margin-right: 2px; }
.exec-hero-sub .sub-warn { color: var(--warn); font-weight: 500; }
.exec-hero-sub .sub-sep { color: oklch(0.55 0.04 265 / 0.5); margin: 0 6px; }
.page-h .right { display: flex; gap: 10px; align-items: center; }

/* ============ Card ============ */
.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
}
.card:hover { border-color: rgba(0,0,0,0.15); box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
.card.dragging { opacity: 0.4; }
.card.drag-over { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
[data-theme="dark"] .card {
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: none;
  transition: border-color .2s, transform .2s, box-shadow .25s;
}
[data-theme="dark"] .card:hover { border-color: oklch(0.55 0.014 260 / 0.22); box-shadow: none; }
[data-theme="dark"] .card.drag-over { box-shadow: 0 0 0 3px oklch(0.72 0.13 245 / 0.15); }
[data-theme="dark"] .card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, oklch(1 0 0 / 0.035), transparent 28%);
}
.card-head {
  padding: 0 20px 10px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.card-head-inner {
  display: flex; flex-direction: column;
  padding: 14px 0 12px;
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}
.card-handle {
  position: absolute; top: 12px; right: 14px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); cursor: grab; opacity: 0; transition: opacity .15s, color .15s;
  border-radius: 6px;
}
.card:hover .card-handle { opacity: 1; }
.card-handle:hover { color: var(--fg); background: oklch(0.55 0.014 260 / 0.12); }
.card-handle:active { cursor: grabbing; }
.card-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--fg); line-height: 1.2;
}
.card-sub { font-size: 12px; color: var(--muted); margin-top: 3px; letter-spacing: -0.003em; }
.card-body { padding: 14px 20px 20px; }
.card-action { font-size: 11.5px; color: var(--muted); padding-top: 14px; }

/* ============ Buttons / Pills ============ */
.btn {
  background: white;
  border: 1px solid oklch(0.82 0.02 260);
  color: var(--fg-2);
  padding: 7px 14px; border-radius: var(--r-sm);
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.btn:hover { background: var(--bg-2); border-color: oklch(0.72 0.04 260); color: var(--fg); box-shadow: 0 1px 4px rgba(0,0,0,0.10); }
.btn.sm { padding: 5px 10px; font-size: 11.5px; }
.btn.primary {
  background: oklch(0.50 0.18 250);
  border-color: oklch(0.45 0.18 250);
  color: white;
  box-shadow: 0 1px 3px oklch(0.50 0.18 250 / 0.35);
}
.btn.primary:hover { background: oklch(0.44 0.20 250); border-color: oklch(0.44 0.20 250); box-shadow: 0 2px 6px oklch(0.50 0.18 250 / 0.45); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: oklch(0.94 0.01 260); border-color: oklch(0.82 0.02 260); box-shadow: none; }
.btn.btn-flag-on { background: oklch(0.72 0.20 25 / 0.14); border-color: oklch(0.72 0.20 25 / 0.50); color: var(--crit); }
.btn.btn-flag-on:hover { background: oklch(0.72 0.20 25 / 0.22); border-color: oklch(0.72 0.20 25 / 0.70); }
[data-theme="dark"] .btn { background: oklch(0.24 0.016 260); border-color: var(--line-soft); color: var(--fg-2); box-shadow: none; }
[data-theme="dark"] .btn:hover { background: oklch(0.30 0.02 260); border-color: oklch(0.40 0.02 260); color: var(--fg); }
[data-theme="dark"] .btn.primary {
  background: oklch(0.52 0.18 250);
  border-color: oklch(0.58 0.18 260);
  box-shadow: 0 0 0 1px oklch(0.65 0.18 270 / 0.2), 0 4px 16px -4px oklch(0.52 0.18 250 / 0.5);
}
[data-theme="dark"] .btn.primary:hover { background: oklch(0.56 0.20 250); }
[data-theme="dark"] .btn.ghost { background: transparent; box-shadow: none; }
[data-theme="dark"] .btn.ghost:hover { background: oklch(0.24 0.016 260); border-color: var(--line-soft); }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill-muted { background: var(--bg-3); color: var(--fg-2); border-color: var(--line); }
.pill-ok    { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.pill-warn  { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.pill-crit  { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
[data-theme="dark"] .pill-muted { background: oklch(0.55 0.04 265 / 0.14); color: var(--fg-2); border-color: var(--line-soft); }
[data-theme="dark"] .pill-ok    { background: oklch(0.78 0.14 165 / 0.14); color: var(--ok); border-color: oklch(0.78 0.14 165 / 0.35); }
[data-theme="dark"] .pill-warn  { background: oklch(0.82 0.16 75 / 0.14); color: var(--warn); border-color: oklch(0.82 0.16 75 / 0.35); }
[data-theme="dark"] .pill-crit  { background: oklch(0.72 0.20 25 / 0.16); color: var(--crit); border-color: oklch(0.72 0.20 25 / 0.4); }
.pill-glow {
  box-shadow: 0 0 0 0 currentColor; animation: pulse-crit 1.8s infinite;
}
@keyframes pulse-crit {
  0% { box-shadow: 0 0 0 0 oklch(0.72 0.20 25 / 0.4); }
  70% { box-shadow: 0 0 0 6px oklch(0.72 0.20 25 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.72 0.20 25 / 0); }
}

.mono { font-family: var(--font-mono); font-size: 11.5px; }
.small { font-size: 11px; }
.muted { color: var(--muted); }
.ml-auto { margin-left: auto; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.crit { background: var(--crit); }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--crit); margin-left: 6px; box-shadow: 0 0 0 0 var(--crit); animation: pulse-crit 1.6s infinite; }

/* ============ Risk score ============ */
.risk-score { display: inline-flex; align-items: center; gap: 6px; }
.rs-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-bar { width: 56px; height: 4px; background: oklch(0.55 0.04 265 / 0.14); border-radius: 2px; overflow: hidden; }
.rs-fill { height: 100%; border-radius: 2px; }
.rs-max { font-size: 10px; color: var(--dim); }
.rs-ok .rs-num { color: var(--ok); } .rs-ok .rs-fill { background: var(--ok); }
.rs-warn .rs-num { color: var(--warn); } .rs-warn .rs-fill { background: var(--warn); }
.rs-crit .rs-num { color: var(--crit); } .rs-crit .rs-fill { background: var(--crit); }

/* ============ Exec Dashboard grid ============ */
.exec-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
}
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-12 { grid-column: span 12; }


/* Compliance exposure rollup v2 */
.cmp2-wrap { display: flex; flex-direction: column; gap: 2px; }
.cmp2-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-radius: 8px; min-width: 0;
}
.cmp2-row-click { cursor: pointer; }
.cmp2-row-click:hover { background: var(--line-soft, rgba(0,0,0,0.04)); }
.cmp2-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cmp2-name-row { display: flex; align-items: center; gap: 7px; }
.cmp2-name { font-size: 12.5px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.cmp2-desc { font-size: 10.5px; color: var(--muted); white-space: normal; line-height: 1.3; }
.cmp2-pill {
  display: inline-block; font-size: 9.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cmp2-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.cmp2-count { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
.cmp2-urgent { font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cmp2-agents { font-size: 10px; color: var(--muted); white-space: nowrap; }
.cmp2-clean-row { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 4px 2px; border-top: 1px dashed var(--line-soft, rgba(0,0,0,0.08)); margin-top: 4px; }
.cmp2-clean-pill { font-size: 10px; color: var(--ok); background: color-mix(in oklch, var(--ok) 10%, transparent); border: 1px solid color-mix(in oklch, var(--ok) 25%, transparent); border-radius: 20px; padding: 2px 8px; }

/* AI blast radius v2 */
.br2-wrap { display: flex; flex-direction: column; gap: 10px; }
.br2-scorecard { display: flex; align-items: stretch; gap: 1px; background: var(--line-soft, rgba(0,0,0,0.09)); border-radius: 10px; overflow: hidden; }
.br2-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 2px; padding: 10px 6px; background: var(--surface, var(--bg)); }
.br2-stat-num { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--fg); letter-spacing: -0.025em; }
.br2-stat-label { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; text-align: center; }
.br2-stat-sub { font-size: 10px; color: var(--muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.br2-cta {
  flex-shrink: 0; align-self: center; margin: 0 8px;
  background: transparent; border-radius: 8px; font-weight: 600; font-size: 12px;
  padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.br2-cta:hover { opacity: 0.75; }
.br2-envs { display: flex; flex-wrap: wrap; gap: 5px; }
.br2-env-pill { font-size: 11px; background: color-mix(in oklch, var(--warn) 10%, transparent); color: var(--warn); border: 1px solid color-mix(in oklch, var(--warn) 25%, transparent); border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.br2-env-n { font-weight: 700; }
.br2-tenants { display: flex; flex-direction: column; gap: 1px; }
.br2-tenants-head { display: grid; grid-template-columns: 90px 1fr 50px; gap: 8px; padding: 0 4px 4px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); border-bottom: 1px solid var(--line-soft, rgba(0,0,0,0.07)); margin-bottom: 2px; }
.br2-tenants-head span:last-child { text-align: right; }
.br2-tenant-row { display: grid; grid-template-columns: 90px 1fr 50px; align-items: center; gap: 8px; padding: 4px 4px; border-radius: 6px; }
.br2-tenant-row:hover { background: var(--line-soft, rgba(0,0,0,0.03)); }
.br2-tenant-name { font-size: 12px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br2-tenant-bar-wrap { position: relative; background: var(--line-soft, rgba(0,0,0,0.07)); border-radius: 4px; height: 7px; overflow: hidden; }
.br2-tenant-bar-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; background: oklch(0.72 0.13 240); transition: width .3s; }
.br2-tenant-total { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* Banner */
.exec-banner {
  grid-column: span 12;
  position: relative; overflow: hidden;
  border: 1px solid oklch(0.72 0.20 25 / 0.4);
  background: linear-gradient(135deg, oklch(0.32 0.13 25 / 0.25), oklch(0.22 0.03 265 / 0.6));
  border-radius: var(--r-lg);
  padding: 18px 22px;
  display: flex; align-items: center; gap: 18px;
}
.banner-pulse {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--crit), transparent);
  animation: scan 3s linear infinite;
}
@keyframes scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.banner-left { flex: 1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.banner-title {
  font-family: var(--font-display);
  font-weight: 500; font-size: 17px; letter-spacing: -0.018em; line-height: 1.25;
}
.banner-meta { display: flex; gap: 18px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; letter-spacing: -0.003em; }
.banner-meta span { display: inline-flex; align-items: center; gap: 6px; }
.banner-actions { display: flex; gap: 10px; }

/* KPIs */
.exec-kpis-header {
  grid-column: span 12;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: -4px;
}
.exec-export-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-1, #fff); color: var(--fg, #111827);
  border: 1px solid var(--line-soft, rgba(0,0,0,0.12));
  border-radius: 8px; font-weight: 600; font-size: 12.5px; padding: 7px 13px; cursor: pointer;
  transition: background .15s;
}
.exec-export-btn:hover { background: var(--line-soft, rgba(0,0,0,0.04)); }

/* Print / board-export — popup window handles layout; this is just a fallback for direct Cmd+P */
.print-only { display: none; }
@media print {
  .no-print, .sdb, .tweaks-panel, .page-actions, .app-bg,
  .card-action-link, .kpi-link-icon { display: none !important; }
  .print-only { display: block; }
  body, html { background: #fff !important; height: auto !important; overflow: visible !important; }
  .app-shell { display: block !important; height: auto !important; overflow: visible !important; }
  .main-area { display: block !important; overflow: visible !important; height: auto !important; }
  .screen-body { display: block !important; padding: 0 !important; }
  .exec-grid { display: block !important; }
  .exec-kpis { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 12px; margin-bottom: 16px; }
  .exec-cards { display: grid !important; }
  .exec-cards > * { break-inside: avoid; page-break-inside: avoid; }
  .exec-print-header { margin-bottom: 14px; }
  .exec-print-title { font-size: 20px; font-weight: 700; }
  .exec-print-sub { font-size: 12px; color: #555; margin-top: 2px; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}
.exec-kpis {
  grid-column: span 12;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.exec-cards {
  grid-column: span 12;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
  align-items: stretch;
}
.exec-cards .card { transition: transform .18s ease, opacity .18s ease, border-color .2s, box-shadow .25s; }
.exec-cards .card.draggable { cursor: grab; }
.exec-cards .card.draggable:active { cursor: grabbing; }
.exec-cards .card.dragging { opacity: 0.35; transform: scale(0.98); }
.exec-cards .card.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 40px oklch(0.72 0.13 245 / 0.18);
}
.kpi {
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow .2s, border-color .2s;
}
[data-theme="dark"] .kpi { backdrop-filter: blur(12px); box-shadow: none; }
.kpi-label {
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.02em; font-weight: 600; text-transform: uppercase;
  display: flex; align-items: center; gap: 4px;
}
.kpi-link-icon { opacity: 0; transition: opacity .15s; }
.kpi-clickable { cursor: pointer; transition: background .15s; }
.kpi-clickable:hover { background: oklch(0.55 0.04 265 / 0.06); }
.kpi-clickable:hover .kpi-link-icon { opacity: 0.6; }
.kpi-value-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.kpi-value {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kpi-big .kpi-value { font-size: 32px; }
.kpi-sub-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 6px; }
.kpi-sub { font-size: 11.5px; color: var(--muted); letter-spacing: -0.01em; line-height: 1.45; flex: 1; min-width: 0; }
.kpi-delta {
  flex-shrink: 0;
  font-size: 11px; font-weight: 600; letter-spacing: -0.01em;
  padding: 2px 6px; border-radius: 20px;
  white-space: nowrap;
}
.kpi-delta-good { background: oklch(0.88 0.10 155 / 0.22); color: oklch(0.42 0.16 155); }
.kpi-delta-bad  { background: oklch(0.90 0.12 25  / 0.20); color: oklch(0.50 0.20 25);  }
[data-theme="dark"] .kpi-delta-good { background: oklch(0.35 0.10 155 / 0.35); color: oklch(0.72 0.14 155); }
[data-theme="dark"] .kpi-delta-bad  { background: oklch(0.32 0.10 25  / 0.35); color: oklch(0.72 0.18 25);  }

/* Heatmap */
.heatmap { padding-top: 4px; }
.hm-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 16px; align-items: center; padding: 6px 0; border-radius: 4px; }
.hm-row-click { cursor: pointer; transition: background .15s; }
.hm-row-click:hover { background: oklch(0.55 0.04 265 / 0.06); }
.hm-label { font-size: 13px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: oklch(0.55 0.04 265 / 0.08); }
.hm-seg { display: flex; align-items: center; justify-content: center; transition: filter .15s; cursor: pointer; min-width: 0; }
.hm-seg:hover { filter: brightness(1.15); }
.hm-seg.ok   { background: oklch(0.52 0.13 160); }
.hm-seg.warn { background: oklch(0.64 0.14 65); }
.hm-seg.crit { background: oklch(0.58 0.16 25); }
.hm-empty { background: transparent; }
.hm-total { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-total-num { font-weight: 600; color: var(--fg-2); }
.hm-crit-pill { font-size: 10px; font-weight: 600; color: oklch(0.58 0.16 25); background: oklch(0.58 0.16 25 / 0.1); border-radius: 4px; padding: 1px 5px; }
.hm-legend { display: flex; gap: 18px; font-size: 11px; color: var(--muted); margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-soft); }

/* Pie chart variant of "Where the risk lives" */
.hm-pie-wrap { display: flex; align-items: center; gap: 24px; }
.hm-pie-svg { width: 160px; min-width: 160px; height: 160px; flex-shrink: 0; }
.hm-pie-legend { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: 200px; }
.hm-pie-legend-row { display: grid; grid-template-columns: 10px 1fr auto auto auto; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 5px; font-size: 12.5px; transition: background .12s; }
.hm-pie-legend-row--active { background: oklch(0.55 0.04 265 / 0.09); }
.hm-pie-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.hm-pie-dept { color: var(--fg-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; letter-spacing: -0.005em; }
.hm-pie-pct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 500; }
.hm-pie-count { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: -0.01em; }

/* Scatter */
.scatter-wrap { position: relative; }
.scatter-svg { width: 100%; height: auto; display: block; }
.scatter-legend { display: flex; gap: 18px; font-size: 11px; color: var(--muted); margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line-soft); }
.scatter-tip {
  position: absolute; right: 16px; top: 12px; padding: 8px 12px;
  background: oklch(0.18 0.03 265 / 0.95); border: 1px solid var(--line);
  border-radius: var(--r-sm); border-left-width: 3px;
  font-size: 11.5px; min-width: 200px;
}
.st-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.st-host { color: var(--muted); margin-top: 2px; font-size: 11px; }

/* Sankey */
/* Sankey */
@keyframes sk-flow-in {
  from { opacity: 0; transform: scaleX(0.92); }
  to   { opacity: 1; transform: scaleX(1); }
}
.sankey-wrap { padding-top: 2px; }
.sankey-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sankey-svg path[id^="sk-flow-"] { transition: opacity .18s; }
.sankey-mounted .sankey-svg { animation: sk-flow-in 0.45s cubic-bezier(0.22,1,0.36,1) both; }
.sankey-callout {
  margin-top: 10px; padding: 10px 12px;
  background: oklch(0.72 0.20 25 / 0.08); border: 1px solid oklch(0.72 0.20 25 / 0.28);
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: normal;
  font-size: 11.5px; color: var(--fg); border-radius: var(--r-sm);
  line-height: 1.5;
}
.sankey-callout > svg { flex: 0 0 auto; }
.sankey-callout-text { flex: 1 1 auto; }

/* Sankey insight strip */
.sankey-insights {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 4px; padding: 7px 10px;
  background: oklch(0.55 0.04 265 / 0.04);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
}
.sk-insight {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--fg-2); line-height: 1.45;
}
.sk-insight-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ins-color, var(--muted));
  flex-shrink: 0;
  box-shadow: 0 0 4px var(--ins-color, transparent);
}
.sk-insight-text { flex: 1; }

/* Behavior list */
.behavior-list { display: flex; flex-direction: column; gap: 6px; }
.bh { border-radius: 6px; padding: 10px 12px; border-left: 3px solid transparent; background: oklch(0.55 0.04 265 / 0.04); }
.bh-click { cursor: pointer; transition: background .15s; }
.bh-click:hover { background: oklch(0.55 0.04 265 / 0.1); }
.bh-main { display: flex; align-items: center; gap: 10px; }
.bh-body { flex: 1; min-width: 0; }
.bh-label { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.bh-sev { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; opacity: 0.85; }
.bh-agents { font-size: 11px; color: var(--muted); }
.bh-count { font-size: 26px; font-weight: 700; font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; flex-shrink: 0; }

/* Agent-by-tool distribution card */
.tool-dist { padding-top: 4px; }
.td-total { font-size: 24px; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.03em; margin-bottom: 12px; }
.td-total span { font-size: 12px; color: var(--muted); font-family: var(--font-body); letter-spacing: 0; margin-left: 4px; }
.td-row { display: grid; grid-template-columns: 130px 1fr 36px; gap: 8px; align-items: center; padding: 5px 4px; border-radius: 4px; }
.td-row-click { cursor: pointer; transition: background .15s; }
.td-row-click:hover { background: oklch(0.55 0.04 265 / 0.06); }
.td-name { font-size: 12px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-bar { height: 8px; border-radius: 4px; overflow: hidden; background: oklch(0.55 0.04 265 / 0.06); }
.td-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.td-count { font-size: 12px; color: var(--fg-2); text-align: right; font-variant-numeric: tabular-nums; }

/* Top users */
.top-users { display: flex; flex-direction: column; gap: 1px; padding-top: 2px; }
.tu-row { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 6px; cursor: pointer; transition: background .15s; }
.tu-row:hover { background: oklch(0.55 0.04 265 / 0.07); }
.tu-av { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--fg-1); flex-shrink: 0; }
.tu-id { min-width: 0; }
.tu-name { font-size: 13px; font-weight: 500; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.008em; }
.tu-dept { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tu-sess { font-size: 11px; color: var(--muted); white-space: nowrap; text-align: right; }

/* Risk snapshot */
.risk-snapshot { padding-top: 2px; }
.rs-total { font-size: 28px; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.03em; margin-bottom: 16px; }
.rs-total span { font-size: 12px; color: var(--muted); font-family: var(--font-body); letter-spacing: 0; margin-left: 4px; }
.rs-row { display: grid; grid-template-columns: 58px 1fr 32px 36px; gap: 8px; align-items: center; padding: 5px 4px; border-radius: 4px; cursor: pointer; transition: background .15s; }
.rs-row:hover { background: oklch(0.55 0.04 265 / 0.06); }
.rs-label { font-size: 12px; color: var(--fg-2); }
.rs-bar { height: 8px; border-radius: 4px; overflow: hidden; background: oklch(0.55 0.04 265 / 0.06); }
.rs-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.rs-num { font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rs-pct { font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Exposure pulse */
.exposure-pulse { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.ep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.ep-stat { }
.ep-v { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--fg); }
.ep-l { font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 4px; letter-spacing: -0.003em; }
.ep-bar-wrap { }
.ep-bar-label { font-size: 10px; font-weight: 700; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.07em; }
.ep-bar { height: 6px; border-radius: 3px; overflow: hidden; display: flex; }
.ep-bar-fill { height: 100%; transition: width 0.4s ease; }
.ep-tool { background: oklch(0.70 0.16 240); }
.ep-human { background: oklch(0.55 0.04 265 / 0.25); }
.ep-bar-legend { display: flex; gap: 14px; font-size: 11px; margin-top: 6px; color: var(--muted); font-weight: 500; }

/* Trend */
.trend-svg { width: 100%; height: auto; display: block; }
.trend-legend { display: flex; gap: 18px; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 8px; align-items: center; }
.trend-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px; text-align: center; color: var(--muted); }
.trend-empty-icon { opacity: 0.3; }
.trend-empty-title { font-size: 14px; font-weight: 500; color: var(--fg-2); }
.trend-empty-sub { font-size: 12px; max-width: 340px; line-height: 1.6; }

/* AutonomyTrend stat summary row */
.at-stats { display: flex; align-items: center; gap: 0; margin-bottom: 2px; }
.at-stat { display: flex; flex-direction: column; gap: 1px; padding: 6px 16px 6px 0; }
.at-stat:first-child { padding-left: 0; }
.at-stat-val { font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
.at-stat-lbl { font-size: 11px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.at-stat-delta { font-size: 10.5px; font-weight: 600; opacity: 0.9; }
.at-stat-div { width: 1px; height: 28px; background: var(--line-soft); margin: 0 16px 0 0; flex-shrink: 0; }

/* Formula card */
.formula { padding-top: 4px; }
.formula-header { margin-bottom: 12px; }
.formula-title { font-size: 12px; color: var(--muted); }
.formula-sub { font-family: var(--font-mono); font-size: 11px; color: var(--dim); margin-top: 2px; }
.formula-eq {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.formula-eq .fp-plus { display: none; }
.formula-total {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-soft);
}
.fp { min-width: 0; }
.fp-hint { overflow-wrap: anywhere; }
.fp {
  background: oklch(0.55 0.04 265 / 0.06); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 8px 10px;
}
.fp-ok { border-color: oklch(0.78 0.14 165 / 0.3); }
.fp-warn { border-color: oklch(0.82 0.16 75 / 0.3); }
.fp-crit { border-color: oklch(0.72 0.20 25 / 0.4); background: oklch(0.72 0.20 25 / 0.06); }
.fp-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.fp-score { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fp-score span { font-size: 11px; color: var(--dim); margin-left: 2px; }
.fp-hint { font-size: 10px; color: var(--muted); margin-top: 2px; }
.fp-plus, .fp-eq { text-align: center; color: var(--dim); font-size: 14px; font-weight: 300; }
.fp-total { text-align: center; }
.fp-tnum { font-size: 32px; font-weight: 700; color: var(--crit); line-height: 1; }
.fp-tmax { font-size: 10px; color: var(--crit); letter-spacing: 0.08em; }
.formula-foot { margin-top: 14px; font-size: 11px; color: var(--muted); padding-top: 12px; border-top: 1px dashed var(--line-soft); }

/* ============ Sources Panel ============ */
.src-wrap { padding-top: 4px; }
.src-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.src-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.src-chip {
  padding: 5px 11px; border-radius: 999px;
  background: oklch(0.55 0.04 265 / 0.05);
  border: 1px solid var(--line-soft);
  color: var(--fg-2); font-size: 11.5px; letter-spacing: -0.003em;
  cursor: pointer; transition: all .15s;
  font-family: inherit;
}
.src-chip:hover { color: var(--fg); border-color: oklch(0.55 0.014 260 / 0.25); }
.src-chip.on {
  background: oklch(0.72 0.13 245 / 0.14);
  border-color: oklch(0.72 0.13 245 / 0.4);
  color: var(--fg);
}
.src-sort { display: flex; align-items: center; gap: 4px; }
.src-sort-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 6px; }
.src-sort-btn {
  padding: 5px 10px; border-radius: 6px;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); font-size: 11.5px; cursor: pointer; font-family: inherit;
}
.src-sort-btn:hover { color: var(--fg-2); }
.src-sort-btn.on { color: var(--fg); border-color: var(--line-soft); background: oklch(0.55 0.04 265 / 0.06); }

.src-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 1300px) { .src-grid { grid-template-columns: repeat(3, 1fr); } }

.src-card {
  position: relative;
  background: oklch(0.55 0.04 265 / 0.04);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .18s, background .18s, transform .18s;
}
.src-card:hover { border-color: oklch(0.55 0.014 260 / 0.28); background: oklch(0.55 0.04 265 / 0.07); }
.src-card.risk-critical { border-color: oklch(0.62 0.18 25 / 0.32); }
.src-card.risk-critical::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--crit); border-radius: var(--r-md) var(--r-md) 0 0;
  opacity: 0.85;
}

.src-card-top { display: flex; align-items: flex-start; gap: 10px; }
.src-glyph {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: oklch(0.55 0.04 265 / 0.08);
  color: var(--fg);
  border: 1px solid var(--line-soft);
}
.src-meta { flex: 1; min-width: 0; }
.src-name {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500; color: var(--fg);
  letter-spacing: -0.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.src-cat { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.src-risk-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 4px; flex: 0 0 7px; }

.src-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.src-stat { text-align: center; }
.src-stat-v {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 500; color: var(--fg);
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
}
.src-stat-l { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.src-perm {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em;
}
.src-perm.perm-rw { background: oklch(0.78 0.16 75 / 0.16); color: var(--warn); }
.src-perm.perm-ro { background: oklch(0.55 0.04 265 / 0.12); color: var(--fg-2); }
.src-perm.perm-mixed { background: oklch(0.72 0.13 245 / 0.16); color: var(--accent); }

.src-foot {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--fg-2);
  letter-spacing: -0.003em;
}
.src-spark { flex: 0 0 64px; opacity: 0.7; }
.src-note { flex: 1; min-width: 0; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============ Inventory ============ */
.inv-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.inv-toolbar {
  grid-column: span 12;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--glass-bg); border: 1px solid var(--glass-stroke);
  border-radius: var(--r-sm); padding: 8px 12px;
  min-width: 280px; color: var(--muted);
}
.search input {
  background: transparent; border: 0; outline: 0; color: var(--fg); font: inherit; font-size: 12.5px;
  flex: 1;
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  background: oklch(0.55 0.04 265 / 0.06);
  border: 1px solid var(--line-soft); color: var(--fg-2);
  padding: 6px 11px; border-radius: 999px; font: inherit; font-size: 11.5px;
  cursor: pointer; transition: all .15s;
}
.chip:hover { border-color: var(--line); color: var(--fg); }
.chip-on { background: oklch(0.55 0.16 250 / 0.18); border-color: oklch(0.65 0.18 250 / 0.5); color: var(--fg); }
.inv-stats { color: var(--muted); font-size: 11.5px; margin-left: auto; }

/* MCP Matrix */
.mcp-matrix-card .card-body { padding-top: 4px; }
.mcp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mcp-card {
  background: oklch(0.55 0.04 265 / 0.05); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 12px;
}
.mcp-card.mcp-critical { background: oklch(0.72 0.20 25 / 0.06); border-color: oklch(0.72 0.20 25 / 0.3); }
.mcp-card.mcp-elevated { border-color: oklch(0.82 0.16 75 / 0.25); }
.mcp-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mcp-name { flex: 1; font-family: var(--font-display); font-size: 12.5px; font-weight: 500; color: var(--fg); letter-spacing: -0.005em; }
.mcp-stat { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.mcp-stat > div:first-child { display: flex; justify-content: space-between; align-items: baseline; }
.mcp-stat b { font-size: 16px; }
.mcp-desc { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.mcp-bar { height: 3px; background: oklch(0.55 0.04 265 / 0.1); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.mcp-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 2px; }
.mcp-critical .mcp-fill { background: linear-gradient(90deg, var(--warn), var(--crit)); }
.mcp-elevated .mcp-fill { background: linear-gradient(90deg, var(--accent), var(--warn)); }
.mcp-card-clickable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.mcp-card-clickable:hover { border-color: var(--accent); background: oklch(0.55 0.04 265 / 0.10); }
.mcp-card-open { border-color: var(--accent) !important; background: oklch(0.22 0.014 260 / 0.8) !important; grid-column: span 2; }
.mcp-drawer { margin-top: 0; }
.ppl-identity { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.mcp-users-list { display: flex; flex-wrap: wrap; gap: 5px; }

/* ── Drawer 2-column body ──────────────────────────────────────────────────── */
.mcp-drawer-body { display: flex; gap: 0; min-height: 0; }
.mcp-drawer-left { width: 220px; min-width: 180px; flex-shrink: 0; padding: 14px 16px; border-right: 1px solid var(--line-soft); }
.mcp-drawer-right { flex: 1; min-width: 0; padding: 14px 16px; }

/* Panel label — small muted section header */
.mcp-dpanel-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 8px;
  display: flex; align-items: center;
}

/* Key-value rows in left panel */
.mcp-dpanel-rows { display: flex; flex-direction: column; gap: 6px; }
.mcp-drow { display: flex; align-items: baseline; gap: 10px; }
.mcp-drow-url { align-items: center; }
/* Key column auto-sizes to its label (was a fixed 62px that clipped longer keys
   like "Configured on", overlapping the value). Min-width keeps values aligned. */
.mcp-dkey { font-size: 11px; color: var(--fg-3); min-width: 84px; flex-shrink: 0; white-space: nowrap; }
.mcp-dval { font-size: 12px; color: var(--fg-1); display: flex; align-items: center; min-width: 0; flex: 1; }
.mcp-dval-url { font-size: 10px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; display: block; }

/* User list in left panel */
.mcp-dusers { display: flex; flex-direction: column; gap: 5px; }
.mcp-duser-row { display: flex; align-items: center; gap: 7px; min-width: 0; }

/* ── Editable trust status ── */
.mcp-trust-btn {
  display: inline-flex; align-items: center; gap: 2px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 2px 6px; margin: -2px -6px; cursor: pointer; font-family: inherit;
  transition: background 0.1s, border-color 0.1s;
}
.mcp-trust-btn:hover { background: var(--bg-2); border-color: var(--line); }
.mcp-trust-btn-open { background: var(--bg-2); border-color: var(--line); }
.mcp-trust-btn:disabled { opacity: 0.5; cursor: wait; }
.mcp-trust-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 4px; min-width: 150px;
}
.mcp-trust-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: none; border-radius: 5px;
  padding: 7px 9px; font-size: 12px; color: var(--fg-1); cursor: pointer;
  font-family: inherit; text-align: left;
}
.mcp-trust-opt:hover { background: var(--bg-2); }
.mcp-trust-opt:disabled { opacity: 0.5; cursor: wait; }
.mcp-trust-err { font-size: 10.5px; color: var(--crit); padding: 4px 9px 2px; }

/* ── Per-user MCP configuration (full-width section under the drawer body) ── */
.mcp-cfg-section { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.mcp-cfg-list { display: flex; flex-direction: column; gap: 4px; }
.mcp-cfg-row { border: 1px solid var(--line); border-radius: 6px; background: var(--bg-1); overflow: hidden; }
.mcp-cfg-row-open { border-color: var(--accent); }
.mcp-cfg-head {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; cursor: pointer;
  min-width: 0;
}
.mcp-cfg-head:hover { background: var(--bg-2); }
.mcp-cfg-avatar {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff;
}
.mcp-cfg-user { font-size: 12px; color: var(--fg-1); font-weight: 500; flex-shrink: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-cfg-chip {
  font-size: 10px; color: var(--fg-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 6px; flex-shrink: 0; white-space: nowrap;
  display: inline-flex; align-items: center; text-transform: lowercase;
}
.mcp-cfg-url {
  font-size: 10px; color: var(--dim); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; flex: 1;
}
.mcp-cfg-json {
  margin: 0; padding: 10px 12px; font-size: 11px; line-height: 1.5;
  color: var(--fg-2); background: var(--bg-0, #0d1117); border-top: 1px solid var(--line);
  white-space: pre; overflow-x: auto;
}

/* Tool grid in right panel */
.mcp-tool-grid { display: flex; flex-direction: column; gap: 2px; }
.mcp-tgrow {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 6px; margin: 0 -6px; border-radius: 5px;
  min-width: 0;
}
.mcp-tgrow-click { cursor: pointer; transition: background 0.1s; }
.mcp-tgrow-click:hover { background: var(--bg-3); }
.mcp-tgrow-open { background: var(--bg-3); }
.mcp-tgrow-users { margin: 2px 0 4px 30px; display: flex; flex-direction: column; gap: 4px; }

/* ── MCP row-table (McpMatrix) — theme-aware ─────────────────────────────── */
.mcpt-root { display: flex; flex-direction: column; gap: 0; }

/* Filter bar */
.mcpt-filterbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 11px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-sm) var(--r-sm) 0 0;
  border-bottom: none;
}
/* Divider no longer needed — segmented groups self-separate. Hidden but kept
   so existing markup doesn't leave gaps. */
.mcpt-filter-divider { display: none; }
.mcpt-filterbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.mcpt-filter-group { display: flex; align-items: center; gap: 7px; }
.mcpt-filter-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
/* Segmented control: one inset track per group; chips are borderless segments. */
.mcpt-filter-chips {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px;
}
.mcpt-fchip {
  font-size: 11px; font-weight: 500; padding: 4px 11px; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--fg-2);
  border: 1px solid transparent; transition: background 0.12s, color 0.12s, box-shadow 0.12s;
  font-family: inherit; white-space: nowrap;
}
.mcpt-fchip:hover { color: var(--fg); }
.mcpt-fchip-on {
  background: var(--bg-2); color: var(--accent); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 0 0 1px oklch(0.50 0.16 250 / 0.30);
}
.mcpt-fchip-risk-high.mcpt-fchip-on    { color: oklch(0.52 0.20 25);  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 0 0 1px oklch(0.60 0.20 25 / 0.40); }
.mcpt-fchip-risk-med.mcpt-fchip-on     { color: oklch(0.52 0.18 55);  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 0 0 1px oklch(0.65 0.18 55 / 0.45); }
.mcpt-fchip-risk-healthy.mcpt-fchip-on { color: oklch(0.46 0.18 145); box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 0 0 1px oklch(0.60 0.18 145 / 0.40); }
/* Clear is a standalone text button, not part of a segmented track. */
.mcpt-fchip-clear {
  color: var(--muted); background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 4px 9px; font-size: 11px; cursor: pointer; font-family: inherit;
}
.mcpt-fchip-clear:hover { color: var(--accent); background: oklch(0.50 0.16 250 / 0.08); border-color: oklch(0.50 0.16 250 / 0.25); }
.mcpt-filter-toggle { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-2); cursor: pointer; white-space: nowrap; }
.mcpt-filter-toggle input { accent-color: var(--accent); cursor: pointer; }
.mcpt-filter-num {
  width: 54px; background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 7px; font-size: 11.5px; color: var(--fg); outline: none; font-family: inherit;
}
.mcpt-filter-num:focus { border-color: var(--accent); box-shadow: 0 0 0 2px oklch(0.50 0.16 250 / 0.12); }
.mcpt-filter-count {
  font-size: 11px; color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-weight: 500;
}
/* Search */
.mcpt-filter-search-wrap { position: relative; display: flex; align-items: center; }
.mcpt-search-icon { position: absolute; left: 7px; width: 12px; height: 12px; color: var(--muted); pointer-events: none; }
.mcpt-filter-search {
  width: 140px; background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 22px 3px 24px; font-size: 11px; color: var(--fg); outline: none; font-family: inherit;
  transition: border-color 0.1s, box-shadow 0.1s, width 0.15s;
}
.mcpt-filter-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px oklch(0.50 0.16 250 / 0.12); width: 180px; }
.mcpt-filter-search::placeholder { color: var(--muted); }
.mcpt-search-clear { position: absolute; right: 5px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.mcpt-search-clear:hover { color: var(--fg-2); }

/* Table wrapper */
.mcpt-table-wrap {
  border: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm);
  overflow: auto; background: var(--bg-1);
}
.mcpt-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  table-layout: fixed; font-size: 12px; min-width: 900px;
}

/* Sticky header */
.mcpt-thead-row { position: sticky; top: 0; z-index: 2; background: var(--bg-2); }
.mcpt-th {
  padding: 9px 12px; text-align: left; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none;
}
.mcpt-th-num { text-align: right; padding-right: 14px; }

/* Data rows */
.mcpt-row { transition: background 0.1s; }
.mcpt-row-clickable { cursor: pointer; }
.mcpt-row-clickable:hover { background: var(--bg-2); }
.mcpt-row-open { background: var(--bg-2) !important; }
.mcpt-td {
  padding: 0 12px; vertical-align: middle;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  height: 56px;
}
/* Tool Permissions stacks vertically */
.mcpt-td-perms {
  vertical-align: middle; white-space: normal; overflow: visible;
  padding-top: 8px; padding-bottom: 8px; height: auto; min-height: 56px;
}
.mcpt-td-num { text-align: right; padding-right: 16px; color: var(--fg-1); font-weight: 500; font-variant-numeric: tabular-nums; }
.mcpt-td-time { color: var(--muted); font-size: 11px; }

/* Name cell */
.mcpt-name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mcpt-name-text {
  font-family: var(--font-display); font-size: 13px;
  font-weight: 600; color: var(--fg); letter-spacing: -0.008em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.mcpt-td-name { height: auto !important; padding-top: 10px !important; padding-bottom: 10px !important; }

/* Dormant ("not in use") server badge */
.mcpt-dormant-badge {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 9px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px;
  color: var(--muted);
  background: oklch(0.55 0.02 260 / 0.10);
  border: 1px solid oklch(0.55 0.02 260 / 0.25);
  white-space: nowrap;
}
[data-theme="dark"] .mcpt-dormant-badge {
  color: var(--fg-3);
  background: oklch(0.70 0.02 260 / 0.10);
  border-color: oklch(0.70 0.02 260 / 0.22);
}

/* Tool strip row */
.mcpt-strip-row > td.mcpt-td-strip {
  border-bottom: 1px solid var(--line-soft) !important;
  padding: 6px 12px 10px !important;
  background: var(--bg-2);
}

/* Tool chips strip */
.mcpt-strip {
  display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto;
  padding: 2px 0; scrollbar-width: thin;
}
.mcpt-strip::-webkit-scrollbar { height: 3px; }
.mcpt-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.mcpt-chip {
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 4px; border: 1px solid; white-space: nowrap;
  cursor: pointer; flex-shrink: 0; transition: filter 0.1s;
}
.mcpt-chip:hover { filter: brightness(0.92); }
[data-theme="dark"] .mcpt-chip:hover { filter: brightness(1.18); }

/* Drawer row */
.mcpt-drawer-row td {
  background: var(--bg-2); padding: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
.mcpt-drawer {
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
  border-top: 1px solid var(--line-soft);
}

/* Inventory table */
.inv-table { font-size: 12px; }
.invh, .invr {
  display: grid;
  grid-template-columns: 200px 130px 160px 200px 1fr 100px 80px 24px;
  gap: 12px; align-items: center;
  padding: 10px 18px;
}
.invh { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--line-soft); }
.invr { border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .12s; }
.invr:hover { background: oklch(0.55 0.04 265 / 0.05); }
.invr.invr-open { background: oklch(0.55 0.16 250 / 0.06); }
.invr.invr-crit { background: oklch(0.72 0.20 25 / 0.05); }
.invr.invr-crit:hover { background: oklch(0.72 0.20 25 / 0.1); }
.invc-host { display: flex; align-items: center; gap: 10px; min-width: 0; }
.host-avatar {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, oklch(0.55 0.16 250), oklch(0.55 0.20 290));
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600; color: white; flex-shrink: 0;
}
.host-name { font-weight: 500; }
.host-meta { font-size: 10.5px; color: var(--muted); }
.dest-cell { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.dest-cell.dest-public { color: var(--crit); }
.dest-cell.dest-corp { color: var(--accent); }
.dest-cell.dest-local { color: var(--ok); }
.mcp-cell { min-width: 0; }
.mcp-stack { display: flex; gap: 4px; flex-wrap: wrap; }
.mcp-tag {
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 4px; padding: 2px 6px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-1);
}
[data-theme="dark"] .mcp-tag {
  background: oklch(0.55 0.04 265 / 0.12); border-color: var(--line-soft);
  color: var(--fg-2);
}
.mcp-tag.mcp-rw { color: var(--warn); border-color: oklch(0.82 0.16 75 / 0.3); }
.mcp-tag.mcp-crit { color: var(--crit); border-color: oklch(0.72 0.20 25 / 0.4); background: oklch(0.72 0.20 25 / 0.08); }
.invc-chev { color: var(--dim); transition: transform .15s; }
.invr-open .invc-chev { transform: rotate(90deg); color: var(--accent); }

.invx {
  padding: 18px 22px 22px; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, oklch(0.55 0.04 265 / 0.05), oklch(0.55 0.04 265 / 0.02));
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
}
.invx-section { }
.invx-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.invx-count {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line);
  font-size: 9.5px; letter-spacing: 0.04em;
}
[data-theme="dark"] .invx-count {
  background: oklch(0.55 0.04 265 / 0.14); border-color: var(--line-soft); color: var(--fg-2);
}

/* Header strip */
.invx-headstrip {
  display: flex; align-items: stretch; gap: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.invx-hs-block {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 18px;
  flex: 0 0 auto; min-width: 100px;
}
.invx-hs-block.invx-hs-flex { flex: 1; min-width: 160px; }
.invx-hs-block:first-child { padding-left: 0; }
.invx-hs-divider { width: 1px; background: var(--line-soft); align-self: stretch; }
.invx-hs-l { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.invx-hs-v {
  font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--fg);
  letter-spacing: -0.012em; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.invx-hs-num { font-size: 22px; font-weight: 500; letter-spacing: -0.025em; }
.invx-hs-num.crit { color: var(--crit); }
.invx-hs-num.warn { color: var(--warn); }
.invx-hs-num.ok { color: var(--ok); }
.invx-hs-of { color: var(--dim); font-size: 13px; }

/* Risk breakdown bar */
.rb-bar {
  display: flex; height: 32px; border-radius: 8px; overflow: hidden;
  background: oklch(0.55 0.04 265 / 0.06);
  border: 1px solid var(--line-soft);
  margin-bottom: 12px;
}
.rb-seg {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0 8px;
  font-family: var(--font-display);
  font-size: 10.5px; letter-spacing: -0.003em;
  position: relative;
  border-right: 1px solid oklch(0 0 0 / 0.3);
  min-width: 0; overflow: hidden;
}
.rb-seg:last-child { border-right: none; }
.rb-seg.rb-empty { background: transparent; border: none; }
.rb-seg-l { color: var(--fg); font-weight: 500; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rb-seg-s { color: oklch(1 0 0 / 0.7); font-size: 9px; line-height: 1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rb-crit { background: oklch(0.55 0.18 25 / 0.55); }
.rb-warn { background: oklch(0.62 0.16 75 / 0.55); }
.rb-ok   { background: oklch(0.55 0.13 160 / 0.45); }

.rb-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rb-leg-item {
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 6px;
  padding: 6px 10px;
  background: oklch(0.55 0.04 265 / 0.05);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  min-width: 0;
}
.rb-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.rb-dot.rb-crit { background: oklch(0.65 0.18 25); }
.rb-dot.rb-warn { background: oklch(0.72 0.16 75); }
.rb-dot.rb-ok   { background: oklch(0.7 0.13 160); }
.rb-leg-l { font-size: 11px; color: var(--fg-2); white-space: nowrap; }
.rb-leg-d { font-size: 11px; color: var(--muted); letter-spacing: -0.003em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Two-column body */
.invx-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.invx-rightcol { display: flex; flex-direction: column; gap: 16px; }

/* Activity feed */
.live-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--crit); animation: pulse 1.8s infinite; box-shadow: 0 0 0 0 var(--crit); }
.invx-activity {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: oklch(0.55 0.04 265 / 0.04);
  overflow: hidden;
}
.inv-act {
  display: grid; grid-template-columns: 56px 12px 1fr; gap: 10px; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.inv-act:last-child { border-bottom: none; }
.inv-act-time {
  font-family: var(--font-display);
  font-size: 11px; color: var(--muted);
  letter-spacing: -0.003em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.inv-act-dot { width: 8px; height: 8px; border-radius: 50%; }
.inv-act-body { min-width: 0; }
.inv-act-ev { font-size: 12.5px; font-weight: 500; color: var(--fg); letter-spacing: -0.005em; line-height: 1.25; }
.inv-act-detail { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.3; letter-spacing: -0.003em; }
.inv-act-crit { background: oklch(0.55 0.18 25 / 0.04); }

/* Sources chips */
.invx-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-src-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px 5px 6px;
  background: oklch(0.55 0.04 265 / 0.06);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: -0.003em;
}
.inv-src-glyph {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: oklch(0.55 0.04 265 / 0.18);
  color: var(--fg);
}
.inv-src-glyph svg { width: 12px; height: 12px; }
.inv-src-n { color: var(--fg); font-weight: 500; }
.inv-src-perm {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  padding: 1px 5px; border-radius: 3px;
  background: oklch(0.55 0.04 265 / 0.18);
  color: var(--fg-2);
  letter-spacing: 0.05em;
}
.inv-src-chip.perm-rw .inv-src-perm { background: oklch(0.78 0.16 75 / 0.2); color: var(--warn); }
.inv-src-chip.perm-rw { border-color: oklch(0.82 0.16 75 / 0.25); }

/* Identities */
.invx-identities { display: flex; flex-direction: column; gap: 5px; }
.inv-id {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: oklch(0.55 0.04 265 / 0.05);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  letter-spacing: -0.003em;
}
.inv-id-l { color: var(--fg); font-weight: 500; }
.inv-id-s { color: var(--muted); font-size: 10.5px; }
.inv-id.inv-id-crit { border-color: oklch(0.72 0.20 25 / 0.4); background: oklch(0.72 0.20 25 / 0.06); }
.inv-id.inv-id-crit .inv-id-l { color: var(--crit); }
.inv-id.inv-id-warn { border-color: oklch(0.82 0.16 75 / 0.3); }

.invx-actions {
  display: flex; gap: 10px; align-items: center;
  padding-top: 14px; border-top: 1px dashed var(--line-soft);
}
.invx-actions-spacer { flex: 1; }
.invx-actions > .btn { margin-left: 0; }
.invx-actions > .btn.primary { /* push right via spacer */ }
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cap {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: oklch(0.55 0.04 265 / 0.06); border: 1px solid var(--line-soft);
  font-size: 11.5px;
}
.cap span:first-of-type { flex: 1; }
.cap-on { color: var(--warn); border-color: oklch(0.82 0.16 75 / 0.3); }
.cap-on:has(:nth-child(3)) { color: var(--crit); }
.cap-off { color: var(--dim); }

.mcp-drawer { display: flex; flex-direction: column; gap: 6px; }
.mcp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  background: oklch(0.55 0.04 265 / 0.06); border: 1px solid var(--line-soft);
  font-size: 11.5px;
}
.mcp-row-name { flex: 1; font-family: var(--font-display); font-size: 12.5px; font-weight: 500; color: var(--fg); letter-spacing: -0.005em; }
.mcp-row-rw { border-color: oklch(0.82 0.16 75 / 0.25); }
.mcp-row-crit { border-color: oklch(0.72 0.20 25 / 0.4); background: oklch(0.72 0.20 25 / 0.06); }
.invx-actions {
  grid-column: span 2;
  display: flex; gap: 10px; align-items: center;
  padding-top: 12px; border-top: 1px dashed var(--line-soft);
}
.invx-actions > .btn { margin-left: auto; }
.invx-actions > .btn:not(:last-child) { margin-left: 0; }
.invx-actions > .btn.primary { margin-left: auto; }

/* ============ Tool Intel ============ */
.invx-intel { display: flex; flex-direction: column; gap: 14px; }
.intel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.intel-item { display: flex; flex-direction: column; gap: 2px; background: var(--surface2); border-radius: 6px; padding: 8px 10px; }
.intel-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.intel-v { font-size: 12.5px; font-weight: 500; color: var(--fg); }
.intel-sub-h { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.intel-teams, .intel-mcp-tokens, .intel-extensions, .intel-plugins { display: flex; flex-direction: column; gap: 4px; }
.intel-team-row, .intel-token-row, .intel-ext-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.intel-team-row:last-child, .intel-token-row:last-child, .intel-ext-row:last-child { border-bottom: none; }
.intel-team-name, .intel-token-server { font-weight: 500; color: var(--fg); flex: 1; }
.intel-plugin-list { display: flex; flex-wrap: wrap; gap: 5px; }
.intel-plugin-chip { font-size: 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; color: var(--muted); }

/* ============ Investigation ============ */
.inv-view { display: flex; flex-direction: column; gap: 16px; }
.iv-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.iv-header-l { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.iv-actions { display: flex; gap: 8px; }

.iv-headline {
  background: linear-gradient(135deg, oklch(0.32 0.13 25 / 0.18), oklch(0.22 0.03 265 / 0.6));
  border: 1px solid oklch(0.72 0.20 25 / 0.3);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  display: flex; justify-content: space-between; gap: 24px;
  align-items: center;
}
.iv-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500; letter-spacing: -0.028em; line-height: 1.15;
}
.iv-meta { display: flex; gap: 18px; color: var(--muted); font-size: 12.5px; margin-top: 8px; flex-wrap: wrap; letter-spacing: -0.003em; }
.iv-meta span { display: inline-flex; align-items: center; gap: 6px; }
.iv-score { flex-shrink: 0; }

.rsb {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 16px; row-gap: 4px;
  align-items: center;
}
.rsb-num {
  font-family: var(--font-display);
  font-size: 68px; font-weight: 300; color: var(--crit); line-height: 1;
  grid-row: span 2; font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
}
.rsb-num span { font-size: 18px; color: var(--muted); margin-left: 6px; font-weight: 400; letter-spacing: -0.01em; }
.rsb-label { font-size: 11px; color: var(--crit); letter-spacing: 0.1em; }
.rsb-pieces { display: flex; gap: 6px; }
.rsb-piece { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rsb-pip {
  width: 22px; height: 22px; border-radius: 6px;
  font-size: 11px; font-weight: 600; color: white;
  display: flex; align-items: center; justify-content: center;
}
.rsb-1 { background: var(--ok); }
.rsb-2 { background: var(--warn); }
.rsb-3 { background: var(--crit); }
.rsb-pl { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

.iv-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }

.iv-tabs {
  display: flex; gap: 2px; padding: 8px 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.iv-tab {
  background: transparent; border: 0; color: var(--muted);
  padding: 9px 14px; font: inherit; font-size: 12px; cursor: pointer;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
}
.iv-tab:hover { color: var(--fg); }
.iv-tab-on { color: var(--fg); background: oklch(0.55 0.16 250 / 0.08); }
.iv-tab-on::after {
  content: ""; position: absolute; bottom: -1px; left: 8px; right: 8px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.iv-tab-body { padding: 18px; }

/* Process tree */
.tree-wrap { width: 100%; overflow-x: auto; padding: 4px 0 8px; }
.tree-svg { display: block; height: auto; max-width: 100%; }
.tnode { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; color: var(--fg); }
.tnode-ic {
  width: 24px; height: 24px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: oklch(0.55 0.014 260 / 0.18);
}
.tnode-agent { background: oklch(0.55 0.20 290 / 0.3); color: oklch(0.85 0.16 290); }
.tnode-mcp { background: oklch(0.55 0.16 250 / 0.3); color: oklch(0.85 0.14 250); }
.tnode-fileread { background: oklch(0.55 0.13 160 / 0.22); color: oklch(0.85 0.11 160); }
.tnode-network { background: oklch(0.55 0.18 25 / 0.22); color: oklch(0.85 0.16 25); }
.tnode-secret { background: oklch(0.55 0.14 75 / 0.22); color: oklch(0.85 0.13 75); }
.tnode-repo   { background: oklch(0.55 0.13 245 / 0.22); color: oklch(0.85 0.12 245); }
.tnode-bucket { background: oklch(0.55 0.13 160 / 0.22); color: oklch(0.85 0.11 160); }
.tnode-saas   { background: oklch(0.55 0.13 270 / 0.22); color: oklch(0.85 0.12 270); }
.tnode-exfil  { background: oklch(0.55 0.18 25 / 0.22); color: oklch(0.85 0.16 25); }
.tnode-child { background: oklch(0.55 0.16 75 / 0.3); color: oklch(0.85 0.14 75); }
.tnode-body { min-width: 0; }
.tnode-l { font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; }
.tnode-s { font-family: var(--font-display); font-size: 11px; color: var(--muted); line-height: 1.25; letter-spacing: -0.003em; }
.tnode-pid { font-variant-numeric: tabular-nums; color: var(--dim); font-feature-settings: "tnum"; }
.tree-legend {
  display: flex; gap: 18px; font-size: 11px; color: var(--muted);
  padding-top: 12px; margin-top: 4px; border-top: 1px dashed var(--line-soft); align-items: center;
}

/* Layers / Intent / Containment */
.layers, .intent, .contain { display: flex; flex-direction: column; gap: 10px; }
.layer { display: flex; gap: 10px; align-items: flex-start; }
.layer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 8px var(--ok); }
.layer-name { font-size: 12px; font-weight: 500; }
.layer-found { color: var(--muted); margin-top: 2px; }

.intent-row {
  display: flex; gap: 10px; padding: 10px; border-radius: var(--r-sm);
  background: oklch(0.55 0.04 265 / 0.06); border: 1px solid var(--line-soft);
  align-items: flex-start;
}
.intent-row.crit { background: oklch(0.72 0.20 25 / 0.07); border-color: oklch(0.72 0.20 25 / 0.3); }
.intent-row > svg:first-child { color: var(--warn); flex-shrink: 0; margin-top: 2px; }
.intent-row.crit > svg:first-child { color: var(--crit); }
.intent-h { font-size: 12px; font-weight: 600; }

.ci { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); }
.ci:last-child { border-bottom: 0; }
.ci-step {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.ci-crit { background: oklch(0.72 0.20 25 / 0.18); color: var(--crit); border: 1px solid oklch(0.72 0.20 25 / 0.4); }
.ci-warn { background: oklch(0.82 0.16 75 / 0.18); color: var(--warn); border: 1px solid oklch(0.82 0.16 75 / 0.4); }
.ci-muted { background: oklch(0.55 0.04 265 / 0.14); color: var(--fg-2); border: 1px solid var(--line); }
.ci-label { flex: 1; font-size: 12px; }

/* Blast radius — 3-column */
.blast-wrap { width: 100%; overflow-x: auto; padding: 4px 0 8px; }
.blast-svg { display: block; height: auto; max-width: 100%; }
.blast-legend { display: flex; gap: 22px; font-size: 11.5px; color: var(--muted); padding-top: 14px; margin-top: 4px; border-top: 1px dashed var(--line-soft); flex-wrap: wrap; }
.line { display: inline-block; width: 18px; height: 2px; vertical-align: middle; margin-right: 6px; }
.line.crit { background: var(--crit); }
.line.dim { background: rgba(255,255,255,0.4); }
.line.acc { background: oklch(0.65 0.18 250); }

/* CLI inspector */
.cli { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.cli-line {
  display: grid; grid-template-columns: 30px 16px 1fr auto; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: oklch(0.14 0.02 265 / 0.6);
  border: 1px solid var(--line-soft);
  align-items: flex-start;
}
.cli-crit { border-color: oklch(0.72 0.20 25 / 0.4); background: oklch(0.72 0.20 25 / 0.06); }
.cli-num { color: var(--dim); font-family: var(--font-mono); font-size: 11px; }
.cli-prompt { color: var(--accent); font-weight: 600; font-family: var(--font-mono); }
.cli-cmd { color: var(--fg); word-break: break-all; line-height: 1.5; font-size: 11.5px; }
.cli-cmd .hl-danger { color: var(--crit); font-weight: 600; background: oklch(0.72 0.20 25 / 0.12); padding: 0 2px; border-radius: 3px; }
.cli-flags { display: flex; gap: 4px; flex-wrap: wrap; }

/* Action timeline */
.atl { position: relative; padding-left: 14px; }
.atl-rail { position: absolute; left: 80px; top: 0; bottom: 0; width: 1px; background: var(--line-soft); }
.atl-row {
  display: grid; grid-template-columns: 70px 16px 1fr; gap: 12px;
  align-items: flex-start; margin-bottom: 12px;
}
.atl-time { color: var(--muted); font-size: 11px; padding-top: 12px; }
.atl-dot { position: relative; padding-top: 14px; }
.atl-pulse {
  width: 10px; height: 10px; border-radius: 50%; background: var(--muted);
  border: 2px solid var(--bg-0);
  position: relative;
}
.atl-critical .atl-pulse { background: var(--crit); }
.atl-warn .atl-pulse { background: var(--warn); }
.atl-info .atl-pulse { background: var(--accent); }
.atl-pulse.pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--crit);
  animation: pulse-crit 1.6s infinite;
}
.atl-card {
  background: oklch(0.55 0.04 265 / 0.06); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 10px 12px;
}
.atl-critical .atl-card { background: oklch(0.72 0.20 25 / 0.07); border-color: oklch(0.72 0.20 25 / 0.3); }
.atl-warn .atl-card { background: oklch(0.82 0.16 75 / 0.05); border-color: oklch(0.82 0.16 75 / 0.2); }
.atl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.atl-ev { font-weight: 600; font-size: 12.5px; }
.atl-delta { font-size: 10.5px; color: var(--muted); font-family: var(--font-mono); padding: 1px 6px; background: oklch(0.55 0.04 265 / 0.1); border-radius: 4px; }
.atl-detail { color: var(--muted); margin-top: 4px; font-size: 11px; }

/* Theme toggle for tweaks */
.tweak-light { color: var(--fg); }

/* ============ People view ============ */
.ppl-view { display: flex; flex-direction: column; gap: 18px; }

/* Hero */
.ppl-hero {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.ppl-stat {
  text-align: left;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
  font: inherit; color: var(--fg);
  position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ppl-stat:hover { border-color: rgba(0,0,0,0.18); box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
[data-theme="dark"] .ppl-stat {
  backdrop-filter: blur(12px); box-shadow: none;
  border-color: var(--line-soft);
  transition: border-color .18s, transform .18s, background .18s;
}
[data-theme="dark"] .ppl-stat::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, oklch(1 0 0 / 0.035), transparent 28%);
}
[data-theme="dark"] .ppl-stat:hover { border-color: oklch(0.55 0.014 260 / 0.28); transform: translateY(-1px); box-shadow: none; }
.ppl-stat-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 40px oklch(0.72 0.13 245 / 0.18);
}
.ppl-stat-l { font-size: 11.5px; color: var(--muted); font-weight: 500; letter-spacing: -0.003em; }
.ppl-stat-v {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 500; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  margin-top: 6px; line-height: 1;
}
.ppl-stat-s { font-size: 11px; color: var(--muted); margin-top: 6px; letter-spacing: -0.003em; }
.ppl-stat-crit .ppl-stat-v { color: var(--crit); }
.ppl-stat-warn .ppl-stat-v { color: var(--warn); }
.ppl-stat-crit { border-color: oklch(0.72 0.20 25 / 0.25); }
.ppl-stat-warn { border-color: oklch(0.82 0.16 75 / 0.22); }

/* Toolbar */
.ppl-toolbar {
  display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 6px 12px;
  background: oklch(0.55 0.04 265 / 0.04);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.ppl-tb-divider { width: 1px; align-self: stretch; background: var(--line-soft); margin: 0 4px; }
.ppl-sort { display: flex; align-items: center; gap: 4px; }
.ppl-sort-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 6px; }
.ppl-sort-btn {
  padding: 5px 9px; border-radius: 6px;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); font-size: 11.5px; cursor: pointer; font: inherit;
  letter-spacing: -0.003em;
}
.ppl-sort-btn:hover { color: var(--fg-2); }
.ppl-sort-btn.on { color: var(--fg); border-color: var(--line-soft); background: oklch(0.55 0.04 265 / 0.08); }
.ppl-stats-line { font-size: 12px; color: var(--muted); margin-left: auto; letter-spacing: -0.003em; }
.ppl-stats-line b { color: var(--fg); font-weight: 600; }

/* Grid */
.ppl-grid { display: flex; flex-direction: column; gap: 10px; }

/* Card */
.ppl-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ppl-card:hover { border-color: rgba(0,0,0,0.16); box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
[data-theme="dark"] .ppl-card { backdrop-filter: blur(12px); box-shadow: none; border-color: var(--line-soft); transition: border-color .18s, background .18s; }
[data-theme="dark"] .ppl-card:hover { border-color: oklch(0.55 0.014 260 / 0.28); box-shadow: none; }
.ppl-card-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ppl-card-investigating {
  border-color: oklch(0.72 0.20 25 / 0.4);
  background: linear-gradient(180deg, oklch(0.72 0.20 25 / 0.06), var(--glass-bg) 80%);
}
.ppl-card-investigating .ppl-card-head::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--crit);
}
.ppl-card-elevated {
  border-color: oklch(0.82 0.16 75 / 0.32);
}
.ppl-card-elevated .ppl-card-head::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn);
}
.ppl-card-shared::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px;
  background: oklch(0.55 0.04 265 / 0.2);
  pointer-events: none;
}

.ppl-card-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  gap: 16px; align-items: center;
  padding: 14px 18px 14px 22px;
  background: transparent; border: none; cursor: pointer;
  text-align: left; color: inherit; font: inherit;
  position: relative;
}
.ppl-card-head:hover { background: oklch(0.55 0.04 265 / 0.04); }

.ppl-av {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em;
  color: #ffffff;
  flex: 0 0 auto;
}

.ppl-id { min-width: 0; }
.ppl-name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500; letter-spacing: -0.012em;
  color: var(--fg);
  display: flex; align-items: center; gap: 8px;
}
.ppl-tag-shared {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  padding: 2px 6px; border-radius: 3px;
  background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line);
  letter-spacing: 0.06em;
}
[data-theme="dark"] .ppl-tag-shared {
  background: oklch(0.55 0.04 265 / 0.18); border-color: var(--line-soft); color: var(--fg-3);
}
.ppl-role { font-size: 12px; color: var(--muted); margin-top: 2px; letter-spacing: -0.003em; }

.ppl-host-line {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 12.5px; color: var(--fg-1);
  letter-spacing: -0.003em;
  font-variant-numeric: tabular-nums;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
[data-theme="dark"] .ppl-host-line {
  background: oklch(0.55 0.04 265 / 0.08);
  border-color: var(--line-soft);
  color: var(--fg-2);
}
.ppl-host-line svg { color: var(--muted); }

.ppl-status-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ppl-last { font-size: 11px; color: var(--muted); letter-spacing: -0.003em; }

.ppl-risk-col {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 56px;
  padding: 0 8px;
  border-left: 1px solid var(--line-soft);
}
.ppl-risk-num {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ppl-risk-num.crit { color: var(--crit); }
.ppl-risk-num.warn { color: var(--warn); }
.ppl-risk-num.ok { color: var(--ok); }
.ppl-risk-l { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; }

.ppl-card-head > svg:last-child { color: var(--muted); transition: transform .2s; }

.ppl-card-body {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line-soft);
  background: oklch(0.55 0.04 265 / 0.025);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-areas:
    "metrics mix"
    "chips chips"
    "flags flags";
  gap: 14px 24px;
  align-items: center;
}

.ppl-metrics { grid-area: metrics; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ppl-metric {
  background: oklch(0.55 0.04 265 / 0.05);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  text-align: left;
}
.ppl-metric-v {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500; letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
  color: var(--fg); line-height: 1;
}
.ppl-metric-v.crit { color: var(--crit); }
.ppl-metric-v.warn { color: var(--warn); }
.ppl-metric-v.ok { color: var(--ok); }
.ppl-metric-l {
  font-size: 10.5px; color: var(--muted); margin-top: 4px;
  letter-spacing: -0.003em;
}

.ppl-mix { grid-area: mix; }
.ppl-mix-h {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.ppl-classbar {
  display: flex; height: 24px; border-radius: 6px; overflow: hidden;
  background: oklch(0.55 0.04 265 / 0.06);
  border: 1px solid var(--line-soft);
}
.cb-seg {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 500;
  color: oklch(0.98 0 0);
  letter-spacing: -0.003em;
  white-space: nowrap; overflow: hidden;
  border-right: 1px solid oklch(0 0 0 / 0.25);
}
.cb-seg:last-child { border-right: none; }
.cb-l3 { background: oklch(0.55 0.18 25 / 0.85); }
.cb-l2 { background: oklch(0.62 0.16 75 / 0.80); }
.cb-l1 { background: oklch(0.55 0.13 160 / 0.75); }

.ppl-chips-line {
  grid-area: chips;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ppl-chips-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ppl-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.ppl-mini-chip {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: oklch(0.55 0.04 265 / 0.08); border: 1px solid var(--line-soft);
  color: var(--fg-2); letter-spacing: -0.003em;
}

.ppl-flags { grid-area: flags; display: flex; flex-wrap: wrap; gap: 6px; }
.ppl-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 4px 9px; border-radius: 4px;
  letter-spacing: -0.003em;
  text-transform: capitalize;
}
.ppl-flag-crit {
  background: oklch(0.72 0.20 25 / 0.1);
  border: 1px solid oklch(0.72 0.20 25 / 0.3);
  color: var(--crit);
}
.ppl-flag-warn {
  background: oklch(0.82 0.16 75 / 0.1);
  border: 1px solid oklch(0.82 0.16 75 / 0.28);
  color: var(--warn);
}

/* Expanded section */
.ppl-expand {
  grid-column: 1 / -1;
  margin-top: 4px; padding-top: 14px;
  border-top: 1px dashed var(--line-soft);
  display: flex; flex-direction: column; gap: 14px;
}
.ppl-expand-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.ppl-detail {
  padding: 10px 12px;
  background: oklch(0.55 0.04 265 / 0.05);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.ppl-detail-l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.ppl-detail-v {
  font-family: var(--font-display);
  font-size: 13px; color: var(--fg); margin-top: 4px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.ppl-detail-block {
  background: oklch(0.55 0.04 265 / 0.04);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.ppl-detail-block .ppl-detail-l { margin-bottom: 8px; }
.ppl-agents-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ppl-agent-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; padding: 5px 10px; border-radius: 999px;
  background: oklch(0.55 0.04 265 / 0.08); border: 1px solid var(--line-soft);
  letter-spacing: -0.003em;
}
.ppl-agent-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }

.ppl-actions-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding-top: 4px;
}

/* Empty */
.ppl-empty {
  text-align: center; padding: 40px 20px;
  background: oklch(0.55 0.04 265 / 0.04);
  border: 1px dashed var(--line-soft);
  border-radius: var(--r-md);
}
.ppl-empty-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: oklch(0.55 0.04 265 / 0.12); color: var(--muted);
  margin-bottom: 12px;
}
.ppl-empty-l { font-size: 14px; font-weight: 500; color: var(--fg); letter-spacing: -0.005em; }
.ppl-empty-s { font-size: 12px; color: var(--muted); margin-top: 4px; letter-spacing: -0.003em; }

/* Responsive */
@media (max-width: 1100px) {
  .ppl-hero { grid-template-columns: repeat(3, 1fr); }
  .ppl-card-body { grid-template-columns: 1fr; grid-template-areas: "metrics" "mix" "chips" "flags"; }
  .ppl-card-head { grid-template-columns: auto 1fr auto auto; }
  .ppl-host-line, .ppl-status-col { display: none; }
}


/* View mode toggle */
.ppl-view-toggle { display: flex; gap: 2px; }
.ppl-vt-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 6px;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); font-size: 11.5px; cursor: pointer; font: inherit;
  letter-spacing: -0.003em;
}
.ppl-vt-btn:hover { color: var(--fg-2); }
.ppl-vt-btn.on { color: var(--fg); border-color: var(--line-soft); background: oklch(0.55 0.04 265 / 0.08); }

/* Sparkline column in card head */
.ppl-spark-col { display: flex; align-items: center; opacity: 0.85; }

/* Risk lane header — cleaner with left accent bar */
.ppl-lane-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; cursor: pointer; user-select: none;
  background: oklch(0.55 0.04 265 / 0.04);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line-soft);
  border-radius: var(--r-sm);
  margin-bottom: 6px; margin-top: 4px;
  font-size: 11.5px; font-weight: 500; color: var(--fg-2);
  letter-spacing: -0.003em;
  position: sticky; top: 0; z-index: 2;
  backdrop-filter: blur(10px);
}
.ppl-lane-hd:hover { background: oklch(0.55 0.04 265 / 0.08); }
.ppl-lane-hd-critical { border-left-color: var(--crit); }
.ppl-lane-hd-elevated { border-left-color: var(--warn); }
.ppl-lane-hd-routine { border-left-color: var(--ok); }
.ppl-lane-label { font-weight: 600; }
.ppl-lane-count {
  font-family: var(--font-mono); font-size: 11px;
  padding: 1px 7px; border-radius: 999px;
  background: oklch(0.55 0.04 265 / 0.1); color: var(--muted);
}

/* Table mode */
.ppl-table-wrap { overflow-x: auto; border-radius: var(--r-md); }
.ppl-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.ppl-th {
  padding: 9px 12px; text-align: left;
  font-size: 11px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line-soft);
  background: oklch(0.55 0.04 265 / 0.05);
  white-space: nowrap; cursor: pointer; user-select: none;
}
.ppl-th:hover { color: var(--fg-2); }
.ppl-th-on { color: var(--fg); }
.ppl-th-dir { letter-spacing: 0; font-size: 12px; }
.ppl-lane-row td { padding: 0; }
.ppl-tr { transition: background .12s; }
.ppl-tr:hover .ppl-td { background: oklch(0.55 0.04 265 / 0.06); }
.ppl-td {
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.ppl-td-user { min-width: 180px; position: relative; }
.ppl-td-risk { width: 100px; }
.ppl-td-agents { width: 140px; }
.ppl-td-sessions { width: 80px; }
.ppl-td-concern { min-width: 120px; }
.ppl-td-trend { width: 80px; }
.ppl-td-tools { min-width: 160px; }
.ppl-tr-last-inline { color: var(--muted); font-size: 10.5px; }
.ppl-tr-last-inline.ok { color: var(--ok); }

.ppl-tr-user { display: flex; align-items: center; gap: 10px; position: relative; min-height: 36px; }
.ppl-tr-id { min-width: 0; }
.ppl-tr-name { font-size: 13px; font-weight: 500; color: var(--fg); letter-spacing: -0.008em; }
.ppl-tr-email { font-size: 11px; color: var(--muted); letter-spacing: -0.003em; margin-top: 1px; }
.ppl-tr-dept { font-size: 12px; color: var(--fg-2); }
.ppl-tr-agents { display: flex; align-items: center; gap: 8px; }
.ppl-tr-agent-n { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; min-width: 16px; }
.ppl-tr-classbar-sm { width: 64px; }

/* Agent tier badges */
.ppl-tier-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.ppl-tier-badge {
  font-size: 10px; padding: 3px 7px; border-radius: 999px;
  font-weight: 600; letter-spacing: -0.003em;
  white-space: nowrap; border: none;
  font-family: var(--font-display);
}
.ppl-tier-auto { background: oklch(0.90 0.09 25); color: oklch(0.40 0.18 25); }
.ppl-tier-asst { background: oklch(0.91 0.09 65); color: oklch(0.42 0.18 65); }
.ppl-tier-sup { background: oklch(0.90 0.09 160); color: oklch(0.40 0.18 160); }
.ppl-tr-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--accent); font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.ppl-tr-link:hover { color: var(--fg); }
.ppl-tr-auto { font-size: 13px; font-variant-numeric: tabular-nums; }
.ppl-tr-auto.warn { color: oklch(0.42 0.18 65); }
.ppl-tr-flag {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  text-transform: capitalize; white-space: nowrap;
}
.ppl-tr-flag.crit { background: oklch(0.90 0.09 25); color: oklch(0.40 0.18 25); border: none; }
.ppl-tr-flag.warn { background: oklch(0.91 0.09 65); color: oklch(0.42 0.18 65); border: none; }
.ppl-tr-last { font-size: 12px; color: var(--muted); }
.ppl-tr-last.ok { color: var(--ok); }

/* Always-visible inline action icons */
.ppl-inline-actions {
  display: flex; gap: 4px; align-items: center;
  margin-left: auto;
}
.ppl-ra-icon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 6px; border-radius: 5px;
  background: transparent; border: 1px solid var(--line);
  cursor: pointer; color: var(--muted);
  transition: all 0.15s; font: inherit;
}
.ppl-ra-icon:hover {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line);
}

/* Tool chips — colorful pastel pills, display-only */
.ppl-tool-chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.ppl-tool-chip {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  letter-spacing: -0.003em;
  font: inherit; font-weight: 500;
  border: none;
  /* Colors set inline per-chip based on tool slug */
}

/* ============================================================
 * Sessions screen
 * ============================================================ */
.ses-view {
  display: grid;
  grid-template-columns: minmax(380px, 440px) 1fr;
  gap: 16px;
  height: calc(100vh - 80px);
  min-height: 620px;
  position: relative;
}
/* Collapsed list: detail pane takes the full width, list hides behind a thin rail button */
.ses-view.ses-view-list-collapsed {
  grid-template-columns: 1fr;
}
.ses-rail-expand {
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px;
  border: 1px solid var(--glass-stroke); border-left: none;
  border-radius: 0 10px 10px 0;
  background: var(--bg-1); color: var(--fg-2);
  cursor: pointer; box-shadow: 2px 0 10px rgba(0,0,0,0.12);
  transition: background .15s, color .15s;
}
.ses-rail-expand:hover { background: var(--bg-2); color: var(--accent); }
.ses-rail-expand-l {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  writing-mode: vertical-rl;
}
.ses-vt-collapse { display: inline-flex; align-items: center; gap: 4px; }
/* ---- Full-screen transcript ---- */

@keyframes ses-expand-in {
  from { opacity: 0; transform: scale(0.984); }
  to   { opacity: 1; transform: none; }
}

.ses-view.ses-view-expanded {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  grid-template-columns: unset;
  gap: 0;
  padding: 0;
  background: var(--bg-0);
  animation: ses-expand-in 0.2s ease-out forwards;
}

.ses-view.ses-view-expanded .ses-detail {
  flex: 1;
  min-height: 0;
  border-radius: 0;
  border: none;
  background: var(--bg-1);
}
.ses-view.ses-view-expanded .sd {
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.ses-view.ses-view-expanded .sd-header {
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-soft);
}
.ses-view.ses-view-expanded .sd-toolbar {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
  flex-direction: column;
  gap: 8px;
}
.ses-view.ses-view-expanded .sd-events {
  font-size: 15px;
}
.ses-view.ses-view-expanded .se-content,
.ses-view.ses-view-expanded .se-content-prompt {
  font-size: 15px;
  line-height: 1.7;
  max-height: none;
}

/* Full-screen top bar */
.ses-fs-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  height: 44px;
  flex-shrink: 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-soft);
  z-index: 1002;
}
.ses-fs-bar-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--fg-2); font-weight: 500;
}
.ses-fs-bar-title svg { color: var(--muted); }
.ses-fs-bar-sep { color: var(--muted); font-weight: 400; }
.ses-fs-bar-session {
  color: var(--fg);
  max-width: 480px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Exit button (sits inside ses-fs-bar) */
.ses-exit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--fg-2);
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ses-exit-btn:hover {
  background: var(--bg-3);
  border-color: rgba(37,99,235,0.4);
  color: var(--accent);
}
.ses-exit-btn:active { opacity: 0.75; }
[data-theme="dark"] .ses-exit-btn {
  background: oklch(0.24 0.016 260);
  border-color: oklch(0.36 0.02 260);
}
[data-theme="dark"] .ses-exit-btn:hover {
  background: oklch(0.30 0.02 260);
}

/* ---- Tab bar ---- */
.ses-tab-bar {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
  padding: 0 12px;
  gap: 2px;
}
.ses-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px 8px;
  font-size: 12px; font-weight: 500; color: var(--muted);
  border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.1s, border-color 0.1s;
}
.ses-tab:hover { color: var(--fg-2); }
.ses-tab.ses-tab-on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.ses-tab.ses-tab-flagged.ses-tab-on { color: var(--crit); border-bottom-color: var(--crit); }
.ses-tab-count {
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 10px;
  background: var(--bg-3); color: var(--muted);
  border: 0.5px solid var(--line-soft);
}
.ses-tab.ses-tab-on .ses-tab-count { background: oklch(0.78 0.20 245 / 0.14); color: var(--fg-2); }
.ses-tab.ses-tab-flagged.ses-tab-on .ses-tab-count { background: oklch(0.72 0.20 25 / 0.14); color: var(--crit); }

/* ---- Master ---- */
.ses-master {
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
[data-theme="dark"] .ses-master { box-shadow: none; }
.ses-master-toolbar {
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 6px;
}
.ses-master-toolbar .search { min-width: 0; padding: 7px 11px; }
.ses-master-toolbar .search input { font-size: 12px; }

.ses-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.ses-q {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  background: oklch(0.55 0.04 265 / 0.08);
  border: 1px solid var(--line-soft);
  color: var(--fg-3); font: inherit; font-size: 12px; cursor: pointer;
  transition: all .15s;
}
.ses-q span {
  font-variant-numeric: tabular-nums;
  color: var(--muted); font-size: 12px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  background: oklch(0.55 0.04 265 / 0.12);
}
.ses-q:hover { border-color: var(--line); color: var(--fg); background: oklch(0.55 0.06 265 / 0.14); }
.ses-q.on { background: oklch(0.78 0.20 245 / 0.18); border-color: oklch(0.78 0.20 245 / 0.60); color: var(--fg); }
.ses-q-crit.on { background: oklch(0.78 0.24 22 / 0.18); border-color: oklch(0.78 0.24 22 / 0.60); color: var(--crit); }
.ses-q-warn.on { background: oklch(0.88 0.20 68 / 0.18); border-color: oklch(0.88 0.20 68 / 0.55); color: var(--warn); }
.ses-q-live.on { background: oklch(0.84 0.19 158 / 0.18); border-color: oklch(0.84 0.19 158 / 0.55); color: var(--ok); }

.ses-list {
  flex: 1; overflow-y: auto;
  padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.ses-empty-list { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 12px; }
.ses-load-more { padding: 12px 16px; text-align: center; }
.ses-loaded-note { color: var(--muted); }
.ses-searching    { color: var(--muted); font-style: italic; }
.ses-result-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.sl-user-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 6px;
  margin-top: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.sl-user-header:first-child { margin-top: 0; }
.sl-user-header-info { flex: 1; min-width: 0; }
.sl-user-name {
  font-size: 12.5px; font-weight: 600; color: var(--fg-2);
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  transition: color .12s;
}
.sl-user-name:hover { color: var(--accent); }
.sl-user-sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-user-counts { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.sl-user-count { font-size: 10.5px; font-weight: 500; }
.sl-user-risk { font-size: 10px; color: var(--muted); }

.sl-item {
  position: relative;
  display: flex; flex-direction: column; gap: 7px;
  text-align: left;
  flex-shrink: 0;
  background: oklch(0.58 0.06 265 / 0.12);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 9px 12px 9px 15px;
  cursor: pointer; transition: all .15s;
  font: inherit; color: inherit;
  overflow: hidden;
}
.sl-item:hover { background: oklch(0.60 0.07 265 / 0.20); border-color: var(--line); }
.sl-item-on {
  background: oklch(0.78 0.22 245 / 0.18);
  border-color: oklch(0.82 0.22 245 / 0.65);
  box-shadow: 0 0 0 1px oklch(0.82 0.22 245 / 0.30), inset 4px 0 0 oklch(0.82 0.22 245);
}
/* Risk-tinted card backgrounds */
.sl-item-critical { background: oklch(0.84 0.26 20 / 0.10); border-color: oklch(0.84 0.26 20 / 0.35); }
.sl-item-critical:hover { background: oklch(0.84 0.26 20 / 0.16); border-color: oklch(0.84 0.26 20 / 0.50); }
.sl-item-elevated { background: oklch(0.92 0.24 65 / 0.09); border-color: oklch(0.92 0.24 65 / 0.32); }
.sl-item-elevated:hover { background: oklch(0.92 0.24 65 / 0.15); border-color: oklch(0.92 0.24 65 / 0.46); }
.sl-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }

.sl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sl-top-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.sl-user { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sl-user-meta { min-width: 0; }
.sl-name { font-size: 14px; font-weight: 500; color: var(--fg); letter-spacing: -0.01em; }
.sl-agent { font-size: 12.5px; color: var(--muted); margin-top: 1px; letter-spacing: -0.003em; }
.sl-meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: -2px;
}
.sl-meta-sep { color: var(--line); font-size: 11px; user-select: none; }
.sl-meta-entry {
  font-size: 10px; color: var(--muted);
  font-family: var(--font-mono, monospace);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 5px; border-radius: 3px;
  background: var(--bg-3); border: 0.5px solid var(--line-soft);
}
.sl-meta-role { font-size: 10.5px; color: var(--muted); }

.sl-status { flex-shrink: 0; }
.sl-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--ok);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.sl-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 var(--ok); animation: pulse 1.6s infinite;
}

.sl-summary {
  font-size: 15px; color: var(--fg-2);
  letter-spacing: -0.003em; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.sl-foot {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sl-risk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 6px;
  border: 1px solid;
  font-size: 10.5px; letter-spacing: 0.04em;
  font-weight: 600; flex-shrink: 0;
}
.sl-risk-num { font-weight: 800; font-size: 13px; }
.sl-risk-l { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; opacity: 0.9; }
.sl-counts { display: flex; gap: 9px; flex: 1; }
.sl-counts span { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.sl-time { color: var(--muted); font-size: 11.5px; }

.ses-av {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--fg);
  letter-spacing: 0.02em; flex-shrink: 0;
  border: 1px solid var(--line-soft);
}

/* ---- Detail panel ---- */
.ses-detail {
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-3) transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
[data-theme="dark"] .ses-detail {
  scrollbar-color: oklch(0.55 0.04 265 / 0.4) transparent;
  box-shadow: none;
}
.ses-detail::-webkit-scrollbar { width: 10px; }
.ses-detail::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
[data-theme="dark"] .ses-detail::-webkit-scrollbar-thumb { background: oklch(0.55 0.04 265 / 0.35); }
.ses-detail::-webkit-scrollbar-thumb:hover { background: oklch(0.55 0.08 265 / 0.55); background-clip: content-box; }

.sd { display: flex; flex-direction: column; min-height: 100%; }
.sd-empty {
  margin: auto; text-align: center; padding: 40px;
  color: var(--muted); max-width: 380px;
}
.sd-empty-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: oklch(0.55 0.04 265 / 0.1);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; color: var(--fg-2);
}
.sd-empty-l { font-size: 14px; color: var(--fg-2); margin-bottom: 6px; }
.sd-empty-s { font-size: 12px; line-height: 1.5; }

.sd-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 14px;
}
.sd-h-top { display: flex; gap: 18px; align-items: flex-start; }
.sd-id { flex: 1; min-width: 0; }
.sd-title {
  font-size: 21px; font-weight: 500;
  color: var(--fg); letter-spacing: -0.018em; line-height: 1.3;
}

.sd-risk-block {
  text-align: center;
  padding: 10px 18px;
  border: 2px solid; border-radius: 10px;
  flex-shrink: 0; min-width: 96px;
}
.sd-risk-num { font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sd-risk-l { font-size: 11px; letter-spacing: 0.12em; font-weight: 700; margin-top: 3px; }

.sd-h-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.sd-tag {
  font-size: 11.5px;
  padding: 2px 8px; border-radius: 999px;
  background: oklch(0.55 0.04 265 / 0.1);
  border: 1px solid var(--line-soft);
  color: var(--fg-2);
  letter-spacing: 0.005em;
  text-transform: lowercase;
}

.sd-h-row {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
}
.sd-stat {
  font-size: 13px; color: var(--muted);
  letter-spacing: -0.003em;
  font-variant-numeric: tabular-nums;
}
.sd-stat b { color: var(--fg); font-weight: 600; margin-right: 3px; }
.sd-stat-sub { font-size: 12px; color: var(--dim); }

.sd-toolbar {
  padding: 10px 24px 14px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 8px;
  background: oklch(0.55 0.04 265 / 0.03);
}
.sd-toolbar-top {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.sd-tb-l {
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.sd-tb-legend { display: flex; gap: 11px; align-items: center; }
.sd-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: oklch(0.55 0.04 265 / 0.08);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 12px;
  width: 100%;
}
.sd-search-wrap:focus-within { border-color: oklch(0.65 0.12 240 / 0.6); background: oklch(0.55 0.04 265 / 0.12); }
.sd-search-wrap svg { color: var(--muted); flex-shrink: 0; }
.sd-search { background: none; border: none; outline: none; font-size: 13px; color: var(--fg-1); width: 100%; }
.sd-search::placeholder { color: var(--muted); }
.sd-search-clear { background: none; border: none; cursor: pointer; color: var(--muted); padding: 0; display: flex; align-items: center; flex-shrink: 0; }
.sd-search-clear:hover { color: var(--fg-1); }
.sd-search-count { font-size: 12px; color: var(--ok); white-space: nowrap; flex-shrink: 0; font-weight: 500; }
.sd-leg-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.sd-leg-dot { width: 7px; height: 7px; border-radius: 50%; }

.sd-events {
  padding: 18px 22px 28px;
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.sd-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
}
.sd-empty-inline { color: var(--muted); padding: 30px; text-align: center; font-size: 12px; }

.sd-no-transcript {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 24px; gap: 8px; text-align: center;
}
.sd-no-transcript-icon { color: var(--muted); opacity: 0.5; }
.sd-no-transcript-l { font-size: 13px; font-weight: 500; color: var(--fg-2); }
.sd-no-transcript-s { font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 420px; }

/* ---- Event row ---- */
.se-row {
  display: grid;
  grid-template-columns: 64px 16px 1fr;
  gap: 10px;
  align-items: stretch;
  padding-bottom: 14px;
  position: relative;
}
.se-time {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--dim); padding-top: 12px;
  text-align: right; letter-spacing: 0;
}
.se-rail {
  position: relative;
  width: 2px; justify-self: center;
  opacity: 0.45;
}
.se-row:last-child .se-rail::after {
  content: ""; position: absolute; left: -1px; right: -1px;
  top: 14px; bottom: 0;
  background: var(--bg);
}
.se-rail-dot {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
}
.se-card {
  border: 1px solid; border-radius: var(--r-md);
  padding: 10px 12px;
  min-width: 0;
}
.se-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
}
.se-kind {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px;
  padding-right: 8px; border-right: 1px solid var(--line-soft);
}
.se-title {
  color: var(--fg); font-weight: 500; letter-spacing: -0.005em;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.se-risk-pill {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid; flex-shrink: 0;
}
.se-content {
  margin-top: 8px;
  font-size: 13.5px; color: var(--fg-2);
  letter-spacing: -0.003em; line-height: 1.6;
}
.se-content-prompt {
  background: oklch(0.55 0.04 265 / 0.05);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
  font-style: italic;
  position: relative;
  padding-left: 22px;
}
.se-content-prompt::before {
  content: "“";
  position: absolute; left: 8px; top: 4px;
  font-size: 22px; color: var(--dim); font-style: normal;
  font-family: Georgia, serif;
}
.se-content-mono {
  font-family: var(--font-mono); font-size: 12.5px;
  background: oklch(0.10 0.02 260 / 0.5);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--fg-2);
  white-space: pre-wrap; word-break: break-all;
}
.se-reason {
  margin-top: 8px;
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: -0.003em; line-height: 1.45;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
}
.se-reason svg { flex-shrink: 0; margin-top: 2px; opacity: 0.8; }

/* Light theme tweaks for mono blocks */
[data-theme="light"] .se-content-mono {
  background: oklch(0.95 0.005 240);
}

@media (max-width: 860px) {
  .ses-view { grid-template-columns: 1fr; height: auto; }
  .ses-master { max-height: 420px; }
}


/* ============================================================
 * Cross-link chips (UserChip / HostChip / AgentChip)
 * Used everywhere people, hosts, and agents need to be clickable.
 * ============================================================ */
.xchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 4px;
  background: oklch(0.55 0.04 265 / 0.06);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--fg);
  font: inherit; font-size: 12px;
  cursor: pointer; transition: all .15s;
  letter-spacing: -0.003em;
  max-width: 100%;
  text-align: left;
}
.xchip:hover {
  background: oklch(0.55 0.16 250 / 0.14);
  border-color: oklch(0.65 0.18 250 / 0.45);
  color: var(--fg);
}
.xchip:hover svg:last-child { transform: translateX(1px); }
.xchip svg:last-child { color: var(--dim); transition: transform .15s; }
.xchip:hover svg:last-child { color: var(--accent); }

.xchip-dim { opacity: 0.7; }

.xchip-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.15; }
.xchip-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xchip-sub {
  font-size: 10px; color: var(--muted);
  text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.xchip-av {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 600; color: var(--fg);
  flex-shrink: 0;
  border: 1px solid oklch(0.95 0 0 / 0.06);
}
.xchip-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.55 0.04 265 / 0.16);
  color: var(--fg-2); flex-shrink: 0;
}
.xchip-host .xchip-icon { color: oklch(0.72 0.13 245); }
.xchip-agent .xchip-icon {
  background: oklch(0.78 0.13 75 / 0.18);
  color: var(--warn);
}

/* sm = compact, single-line */
.xchip-sm { padding: 3px 7px 3px 3px; font-size: 11px; }
.xchip-sm .xchip-av,
.xchip-sm .xchip-icon { width: 18px; height: 18px; font-size: 8.5px; }
.xchip-sm .xchip-sub { display: none; }

/* lg = used in section headers */
.xchip-lg { padding: 5px 10px 5px 5px; font-size: 13px; }
.xchip-lg .xchip-av,
.xchip-lg .xchip-icon { width: 26px; height: 26px; font-size: 11px; }

/* Related rail */
.xrelated {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted);
}
.xrelated-sep { color: var(--dim); }
.xrelated-item { display: inline-flex; align-items: center; gap: 6px; }
.xrelated-l {
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--dim);
}

/* CountPill — clickable counter */
.xcount {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 7px;
  background: oklch(0.55 0.04 265 / 0.05);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--fg-2);
  font: inherit; font-size: 11.5px;
  cursor: pointer; transition: all .15s;
}
.xcount:hover:not(:disabled) {
  border-color: oklch(0.65 0.18 250 / 0.4);
  background: oklch(0.55 0.16 250 / 0.1);
  color: var(--fg);
}
.xcount:disabled { opacity: 0.4; cursor: default; }
.xcount-n {
  font-weight: 600; color: var(--fg);
  padding: 0 5px;
  background: oklch(0.55 0.04 265 / 0.18);
  border-radius: 999px;
  min-width: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.xcount-l { font-size: 11px; }
.xcount svg { color: var(--dim); }

/* ============================================================
 * Sessions: chip rows + related rail (uses chips above)
 * ============================================================ */
.sl-chiprow {
  display: flex; gap: 5px; flex-wrap: wrap;
  margin-top: -2px;
}

/* Session detail header chip row */
.sd-chiprow {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 10px;
}
.sd-chip-arrow {
  font-size: 11px; color: var(--dim);
  letter-spacing: -0.003em;
}
.sd-who-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sd-agent-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
}
.sd-meta-sep { color: var(--line); font-size: 11px; user-select: none; }
.sd-meta-model {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--fg-2);
}
.sd-meta-entry {
  font-size: 10px; color: var(--muted);
  font-family: var(--font-mono, monospace);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 6px; border-radius: 3px;
  background: var(--bg-3); border: 0.5px solid var(--line-soft);
}
.sd-session-id {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 7px;
  font-size: 10.5px; color: var(--dim);
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.01em;
}

.sd-related {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 8px 0;
  border-top: 1px dashed var(--line-soft);
  border-bottom: 1px dashed var(--line-soft);
}
.sd-related-l {
  font-size: 10px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-right: 4px;
}

/* ============================================================
 * Inventory: user link in host meta cell
 * ============================================================ */
.host-user-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0; padding: 0;
  color: var(--fg-2); font: inherit; font-size: 11.5px;
  cursor: pointer; transition: color .15s;
  letter-spacing: -0.003em;
}
.host-user-link:hover { color: var(--accent); text-decoration: underline; }
.host-user-link svg { opacity: 0.75; }
.host-os-sep { color: var(--dim); margin: 0 4px; }

/* ============================================================
 * People: clickable session-count metric, multiple host chips
 * ============================================================ */
.ppl-metric-link {
  background: transparent; border: 0;
  font: inherit; cursor: pointer;
  padding: 0; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  transition: opacity .15s;
}
.ppl-metric-link:hover { opacity: 0.85; }
.ppl-metric-link .ppl-metric-l {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--accent);
}
.ppl-metric-link .ppl-metric-l svg { opacity: 0.7; }

.ppl-host-line {
  display: flex; flex-wrap: wrap; gap: 5px;
  align-items: center;
}

/* override single-host text fallback for when there are no hosts */
.ppl-host-line:empty::before {
  content: "—";
  color: var(--dim); font-size: 12px;
}


/* ============================================================
 * Filter bar — search + time + dropdowns + active chips
 * ============================================================ */
.filt-bar {
  display: flex; flex-direction: column; gap: 0;
}
.filt-bar-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding: 0;
}
.filt-bar-row > .search { flex: 1 1 280px; min-width: 220px; max-width: 420px; }
.filt-bar-row > .filt-divider {
  width: 1px; align-self: stretch;
  background: var(--line-soft);
  margin: 4px 2px;
}
.filt-bar-count {
  font-size: 11.5px; color: var(--muted);
  margin-left: auto;
  align-self: flex-end;
  letter-spacing: -0.003em;
}
.filt-bar-count b { color: var(--fg); font-weight: 600; }

/* Filter button (used by TimeRange, Dropdown, MultiToggle, Range) */
.filt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px;
  background: oklch(0.55 0.04 265 / 0.05);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--fg-2);
  font: inherit; font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  letter-spacing: -0.003em;
  height: 30px;
}
.filt-btn:hover {
  border-color: oklch(0.65 0.18 250 / 0.4);
  color: var(--fg);
  background: oklch(0.55 0.16 250 / 0.08);
}
.filt-btn-on {
  background: oklch(0.55 0.16 250 / 0.14);
  border-color: oklch(0.65 0.18 250 / 0.5);
  color: var(--fg);
}
.filt-btn-l { color: var(--dim); font-weight: 400; }
.filt-btn-v { color: var(--fg); font-weight: 500; }
.filt-btn svg { color: var(--dim); }
.filt-btn-on svg { color: var(--accent); }

/* Popover — fixed-positioned so it escapes overflow:hidden containers */
.popover {
  position: fixed;
  z-index: 9999;
  min-width: 220px; max-width: 320px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.12);
  padding: 6px;
  animation: popIn .12s ease-out;
}
[data-theme="dark"] .popover {
  background: oklch(0.18 0.012 265);
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.45);
}
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 8px;
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--dim);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.pop-clear {
  background: transparent; border: 0; color: var(--accent);
  font: inherit; font-size: 10px; cursor: pointer;
  text-transform: none; letter-spacing: normal;
  padding: 0;
}
.pop-clear:hover { text-decoration: underline; }
.pop-list { display: flex; flex-direction: column; gap: 1px; }
.pop-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  background: transparent; border: 0;
  border-radius: 6px;
  color: var(--fg-2);
  font: inherit; font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.pop-item-main {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1;
}
.pop-item-has-sub { align-items: flex-start; }
.pop-item-sub {
  font-size: 10.5px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pop-item-on .pop-item-sub { color: var(--muted); }
.pop-item:hover { background: var(--bg-2); color: var(--fg); }
.pop-item-on { color: var(--fg); background: rgba(37,99,235,0.08); }
[data-theme="dark"] .pop-item:hover { background: oklch(0.55 0.04 265 / 0.12); }
[data-theme="dark"] .pop-item-on { background: oklch(0.55 0.16 250 / 0.10); }
.pop-item-on svg { color: var(--accent); margin-left: auto; }
.pop-item-has-sub .pop-item-c { align-self: flex-start; margin-top: 2px; }
.pop-item-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dim); flex-shrink: 0;
}
.pop-item-on .pop-item-dot { background: var(--accent); }

/* Custom date-range block in TimeRangeControl popover */
.pop-custom-range { padding: 6px 8px 4px; display: flex; flex-direction: column; gap: 6px; }
.pop-cr-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-2); }
.pop-cr-lbl { width: 36px; color: var(--muted); }
.pop-cr-row input[type="date"] {
  flex: 1; padding: 5px 8px; font-size: 12px; color: var(--fg);
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 5px; font-family: inherit; outline: none;
  color-scheme: light dark;
}
.pop-cr-row input[type="date"]:focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.15);
}
.pop-cr-row input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.45; cursor: pointer;
}
.pop-cr-row input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 0.75;
}
.pop-cr-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; }
.btn-sm { padding: 3px 10px; font-size: 11px; }
.pop-item-sw {
  width: 10px; height: 10px; border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid oklch(1 0 0 / 0.1);
}
.pop-item-c {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  background: var(--bg-2);
  border-radius: 999px;
}
[data-theme="dark"] .pop-item-c { background: oklch(0.55 0.04 265 / 0.18); color: var(--dim); }
.pop-item-on .pop-item-c { color: var(--fg-2); }
.pop-sep {
  height: 1px; background: var(--line-soft);
  margin: 4px 4px;
}

/* Multi-select checkbox style */
.pop-check {
  width: 14px; height: 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .12s;
}
.pop-check-on {
  background: var(--accent);
  border-color: var(--accent);
  color: oklch(0.12 0 0);
}
.pop-check-on svg { color: oklch(0.12 0 0); margin-left: 0; }
.pop-item-multi:hover .pop-check { border-color: var(--accent); }

/* Numeric range popover */
.pop-range {
  padding: 12px 10px 6px;
  display: flex; flex-direction: column; gap: 14px;
}
.pop-range-vals {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-variant-numeric: tabular-nums;
}
.pop-range-v {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500;
  color: var(--fg);
  padding: 3px 9px;
  background: oklch(0.55 0.04 265 / 0.16);
  border-radius: 6px;
  letter-spacing: -0.01em;
}
.pop-range-sep { color: var(--dim); font-size: 12px; }
.pop-range-sliders {
  display: flex; flex-direction: column; gap: 6px;
}
.pop-range-sliders input[type=range] {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
.pop-range-sliders input[type=range]::-webkit-slider-runnable-track {
  height: 3px;
  background: oklch(0.55 0.04 265 / 0.25);
  border-radius: 999px;
}
.pop-range-sliders input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  background: var(--accent);
  border: 2px solid oklch(0.18 0.012 265);
  border-radius: 50%;
  margin-top: -6px;
  cursor: pointer;
  box-shadow: 0 1px 4px oklch(0 0 0 / 0.4);
}

/* Active filter chips (below the bar) */
.filt-active {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 0 0;
  border-top: 0;
}
.filt-active-l {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--dim);
  margin-right: 2px;
}
.filt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 8px;
  background: oklch(0.55 0.16 250 / 0.12);
  border: 1px solid oklch(0.65 0.18 250 / 0.35);
  border-radius: 999px;
  color: var(--fg);
  font: inherit; font-size: 11px;
  cursor: pointer;
  transition: all .12s;
  letter-spacing: -0.003em;
}
.filt-chip:hover {
  background: oklch(0.6 0.2 25 / 0.2);
  border-color: oklch(0.7 0.2 25 / 0.5);
}
.filt-chip-l { color: var(--muted); }
.filt-chip-v { font-weight: 500; }
.filt-chip svg { color: var(--muted); margin-left: 1px; }
.filt-chip:hover svg { color: var(--crit); }

.filt-clear-all {
  background: transparent; border: 0;
  color: var(--accent); font: inherit; font-size: 11px;
  cursor: pointer; padding: 3px 6px;
  margin-left: 2px;
}
.filt-clear-all:hover { text-decoration: underline; }


/* ============================================================
 * Filter toolbar — overrides + small additions for new layout
 * ============================================================ */
/* New v2 inventory toolbar uses FilterBar (no longer needs grid-flex) */
.inv-toolbar-v2 {
  display: block;
  margin-bottom: 4px;
}
.inv-toolbar-v2 .search {
  min-width: 0;
  padding: 6px 11px;
  height: 30px;
}
.inv-toolbar-v2 .search input { font-size: 12px; }

/* Tiny X to clear the search input */
.search-x {
  background: transparent; border: 0;
  color: var(--dim); cursor: pointer;
  padding: 2px; display: inline-flex; align-items: center;
  border-radius: 4px;
}
.search-x:hover { color: var(--crit); background: oklch(0.55 0.04 265 / 0.16); }

/* Empty state for filtered tables */
.inv-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 56px 24px;
  color: var(--muted);
  text-align: center;
}
.inv-empty svg { color: var(--dim); opacity: 0.6; }
.inv-empty > div { font-size: 13px; }

/* People + Sessions toolbars use FilterBar wrapper too */
.ppl-toolbar-v2 { display: inline-flex; flex-direction: column; align-items: flex-start; }
.ppl-toolbar-v2 .filt-bar { flex-direction: row; align-items: center; gap: 10px; }
.ppl-toolbar-v2 .filt-bar-row { flex-wrap: nowrap; }
.ppl-toolbar-v2 .filt-bar-count { margin-left: 4px; align-self: center; white-space: nowrap; }
.ppl-toolbar-v2 .search {
  min-width: 0;
  flex: 0 1 220px;
  max-width: 220px;
  padding: 6px 11px;
  height: 30px;
}
.ppl-toolbar-v2 .search input { font-size: 12px; }

/* ── Sessions toolbar v3 ────────────────────────────────────────────────────── */
.ses-toolbar-v3 {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 6px;
}

/* Row 1: search + user dropdown */
.ses-tb-search-row {
  display: flex; align-items: center; gap: 6px;
}
.ses-tb-search {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.ses-tb-search:focus-within {
  border-color: oklch(0.65 0.18 250 / 0.5);
  box-shadow: 0 0 0 3px oklch(0.65 0.18 250 / 0.10);
}
.ses-tb-search.ses-tb-search-loading { border-color: oklch(0.65 0.18 250 / 0.35); }
.ses-tb-search svg { color: var(--dim); flex-shrink: 0; }
.ses-tb-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--fg); font: inherit; font-size: 12.5px;
}
.ses-tb-search input::placeholder { color: var(--dim); }
.ses-tb-search-x {
  background: transparent; border: 0; padding: 2px;
  color: var(--dim); cursor: pointer; display: inline-flex;
  align-items: center; border-radius: 3px; flex-shrink: 0;
}
.ses-tb-search-x:hover { color: var(--fg-2); background: oklch(0.55 0.04 265 / 0.10); }
.ses-tb-spinner {
  width: 13px; height: 13px; flex-shrink: 0;
  border: 1.5px solid oklch(0.65 0.18 250 / 0.25);
  border-top-color: oklch(0.65 0.18 250 / 0.8);
  border-radius: 50%;
  animation: ses-spin 0.7s linear infinite;
}
@keyframes ses-spin { to { transform: rotate(360deg); } }

/* Row 2: risk pills + filter dropdowns */
.ses-tb-filter-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ses-tb-risk {
  display: flex; gap: 0; flex-wrap: wrap;
  border: 1px solid var(--line-soft);
  border-radius: 7px; overflow: hidden; min-width: 0;
}
.ses-tb-rq {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: transparent; border: none; border-right: 1px solid var(--line-soft);
  color: var(--fg-3); font: inherit; font-size: 11.5px; cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.ses-tb-rq:last-child { border-right: none; }
.ses-tb-rq span {
  font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 1px 5px; border-radius: 999px;
  background: oklch(0.55 0.04 265 / 0.10); color: var(--muted);
}
.ses-tb-rq:hover { background: oklch(0.55 0.04 265 / 0.08); color: var(--fg-2); }
.ses-tb-rq.on { background: oklch(0.78 0.20 245 / 0.14); color: var(--fg); }
.ses-tb-rq.on span { background: oklch(0.78 0.20 245 / 0.20); color: var(--fg-2); }
.ses-tb-rq-crit.on { background: oklch(0.72 0.24 22 / 0.12); color: var(--crit); }
.ses-tb-rq-crit.on span { background: oklch(0.72 0.24 22 / 0.18); color: var(--crit); }
.ses-tb-rq-warn.on { background: oklch(0.85 0.20 68 / 0.14); color: var(--warn); }
.ses-tb-rq-warn.on span { background: oklch(0.85 0.20 68 / 0.20); color: var(--warn); }
.ses-tb-rq-live.on { background: oklch(0.80 0.19 158 / 0.14); color: var(--ok); }
.ses-tb-rq-live.on span { background: oklch(0.80 0.19 158 / 0.20); color: var(--ok); }

.ses-tb-divider {
  width: 1px; height: 20px; background: var(--line-soft); flex-shrink: 0;
}

/* Compact dropdowns inside v3 toolbar */
.ses-toolbar-v3 .filt-bar-row { gap: 4px; flex-wrap: wrap; }
.ses-toolbar-v3 .filt-btn { padding: 4px 7px; font-size: 11px; height: 26px; }
.ses-toolbar-v3 .filt-btn-l { font-size: 10.5px; }

/* Row 3: footer — result count + view toggle */
.ses-tb-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 2px;
}

/* Light theme overrides */
.ses-tb-search { background: var(--bg-1); }
[data-theme="light"] .ses-tb-search { background: #fff; }
[data-theme="light"] .ses-tb-rq.on { background: #dbeafe; border-color: transparent; color: #1d4ed8; }
[data-theme="light"] .ses-tb-rq.on span { background: #bfdbfe; color: #1d4ed8; }
[data-theme="light"] .ses-tb-rq-crit.on { background: #fee2e2; color: var(--crit); }
[data-theme="light"] .ses-tb-rq-crit.on span { background: #fecaca; color: var(--crit); }
[data-theme="light"] .ses-tb-rq-warn.on { background: #fef3c7; color: var(--warn); }
[data-theme="light"] .ses-tb-rq-warn.on span { background: #fde68a; color: var(--warn); }
[data-theme="light"] .ses-tb-rq-live.on { background: #dcfce7; color: var(--ok); }
[data-theme="light"] .ses-tb-rq-live.on span { background: #bbf7d0; color: var(--ok); }


/* ============================================================
 * In-popover search (DropdownFilter / MultiToggle)
 * ============================================================ */
.pop-search {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  margin: 0 2px 4px;
  background: oklch(0.55 0.04 265 / 0.12);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}
.pop-search:focus-within {
  border-color: oklch(0.65 0.18 250 / 0.5);
  background: oklch(0.55 0.04 265 / 0.18);
}
.pop-search svg { color: var(--dim); flex-shrink: 0; }
.pop-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--fg); font: inherit; font-size: 12px;
  padding: 1px 0;
}
.pop-search input::placeholder { color: var(--dim); }
.pop-search-x {
  background: transparent; border: 0;
  color: var(--dim); cursor: pointer;
  padding: 2px; display: inline-flex; align-items: center;
  border-radius: 3px; flex-shrink: 0;
}
.pop-search-x:hover { color: var(--crit); background: oklch(0.55 0.04 265 / 0.16); }

.pop-list-scroll {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}
.pop-list-scroll::-webkit-scrollbar { width: 6px; }
.pop-list-scroll::-webkit-scrollbar-thumb {
  background: oklch(0.55 0.04 265 / 0.25);
  border-radius: 999px;
}
.pop-list-scroll::-webkit-scrollbar-track { background: transparent; }

.pop-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  font-style: italic;
}

/* Reserve chart vertical space so empty -> hydrated transitions don't shift layout. (ISSUE-004) */
.exec-cards .card[data-card-id="heatmap"] .card-body { min-height: 320px; }
.exec-cards .card[data-card-id="scatter"] .card-body { min-height: 360px; }
.exec-cards .card[data-card-id="sankey"]  .card-body { min-height: 180px; }
.exec-cards .card[data-card-id="trend"]   .card-body { min-height: 260px; }

/* Sessions transcript skeleton — keeps detail pane height stable while events stream in. (ISSUE-001) */
.sd-transcript-skeleton {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 4px;
  min-height: 420px;
}
.sd-skel-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0.55;
  animation: sd-skel-pulse 1.4s ease-in-out infinite;
}
.sd-skel-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-3, rgba(255,255,255,0.06));
  flex-shrink: 0;
}
.sd-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sd-skel-line {
  height: 10px;
  border-radius: 4px;
  background: var(--bg-3, rgba(255,255,255,0.06));
}
.sd-skel-line.short { height: 8px; opacity: 0.7; }
@keyframes sd-skel-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-skel-row { animation: none; }
}

/* ============================================================
 * Global view transitions & futuristic UI enhancements
 * ============================================================ */


/* Executive cards — lift + glow on hover */
.exec-cards .card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s;
}
.exec-cards .card:hover {
  transform: translateY(-2px);
  border-color: oklch(0.55 0.10 250 / 0.45);
  box-shadow: 0 8px 32px -8px oklch(0.55 0.16 250 / 0.25),
              0 0 0 1px oklch(0.55 0.10 250 / 0.12);
}

/* Inventory rows — subtle glow on hover */
.invr {
  transition: background 0.12s, border-color 0.15s, box-shadow 0.15s;
}
.invr:hover {
  border-color: oklch(0.55 0.10 250 / 0.35) !important;
  box-shadow: inset 0 0 0 1px oklch(0.55 0.10 250 / 0.08),
              0 0 16px -4px oklch(0.55 0.14 250 / 0.15);
}

/* People cards — lift on hover */
.ppl-card {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.18s, box-shadow 0.18s;
}
.ppl-card:hover {
  transform: translateY(-2px);
  border-color: oklch(0.55 0.10 250 / 0.4);
  box-shadow: 0 6px 24px -6px oklch(0.55 0.14 250 / 0.2);
}

/* Session list items — accent left rail glow on hover/select */
.sl-item {
  transition: background 0.12s, border-color 0.15s, box-shadow 0.15s;
}
.sl-item:hover, .sl-item-on {
  box-shadow: inset 3px 0 0 var(--accent),
              0 0 0 1px var(--glass-stroke);
}
.sl-item-on {
  box-shadow: inset 3px 0 0 var(--accent),
              0 0 0 1px oklch(0.65 0.18 250 / 0.45),
              0 0 20px -6px oklch(0.65 0.16 250 / 0.18);
}

/* Chip/tag hover micro-interaction */
.chip, .sd-tag, .sl-risk-chip {
  transition: opacity 0.12s, border-color 0.12s;
}
.chip:hover, .sd-tag:hover { opacity: 0.85; }

/* Nav tab — add a shine underline on hover */
.nav-tab {
  transition: color 0.15s, opacity 0.15s;
}
.nav-tab:not(.on):hover { opacity: 0.8; }

.live-dot-wrap { display: flex; align-items: center; gap: 5px; font-size: 12px; }

.loading-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 60vh; gap: 16px;
}
.loading-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid oklch(0.55 0.04 265 / 0.2);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
.loading-label { font-size: 13px; color: var(--dim); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ============================================================
   Sessions v2 additions — KPI strip, grouped view, rollup
   ============================================================ */

/* KPI strip above sessions list */
.ses-kpi-strip {
  display: flex; gap: 1px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.ses-kpi-cell {
  flex: 1; min-width: 0;
  padding: 5px 10px;
  background: oklch(0.58 0.06 265 / 0.08);
  display: flex; flex-direction: column; gap: 1px;
}
.ses-kpi-cell + .ses-kpi-cell { border-left: 1px solid var(--line-soft); }
.ses-kpi-val {
  font-size: 15px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  color: var(--fg);
}
.ses-kpi-lbl {
  font-size: 9.5px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted);
}
.ses-kpi-scope {
  text-transform: none; letter-spacing: 0; opacity: 0.7; font-weight: 400;
}

/* ── Session list loading fade — dims in-place instead of emptying the list ── */
.ses-list-fading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.ses-list { transition: opacity 0.15s ease; }

/* ── New-sessions banner ──────────────────────────────────────────────────── */
.ses-new-banner {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 7px 12px;
  background: oklch(0.78 0.20 245 / 0.12);
  border: 1px solid oklch(0.65 0.18 250 / 0.35);
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600; color: var(--accent);
  cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s;
  margin-bottom: 6px; flex-shrink: 0;
}
.ses-new-banner:hover {
  background: oklch(0.78 0.20 245 / 0.20);
  border-color: oklch(0.65 0.18 250 / 0.55);
}
[data-theme="dark"] .ses-new-banner {
  background: oklch(0.55 0.16 250 / 0.14);
  border-color: oklch(0.65 0.18 250 / 0.40);
  color: var(--fg);
}
[data-theme="dark"] .ses-new-banner:hover {
  background: oklch(0.55 0.16 250 / 0.22);
}

/* ── Refresh button ────────────────────────────────────────────────────────── */
.ses-refresh-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; font-size: 11px; font-weight: 500;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 5px; color: var(--muted); cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.ses-refresh-btn:hover:not(:disabled) { background: var(--bg-3); color: var(--fg-2); border-color: var(--accent); }
.ses-refresh-btn:disabled { opacity: 0.5; cursor: default; }
.ses-refresh-btn svg { transition: transform .4s ease; }
.ses-refresh-spinning svg { animation: spin 0.7s linear infinite; }
[data-theme="dark"] .ses-refresh-btn { background: oklch(0.55 0.04 265 / 0.06); border-color: var(--line-soft); }
[data-theme="dark"] .ses-refresh-btn:hover:not(:disabled) { background: oklch(0.55 0.08 265 / 0.12); border-color: oklch(0.65 0.18 250 / 0.4); color: var(--fg); }

/* ── Session Analytics / Metrics panel ────────────────────────────────────── */
.ses-metrics {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: oklch(0.58 0.06 265 / 0.05);
  margin-bottom: 6px;
  flex-shrink: 0;
}
.ses-metrics-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px 5px;
  border-bottom: 1px solid var(--line-soft);
}
.ses-metrics-title {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted);
}
.ses-metrics-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); transition: background .1s, color .1s;
}
.ses-metrics-close:hover { background: oklch(0.55 0.04 265 / 0.12); color: var(--fg-2); }
.ses-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line-soft);
}
.ses-metric-card {
  background: var(--bg-1);
  padding: 8px 10px;
}
.ses-metric-card-wide {
  grid-column: span 2;
}
@media (max-width: 700px) {
  .ses-metric-card-wide { grid-column: span 1; }
}
.ses-mc-lbl {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); margin-bottom: 7px;
}
.ses-mc-bar-rows {
  display: flex; flex-direction: column; gap: 4px;
}
.ses-mc-bar-row {
  display: grid; grid-template-columns: 90px 1fr 28px;
  align-items: center; gap: 5px;
}
.ses-mc-bar-row-click {
  cursor: pointer; border-radius: 4px;
  padding: 2px 4px; margin: -2px -4px;
  transition: background .12s ease;
}
.ses-mc-bar-row-click:hover {
  background: oklch(0.55 0.04 265 / 0.08);
}
[data-theme="dark"] .ses-mc-bar-row-click:hover {
  background: oklch(0.58 0.022 260 / 0.20);
}
.ses-mc-bar-lbl {
  font-size: 10.5px; color: var(--fg-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ses-mc-bar-lbl-mono {
  font-family: var(--font-mono); font-size: 9.5px;
}
.ses-mc-bar-track {
  height: 5px; background: oklch(0.55 0.04 265 / 0.12);
  border-radius: 3px; overflow: hidden;
}
.ses-mc-bar-fill {
  height: 100%; border-radius: 3px;
  transition: width .25s ease;
  opacity: 0.85;
}
.ses-mc-bar-val {
  font-size: 10px; font-variant-numeric: tabular-nums;
  color: var(--muted); text-align: right;
}
.ses-mc-footnote {
  font-size: 9.5px; color: var(--dim); margin-top: 6px;
}
/* Sparkline */
.ses-mc-spark-wrap {
  margin-bottom: 4px;
}
.ses-mc-spark {
  width: 100%; height: 38px; display: block;
}
.ses-mc-spark-ticks {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--dim); margin-top: 2px;
}
/* Dark mode overrides */
[data-theme="dark"] .ses-metrics { background: oklch(0.55 0.04 265 / 0.04); }
[data-theme="dark"] .ses-metric-card { background: oklch(0.22 0.016 260); }
[data-theme="dark"] .ses-mc-bar-track { background: oklch(0.55 0.04 265 / 0.18); }

/* ── Analytics toggle button in toolbar ────────────────────────────────────── */
.ses-analytics-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; font-size: 11px; font-weight: 500;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 5px; color: var(--muted); cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.ses-analytics-btn:hover { background: var(--bg-3); color: var(--fg-2); border-color: var(--accent); }
.ses-analytics-btn.on {
  background: oklch(0.78 0.20 245 / 0.14);
  border-color: oklch(0.65 0.18 250 / 0.45);
  color: var(--fg);
}
[data-theme="dark"] .ses-analytics-btn { background: oklch(0.55 0.04 265 / 0.06); border-color: var(--line-soft); }
[data-theme="dark"] .ses-analytics-btn:hover { background: oklch(0.55 0.08 265 / 0.12); color: var(--fg); border-color: oklch(0.65 0.18 250 / 0.4); }
[data-theme="dark"] .ses-analytics-btn.on { background: oklch(0.55 0.16 250 / 0.18); border-color: oklch(0.65 0.18 250 / 0.5); }

/* View-mode toggle (Grouped / Chronological) */
.ses-view-toggle {
  display: flex; gap: 0;
  border: 1px solid var(--line-soft);
  border-radius: 6px; overflow: hidden; flex-shrink: 0;
}
.ses-vt-btn {
  padding: 4px 10px; font-size: 11px; font-weight: 500;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font: inherit;
  transition: background .12s, color .12s;
}
.ses-vt-btn + .ses-vt-btn { border-left: 1px solid var(--line-soft); }
.ses-vt-btn:hover { background: oklch(0.55 0.04 265 / 0.10); color: var(--fg-2); }
.ses-vt-btn.on { background: oklch(0.78 0.20 245 / 0.18); color: var(--fg); }
.ses-vt-sep {
  width: 1px; background: var(--line-soft); margin: 2px 0;
}

/* ── Quick-find bar (interest slider · persona · incident · sort) ─────────── */
.ses-qf-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 0 4px;
  border-top: 1px solid var(--line-soft);
}
.ses-qf-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted); cursor: default; user-select: none;
  white-space: nowrap;
}
.ses-qf-slider {
  width: 80px; height: 3px;
  accent-color: var(--accent);
  cursor: pointer;
}
.ses-qf-select {
  padding: 3px 7px; font-size: 11px; font-weight: 500;
  background: var(--bg-3); border: 1px solid var(--line-soft);
  border-radius: 5px; color: var(--fg-2); cursor: pointer;
  outline: none; font-family: inherit;
}
.ses-qf-select:hover { border-color: var(--accent); }
.ses-qf-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; font-size: 11px; font-weight: 600;
  background: var(--bg-3); border: 1px solid var(--line-soft);
  border-radius: 5px; color: var(--muted); cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.ses-qf-toggle:hover { color: var(--fg-2); border-color: var(--accent); }
.ses-qf-toggle.on {
  background: oklch(0.84 0.26 20 / 0.18); color: var(--crit);
  border-color: oklch(0.84 0.26 20 / 0.50);
}
.ses-qf-sort {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted); margin-left: auto;
}

/* Grouped view: day-bucket headers */
.ses-group-user {
  padding: 10px 14px 6px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line-soft);
  background: oklch(0.55 0.04 265 / 0.06);
  cursor: pointer;
  user-select: none;
}
.ses-group-user-name {
  font-size: 12px; font-weight: 600; color: var(--fg-2); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ses-group-user-meta { font-size: 10.5px; color: var(--muted); flex-shrink: 0; }
.ses-group-caret {
  font-size: 9px; color: var(--muted); flex-shrink: 0; transition: transform .15s;
}
.ses-group-caret.open { transform: rotate(90deg); }

.ses-day-bucket { margin: 0; }
.ses-day-hdr {
  padding: 4px 14px 3px;
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--dim);
  background: oklch(0.55 0.04 265 / 0.04);
  border-bottom: 1px solid var(--line-soft);
}

/* MCP filter chip — clickable on list item */
.ses-mcp-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 4px;
  background: oklch(0.68 0.14 150 / 0.10); color: var(--ok);
  border: 0.5px solid oklch(0.68 0.14 150 / 0.25);
  font-family: var(--font-mono, monospace);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.ses-mcp-chip:hover { background: oklch(0.68 0.14 150 / 0.22); border-color: oklch(0.68 0.14 150 / 0.50); }
.ses-mcp-chip.active { background: oklch(0.68 0.14 150 / 0.28); border-color: oklch(0.68 0.14 150 / 0.65); }

/* Risk callout panel in detail pane */
.sd-risk-callout {
  margin: 8px 0 4px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--crit);
  padding: 10px 14px 11px;
}
.sd-risk-callout-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--crit);
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 8px;
}
.sd-risk-signal-list {
  margin: 0; padding: 0 0 0 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.sd-risk-signal-list li {
  font-size: 11.5px; line-height: 1.5; color: var(--fg-2);
}
.sd-risk-signal-list li strong { color: var(--fg); font-weight: 600; }
.sd-risk-score-bar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.sd-risk-score-fraction {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.sd-risk-score-track {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--bg-3);
  overflow: hidden;
}
.sd-risk-score-fill {
  height: 100%; border-radius: 2px;
  transition: width .3s;
}

/* Event rollup group */
.se-rollup {
  margin-bottom: 4px;
}
.se-rollup-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 6px; cursor: pointer;
  transition: background .12s;
}
.se-rollup-hdr:hover { background: oklch(0.55 0.04 265 / 0.12); }
.se-rollup-count {
  font-size: 11px; font-weight: 600; color: var(--fg-2);
  font-family: var(--font-mono, monospace);
}
.se-rollup-label { font-size: 11px; color: var(--muted); flex: 1; }
.se-rollup-caret { font-size: 9px; color: var(--muted); transition: transform .15s; }
.se-rollup-caret.open { transform: rotate(90deg); }
.se-rollup-body { padding: 2px 0 0 14px; }

/* ============================================================
   Inventory v2 — discovered-agents redesign
   All classes prefixed with .invx- (new design system)
   ============================================================ */

/* Page wrapper */
.invx-page {
  display: flex; flex-direction: column; gap: 6px;
}

/* ── Segmented control (By Agent / By User) ───────────────── */
.invx-seg-ctrl {
  display: flex;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.invx-seg-btn {
  padding: 5px 14px;
  border: none; border-radius: 6px;
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.invx-seg-btn:hover { color: var(--fg-2); }
.invx-seg-btn.invx-seg-btn-on {
  background: white;
  color: var(--fg);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
[data-theme="dark"] .invx-seg-ctrl { background: oklch(0.20 0.016 260); border-color: var(--line-soft); }
[data-theme="dark"] .invx-seg-btn.invx-seg-btn-on { background: oklch(0.30 0.02 260); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }

/* ── Filter panel ─────────────────────────────────────────── */
.invx-filter-panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 10px;
}

/* ── Filter header bar with chips ─────────────────────────── */
.invx-filter-header-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
  min-height: 36px;
  flex-wrap: wrap;
}
.invx-filter-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--fg-2);
  letter-spacing: 0.01em; flex-shrink: 0;
}
.invx-hchip {
  display: inline-flex; align-items: center; gap: 3px;
  background: oklch(0.78 0.20 245 / 0.13);
  border: 1px solid oklch(0.78 0.20 245 / 0.40);
  border-radius: 5px; padding: 2px 6px;
}
.invx-hchip-text {
  font-size: 10.5px; font-weight: 600; color: var(--accent);
  letter-spacing: 0.03em;
}
.invx-hchip-x {
  background: none; border: none; color: oklch(0.60 0.12 245); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0; margin-left: 1px;
  display: inline-flex; align-items: center; opacity: 0.7;
}
.invx-hchip-x:hover { color: var(--crit); opacity: 1; }
.invx-clear-all {
  background: none; border: none; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--crit); padding: 2px 4px;
  flex-shrink: 0; opacity: 0.8; transition: opacity .12s;
}
.invx-clear-all:hover { opacity: 1; }

.invx-filter-body {
  display: flex; flex-wrap: nowrap; gap: 0;
  overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  background: var(--bg-1);
}

/* ── Facet card ───────────────────────────────────────────── */
.invx-facet-card {
  background: var(--bg-1);
  flex: 0 0 auto; min-width: 140px; max-width: 220px;
  padding: 10px 10px 8px;
  border-right: 1px solid var(--line-soft);
}
.invx-facet-card:last-child { border-right: none; }

.invx-facet-title {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--fg-2);
  margin-bottom: 6px;
}
.invx-facet-badge {
  background: var(--accent); color: white;
  border-radius: 999px; font-size: 9px; font-weight: 700;
  padding: 0 5px; line-height: 15px; min-width: 15px; text-align: center;
  flex-shrink: 0;
}

.invx-facet-scroll {
  display: flex; flex-direction: column; gap: 0;
  max-height: 155px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}

/* ── Facet row (replaces checkbox) ────────────────────────── */
.invx-facet-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 5px; border-radius: 4px;
  cursor: pointer; user-select: none;
  transition: background .1s;
}
.invx-facet-row:hover { background: oklch(0.50 0.14 235 / 0.08); }
.invx-facet-row--on {
  background: oklch(0.50 0.14 235 / 0.12);
}
.invx-facet-row-label {
  font-size: 11.5px; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg-2);
  transition: color .1s;
}
.invx-facet-row--on .invx-facet-row-label { color: var(--accent); font-weight: 500; }
.invx-facet-row-count {
  font-size: 10px; color: var(--dim);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
  min-width: 16px; text-align: right;
}
.invx-facet-row--on .invx-facet-row-count { color: oklch(0.65 0.12 235); }

.invx-facet-search {
  font-family: var(--font-sans);
  width: 100%; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 3px 7px; font-size: 11px; color: var(--fg);
  outline: none; margin-bottom: 4px; display: block;
}
.invx-facet-search:focus { border-color: var(--accent); }

/* ── Active filter chips (legacy, kept for compat) ─────────── */
.invx-chips-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 2px 0;
}
.invx-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: oklch(0.78 0.20 245 / 0.15);
  border: 1px solid oklch(0.78 0.20 245 / 0.50);
  border-radius: 6px; padding: 3px 8px; font-size: 11px;
  color: var(--fg);
}
.invx-chip-label { color: var(--accent); font-weight: 600; opacity: 0.8; }
.invx-chip-value { font-weight: 600; color: var(--fg); }
.invx-chip-x {
  background: none; border: none; color: oklch(0.60 0.10 245); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 0 0 2px;
  display: inline-flex; align-items: center;
}
.invx-chip-x:hover { color: var(--crit); }
.invx-chip-clear {
  background: none; border: 1px solid var(--line); cursor: pointer;
  color: var(--fg-2); font-size: 11px; border-radius: 6px; padding: 3px 8px;
  transition: all .12s;
}
.invx-chip-clear:hover { color: var(--fg); border-color: var(--accent); background: oklch(0.78 0.20 245 / 0.08); }

/* ── Table ─────────────────────────────────────────────────── */
.invx-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(140%);
}

.invx-table {
  width: 100%; border-collapse: collapse;
}

.invx-th {
  padding: 6px 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--dim);
  text-align: left; white-space: nowrap;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  user-select: none;
}
.invx-th[role="button"] { cursor: pointer; }
.invx-th[role="button"]:hover { color: var(--fg-2); }

.invx-row {
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background .1s;
}
.invx-row:hover { background: oklch(0.55 0.04 265 / 0.06); }
.invx-row.invx-row-open { background: oklch(0.55 0.04 265 / 0.09); }
.invx-row:last-child { border-bottom: none; }

.invx-td {
  padding: 5px 10px; vertical-align: middle;
  font-size: 12px; color: var(--fg-2);
}

.invx-td-account { font-family: var(--font-mono); font-size: 10.5px; }
.invx-td-time { color: var(--muted); font-size: 11.5px; white-space: nowrap; }

/* Agent cell */
.invx-agent-cell { display: flex; align-items: center; gap: 8px; }
.invx-agent-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.invx-agent-name { font-size: 12.5px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.invx-agent-slug { font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invx-agent-device {
  display: flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--muted);
}
.invx-agent-email { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.invx-sep { color: var(--dim); margin: 0 2px; }

/* Risk cell */
.invx-risk-cell { display: flex; align-items: center; gap: 6px; }

/* Usage cell */
.invx-usage-cell { display: flex; align-items: center; gap: 5px; }

/* Count cells (toolsets / skills) */
.invx-count-cell {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fg-2); font-size: 12px;
}

/* Expanded row */
.invx-expanded-row { background: var(--bg-1); }

/* Empty state */
.invx-empty-row { padding: 0; }

/* ── Pagination ──────────────────────────────────────────── */
.invx-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px; font-size: 12px; color: var(--muted);
  flex-wrap: wrap; gap: 8px;
}
.invx-pag-info { flex-shrink: 0; }
.invx-pag-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.invx-pag-size {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
}
.invx-pag-select {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--fg);
  border-radius: 6px; padding: 3px 6px; font-size: 12px; font-family: var(--font-sans);
  cursor: pointer; outline: none;
}
.invx-pag-pages { display: flex; align-items: center; gap: 2px; }
.invx-pag-btn {
  background: transparent; border: 1px solid var(--line);
  color: var(--muted); font-size: 12px; padding: 3px 8px; border-radius: 5px;
  cursor: pointer; transition: all .12s;
  font-family: var(--font-sans);
}
.invx-pag-btn:hover:not(:disabled) { background: oklch(0.55 0.04 265 / 0.12); color: var(--fg); }
.invx-pag-btn:disabled { opacity: 0.3; cursor: default; }
.invx-pag-btn.invx-pag-btn-on {
  background: oklch(0.55 0.14 245 / 0.22); color: var(--accent);
  border-color: oklch(0.65 0.14 245 / 0.4); font-weight: 600;
}

/* ── ExpandedRow (new-shape) ─────────────────────────────── */
.invx-findings-list { display: flex; flex-direction: column; gap: 6px; }
.invx-findings-clean {
  font-size: 11.5px; color: var(--ok); padding: 8px 0; font-style: italic;
}
.invx-finding-card {
  border-left: 3px solid transparent;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 0;
}
.invx-fc-header {
  display: flex; align-items: center; gap: 7px;
  user-select: none;
}
.invx-fc-header:hover .invx-fc-title { color: var(--fg); }
.invx-fc-title  { font-size: 12px; font-weight: 600; color: var(--fg-2); flex: 1; letter-spacing: -0.005em; }
.invx-fc-body   { padding-top: 7px; display: flex; flex-direction: column; gap: 5px; }
.invx-fc-desc   { font-size: 11.5px; color: var(--fg-2); line-height: 1.6; }
.invx-fc-evidence { display: flex; flex-wrap: wrap; gap: 4px; }
.invx-fc-ev-chip {
  font-size: 10px; font-family: var(--font-mono); color: var(--muted);
  background: oklch(0.55 0.04 265 / 0.10); border: 1px solid oklch(0.55 0.04 265 / 0.18);
  padding: 1px 6px; border-radius: 3px;
}
.invx-finding-sev {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; padding: 1px 6px;
  border-radius: 3px; flex-shrink: 0; letter-spacing: 0.04em;
}
.invx-sev-critical, .invx-sev-crit { background: oklch(0.72 0.20 25 / 0.16); color: var(--crit); }
.invx-sev-high     { background: oklch(0.72 0.20 25 / 0.12); color: var(--crit); }
.invx-sev-elevated { background: oklch(0.82 0.22 55 / 0.14); color: oklch(0.68 0.18 55); }
.invx-sev-medium, .invx-sev-med { background: oklch(0.82 0.16 75 / 0.14); color: var(--warn); }
.invx-sev-low      { background: oklch(0.55 0.04 265 / 0.12); color: var(--dim); }
/* Source badge on findings */
.invx-finding-source {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
}
.invx-finding-source.endpoint { background: oklch(0.55 0.18 260 / 0.15); color: oklch(0.65 0.14 260); }
.invx-finding-source.session  { background: oklch(0.55 0.12 165 / 0.15); color: oklch(0.6 0.11 165); }

/* Toolset list */
.invx-mcp-list { display: flex; flex-direction: column; gap: 4px; }
.invx-mcp-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; padding: 5px 8px; border-radius: 4px;
  background: oklch(0.55 0.04 265 / 0.04);
}
.invx-mcp-row-risk { background: oklch(0.72 0.14 55 / 0.05); }
.invx-mcp-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.invx-mcp-name { color: var(--fg-2); font-weight: 500; flex: 1; letter-spacing: -0.005em; }
.invx-mcp-cat  { font-size: 10.5px; color: var(--dim); }
.invx-mcp-tag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
}
.invx-mcp-tag.crit { background: oklch(0.72 0.20 25 / 0.14); color: var(--crit); }
.invx-mcp-tag.warn { background: oklch(0.82 0.16 75 / 0.14); color: var(--warn); }

/* Process status in header strip */
.invx-hs-proc { display: inline-flex; align-items: center; gap: 5px; }
.invx-hs-proc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Endpoint section badge */
.invx-h-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 3px; margin-left: 8px; vertical-align: middle;
}
.invx-h-badge.mdm { background: oklch(0.55 0.18 260 / 0.18); color: oklch(0.7 0.15 260); }

/* Endpoint section styling */
.invx-endpoint-section { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }

/* Light theme overrides for new inventory */
[data-theme="light"] .invx-filter-panel { background: #f5f6f8; border-color: oklch(0.85 0.01 240 / 0.7); }
[data-theme="light"] .invx-filter-header-bar { background: #eff0f3; border-bottom-color: oklch(0.85 0.01 240 / 0.7); }
[data-theme="light"] .invx-filter-body { background: #fff; }
[data-theme="light"] .invx-chip { background: oklch(0.92 0.10 245 / 0.30); border-color: oklch(0.65 0.16 245 / 0.45); }
[data-theme="light"] .invx-chip-value { color: oklch(0.28 0.14 255); }
[data-theme="light"] .invx-chip-label { color: oklch(0.45 0.14 255); }
[data-theme="light"] .invx-chip-x { color: oklch(0.45 0.14 255); }
[data-theme="light"] .invx-hchip { background: oklch(0.92 0.10 245 / 0.25); border-color: oklch(0.65 0.16 245 / 0.45); }
[data-theme="light"] .invx-facet-card { background: #fff; border-right-color: oklch(0.85 0.01 240 / 0.7); }
[data-theme="light"] .invx-facet-row:hover { background: oklch(0.50 0.14 235 / 0.06); }
[data-theme="light"] .invx-facet-row--on { background: oklch(0.50 0.14 235 / 0.10); }
[data-theme="light"] .invx-facet-row-label { color: oklch(0.35 0.02 265); }
[data-theme="light"] .invx-facet-search { background: #f5f6f8; border-color: oklch(0.80 0.02 240); }
[data-theme="light"] .invx-table-wrap { background: #fff; border-color: oklch(0.85 0.01 240 / 0.7); }
[data-theme="light"] .invx-th { background: #f5f6f8; }
[data-theme="light"] .invx-row:hover { background: #f8f9fb; }
[data-theme="light"] .invx-row.invx-row-open { background: #f0f2f5; }
[data-theme="light"] .invx-expanded-row { background: #f5f6f8; }
[data-theme="light"] .invx-pag-select { background: #fff; }
}

/* ============================================================
   Executive Dashboard — Objective 2 additions
   ============================================================ */

/* Time selector */
.exec-time-row {
  grid-column: span 12;
  display: flex; align-items: center; justify-content: flex-end;
  margin-bottom: -4px;
}
.time-selector {
  display: flex; gap: 2px;
  background: oklch(0.55 0.04 265 / 0.06);
  border: 1px solid var(--line-soft);
  border-radius: 8px; padding: 3px;
}
.ts-btn {
  padding: 4px 14px; border-radius: 6px;
  background: transparent; border: 0;
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .15s;
  letter-spacing: -0.003em;
}
.ts-btn:hover { color: var(--fg); }
.ts-btn.on {
  background: oklch(0.55 0.04 265 / 0.16);
  color: var(--fg);
  border: 1px solid var(--line-soft);
}

/* Sankey toggle */
.sankey-toggle-wrap { display: flex; flex-direction: column; gap: 0; }
.sk-toggle {
  display: flex; gap: 2px; align-self: flex-start;
  background: oklch(0.55 0.04 265 / 0.06);
  border: 1px solid var(--line-soft);
  border-radius: 7px; padding: 2px;
  margin-bottom: 10px; margin-top: 2px;
}
.sk-tog-btn {
  padding: 4px 12px; border-radius: 5px;
  background: transparent; border: 0;
  color: var(--muted); font: inherit; font-size: 11.5px;
  cursor: pointer; transition: all .15s;
}
.sk-tog-btn:hover { color: var(--fg-2); }
.sk-tog-btn.on {
  background: oklch(0.55 0.04 265 / 0.14);
  color: var(--fg);
  border: 1px solid var(--line-soft);
}

/* Stacked flow bars */
.sfb-wrap {
  display: flex; gap: 20px; align-items: flex-start;
  padding-top: 4px;
}
.sfb-col { flex: 1; min-width: 0; }
.sfb-head {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted);
  margin-bottom: 10px;
}
.sfb-row {
  display: grid; grid-template-columns: 120px 1fr 38px;
  gap: 8px; align-items: center;
  padding: 4px 0;
}
.sfb-label {
  font-size: 11.5px; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sfb-track {
  height: 8px; border-radius: 4px;
  background: oklch(0.55 0.04 265 / 0.07);
  overflow: hidden;
}
.sfb-fill {
  height: 100%; border-radius: 4px;
  transition: width 0.4s ease;
}
.sfb-val {
  font-size: 11px; color: var(--muted);
  text-align: right; font-variant-numeric: tabular-nums;
}
.sfb-divider {
  width: 1px; background: var(--line-soft);
  align-self: stretch; flex-shrink: 0;
  margin-top: 20px;
}

/* Top risks ordered list */
.top-risks-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.tr-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 10px; border-radius: 6px;
  background: transparent;
  border-left: 2px solid transparent;
  transition: background .15s;
}
.tr-click { cursor: pointer; }
.tr-click:hover { background: oklch(0.55 0.04 265 / 0.07); }
.tr-rank {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; min-width: 18px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0; margin-top: 3px;
}
.tr-body { flex: 1; min-width: 0; }
.tr-label {
  font-size: 13px; font-weight: 600; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.008em;
}
.tr-expl {
  font-size: 11.5px; color: var(--muted);
  margin-top: 2px; line-height: 1.4;
}
.tr-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
}
.tr-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tr-users { font-size: 11px; color: var(--dim); }
.tr-delta { font-size: 11px; color: var(--dim); }
.tr-sev-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0; margin-top: 7px;
}

/* Agent type pie */
.atp-wrap {
  display: flex; gap: 18px; align-items: flex-start;
  padding-top: 4px;
}

/* Agent type breakdown (expanded span-8) */
.atb-wrap {
  display: flex; gap: 16px; align-items: flex-start;
  padding-top: 4px;
}
.atb-donut-col { flex-shrink: 0; }
.atb-table {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.atb-thead {
  display: grid;
  grid-template-columns: 8px 1fr 88px;
  gap: 6px; align-items: center;
  padding: 0 6px 6px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
.atb-th-name  { }
.atb-th-num   { text-align: right; }
.atb-row {
  display: grid;
  grid-template-columns: 8px 1fr 88px;
  gap: 6px; align-items: center;
  padding: 5px 6px;
  border-radius: 5px;
  transition: background .12s, opacity .15s;
}
.atb-row-click:hover { background: oklch(0.55 0.04 265 / 0.06); }
.atb-swatch {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
.atb-name {
  font-size: 12.5px; font-weight: 500; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.atb-name:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.atb-num {
  font-size: 13px; font-weight: 700; color: var(--fg);
  text-align: right; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 5px; justify-content: flex-end;
  min-width: 0; letter-spacing: -0.01em;
}
.atb-pct {
  font-size: 10px; color: var(--muted); font-weight: 500;
  white-space: nowrap;
}

/* MCP server activity list */
.mcpm-wrap {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 4px;
}
.mcpm-summary {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; color: var(--fg-2);
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
.mcpm-stat strong { font-weight: 700; font-size: 12px; color: var(--fg); }
.mcpm-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.mcpm-list { display: flex; flex-direction: column; gap: 1px; }
.mcpm-row {
  display: grid;
  grid-template-columns: 8px 1fr 54px 44px;
  gap: 8px; align-items: center;
  padding: 6px 6px; border-radius: 5px;
  text-decoration: none;
  transition: background .12s;
}
.mcpm-row:hover { background: oklch(0.55 0.04 265 / 0.06); }
.mcpm-perm-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.mcpm-name {
  font-size: 12.5px; font-weight: 500; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.mcpm-row:hover .mcpm-name { color: var(--fg); }
.mcpm-bar-wrap {
  height: 5px; background: var(--line-soft); border-radius: 3px;
  overflow: hidden;
}
.mcpm-bar-fill { height: 100%; border-radius: 3px; opacity: 0.7; transition: width .3s; }
.mcpm-sess {
  font-size: 13px; font-weight: 700; color: var(--fg);
  text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; line-height: 1;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  letter-spacing: -0.01em;
}
.mcpm-sess-label  { font-size: 10px; font-weight: 500; color: var(--muted); line-height: 1; letter-spacing: 0; }
.mcpm-users {
  font-size: 13px; font-weight: 600; color: var(--fg-2); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  letter-spacing: -0.01em;
}
.mcpm-users-label { font-size: 10px; font-weight: 500; color: var(--muted); line-height: 1; letter-spacing: 0; }
.mcpm-footer {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px dashed var(--line-soft);
  font-size: 11px; font-weight: 500; color: var(--muted);
}
.mcpm-legend-item { display: flex; align-items: center; gap: 5px; }
.mcpm-leg-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ── Connector coverage card — cov- prefix ───────────────────────────────── */
.cov-wrap { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.cov-summary {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; color: var(--fg-2);
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
.cov-stat strong { font-weight: 700; font-size: 12px; color: var(--fg); }
.cov-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.cov-list { display: flex; flex-direction: column; gap: 4px; }
.cov-row {
  display: grid;
  grid-template-columns: 24px 1fr 56px;
  gap: 10px; align-items: center;
  padding: 8px 6px; border-radius: 6px;
}
.cov-icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); flex-shrink: 0;
}
.cov-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cov-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cov-name {
  font-size: 13px; font-weight: 600; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.cov-name-sub { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.cov-bar-track { height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.cov-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; opacity: 0.85; }
.cov-bar-ok   { background: var(--ok); }
.cov-bar-warn { background: var(--warn); }
.cov-bar-dim  { background: var(--dim); }
.cov-counts {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cov-endpoints { font-size: 14px; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; }
.cov-share { font-size: 10px; font-weight: 500; color: var(--muted); }
.cov-footer {
  padding-top: 8px; border-top: 1px dashed var(--line-soft);
  font-size: 11px; font-weight: 500; color: var(--muted);
}

/* ==========================================================================
   Admin Console — adm- prefix
   ========================================================================== */

/* Page layout */
.adm-page { display: flex; flex-direction: column; gap: 20px; padding-bottom: 48px; }
.adm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.adm-tab {
  padding: 8px 16px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: 13px; font-weight: 500; color: var(--muted);
  cursor: pointer; border: none; background: none;
  transition: color .15s;
}
.adm-tab:hover { color: var(--fg); }
.adm-tab-on { color: var(--fg); border-bottom: 2px solid var(--accent); }

/* Users table */
.adm-table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table th {
  text-align: left; padding: 8px 10px;
  color: var(--muted); font-weight: 500; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft);
}
.adm-table td {
  padding: 9px 10px; border-bottom: 1px solid oklch(0.55 0.022 260 / 0.15);
  vertical-align: middle;
}
.adm-table tr:hover td { background: oklch(0.55 0.04 265 / 0.04); }
.adm-email { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.adm-name  { font-size: 13px; color: var(--fg); }
.adm-ts    { font-size: 11.5px; color: var(--dim); white-space: nowrap; }

/* Role chips row */
.adm-roles { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.adm-role-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; transition: all .12s;
}
.adm-role-chip-admin    { background: oklch(0.82 0.22 245 / 0.14); border-color: oklch(0.82 0.22 245 / 0.35); color: var(--accent); }
.adm-role-chip-security { background: oklch(0.84 0.26 20 / 0.10);  border-color: oklch(0.84 0.26 20 / 0.30);  color: var(--crit); }
.adm-role-chip-viewer   { background: oklch(0.88 0.22 155 / 0.10); border-color: oklch(0.88 0.22 155 / 0.30); color: var(--ok); }
.adm-role-chip-readonly_exec { background: oklch(0.92 0.24 65 / 0.10); border-color: oklch(0.92 0.24 65 / 0.30); color: var(--warn); }
.adm-role-chip-add { background: oklch(0.55 0.04 265 / 0.07); border: 1px dashed var(--line-soft); color: var(--muted); }
.adm-role-chip:hover { opacity: 0.8; }

/* Role dropdown */
.adm-role-menu-wrap { position: relative; }
.adm-role-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 4px; min-width: 160px; box-shadow: 0 8px 24px oklch(0 0 0 / 0.35);
}
.adm-role-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 6px; font-size: 12.5px; cursor: pointer;
  color: var(--fg-2); transition: background .1s;
}
.adm-role-opt:hover { background: oklch(0.55 0.04 265 / 0.12); color: var(--fg); }
.adm-role-opt-active { color: var(--accent); }

/* Row action buttons */
.adm-btn {
  padding: 4px 10px; border-radius: var(--r-sm); font: inherit; font-size: 12px;
  cursor: pointer; border: 1px solid var(--line-soft); background: transparent; color: var(--fg-2);
  transition: all .12s;
}
.adm-btn:hover { border-color: var(--line); color: var(--fg); }
.adm-btn-save  { border-color: oklch(0.82 0.22 245 / 0.4); color: var(--accent); }
.adm-btn-save:hover  { background: oklch(0.82 0.22 245 / 0.1); }
.adm-btn-danger { border-color: oklch(0.84 0.26 20 / 0.3); color: var(--crit); }
.adm-btn-danger:hover { background: oklch(0.84 0.26 20 / 0.08); }
.adm-btn-ok    { border-color: oklch(0.88 0.22 155 / 0.3); color: var(--ok); }
.adm-btn-ok:hover { background: oklch(0.88 0.22 155 / 0.08); }
.adm-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Disabled user row */
.adm-row-disabled td { opacity: .55; }

/* Audit log */
.adm-audit-meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--dim);
  max-width: 320px; white-space: pre-wrap; word-break: break-all;
}
.adm-meta-toggle {
  background: none; border: none; color: var(--accent); font-size: 11px;
  cursor: pointer; padding: 0; text-decoration: underline dotted;
}

/* Analysis panel */
.adm-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.adm-stat-card {
  background: oklch(0.55 0.04 265 / 0.06); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 14px 16px;
}
.adm-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.adm-stat-val   { font-size: 24px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }

/* Pagination strip */
.adm-pager { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.adm-pager button { padding: 4px 10px; border-radius: var(--r-sm); font: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--line-soft); background: transparent; color: var(--fg-2); }
.adm-pager button:disabled { opacity: .4; cursor: not-allowed; }

/* ── Findings triage tab ─────────────────────────────────────────────────── */
.fnd-kpi-strip {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; align-items: stretch;
}
.fnd-kpi {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: var(--r-md);
  background: oklch(0.55 0.04 265 / 0.07); border: 1px solid var(--line-soft);
  min-width: 90px;
}
.fnd-kpi-sm { flex-direction: row; gap: 6px; min-width: unset; padding: 8px 12px; }
.fnd-kpi-crit { background: oklch(0.72 0.20 25 / 0.1); border-color: oklch(0.72 0.20 25 / 0.3); }
.fnd-kpi-val { font-size: 22px; font-weight: 600; font-family: var(--font-display); color: var(--fg); font-variant-numeric: tabular-nums; }
.fnd-kpi-sm .fnd-kpi-val { font-size: 16px; }
.fnd-kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }

.fnd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fnd-table th { padding: 8px 10px; text-align: left; font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line-soft); background: oklch(0.55 0.04 265 / 0.04); white-space: nowrap; }
.fnd-row { cursor: pointer; transition: background .1s; }
.fnd-row td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.fnd-row:hover td { background: oklch(0.55 0.04 265 / 0.05); }
.fnd-row-open td { background: oklch(0.55 0.04 265 / 0.08); }

.fnd-td-title { max-width: 320px; }
.fnd-kind { display: block; font-size: 12px; font-weight: 600; color: var(--fg); text-transform: capitalize; }
.fnd-title-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }

.fnd-user { display: flex; flex-direction: column; gap: 2px; }
.fnd-host { font-size: 11px; color: var(--muted); }

.fnd-age { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.fnd-sla-breach { color: var(--crit); font-weight: 600; }
.fnd-sla-warn   { color: var(--warn); }
.fnd-sla-badge  { display: inline-block; margin-left: 5px; font-size: 9px; padding: 1px 5px; border-radius: 4px; background: oklch(0.72 0.20 25 / 0.15); color: var(--crit); text-transform: uppercase; font-weight: 700; vertical-align: middle; }

.fnd-td-actions { white-space: nowrap; }
.fnd-act-btn { padding: 4px 10px; font-size: 11.5px; }

.fnd-reason-sel {
  padding: 3px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--line-soft); background: var(--bg-2); color: var(--fg-2);
  font: inherit; font-size: 11.5px; cursor: pointer; margin-right: 4px;
}

.fnd-detail-row td { padding: 0 !important; border-bottom: 2px solid var(--line-soft); }
.fnd-detail { padding: 14px 16px; background: oklch(0.55 0.04 265 / 0.04); }
.fnd-desc { font-size: 12.5px; color: var(--fg-2); margin: 0 0 10px; line-height: 1.55; }
.fnd-evidence { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.fnd-ev-chip { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: oklch(0.55 0.04 265 / 0.1); color: var(--muted); font-family: var(--font-mono, monospace); }
.fnd-frameworks { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.fnd-fw-chip { font-size: 10.5px; padding: 2px 7px; border-radius: 4px; background: oklch(0.55 0.08 265 / 0.08); color: var(--accent); border: 1px solid oklch(0.55 0.08 265 / 0.15); }
.fnd-notes-row { margin-top: 6px; }
.fnd-notes-inp { width: 100%; max-width: 480px; padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: var(--bg-2); color: var(--fg); font: inherit; font-size: 12px; }
.fnd-filter-sel { padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: var(--bg-2); color: var(--fg); font: inherit; font-size: 12px; cursor: pointer; }

/* ── Intent Intelligence Card ──────────────────────────────────────────────── */
.iic-card {
  grid-column: span 12;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card header */
.iic-card-header {
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 12px;
}
.iic-card-title { font-size: 15px; font-weight: 700; color: var(--fg); }
.iic-card-sub   { font-size: 12px; color: var(--muted); }
.iic-shift-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 4px; background: oklch(0.82 0.22 55 / 0.15);
  color: oklch(0.82 0.22 55); text-transform: uppercase; border: 1px solid oklch(0.82 0.22 55 / 0.35);
}
.iic-fallback-badge {
  margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 4px; background: oklch(0.55 0.04 265 / 0.18);
  color: var(--dim); text-transform: uppercase;
}
.iic-section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); margin-bottom: 8px;
}
.iic-empty-state {
  font-size: 12px; color: var(--muted); font-style: italic; padding: 12px 0;
}

/* ── Header KPIs ────────────────────────────────────────────────────────── */
.iic-header-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.iic-kpi {
  background: var(--bg-2);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.iic-kpi-click {
  cursor: pointer; transition: background .12s ease;
}
.iic-kpi-click:hover { background: var(--bg-3); }
.iic-kpi-label { font-size: 11px; color: var(--muted); font-weight: 500; }
.iic-kpi-value {
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.2; color: var(--fg);
}
.iic-kpi-sub { font-size: 10px; color: var(--muted); }

/* ── Main row: Active Threats + Threat Breakdown ───────────────────────────── */
.iic-main-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.iic-main-left  { display: flex; flex-direction: column; }
.iic-main-right { display: flex; flex-direction: column; }

/* Active Threats */
.iic-threats-list {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-3) transparent;
}
.iic-threats-list::-webkit-scrollbar { width: 4px; }
.iic-threats-list::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 2px; }

.iic-threat-row {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}
.iic-threat-row:hover { background: oklch(0.55 0.04 265 / 0.08); }
.iic-threat-incident {
  background: oklch(0.84 0.26 20 / 0.05);
  border-color: oklch(0.84 0.26 20 / 0.25);
}
.iic-threat-incident:hover { background: oklch(0.84 0.26 20 / 0.10); }

.iic-threat-accent {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
}
.iic-threat-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.iic-threat-headline {
  font-size: 12px; font-weight: 600; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iic-threat-meta { font-size: 11px; color: var(--muted); }
.iic-threat-badges {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.iic-threat-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 1px 6px; border-radius: 3px;
  border: 1px solid;
}
.iic-threat-incident-badge {
  background: oklch(0.72 0.20 25 / 0.15);
  color: var(--crit);
  border-color: oklch(0.72 0.20 25 / 0.35);
}
.iic-threat-score {
  font-size: 10px; font-weight: 700;
}

/* Threat Breakdown */
.iic-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.iic-breakdown-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 2fr auto;
  gap: 8px;
  align-items: center;
}
.iic-breakdown-row-click {
  cursor: pointer; border-radius: 5px;
  padding: 3px 5px; margin: -3px -5px;
  transition: background .12s ease;
}
.iic-breakdown-row-click:hover { background: oklch(0.55 0.04 265 / 0.08); }
[data-theme="dark"] .iic-breakdown-row-click:hover { background: oklch(0.58 0.022 260 / 0.20); }
.iic-breakdown-name {
  font-size: 11px; font-weight: 500; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iic-breakdown-viz {
  position: relative;
  height: 18px;
  background: oklch(0.55 0.04 265 / 0.06);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.iic-breakdown-bar {
  height: 100%;
  border-radius: var(--r-sm);
  transition: width 0.4s ease;
}
.iic-breakdown-count {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: right; min-width: 28px;
}

/* ── Bottom row: Team Risk + When Risk Happens ─────────────────────────────── */
.iic-bottom-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
.iic-bottom-left  { display: flex; flex-direction: column; }
.iic-bottom-right { display: flex; flex-direction: column; }

/* Team Risk */
.iic-team-risk {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.iic-team-risk-header {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.iic-team-risk-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}
.iic-team-risk-row-click {
  cursor: pointer; border-radius: 5px;
  padding: 4px 5px; margin: 0 -5px;
  transition: background .12s ease;
}
.iic-team-risk-row-click:hover { background: oklch(0.55 0.04 265 / 0.08); }
[data-theme="dark"] .iic-team-risk-row-click:hover { background: oklch(0.58 0.022 260 / 0.20); }
.iic-team-name {
  font-size: 11px; font-weight: 500; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iic-team-risk-bar-wrap {
  position: relative;
  height: 16px;
  background: oklch(0.55 0.04 265 / 0.04);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.iic-team-risk-bar-total {
  position: absolute; left: 0; top: 0;
  height: 100%;
  background: oklch(0.55 0.04 265 / 0.12);
  border-radius: var(--r-sm);
  transition: width 0.4s ease;
}
.iic-team-risk-bar {
  position: absolute; left: 0; top: 0;
  height: 100%;
  background: var(--crit);
  border-radius: var(--r-sm);
  transition: width 0.4s ease;
  opacity: 0.75;
}
.iic-team-risk-count {
  position: absolute;
  right: 6px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--fg);
  display: flex; align-items: baseline; gap: 1px;
}

/* When Risk Happens heatmap */
.iic-heatmap-wrap { position: relative; }
.iic-heatmap-grid {
  display: grid;
  grid-template-columns: 30px repeat(24, 1fr);
  gap: 1px;
}
.iic-hm-corner { }
.iic-hm-hour {
  font-size: 8px; color: var(--dim); text-align: center;
  line-height: 1.2; padding-bottom: 2px;
}
.iic-hm-day {
  font-size: 9px; color: var(--muted); align-self: center;
  font-weight: 500; letter-spacing: 0.02em;
}
.iic-hm-cell {
  height: 12px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: opacity 0.12s;
}
.iic-hm-cell:hover { outline: 1px solid var(--fg); opacity: 0.85; }
.iic-hm-after {
  border-color: oklch(0.82 0.22 55 / 0.60) !important;
}
.iic-hm-tooltip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--bg-3); border: 1px solid var(--line-soft);
  border-radius: 5px; padding: 4px 8px;
  font-size: 11px; color: var(--fg);
  pointer-events: none; white-space: nowrap; z-index: 10;
}


/* ── Concern Breakdown Card ──────────────────────────────────────────────── */
.cbc-wrap {
  display: flex;
  gap: 20px;
  align-items: center;
  min-height: 130px;
}
.cbc-donut-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cbc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.cbc-row {
  display: grid;
  grid-template-columns: 8px minmax(100px, 1.4fr) 1fr 30px 38px;
  gap: 8px;
  align-items: center;
  transition: opacity .15s;
}
.cbc-row-click {
  cursor: pointer; border-radius: 5px;
  padding: 3px 6px; margin: -3px -6px;
  transition: background .12s ease, opacity .15s;
}
.cbc-row-click:hover { background: oklch(0.55 0.04 265 / 0.08); }
[data-theme="dark"] .cbc-row-click:hover { background: oklch(0.58 0.022 260 / 0.20); }
.cbc-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.cbc-name {
  font-size: 12.5px; font-weight: 500; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.cbc-bar-wrap {
  height: 6px;
  background: oklch(0.55 0.04 265 / 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.cbc-bar {
  height: 100%; border-radius: 3px;
  transition: width 0.4s ease;
  opacity: 0.85;
}
.cbc-pct {
  font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums;
  text-align: right; flex-shrink: 0; color: var(--muted);
}
.cbc-count {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: right; flex-shrink: 0; letter-spacing: -0.01em;
}
.cbc-empty, .cbc-no-concerns {
  font-size: 12px; color: var(--muted); font-style: italic; padding: 8px 0;
}

/* ==========================================================================
   Light-mode overrides for hard-coded dark components
   ========================================================================== */

/* MCP table — light mode overrides (base styles are dark-first) */
.mcpt-filterbar { background: var(--bg-2); border-color: var(--line); }
.mcpt-table-wrap { background: var(--bg-1); border-color: var(--line); }
.mcpt-thead-row { background: var(--bg-2) !important; }
.mcpt-th { color: var(--fg-2); border-bottom-color: var(--line); }
.mcpt-filter-chips { background: var(--bg-1); border-color: var(--line); }
.mcpt-fchip { background: transparent; color: var(--fg-2); border-color: transparent; }
.mcpt-fchip:hover { color: var(--fg); }
.mcpt-fchip-on { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(37,99,235,0.30); }
.mcpt-filter-label { color: var(--fg-2); }
.mcpt-filter-count { color: var(--fg-2); }
.mcpt-filter-toggle { color: var(--fg-1); }
.mcpt-filter-num { background: var(--bg-1); border-color: var(--line); color: var(--fg); }
.mcpt-td { border-bottom-color: var(--line-soft); }
.mcpt-td-num { color: var(--fg-1); }
.mcpt-td-time { color: var(--fg-3); }
.mcpt-name-text { color: var(--fg); }
.mcpt-row-clickable:hover { background: rgba(0,0,0,0.025); }
.mcpt-row-open { background: rgba(37,99,235,0.04) !important; }
.mcpt-strip-row > td.mcpt-td-strip { background: var(--bg-2); }
.mcpt-row.mcpt-row-open + .mcpt-strip-row > td.mcpt-td-strip { background: oklch(0.96 0.01 250); }
.mcpt-drawer-row td { background: var(--bg-2); }
.mcpt-drawer { border-top-color: var(--line); }

[data-theme="dark"] .mcpt-filterbar { background: oklch(0.18 0.012 260); }
[data-theme="dark"] .mcpt-table-wrap { background: oklch(0.16 0.010 260 / 0.70); border-color: var(--line-soft); }
[data-theme="dark"] .mcpt-thead-row { background: oklch(0.19 0.014 260) !important; }
[data-theme="dark"] .mcpt-th { color: var(--fg-3); border-bottom-color: var(--line-soft); }
[data-theme="dark"] .mcpt-filter-chips { background: oklch(0.16 0.010 260); border-color: var(--line-soft); }
[data-theme="dark"] .mcpt-fchip { background: transparent; color: var(--fg-2); border-color: transparent; }
[data-theme="dark"] .mcpt-fchip:hover { color: var(--fg); }
[data-theme="dark"] .mcpt-fchip-on { background: oklch(0.28 0.018 260); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 0 0 1px oklch(0.65 0.18 250 / 0.50); }
[data-theme="dark"] .mcpt-fchip-risk-high.mcpt-fchip-on { color: oklch(0.78 0.20 25); box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 0 0 1px oklch(0.70 0.22 25 / 0.50); }
[data-theme="dark"] .mcpt-fchip-risk-med.mcpt-fchip-on  { color: oklch(0.80 0.18 55); box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 0 0 1px oklch(0.75 0.18 55 / 0.50); }
[data-theme="dark"] .mcpt-fchip-risk-healthy.mcpt-fchip-on { color: oklch(0.74 0.18 145); box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 0 0 1px oklch(0.65 0.20 145 / 0.50); }
[data-theme="dark"] .mcpt-filter-count { background: oklch(0.16 0.010 260); border-color: var(--line-soft); color: var(--fg-2); }
[data-theme="dark"] .mcpt-filter-num { background: oklch(0.24 0.016 260); border-color: var(--line-soft); color: var(--fg); }
[data-theme="dark"] .mcpt-filter-search { background: oklch(0.24 0.016 260); border-color: var(--line-soft); color: var(--fg); }
[data-theme="dark"] .mcpt-filter-divider { background: var(--line-soft); }
[data-theme="dark"] .mcpt-row-open { background: oklch(0.22 0.014 260 / 0.80) !important; }
[data-theme="dark"] .mcpt-strip-row > td.mcpt-td-strip { background: oklch(0.17 0.010 260 / 0.30); }
[data-theme="dark"] .mcpt-row.mcpt-row-open + .mcpt-strip-row > td.mcpt-td-strip { background: oklch(0.22 0.014 260 / 0.80); }
[data-theme="dark"] .mcpt-drawer-row td { background: oklch(0.20 0.014 260 / 0.90); }

/* CLI inspector */
.cli-line { background: var(--bg-2); border-color: var(--line); }
.cli-crit { background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.2); }
[data-theme="dark"] .cli-line { background: oklch(0.14 0.02 265 / 0.6); border-color: var(--line-soft); }
[data-theme="dark"] .cli-crit { background: oklch(0.72 0.20 25 / 0.06); border-color: oklch(0.72 0.20 25 / 0.4); }

/* Scatter tooltip */
.scatter-tip { background: var(--bg-1); border-color: var(--line); color: var(--fg); }
[data-theme="dark"] .scatter-tip { background: oklch(0.18 0.03 265 / 0.95); border-color: var(--line); }

/* Timeline */
.atl-card { background: var(--bg-2); border-color: var(--line-soft); }
.atl-critical .atl-card { background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.18); }
.atl-warn .atl-card { background: rgba(217,119,6,0.05); border-color: rgba(217,119,6,0.15); }
[data-theme="dark"] .atl-card { background: oklch(0.55 0.04 265 / 0.06); border-color: var(--line-soft); }
[data-theme="dark"] .atl-critical .atl-card { background: oklch(0.72 0.20 25 / 0.07); border-color: oklch(0.72 0.20 25 / 0.3); }
[data-theme="dark"] .atl-warn .atl-card { background: oklch(0.82 0.16 75 / 0.05); border-color: oklch(0.82 0.16 75 / 0.2); }

/* Investigation headline */
.iv-headline { background: rgba(220,38,38,0.04); border-color: rgba(220,38,38,0.15); }
[data-theme="dark"] .iv-headline { background: linear-gradient(135deg, oklch(0.32 0.13 25 / 0.18), oklch(0.22 0.03 265 / 0.6)); border-color: oklch(0.72 0.20 25 / 0.3); }

/* People toolbar */
.ppl-toolbar { background: var(--bg-1); border-color: var(--line); }
[data-theme="dark"] .ppl-toolbar { background: oklch(0.55 0.04 265 / 0.04); }

/* People card head hover */
.ppl-card-head:hover { background: var(--bg-2); }
[data-theme="dark"] .ppl-card-head:hover { background: oklch(0.55 0.04 265 / 0.04); }

/* People lane header */
.ppl-lane-hd { background: var(--bg-1); border-color: var(--line); }
.ppl-lane-hd:hover { background: var(--bg-2); }
[data-theme="dark"] .ppl-lane-hd { background: oklch(0.55 0.04 265 / 0.04); border-color: var(--line-soft); backdrop-filter: blur(10px); }
[data-theme="dark"] .ppl-lane-hd:hover { background: oklch(0.55 0.04 265 / 0.08); }

/* Sessions list items */
.sl-item { background: var(--bg-1); border-color: var(--line); }
.sl-item:hover { background: var(--bg-2); border-color: rgba(0,0,0,0.14); }
.sl-item-on { background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.45); box-shadow: inset 4px 0 0 #2563eb; }
.sl-item-critical { background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.25); }
.sl-item-critical:hover { background: rgba(220,38,38,0.09); border-color: rgba(220,38,38,0.40); }
.sl-item-elevated { background: rgba(217,119,6,0.05); border-color: rgba(217,119,6,0.22); }
.sl-item-elevated:hover { background: rgba(217,119,6,0.09); border-color: rgba(217,119,6,0.36); }
[data-theme="dark"] .sl-item { background: oklch(0.58 0.06 265 / 0.12); border-color: var(--line-soft); }
[data-theme="dark"] .sl-item:hover { background: oklch(0.60 0.07 265 / 0.20); border-color: var(--line); }
[data-theme="dark"] .sl-item-on { background: oklch(0.78 0.22 245 / 0.18); border-color: oklch(0.82 0.22 245 / 0.65); box-shadow: 0 0 0 1px oklch(0.82 0.22 245 / 0.30), inset 4px 0 0 oklch(0.82 0.22 245); }
[data-theme="dark"] .sl-item-critical { background: oklch(0.84 0.26 20 / 0.10); border-color: oklch(0.84 0.26 20 / 0.35); }
[data-theme="dark"] .sl-item-critical:hover { background: oklch(0.84 0.26 20 / 0.16); border-color: oklch(0.84 0.26 20 / 0.50); }
[data-theme="dark"] .sl-item-elevated { background: oklch(0.92 0.24 65 / 0.09); border-color: oklch(0.92 0.24 65 / 0.32); }
[data-theme="dark"] .sl-item-elevated:hover { background: oklch(0.92 0.24 65 / 0.15); border-color: oklch(0.92 0.24 65 / 0.46); }

/* Sessions master toolbar search */
.search { background: var(--bg-1); border-color: var(--line); }
[data-theme="dark"] .search { background: var(--glass-bg); border-color: var(--glass-stroke); }

/* People table header */
.ppl-th { background: var(--bg-2); }
[data-theme="dark"] .ppl-th { background: oklch(0.55 0.04 265 / 0.05); }

/* Nav user menu */
.nav-user-menu { background: var(--bg-1); border-color: var(--line); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
[data-theme="dark"] .nav-user-menu { background: var(--bg-2); border-color: var(--glass-stroke); box-shadow: 0 8px 32px oklch(0 0 0 / 0.5); }

/* Loading screen */
.loading-screen { background: var(--bg-0); }
[data-theme="dark"] .loading-screen { background: var(--bg-0); }

/* Login card */
.login-card { box-shadow: 0 4px 24px rgba(0,0,0,0.10); }
[data-theme="dark"] .login-card { box-shadow: 0 24px 64px oklch(0 0 0 / 0.5); }

/* IIC card */
.iic-card { background: var(--glass-bg); border-color: var(--glass-stroke); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
[data-theme="dark"] .iic-card { background: var(--glass-bg); border-color: var(--glass-stroke); backdrop-filter: blur(12px); box-shadow: none; }

/* People stat active */
.ppl-stat-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 4px 16px rgba(37,99,235,0.15); }
[data-theme="dark"] .ppl-stat-on { box-shadow: 0 0 0 1px var(--accent), 0 12px 40px oklch(0.72 0.13 245 / 0.18); }

/* Page header border */
.page-header { border-bottom: 1px solid var(--line-soft); padding-bottom: 16px; margin-bottom: 0; }

/* Sessions quick-filter tabs (ses-q) */
.ses-q { background: var(--bg-2); color: var(--fg-2); }
.ses-q span { background: rgba(0,0,0,0.10); color: var(--fg-2); font-weight: 600; }
.ses-q:hover { background: var(--bg-3); border-color: var(--line); color: var(--fg); }
.ses-q.on { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.ses-q-crit.on { background: #fee2e2; border-color: #fca5a5; color: var(--crit); }
.ses-q-warn.on { background: #fef3c7; border-color: #fcd34d; color: var(--warn); }
.ses-q-live.on { background: #dcfce7; border-color: #86efac; color: var(--ok); }
[data-theme="dark"] .ses-q { background: oklch(0.55 0.04 265 / 0.08); }
[data-theme="dark"] .ses-q span { background: oklch(0.55 0.04 265 / 0.12); color: var(--muted); }
[data-theme="dark"] .ses-q:hover { background: oklch(0.55 0.06 265 / 0.14); border-color: var(--line); color: var(--fg); }
[data-theme="dark"] .ses-q.on { background: oklch(0.78 0.20 245 / 0.18); border-color: oklch(0.78 0.20 245 / 0.60); color: var(--fg); }
[data-theme="dark"] .ses-q-crit.on { background: oklch(0.78 0.24 22 / 0.18); border-color: oklch(0.78 0.24 22 / 0.60); color: var(--crit); }
[data-theme="dark"] .ses-q-warn.on { background: oklch(0.88 0.20 68 / 0.18); border-color: oklch(0.88 0.20 68 / 0.55); color: var(--warn); }
[data-theme="dark"] .ses-q-live.on { background: oklch(0.84 0.19 158 / 0.18); border-color: oklch(0.84 0.19 158 / 0.55); color: var(--ok); }

/* Filter toolbar buttons (filt-btn) */
.filt-btn { background: var(--bg-1); border-color: var(--line); color: var(--fg-2); }
.filt-btn:hover { background: var(--bg-2); border-color: rgba(37,99,235,0.4); color: var(--fg); }
.filt-btn-on { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.35); color: var(--accent); }
[data-theme="dark"] .filt-btn { background: oklch(0.55 0.04 265 / 0.05); border-color: var(--line-soft); color: var(--fg-2); }
[data-theme="dark"] .filt-btn:hover { background: oklch(0.55 0.16 250 / 0.08); border-color: oklch(0.65 0.18 250 / 0.4); color: var(--fg); }
[data-theme="dark"] .filt-btn-on { background: oklch(0.55 0.16 250 / 0.14); border-color: oklch(0.65 0.18 250 / 0.5); color: var(--fg); }

/* Active filter chips (filt-chip) */
.filt-chip { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.30); color: var(--accent); }
.filt-chip:hover { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.30); }
.filt-chip-l { color: rgba(37,99,235,0.65); }
[data-theme="dark"] .filt-chip { background: oklch(0.55 0.16 250 / 0.12); border-color: oklch(0.65 0.18 250 / 0.35); color: var(--fg); }
[data-theme="dark"] .filt-chip:hover { background: oklch(0.6 0.2 25 / 0.2); border-color: oklch(0.7 0.2 25 / 0.5); }
[data-theme="dark"] .filt-chip-l { color: var(--muted); }

/* Generic chip */
.chip { background: var(--bg-2); border-color: var(--line); color: var(--fg-2); }
.chip:hover { background: var(--bg-3); border-color: var(--line); color: var(--fg); }
.chip-on { background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.40); color: var(--accent); }
[data-theme="dark"] .chip { background: oklch(0.55 0.04 265 / 0.06); border-color: var(--line-soft); color: var(--fg-2); }
[data-theme="dark"] .chip:hover { background: oklch(0.55 0.06 265 / 0.14); border-color: var(--line); color: var(--fg); }
[data-theme="dark"] .chip-on { background: oklch(0.55 0.16 250 / 0.18); border-color: oklch(0.65 0.18 250 / 0.5); color: var(--fg); }

/* Session detail header tags (sd-tag) */
.sd-tag { background: var(--bg-2); border-color: var(--line); color: var(--fg-2); }
[data-theme="dark"] .sd-tag { background: oklch(0.55 0.04 265 / 0.1); border-color: var(--line-soft); color: var(--fg-2); }

/* Pop search (dropdown filter search box) */
.pop-search { background: var(--bg-1); border-color: var(--line); }
.pop-search:focus-within { border-color: rgba(37,99,235,0.5); background: var(--bg-1); }
[data-theme="dark"] .pop-search { background: oklch(0.55 0.04 265 / 0.12); border-color: var(--line-soft); }
[data-theme="dark"] .pop-search:focus-within { border-color: oklch(0.65 0.12 240 / 0.6); background: oklch(0.55 0.04 265 / 0.12); }

/* People tool chip — removed as colors are now inline */

/* Session detail search */
.sd-search-wrap { background: var(--bg-2); border-color: var(--line); }
.sd-search-wrap:focus-within { background: var(--bg-1); border-color: rgba(37,99,235,0.5); }
[data-theme="dark"] .sd-search-wrap { background: oklch(0.55 0.04 265 / 0.08); border-color: var(--line-soft); }
[data-theme="dark"] .sd-search-wrap:focus-within { border-color: oklch(0.65 0.12 240 / 0.6); background: oklch(0.55 0.04 265 / 0.12); }

/* ── Card action link ──────────────────────────────────────────────────────── */
.card-action-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 11.5px; color: var(--muted); font-family: inherit;
  transition: color .15s;
}
.card-action-link:hover { color: var(--fg); }

/* ── Risk Registry screen ──────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   DETECTED INCIDENTS PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

/* CSS custom property shims used by incidents components */
:root {
  --border: var(--line);
  --surface: var(--bg-2);
  --bg: var(--bg-1);
  --ok-faint: color-mix(in srgb, var(--ok) 10%, transparent);
  --warn-faint: color-mix(in srgb, var(--warn) 10%, transparent);
  --crit-faint: color-mix(in srgb, var(--crit) 10%, transparent);
  --brand: var(--accent);
}

.incidents-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 4px;
  background: var(--bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
[data-theme="dark"] .incidents-panel {
  box-shadow: 0 2px 16px rgba(0,0,0,0.28);
}

/* ── Panel header ── */
.incidents-panel-header {
  padding: 14px 18px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.incidents-panel-title-row { display: flex; flex-direction: column; gap: 2px; }
.incidents-title {
  font-size: 14px; font-weight: 800; color: var(--fg);
  letter-spacing: -0.02em;
}
.incidents-sub { font-size: 10.5px; color: var(--muted); }
.incidents-panel-header-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; color: var(--muted); white-space: nowrap; flex-shrink: 0;
}
.incidents-panel-header-meta strong { font-weight: 700; color: var(--fg); }
.inc-meta-sep { width: 1px; height: 14px; background: var(--border); flex-shrink: 0; }

/* ── Metrics panel ── */
.inc-metrics-panel {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0;
}

/* ── KPI strip (top bar) ── */
.inc-kpi-strip {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--border);
}
.inc-kpi-strip-item {
  flex: 1; display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 14px 17px;
  border-top: none; border-bottom: none;
  border-right: 1px solid var(--border);
  border-left: 3px solid transparent;
  text-align: left; font-family: inherit; background: transparent;
  position: relative; overflow: hidden;
}
.inc-kpi-strip-item:last-child { border-right: none; }
.inc-kpi-strip-n {
  font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em; line-height: 1; flex-shrink: 0;
}
.inc-kpi-strip-labels { display: flex; flex-direction: column; gap: 1px; }
.inc-kpi-strip-label { font-size: 11.5px; font-weight: 600; color: var(--fg); line-height: 1.3; }
.inc-kpi-strip-sub   { font-size: 10px; color: var(--muted); }
.inc-kpi-strip-pct {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 700; opacity: 0.75;
}
/* clickable KPI cards — neutral default, color only on hover/active */
.inc-kpi-clickable {
  cursor: pointer; transition: background 0.15s, box-shadow 0.15s;
}
.inc-kpi-clickable:hover {
  background: color-mix(in srgb, var(--kpi-accent, var(--accent)) 7%, var(--surface));
  box-shadow: inset 0 -2px 0 var(--kpi-accent, var(--accent));
}
.inc-kpi-clickable:hover .inc-kpi-strip-label { color: var(--kpi-accent, var(--fg)); }
.inc-kpi-active {
  background: color-mix(in srgb, var(--kpi-accent, var(--accent)) 8%, var(--surface));
  box-shadow: inset 0 -3px 0 var(--kpi-accent, var(--accent));
  border-left-color: var(--kpi-accent, var(--accent)) !important;
}
.inc-kpi-active .inc-kpi-strip-label { color: var(--kpi-accent, var(--accent)); }
.inc-kpi-strip-arrow {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--muted); opacity: 0;
  transition: opacity 0.12s, right 0.12s;
}
.inc-kpi-clickable:hover .inc-kpi-strip-arrow { opacity: 1; right: 10px; }

.inc-metrics-collapse-btn {
  margin-left: auto; flex-shrink: 0; align-self: center; margin-right: 14px;
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; font-family: inherit;
  color: var(--muted); background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 10px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.inc-metrics-collapse-btn:hover {
  color: var(--fg); border-color: color-mix(in srgb, var(--fg) 30%, var(--border));
  background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.inc-metrics-collapse-btn svg { transition: transform 0.2s; }
.inc-metrics-collapsed .inc-kpi-strip { border-bottom: none; }

/* chart clear button */
.inc-chart-clear {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--crit); color: var(--crit); background: transparent;
  cursor: pointer; font-family: inherit; transition: background 0.1s;
}
.inc-chart-clear:hover { background: color-mix(in srgb, var(--crit) 10%, transparent); }
/* concern bar interactive */
.concern-bar-row-btn {
  background: none; border: none; border-left: 2px solid transparent;
  width: 100%; padding: 2px 0 2px 6px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.concern-bar-row-btn:hover {
  border-left-color: color-mix(in srgb, var(--cbar-color, var(--accent)) 60%, transparent);
}
.concern-bar-active {
  border-left-color: var(--cbar-color, var(--accent)) !important;
}
.concern-bar-active .concern-bar-name { font-weight: 700; color: var(--cbar-color, var(--accent)); }
.concern-bar-dimmed { opacity: 0.35; }
.concern-bar-dimmed:hover { opacity: 0.85; }

/* Charts layout: trend left, concern bars right — side by side */
.inc-metrics-charts {
  display: flex; gap: 0; border-top: 1px solid var(--border);
}
.inc-chart-block {
  padding: 12px 16px; flex: 1;
  border-right: 1px solid var(--border);
}
.inc-chart-block:last-child { border-right: none; }
.inc-chart-trend { flex: 1.4; min-width: 0; }
.inc-chart-block-wide { flex: 1; min-width: 0; }
.inc-chart-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.inc-chart-title {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.inc-chart-tabs { display: flex; gap: 3px; }
.inc-chart-tab {
  font-size: 10px; padding: 2px 9px; border-radius: 4px;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); cursor: pointer; font-family: inherit;
  transition: all 0.1s;
}
.inc-chart-tab.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.inc-chart-tab:not(.on):hover { background: var(--border); color: var(--fg); }
.inc-chart-empty { font-size: 11px; color: var(--muted); padding: 32px 0; text-align: center; }
.inc-sparkline-wrap { display: flex; flex-direction: column; gap: 6px; }
.inc-chart-legend-inline {
  display: flex; align-items: center; gap: 6px;
}
.inc-chart-leg-dot { width: 20px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.inc-chart-leg-txt { font-size: 11px; color: var(--muted); margin-right: 10px; }
/* trend chart container fills width */
.trend-chart-wrap { width: 100%; cursor: crosshair; display: block; }
/* chart trend block — flex so SVG fills remaining height */
.inc-chart-trend {
  display: flex; flex-direction: column;
}
.inc-chart-trend .inc-chart-header { flex-shrink: 0; }
.inc-chart-trend .trend-chart-wrap { flex: 1; min-height: 80px; }

/* Horizontal bar chart */
.concern-bar-chart { display: flex; flex-direction: column; gap: 6px; }
.concern-bar-row {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 155px 1fr 42px;
}
.concern-bar-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.concern-bar-icon { font-size: 13px; flex-shrink: 0; }
.concern-bar-name { font-size: 12px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.concern-bar-track {
  height: 10px; background: var(--bg-3); border-radius: 5px; overflow: hidden;
}
.concern-bar-fill {
  height: 100%; border-radius: 5px; position: relative; min-width: 3px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.concern-bar-crit {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 5px;
}
.concern-bar-count {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── Filter chip bar ── */
.inc-filter-bar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 9px 18px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.inc-filter-bar-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); margin-right: 2px; flex-shrink: 0;
}
.inc-filter-bar-sep {
  width: 1px; height: 16px; background: var(--border); flex-shrink: 0; margin: 0 2px;
}
.inc-filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; font-family: inherit;
  padding: 4px 11px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface); color: var(--fg);
  cursor: pointer; transition: all 0.12s; white-space: nowrap;
}
.inc-filter-chip:hover {
  border-color: var(--chip-color, var(--accent));
  color: var(--chip-color, var(--accent));
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 8%, var(--bg));
}
.inc-filter-chip-on {
  border-color: var(--chip-color, var(--accent));
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 14%, var(--bg));
  color: var(--chip-color, var(--accent));
  font-weight: 700;
}
.inc-filter-chip-count {
  font-size: 10px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, currentColor 12%, transparent);
  padding: 0 5px; border-radius: 8px; min-width: 18px;
  text-align: center; line-height: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
}
.inc-filter-clear {
  font-size: 11.5px; font-weight: 600; font-family: inherit;
  padding: 4px 11px; border-radius: 20px;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  cursor: pointer; margin-left: auto; transition: all 0.1s;
}
.inc-filter-clear:hover { color: var(--fg); border-color: var(--fg); }
/* checkmark on active bar */
.concern-bar-check {
  font-size: 10px; color: var(--cbar-color, var(--accent));
  margin-left: 4px; flex-shrink: 0;
}

/* ── Status tabs (Monday.com-style board columns) ── */
.inc-status-tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--border);
  background: var(--surface); padding: 0 20px;
}
.inc-status-tab {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--muted); font-family: inherit;
  padding: 11px 16px; border: none; background: transparent;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  cursor: pointer; transition: color 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.inc-status-tab:hover { color: var(--fg); }
.inc-status-tab-on { color: var(--fg); font-weight: 600; }
.inc-status-tab-badge {
  font-size: 10px; font-weight: 700; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px;
  background: var(--border); color: var(--fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; transition: background 0.1s, color 0.1s;
}
.inc-status-tab-on .inc-status-tab-badge,
.inc-status-tab-badge[style*="background"] { color: #fff; }

/* ── Concern sections ── */
.inc-sections { display: flex; flex-direction: column; }
.inc-empty-state {
  padding: 32px; text-align: center; font-size: 13px; color: var(--muted);
}

/* ── Tier dividers (Security Incidents vs Policy Violations) ── */
.inc-tier-divider {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.inc-tier-divider:first-child { border-top: none; }
.inc-tier-icon { font-size: 13px; flex-shrink: 0; }
.inc-tier-icon-svg { flex-shrink: 0; }
.inc-tier-label {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; white-space: nowrap;
}
.inc-tier-desc { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.inc-tier-line { flex: 1; height: 1px; background: var(--border); }
.inc-tier-count {
  font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 10px;
}
.inc-tier-security .inc-tier-label { color: var(--crit); }
.inc-tier-violation .inc-tier-label { color: var(--warn); }

/* ── Concern section ── */
.inc-concern-section {
  border-bottom: 1px solid var(--border);
}
.inc-concern-section:last-child { border-bottom: none; }
.inc-concern-all-resolved { opacity: 0.7; }

/* Redesigned concern header: left-accent bar + identity + stat blocks + action */
.inc-concern-divider {
  display: flex; align-items: stretch;
  background: var(--surface);
  cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  min-height: 52px;
}
.inc-concern-divider:hover { background: color-mix(in srgb, var(--border) 30%, var(--surface)); }
[data-theme="dark"] .inc-concern-divider:hover { background: color-mix(in srgb, var(--fg) 4%, var(--surface)); }

/* Left accent bar */
.inc-concern-divider-bar {
  width: 4px; flex-shrink: 0; border-radius: 0; align-self: stretch;
}

/* Chevron + identity block */
.inc-concern-divider-identity {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 10px 10px;
  width: 300px; flex-shrink: 0;
}
.inc-concern-chevron-sm { color: var(--muted); flex-shrink: 0; display: block; }
.inc-concern-divider-icon { font-size: 16px; flex-shrink: 0; line-height: 1; }
.inc-concern-divider-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.inc-concern-divider-title-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.inc-concern-divider-title { font-size: 13.5px; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; }
.inc-concern-divider-fw { font-size: 10.5px; color: var(--muted); }

/* Severity pill — sits in the title row */
.inc-sev-pill {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}

/* Stat blocks row — flex with separator lines */
.inc-concern-divider-stats {
  display: flex; align-items: center; border-left: 1px solid var(--border);
}
.inc-divider-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 18px; gap: 2px; border-right: 1px solid var(--border);
  height: 100%; white-space: nowrap; min-width: 72px;
}
.inc-divider-stat strong {
  font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1;
  letter-spacing: -0.03em;
}
.inc-divider-stat-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600;
}

.inc-concern-divider-actions { display: flex; align-items: center; padding: 0 12px; flex-shrink: 0; }
.inc-btn-ghost-sm {
  font-size: 11.5px; font-weight: 600; color: var(--accent);
  padding: 6px 14px; border-radius: 7px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  cursor: pointer; transition: all 0.12s; white-space: nowrap; font-family: inherit;
}
.inc-btn-ghost-sm:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  border-color: var(--accent); color: var(--accent);
}

/* ── Concern body (description + column headers + rows) ── */
.inc-concern-body { display: flex; flex-direction: column; }
.inc-concern-desc-text {
  font-size: 11.5px; color: var(--muted); line-height: 1.55;
  padding: 9px 24px 9px 56px; margin: 0;
  background: var(--bg); border-bottom: 1px solid var(--border);
}

/* Column header row */
.inc-col-headers {
  display: grid;
  grid-template-columns: 4px 220px 1fr 52px 120px 126px 36px;
  padding: 6px 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted);
}
.inc-col-h-stripe  { background: transparent; }
.inc-col-h-who     { padding: 0 14px 0 16px; }
.inc-col-h-intent  { padding: 0 16px; }
.inc-col-h-score   { padding: 0 8px; text-align: center; border-left: 1px solid var(--border); }
.inc-col-h-date    { padding: 0 12px; text-align: right; border-left: 1px solid var(--border); }
.inc-col-h-triage  { padding: 0 10px; text-align: center; border-left: 1px solid var(--border); }
.inc-col-h-actions { border-left: 1px solid var(--border); }

/* ── Timeline list ── */
.inc-timeline { background: var(--bg); }
.inc-timeline-scroll {
  /* no height cap — rows expand naturally and push page content down */
}
.inc-timeline-empty { padding: 14px 20px; font-size: 12px; color: var(--muted); }
/* ── Incident row ── */
.inc-row { border-bottom: 1px solid var(--border); }
.inc-row:last-child { border-bottom: none; }
.inc-row-resolved { opacity: 0.7; }

.inc-row-main {
  display: grid;
  grid-template-columns: 4px 220px 1fr 52px 120px 126px 36px;
  align-items: center;
  gap: 0;
  cursor: pointer;
  transition: background 0.1s;
}
.inc-row-main:hover { background: var(--surface); }
.inc-row-open .inc-row-main { background: var(--surface); }

/* Severity stripe */
.inc-row-stripe { height: 100%; min-height: 50px; flex-shrink: 0; opacity: 0.7; }

/* Who */
.inc-row-who {
  padding: 12px 14px 12px 16px;
  min-width: 0; border-right: 1px solid var(--border);
}
.inc-row-email {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inc-row-role {
  display: block; font-size: 10.5px; color: var(--muted); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Intent */
.inc-row-intent {
  padding: 12px 18px;
  font-size: 12.5px; color: var(--fg); line-height: 1.5; min-width: 0;
  opacity: 0.85;
}
.inc-row-no-intent { font-style: italic; opacity: 0.4; color: var(--muted); }

/* Score */
.inc-row-score-cell {
  padding: 12px 8px; display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--border);
}
.inc-row-score {
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 1.5px solid currentColor; border-radius: 6px;
  padding: 4px 8px; white-space: nowrap; text-align: center;
  background: color-mix(in srgb, currentColor 10%, transparent);
  min-width: 36px;
}

/* Date */
.inc-row-date-cell {
  padding: 12px 12px; display: flex; align-items: center; justify-content: flex-end;
  border-left: 1px solid var(--border);
}
.inc-row-date { font-size: 11.5px; color: var(--muted); white-space: nowrap; text-align: right; line-height: 1.5; }

/* Triage ⋯ button + dropdown */
.inc-triage-wrap { position: relative; flex-shrink: 0; }

/* ── Triage modal ── */
.triage-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.triage-modal {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  width: 460px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 0; overflow: hidden;
}
.triage-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.triage-modal-title { font-size: 13px; font-weight: 700; color: var(--fg); text-transform: uppercase; letter-spacing: 0.04em; }
.triage-modal-close {
  font-size: 18px; color: var(--muted); background: none; border: none;
  cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: background 0.1s; font-family: inherit;
}
.triage-modal-close:hover { background: var(--border); }
.triage-modal-session {
  padding: 12px 18px; background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.triage-session-email { font-size: 13px; font-weight: 600; color: var(--fg); }
.triage-session-intent { font-size: 11px; color: var(--muted); line-height: 1.5; }
.triage-actions-row {
  display: flex; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.triage-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border-radius: 8px; font-size: 12px; font-weight: 500;
  border: 1.5px solid var(--border); background: var(--surface);
  cursor: pointer; color: var(--fg); font-family: inherit;
  transition: all 0.12s;
}
.triage-action-btn:hover { border-color: var(--fg); background: var(--bg); }
.triage-action-btn.selected { font-weight: 700; }
.triage-action-icon { font-size: 14px; font-weight: 700; }
.triage-comment {
  width: 100%; margin: 0; padding: 12px 18px;
  font-size: 12px; font-family: inherit; color: var(--fg);
  background: var(--bg); border: none; border-bottom: 1px solid var(--border);
  resize: none; outline: none; line-height: 1.55;
}
.triage-comment::placeholder { color: var(--muted); }
.triage-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; background: var(--surface);
}
.triage-btn-cancel {
  padding: 7px 16px; border-radius: 7px; font-size: 12px; font-family: inherit;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  cursor: pointer; transition: background 0.1s;
}
.triage-btn-cancel:hover { background: var(--border); color: var(--fg); }
.triage-btn-confirm {
  padding: 7px 18px; border-radius: 7px; font-size: 12px; font-weight: 600; font-family: inherit;
  border: none; background: var(--fg); color: var(--bg);
  cursor: pointer; transition: opacity 0.1s;
}
.triage-btn-confirm:disabled { opacity: 0.4; cursor: not-allowed; }
.triage-btn-confirm:not(:disabled):hover { opacity: 0.85; }

/* ── Row expanded detail ── */
.inc-row-detail {
  padding: 14px 16px 16px 52px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
}
.inc-row-full-intent {
  font-size: 12px; color: var(--fg); line-height: 1.7; margin: 0;
  padding: 10px 14px;
  background: var(--bg); border-radius: 8px; border: 1px solid var(--border);
}
.inc-row-section { display: flex; flex-direction: column; gap: 6px; }
.inc-row-section-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
.inc-row-cmds {
  font-size: 11.5px; font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; margin: 0;
  color: oklch(0.62 0.2 22);
  overflow-x: auto; white-space: pre-wrap; word-break: break-all; line-height: 1.6;
}
[data-theme="light"] .inc-row-cmds { color: oklch(0.45 0.2 22); }
.inc-row-files { display: flex; flex-wrap: wrap; gap: 5px; }
.inc-file-chip {
  font-size: 10px; font-family: ui-monospace, monospace;
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px;
}
.inc-file-edit { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.inc-row-comment {
  font-size: 12px; color: var(--fg); line-height: 1.6; margin: 0;
  padding: 8px 12px; background: color-mix(in srgb, var(--ok) 6%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--ok) 20%, var(--border)); border-radius: 6px;
}
.inc-row-comment-by { font-size: 10px; color: var(--muted); margin-top: 2px; }
/* meta pills row (replaces old footer) */
.inc-row-meta-pills {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.inc-meta-pill {
  font-size: 10px; color: var(--muted); background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px;
}

/* ── Action bar at bottom of expanded row ── */
.inc-row-action-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--border);
}

/* Primary CTA: Open full session */
.inc-action-open-session {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; font-family: inherit;
  padding: 7px 14px; border-radius: 7px;
  background: var(--fg); color: var(--bg); border: none;
  cursor: pointer; transition: opacity 0.12s; white-space: nowrap;
}
.inc-action-open-session:hover { opacity: 0.82; }


/* ── Row chevron ── */
.inc-row-chevron-cell {
  padding: 0 10px; display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--border);
}
.inc-row-chevron { color: var(--muted); display: block; }

/* ── Triage dropdown ── */
.inc-row-triage-cell {
  padding: 0 10px; display: flex; align-items: center; flex-shrink: 0;
  border-left: 1px solid var(--border);
}
.triage-dd { position: relative; }
.triage-dd-trigger {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--tdd-color, var(--border));
  background: var(--tdd-bg, transparent); color: var(--tdd-color, var(--fg));
  font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: opacity 0.1s;
}
.triage-dd-trigger:hover { opacity: 0.8; }
.triage-dd-caret { font-size: 9px; opacity: 0.7; }
.triage-dd-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 200;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  min-width: 148px; overflow: hidden;
}
.triage-dd-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; font-size: 12px; font-weight: 500;
  color: var(--tdd-item-color, var(--fg)); background: none; border: none;
  cursor: pointer; text-align: left;
}
.triage-dd-item:hover { background: var(--bg-1); }
.triage-dd-item-icon { font-size: 11px; font-weight: 700; width: 14px; text-align: center; }

/* ── Section expand button ── */
.inc-section-expand-btn {
  width: 100%; padding: 10px 16px; font-size: 11.5px; font-weight: 500; font-family: inherit;
  color: var(--muted); background: var(--surface); border: none; border-top: 1px solid var(--border);
  cursor: pointer; text-align: center; letter-spacing: 0.01em;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: color 0.15s, background 0.15s;
}
.inc-section-expand-btn:hover { background: var(--bg); color: var(--fg); }
.inc-section-expand-btn svg { flex-shrink: 0; }


/* ── Risk inventory section divider ── */
.risks-section-divider {
  display: flex; align-items: center; gap: 12px;
  padding: 0 2px;
}
.risks-section-divider-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); white-space: nowrap;
}
.risks-section-divider-line { flex: 1; height: 1px; background: var(--border); }

/* ── Risks screen ────────────────────────────────────────────────────────── */
.risks-screen {
  display: flex; flex-direction: column; gap: 16px;
  padding-bottom: 40px;
}

/* ══ AI Chat (ACE Analyst) ═════════════════════════════════════════════════════
   Futuristic, native-feeling analyst surface. Built entirely on design tokens so
   it tracks the light/dark themes. Shared by the slide-over panel + #chat screen. */

:root { --chat-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%); }

/* Header "Ask AI" launch button — gradient pill with a soft glow */
.chat-launch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; border: none;
  background: var(--chat-grad); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 2px 12px -2px color-mix(in oklab, var(--accent) 60%, transparent);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.chat-launch:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 20px -4px color-mix(in oklab, var(--accent) 70%, transparent); }
.chat-launch:active { transform: translateY(0); }

/* ── Radar mark (the AI's identity) — accent core + expanding scan rings ─────── */
.chat-mark { position: relative; display: inline-grid; place-items: center; --mark: 18px; width: var(--mark); height: var(--mark); }
.chat-mark-sm { --mark: 18px; }
.chat-mark-lg { --mark: 40px; }
.chat-mark-core {
  width: 34%; height: 34%; border-radius: 50%;
  background: var(--chat-grad);
  box-shadow: 0 0 8px -1px color-mix(in oklab, var(--accent) 85%, transparent);
}
.chat-mark-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--accent) 55%, transparent);
  opacity: 0; transform: scale(.3);
  animation: chat-radar 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
.chat-mark-ring:nth-child(2) { animation-delay: 1.2s; }
@keyframes chat-radar {
  0%   { opacity: .7; transform: scale(.3); }
  70%  { opacity: 0;  transform: scale(1); }
  100% { opacity: 0;  transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .chat-mark-ring { animation: none; opacity: .35; transform: scale(.8); } }

.chat-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.chat-avatar-ai { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.chat-avatar-user {
  font-size: 9px; font-weight: 800; letter-spacing: .03em; color: var(--fg-2);
  background: var(--bg-3); text-transform: uppercase;
}

/* ── Slide-over panel + overlay (glassmorphism) ──────────────────────────────── */
.chat-overlay {
  position: fixed; inset: 0; z-index: 420;
  background: rgba(8,10,20,0.32); backdrop-filter: blur(3px);
  animation: chat-fade .2s ease;
}
@keyframes chat-fade { from { opacity: 0; } to { opacity: 1; } }
.chat-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 440px; max-width: 94vw;
  z-index: 421;
  background: color-mix(in oklab, var(--bg-1) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  border-left: 1px solid var(--line);
  box-shadow: -16px 0 60px -12px rgba(8,10,20,0.30);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.16,1,.3,1);
}
.chat-panel-open { transform: translateX(0); }
/* Gradient top hairline for the futuristic accent */
.chat-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--chat-grad); }
.chat-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line-soft); flex: 0 0 auto;
  position: relative; z-index: 3;
}
.chat-panel-title { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14px; color: var(--fg-1); letter-spacing: -.01em; }
.chat-panel-title svg { color: var(--accent); }
.chat-panel-actions { display: flex; align-items: center; gap: 6px; }
.chat-panel-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: transparent; color: var(--fg-2); cursor: pointer; transition: background .14s, color .14s;
}
.chat-panel-close:hover { background: var(--bg-3); color: var(--fg-1); }

/* ── Full #chat screen — the chat is the hero ────────────────────────────────── */
.chat-screen { display: flex; flex-direction: column; }
.chat-screen-inner {
  display: flex; flex-direction: column; height: calc(100vh - 168px); min-height: 460px;
  padding: 0; overflow: hidden; position: relative;
  background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: 0 4px 24px -8px rgba(8,10,20,0.12);
}
/* Ambient moving aurora behind the thread — subtle, sleek, always in motion */
.chat-screen-inner::before {
  content: ""; position: absolute; inset: -40% -20% auto -20%; height: 70%;
  background: radial-gradient(45% 60% at 30% 30%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
              radial-gradient(40% 55% at 75% 40%, color-mix(in oklab, var(--accent2) 14%, transparent), transparent 70%);
  filter: blur(30px); opacity: .8; z-index: 0; pointer-events: none;
  animation: chat-aurora 18s ease-in-out infinite alternate;
}
@keyframes chat-aurora {
  0%   { transform: translate3d(-4%, 0, 0) scale(1); }
  100% { transform: translate3d(6%, 4%, 0) scale(1.12); }
}
.chat-screen-inner > * { position: relative; z-index: 1; }

/* Slim top bar (only once a conversation exists).
   z-index outranks the thread (also z-index:1) so the History dropdown isn't
   painted over by message bubbles below it. */
.chat-screen-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); flex: 0 0 auto; position: relative; z-index: 3; }
.chat-screen-bar-status { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--fg-3); }
.chat-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 60%, transparent); animation: chat-pulse 2.4s infinite; }
@keyframes chat-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.chat-newchat { background: none; border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 600; color: var(--fg-2); cursor: pointer; transition: border-color .14s, color .14s; }
.chat-newchat:hover { border-color: var(--accent); color: var(--accent); }

/* ── Thread ──────────────────────────────────────────────────────────────────── */
.chat-thread { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
.chat-thread::-webkit-scrollbar { width: 8px; }
.chat-thread::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* Empty / hero state */
.chat-empty { margin: auto; text-align: center; max-width: 380px; color: var(--fg-2); animation: chat-rise .4s ease; }
.chat-empty-orb { display: grid; place-items: center; margin: 0 auto 18px; width: 64px; height: 64px; }
.chat-empty-title { font-size: 17px; font-weight: 800; color: var(--fg-1); margin-bottom: 5px; letter-spacing: -.02em; }
.chat-empty-sub { font-size: 12.5px; color: var(--fg-3); margin-bottom: 20px; }
.chat-suggestions { display: flex; flex-direction: column; gap: 9px; align-items: stretch; }
.chat-suggestion {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 11px 14px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--line-soft);
  color: var(--fg-1); font-size: 12.5px; font-weight: 500;
  transition: border-color .14s, transform .14s, background .14s;
}
.chat-suggestion:hover { border-color: var(--accent); transform: translateX(2px); background: color-mix(in oklab, var(--accent) 6%, var(--bg-2)); }
.chat-suggestion-arrow { color: var(--accent); font-weight: 800; font-size: 15px; }

/* Message rows with avatars */
.chat-row { display: flex; gap: 10px; max-width: 100%; animation: chat-rise .28s cubic-bezier(.16,1,.3,1); }
.chat-row-user { flex-direction: row-reverse; }
@keyframes chat-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg { display: flex; flex-direction: column; gap: 5px; max-width: 84%; min-width: 0; }
.chat-row-user .chat-msg { align-items: flex-end; }
.chat-msg-role { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); padding: 0 2px; }
.chat-msg-body {
  font-size: 13px; line-height: 1.6; color: var(--fg-1);
  padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line-soft); word-break: break-word;
}
.chat-row-user .chat-msg-body {
  background: var(--chat-grad); color: #fff; border-color: transparent;
  border-bottom-right-radius: 5px;
  box-shadow: 0 2px 14px -4px color-mix(in oklab, var(--accent) 55%, transparent);
}
.chat-row-ai .chat-msg-body { background: var(--bg-2); border-bottom-left-radius: 5px; }
.chat-id-link { color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-decoration: none; border-bottom: 1px dashed color-mix(in oklab, var(--accent) 60%, transparent); cursor: pointer; }
.chat-id-link:hover { border-bottom-style: solid; }
.chat-row-user .chat-id-link { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.chat-people-link { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px dashed color-mix(in oklab, var(--accent) 60%, transparent); cursor: pointer; }
.chat-people-link:hover { border-bottom-style: solid; }
.chat-row-user .chat-people-link { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }

/* Clicking a bubble reveals when it was sent */
.chat-msg-body { cursor: default; }
.chat-msg-time { font-size: 10.5px; color: var(--fg-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
.chat-row-user .chat-msg-time { text-align: right; }

/* Markdown answer formatting — paragraphs/lists with staggered entrance */
.chat-md { display: flex; flex-direction: column; gap: 8px; }
.chat-md-block { margin: 0; opacity: 0; animation: chat-rise .32s cubic-bezier(.16,1,.3,1) forwards; }
.chat-md p.chat-md-block { line-height: 1.6; }
.chat-md-list { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.chat-md-list li { line-height: 1.55; }
.chat-md-list li::marker { color: var(--accent); }

/* Headings (## Summary, ### Why It Matters …) — now parsed, not dumped as text */
.chat-md-heading { font-weight: 700; color: var(--fg-1); line-height: 1.3; letter-spacing: -0.01em; }
.chat-md-heading + .chat-md-block { margin-top: 0; }
.chat-md-h1 { font-size: 15px; margin-top: 4px; }
.chat-md-h2 { font-size: 13.5px; margin-top: 6px;
  text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: var(--fg-2);
  padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.chat-md-h3, .chat-md-h4 { font-size: 12.5px; margin-top: 4px; color: var(--fg-1); }
.chat-row-user .chat-md-heading { color: #fff; }
.chat-row-user .chat-md-h2 { color: rgba(255,255,255,.85); border-bottom-color: rgba(255,255,255,.25); }

/* Horizontal rule (---) — a subtle divider, not literal dashes */
.chat-md-hr { border: none; border-top: 1px solid var(--line-soft); margin: 2px 0; height: 0; }
.chat-row-user .chat-md-hr { border-top-color: rgba(255,255,255,.25); }
.chat-code { font-family: var(--font-mono); font-size: 11.5px; background: var(--bg-3); color: var(--fg-1); padding: 1px 5px; border-radius: 5px; }
.chat-row-user .chat-code { background: rgba(255,255,255,0.18); color: #fff; }

/* Markdown tables — clean, scannable, futuristic */
.chat-md-tablewrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.chat-md-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.chat-md-table th {
  text-align: left; padding: 8px 12px; white-space: nowrap;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-2);
  background: color-mix(in oklab, var(--accent) 8%, var(--bg-2));
  border-bottom: 1px solid var(--line-soft);
}
.chat-md-table td { padding: 7px 12px; border-bottom: 1px solid var(--line-soft); color: var(--fg-1); white-space: nowrap; }
.chat-md-table tbody tr:last-child td { border-bottom: none; }
.chat-md-table tbody tr { transition: background .12s; }
.chat-md-table tbody tr:hover { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.chat-md-table td:not(:first-child) { font-variant-numeric: tabular-nums; }

/* ── Inline charts (model-emitted bar/donut, rendered as SVG) ──────────────── */
.chat-chart { margin: 0; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--bg-2); }
.chat-chart-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-2); margin-bottom: 10px; }
/* Bars */
.chat-chart-bars { display: flex; flex-direction: column; gap: 7px; }
.chat-chart-bar-row { display: grid; grid-template-columns: minmax(0, 38%) 1fr auto; align-items: center; gap: 9px; }
.chat-chart-bar-label { font-size: 11.5px; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-chart-bar-track { height: 14px; border-radius: 5px; background: var(--bg-3); overflow: hidden; }
.chat-chart-bar-fill { display: block; height: 100%; border-radius: 5px; min-width: 2px; transition: width .5s cubic-bezier(.16,1,.3,1); }
.chat-chart-bar-val { font-size: 11.5px; font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; text-align: right; }
/* Donut */
.chat-chart-donut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.chat-chart-donut-svg { width: 116px; height: 116px; flex-shrink: 0; }
.chat-chart-donut-total { font-size: 26px; font-weight: 800; fill: var(--fg-1); }
.chat-chart-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 140px; }
.chat-chart-legend li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.chat-chart-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.chat-chart-legend-label { color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.chat-chart-legend-val { color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Per-answer export/share actions ───────────────────────────────────────── */
.chat-answer-actions { display: flex; gap: 6px; margin-top: 8px; }
.chat-answer-act {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--fg-3);
  background: transparent; border: 1px solid var(--line-soft); border-radius: 7px;
  padding: 4px 9px; cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.chat-answer-act:hover { color: var(--fg-1); border-color: var(--line); background: var(--bg-2); }

/* Thinking indicator */
.chat-thinking { display: inline-flex; gap: 5px; align-items: center; }
.chat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: chat-bounce 1.2s infinite ease-in-out; }
.chat-dot:nth-child(2) { animation-delay: .16s; }
.chat-dot:nth-child(3) { animation-delay: .32s; }
.chat-thinking-label { font-size: 11px; color: var(--fg-3); margin-left: 4px; font-style: italic; }
@keyframes chat-bounce { 0%, 80%, 100% { opacity: .35; transform: translateY(0) scale(.85); } 40% { opacity: 1; transform: translateY(-4px) scale(1); } }

.chat-error { align-self: center; font-size: 12px; color: var(--crit); background: color-mix(in oklab, var(--crit) 12%, transparent); border: 1px solid color-mix(in oklab, var(--crit) 30%, transparent); padding: 8px 14px; border-radius: 10px; }

/* Past-chats history dropdown */
.chat-screen-bar-actions { display: inline-flex; align-items: center; gap: 8px; }
.chat-history { position: relative; display: inline-flex; }
.chat-history-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--fg-2); background: transparent;
  border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 5px 10px; cursor: pointer; transition: background .12s, border-color .12s;
}
.chat-history-btn:hover { background: var(--bg-2); border-color: var(--line); color: var(--fg-1); }
.chat-history-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  width: 280px; max-height: 360px; overflow-y: auto;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 12px 32px -8px rgba(0,0,0,0.25);
  padding: 4px;
}
.chat-history-search {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; margin: 2px 2px 6px;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-2);
  position: sticky; top: 0; z-index: 1;
}
.chat-history-search svg { color: var(--fg-3); flex-shrink: 0; }
.chat-history-search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-size: 12.5px; color: var(--fg-1);
}
.chat-history-search input::placeholder { color: var(--fg-3); }
.chat-history-search-clear {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: none; background: transparent; color: var(--fg-3);
  border-radius: 5px; cursor: pointer; transition: color .12s, background .12s;
}
.chat-history-search-clear:hover { color: var(--fg-1); background: var(--bg-3); }
.chat-history-empty { font-size: 12px; color: var(--fg-3); padding: 12px; text-align: center; }
.chat-history-item { display: flex; align-items: stretch; border-radius: 7px; }
.chat-history-item:hover { background: var(--bg-2); }
.chat-history-item-on { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.chat-history-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  text-align: left; background: transparent; border: none; cursor: pointer;
  padding: 8px 10px;
}
.chat-history-title { font-size: 12.5px; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-history-ago { font-size: 10.5px; color: var(--fg-3); }
.chat-history-del {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; background: transparent; border: none; color: var(--fg-3); cursor: pointer;
  border-radius: 7px; opacity: 0; transition: opacity .12s, color .12s;
}
.chat-history-item:hover .chat-history-del { opacity: 1; }
.chat-history-del:hover { color: var(--crit); }

/* Tool-call trace — collapsible "how I got this" */
.chat-trace { margin-top: 4px; }
.chat-trace-toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 3px 0; font-size: 11px; font-weight: 600; color: var(--fg-3); cursor: pointer; transition: color .14s; }
.chat-trace-toggle:hover { color: var(--accent); }
.chat-trace-body { margin-top: 7px; display: flex; flex-direction: column; gap: 5px; padding-left: 4px; border-left: 2px solid color-mix(in oklab, var(--accent) 30%, transparent); }
.chat-trace-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 11px; padding-left: 8px; }
.chat-trace-tool { font-family: var(--font-mono); font-weight: 700; color: var(--accent); }
.chat-trace-meta { color: var(--fg-3); }
.chat-trace-err { color: var(--crit); }
.chat-trace-input { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); background: var(--bg-3); padding: 2px 6px; border-radius: 5px; max-width: 100%; overflow-x: auto; }

/* ── Composer — glowing focus ring ───────────────────────────────────────────── */
.chat-composer { flex: 0 0 auto; padding: 14px; border-top: 1px solid var(--line-soft); }
.chat-composer-wrap {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 8px 8px 8px 14px; transition: border-color .16s, box-shadow .16s;
}
.chat-composer-wrap:focus-within {
  border-color: color-mix(in oklab, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.chat-input {
  flex: 1 1 auto; background: none; border: none; outline: none; resize: none;
  font-family: inherit; font-size: 13px; line-height: 1.55; color: var(--fg-1);
  max-height: 140px; padding: 6px 0;
}
.chat-input::placeholder { color: var(--fg-3); }
.chat-send {
  flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: none;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: var(--chat-grad);
  box-shadow: 0 2px 10px -2px color-mix(in oklab, var(--accent) 60%, transparent);
  transition: transform .14s, filter .14s, opacity .14s;
}
.chat-send:hover:not(:disabled) { transform: scale(1.06); filter: brightness(1.06); }
.chat-send:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }



/* ════════════════════════════════════════════════════════════════════════════
   Risks page redesign — flat alert list + detail drawer
   ════════════════════════════════════════════════════════════════════════════ */

/* Shared 9-column grid: stripe · concern · who · intent · cmds · score · date · status · chevron */
.alert-list { display: flex; flex-direction: column; }
.alert-list-headers,
.alert-row {
  display: grid;
  grid-template-columns: 4px 184px 188px minmax(0,1fr) 200px 56px 116px 132px 30px;
  align-items: center;
}
.alert-list-headers {
  padding: 7px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted);
  position: sticky; top: 0; z-index: 1;
}
.alert-list-headers > div { padding: 0 12px; }
.alert-h-stripe { padding: 0 !important; }
.alert-h-score, .alert-h-chevron { text-align: center; }

.alert-row {
  border-bottom: 1px solid var(--border);
  cursor: pointer; min-height: 52px;
  transition: background 0.1s;
}
.alert-row:hover { background: var(--surface); }
.alert-row-resolved { opacity: 0.6; }
.alert-row-stripe { width: 4px; align-self: stretch; }

.alert-row-concern {
  padding: 9px 12px; display: flex; flex-direction: column; gap: 3px;
  min-width: 0; border-right: 1px solid var(--border);
}
.alert-row-concern-name {
  font-size: 11.5px; font-weight: 700; color: var(--fg);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alert-row-concern-icon { flex-shrink: 0; }
.alert-row-sev { font-size: 10px; font-weight: 600; white-space: nowrap; }

.alert-row-who {
  padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.alert-row-email {
  font-size: 11.5px; font-weight: 500; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alert-row-role {
  font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.alert-row-intent {
  padding: 9px 12px; font-size: 11.5px; color: var(--fg-2);
  line-height: 1.5; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.alert-row-no-intent { color: var(--muted); }

.alert-row-cmd-chips {
  padding: 9px 12px; display: flex; align-items: center; gap: 4px;
  min-width: 0; overflow: hidden;
}
.alert-cmd-chip {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 6px; color: var(--fg-2);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1;
}
.alert-cmd-chip-more { font-size: 10px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

.alert-row-score-cell { padding: 9px 12px; text-align: center; }
.alert-row-score { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.alert-row-date-cell { padding: 9px 12px; font-size: 11px; color: var(--muted); white-space: nowrap; }

.alert-row-triage-cell { padding: 9px 12px; }
.alert-row-chevron-cell {
  padding: 0 8px; color: var(--muted); display: flex; justify-content: center;
}
.alert-row:hover .alert-row-chevron-cell { color: var(--fg); }

.alert-list-empty {
  padding: 40px 16px; text-align: center; color: var(--muted); font-size: 13px;
}
.alert-list-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 11px; background: var(--surface); border: none;
  border-bottom: 1px solid var(--border); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--accent);
  transition: background 0.1s;
}
.alert-list-more:hover { background: var(--bg-2); }
.alert-list-more-count { color: var(--muted); font-weight: 400; }

/* ── Search + user filter bar ── */
.alert-search-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.alert-search-wrap {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--muted);
}
.alert-search-wrap:focus-within { border-color: var(--accent); color: var(--fg-2); }
.alert-search-input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font: inherit; font-size: 13px; color: var(--fg);
}
.alert-search-input::placeholder { color: var(--muted); }
.alert-search-x {
  border: none; background: none; cursor: pointer; color: var(--muted);
  display: inline-flex; padding: 2px; border-radius: 5px; flex-shrink: 0;
}
.alert-search-x:hover { color: var(--fg); background: var(--bg-3); }
.alert-search-bar .alert-sort-select { flex-shrink: 0; max-width: 280px; }

/* ── Sort / filter bar ── */
.alert-sort-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.alert-sort-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); white-space: nowrap;
}
.alert-sort-group { display: flex; gap: 4px; }
.alert-sort-spacer { flex: 1; }
.alert-sort-divider { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.alert-sort-select {
  font-size: 11px; font-family: inherit; font-weight: 500;
  padding: 4px 26px 4px 11px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--fg);
  cursor: pointer; transition: all 0.1s; white-space: nowrap;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'><path d='M2 4.5L6 8L10 4.5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
}
.alert-sort-select:hover { border-color: var(--fg); }
.alert-sort-select:focus { outline: none; border-color: var(--accent); }
.alert-sort-pill {
  font-size: 11px; font-weight: 500; font-family: inherit;
  padding: 4px 12px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--muted);
  cursor: pointer; transition: all 0.1s; white-space: nowrap;
}
.alert-sort-pill:hover { color: var(--fg); border-color: var(--fg); }
.alert-sort-pill.on { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 700; }
.alert-sort-crit.on { background: var(--crit); border-color: var(--crit); color: #fff; }
.alert-sort-clear {
  font-size: 11px; font-family: inherit; padding: 4px 11px; border-radius: 20px;
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
  cursor: pointer; white-space: nowrap; transition: all 0.1s;
}
.alert-sort-clear:hover { background: var(--accent); color: #fff; }

/* ── Detail drawer ── */
.alert-drawer-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.25); backdrop-filter: blur(1px);
  animation: alert-fade 0.18s ease;
}
@keyframes alert-fade { from { opacity: 0; } to { opacity: 1; } }
.alert-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(960px, 72vw); max-width: 100vw;
  background: var(--bg); border-left: 1px solid var(--border);
  box-shadow: -4px 0 32px rgba(0,0,0,0.18);
  z-index: 301; display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.alert-drawer.open { transform: translateX(0); }

.alert-drawer-header {
  padding: 16px 18px 14px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 11px; flex-shrink: 0;
}
.alert-drawer-header-top { display: flex; align-items: flex-start; gap: 10px; }
.alert-drawer-icon { font-size: 20px; flex-shrink: 0; line-height: 1.2; }
.alert-drawer-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.alert-drawer-kicker {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
.alert-drawer-title { font-size: 17px; font-weight: 700; color: var(--fg); line-height: 1.25; }
.alert-drawer-close {
  margin-left: auto; font-size: 20px; line-height: 1; color: var(--muted);
  background: none; border: none; cursor: pointer; font-family: inherit;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: background 0.1s; flex-shrink: 0;
}
.alert-drawer-close:hover { background: var(--border); color: var(--fg); }
.alert-drawer-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alert-drawer-sev, .alert-drawer-status {
  font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 5px;
}
.alert-drawer-time { font-size: 11px; color: var(--muted); margin-left: auto; }
.alert-drawer-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--fg-2);
}
.alert-drawer-meta-item { font-weight: 500; }
.alert-drawer-meta-sub { color: var(--muted); }

.alert-drawer-body {
  flex: 1; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.alert-drawer-section { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; }
.alert-drawer-section-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted);
}
.alert-drawer-intent-box {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; font-size: 13px; color: var(--fg); line-height: 1.6;
  overflow-wrap: anywhere; word-break: break-word;
}
.alert-drawer-why-box {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; font-size: 12.5px; color: var(--fg-2); line-height: 1.6;
}
.alert-drawer-note-by { font-size: 11px; color: var(--muted); margin-top: 6px; }
.alert-drawer-timeline-loading { font-size: 12px; color: var(--muted); padding: 4px 0; }

/* Rubric legend — hidden behind an (i) toggle in the section label */
.alert-rubric-toggle {
  margin-left: 7px; padding: 0; width: 16px; height: 16px; line-height: 16px;
  border: none; background: none; cursor: pointer; color: var(--muted);
  font-size: 12px; vertical-align: middle; transition: color .12s;
}
.alert-rubric-toggle:hover, .alert-rubric-toggle[aria-expanded="true"] { color: var(--accent); }
.alert-rubric-table { width: 100%; font-size: 10.5px; border-collapse: collapse; margin-top: 11px; }
.alert-rubric-table td { padding: 4px 6px; vertical-align: top; }
.alert-rubric-table tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.alert-rubric-score { font-weight: 700; font-family: var(--font-mono); white-space: nowrap; width: 48px; }
.alert-rubric-level { font-weight: 700; width: 64px; }
.alert-rubric-desc { color: var(--muted); }

/* Footer */
.alert-drawer-footer {
  padding: 13px 18px; background: var(--surface); border-top: 1px solid var(--border);
  display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
}
.alert-drawer-btn-primary {
  flex: 1; min-width: 150px; padding: 9px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600; font-family: inherit;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  transition: opacity 0.1s; white-space: nowrap;
}
.alert-drawer-btn-primary:hover { opacity: 0.88; }
.alert-drawer-btn-ghost {
  padding: 9px 13px; border-radius: 8px; font-size: 12px; font-weight: 600;
  font-family: inherit; background: transparent;
  border: 1.5px solid var(--border); cursor: pointer; transition: all 0.1s; white-space: nowrap;
}
.alert-drawer-btn-ghost:hover { border-color: currentColor; background: var(--bg-2); }

[data-theme="dark"] .alert-drawer { box-shadow: -4px 0 40px rgba(0,0,0,0.50); }
[data-theme="dark"] .alert-drawer-backdrop { background: rgba(0,0,0,0.45); }

@media (max-width: 720px) {
  .alert-list-headers, .alert-row { grid-template-columns: 4px 150px minmax(0,1fr) 50px 116px 30px; }
  .alert-row-who, .alert-row-cmd-chips, .alert-row-date-cell,
  .alert-h-who, .alert-h-cmds, .alert-h-date { display: none; }
  .alert-drawer { width: 100vw; }
}

/* ===== Session Flow Diagram ===== */
.sflow-wrap {
  margin: 4px 0 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md, 12px);
  background: var(--bg-1);
  overflow: hidden;
  flex-shrink: 0; /* .sd is a column flex container; its nodes are absolutely
                     positioned, so the flex algorithm undercounts this wrap's
                     intrinsic height and collapses it to a sliver. Pin it. */
}
.sflow-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
}
.sflow-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--fg-2);
}
.sflow-legend { display: inline-flex; gap: 12px; }
.sflow-leg {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--muted); text-transform: capitalize;
}
.sflow-leg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.sflow-scroll { overflow-x: auto; padding: 6px 0; flex-shrink: 0; position: relative; }
.sflow-canvas { position: relative; flex-shrink: 0; }
/* Right-edge fade hint — only visible when content overflows horizontally */
.sflow-wrap { position: relative; }
.sflow-wrap::after {
  content: ""; position: absolute; top: 38px; right: 0; bottom: 0; width: 36px;
  background: linear-gradient(to right, transparent, var(--bg-1));
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.sflow-wrap.sflow-overflow::after { opacity: 1; }
.sflow-lane-l {
  position: absolute; top: 0;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted);
}
.sflow-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Lightweight flow indicator — a dashed overlay that marches along risky edges.
   GPU-cheap (animates stroke-dashoffset only) vs. per-edge SMIL animateMotion. */
.sflow-edge-flow {
  stroke-dasharray: 5 13; opacity: 0.9;
  animation: sflow-dash 1.4s linear infinite;
  will-change: stroke-dashoffset;
}
@keyframes sflow-dash { to { stroke-dashoffset: -36; } }
.sflow-node {
  position: absolute; display: flex; flex-direction: column;
  padding: 11px 13px; border-radius: var(--r-sm, 10px);
  background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform .14s ease, box-shadow .14s ease;
}
.sflow-node:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.30); z-index: 3; }
.sflow-node-clickable { cursor: pointer; }
.sflow-node-open { z-index: 6; box-shadow: 0 12px 30px rgba(0,0,0,0.38); }
.sflow-node-row { display: flex; gap: 10px; align-items: flex-start; }
.sflow-glyph {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: var(--bg-3);
}
.sflow-body { min-width: 0; flex: 1; }
.sflow-caret { flex-shrink: 0; color: var(--muted); margin-top: 2px; transition: transform .15s; }
.sflow-caret-open { transform: rotate(90deg); color: var(--accent); }
.sflow-node-open { outline: 2px solid var(--accent); outline-offset: -1px; }
/* Detail panel below the diagram (never clipped by the scroll container) */
.sflow-detail {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
  padding: 10px 14px 12px;
}
.sflow-detail-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.sflow-detail-glyph { font-size: 15px; }
.sflow-detail-ttl { font-size: 12px; font-weight: 700; color: var(--fg); }
.sflow-detail-count {
  font-size: 10px; font-weight: 700; color: var(--fg-2);
  background: var(--bg-3); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 1px 8px;
}
.sflow-detail-x {
  margin-left: auto; border: none; background: none; cursor: pointer;
  color: var(--muted); padding: 2px; border-radius: 5px; display: inline-flex;
}
.sflow-detail-x:hover { color: var(--fg); background: var(--bg-3); }
.sflow-detail-items {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 240px; overflow-y: auto;
}
.sflow-detail-item {
  font-size: 11px; font-family: var(--font-mono, monospace); color: var(--fg-2);
  line-height: 1.45; padding: 4px 9px; border-radius: 6px; background: var(--bg-1);
  border: 1px solid var(--line-soft);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.sflow-ttl { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--fg); }
.sflow-sub {
  font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.35;
  font-family: var(--font-mono, monospace); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sflow-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sflow-bdg {
  font-size: 9px; font-weight: 700; padding: 1.5px 6px; border-radius: 5px;
  background: var(--bg-3); color: var(--fg-2); border: 1px solid var(--line-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sflow-r-critical { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit), 0 2px 8px rgba(0,0,0,0.18); }
.sflow-r-critical .sflow-glyph { background: color-mix(in oklab, var(--crit) 18%, transparent); }
.sflow-r-elevated { border-color: var(--warn); }
.sflow-r-elevated .sflow-glyph { background: color-mix(in oklab, var(--warn) 16%, transparent); }
.sflow-r-notable  { border-color: var(--accent); }
.sflow-r-notable .sflow-glyph { background: color-mix(in oklab, var(--accent) 16%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .sflow-edge-flow { animation: none; display: none; }
}