/* ══════════════════════════════════════════
   DKG V10 — DESIGN TOKENS (from prototype v5.1)
   ══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Surface hierarchy — true black base */
  --bg-root: #000000;
  --bg-panel: #0a0a0a;
  --bg-surface: #111111;
  --bg-elevated: #181818;
  --bg-hover: #1f1f1f;
  --bg-active: #262626;

  /* Borders */
  --border-subtle: #1a1a1a;
  --border-default: #222222;
  --border-strong: #333333;
  /* Higher-contrast border for chips that need to clear 3:1 non-text on any
     surface (used by the inline-code chip, which can land on user bubbles
     whose bg is identical to a chip fill). */
  --border-prominent: #888888;

  /* Text — dark mode. Round-3 nudge 2026-05-20 (PR8): user feedback on
     the live state was "almost there but still could be a bit better."
     Single targeted bump on secondary (the tier that touches the most
     body text): #a8a8a8 → #b8b8b8 — opens the secondary↔primary gap to
     ~5pt luminance and pushes secondary to AAA on both bg-panel and
     bg-surface. Tertiary, primary, and ghost stay. Future cleanup:
     tertiary tier could be rebalanced (#9a9a9a is perceptually very
     close to the new secondary), but that's its own pass. Ratios on
     --bg-panel #0a0a0a: primary 15.9:1, secondary 9.98:1, tertiary
     ~7.1:1. */
  --text-primary: #f0f0f0;
  --text-secondary: #b8b8b8;
  --text-tertiary: #9a9a9a;
  --text-ghost: #333333;

  /* Accent — reserved for signals */
  --accent-red: #ef4444;
  --accent-amber: #f59e0b;
  --accent-green: #22c55e;
  --accent-blue: #3b82f6;

  /* Semantic foregrounds (theme-aware) */
  --text-success: #86efac;
  --text-warning: #fbbf24;
  --text-info: #7dd3fc;
  --text-danger: #fca5a5;
  --text-danger-hover: #fecaca;
  --text-link: #60a5fa;
  --text-on-accent: #111111;

  /* Layer identity */
  --layer-working: #64748b;
  --layer-shared: #f59e0b;
  --layer-verified: #22c55e;

  /* Typography */
  --font-sans: 'Instrument Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Sizing */
  --header-h: 44px;
  --tab-h: 36px;
  --toolbar-h: 38px;

  /* Legacy aliases (for existing components that use the old tokens) */
  --bg: var(--bg-root);
  --surface: var(--bg-surface);
  --surface-hover: var(--bg-hover);
  --surface-alt: var(--bg-panel);
  --border: var(--border-default);
  --border-light: var(--border-strong);
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-dim: var(--text-tertiary);
  --green: var(--accent-green);
  --green-dark: #166534;
  --green-mid: #22c55e;
  --green-dim: rgba(34, 197, 94, 0.1);
  --amber: var(--accent-amber);
  --amber-dim: rgba(251, 191, 36, 0.1);
  --red: var(--accent-red);
  --red-dim: rgba(248, 113, 113, 0.1);
  --blue: var(--accent-blue);
  --blue-dim: rgba(96, 165, 250, 0.1);
  --purple: #a78bfa;
  --purple-dim: rgba(167, 139, 250, 0.1);
  --cyan: #22d3ee;
  --cyan-dim: rgba(34, 211, 238, 0.08);
  --pink: #f472b6;
  --pink-dim: rgba(244, 114, 182, 0.12);
}

/* ══════════════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════════════ */
body.light {
  --bg-root: #fafafa;
  --bg-panel: #f5f5f5;
  --bg-surface: #ffffff;
  --bg-elevated: #f0f0f0;
  --bg-hover: #e8e8e8;
  --bg-active: #e0e0e0;
  --border-subtle: #e5e5e5;
  --border-default: #d4d4d4;
  --border-strong: #a3a3a3;
  --border-prominent: #525252;
  --text-primary: #171717;
  /* Light secondary round-3 nudge: #525252 → #444444. Same rationale
     as the dark-mode bump — single targeted step on the tier that
     touches the most body text. Ratios on bg-panel #f5f5f5: 7.4 →
     8.93:1 (AAA); on bg-surface #ffffff: 7.81 → 9.74:1 (AAA). */
  --text-secondary: #444444;
  /* Light tertiary stays at #6b6b6b (~5.4:1) — was just lifted in the
     PR8 round-2 cascade; further darkening here would close the
     tertiary↔secondary gap. Future cleanup if tier balance needs
     it. Ghost stays at #d4d4d4 (decoration-only). */
  --text-tertiary: #6b6b6b;
  --text-ghost: #d4d4d4;
  /* Light-theme danger foreground (~7.4:1 on --bg-elevated #f0f0f0) */
  --text-success: #166534;
  --text-warning: #92400e;
  --text-info: #1d4ed8;
  --text-danger: #b91c1c;
  --text-danger-hover: #991b1b;
  --text-link: #1d4ed8;
  --text-on-accent: #111111;
  /* Layer accents are NOT overridden in light mode — the slate/amber/
     green from :root carry through, matching the Context Graph and
     project pages (which already use the unified palette in both
     themes). The earlier PR6 desaturation to greys (#8a8a8a / #737373
     / #404040) read as "weird variations of gray" against the white
     dashboard card vs the colored CG pages; reverting per user
     directive (PR8 round-4). Non-text contrast at small decoration
     sizes is acceptable below AA's 3:1 floor — the bars/dots aren't
     text. */
  --bg: var(--bg-root);
  --surface: var(--bg-surface);
  --surface-hover: var(--bg-hover);
  --surface-alt: var(--bg-panel);
  --border: var(--border-default);
  --border-light: var(--border-strong);
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-dim: var(--text-tertiary);
}

/* ══════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root {
  height: 100%;
  background: var(--bg-root);
  color: var(--text-primary);
  font-family: var(--font-sans);
  /* Body base 13 → 14 (PR8). PR7's surgical 10→11 bumps on a handful of
     classes weren't enough — the long tail of inherited 13px chrome
     still read as footnotes on a real laptop screen. Bumping the base
     lifts every un-pinned surface (paragraph bodies, modal copy, form
     labels, tooltips) via the cascade. Explicit "keep" overrides below
     prevent the very largest surfaces (stat hero numbers, dashboard
     title) from ballooning. */
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--font-mono); }

button {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  outline: none;
}
button:disabled { opacity: 0.4; cursor: not-allowed; }

input, textarea {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 6px 10px;
  outline: none;
}
input:focus, textarea:focus { border-color: var(--border-strong); }
input::placeholder { color: var(--text-tertiary); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
* { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }
:focus-visible { outline: 2px solid rgba(34, 197, 94, 0.5); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }

@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.pulse-dot { animation: pulse 2s ease-in-out infinite; }
.fade-in { animation: fadeSlideIn 0.4s ease; }

/* ══════════════════════════════════════════
   V10 APP SHELL
   ══════════════════════════════════════════ */
.v10-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

/* ── Header ── */
.v10-header {
  height: var(--header-h);
  min-height: var(--header-h);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 2px;
  z-index: 100;
}
.v10-header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  user-select: none;
}
.v10-header-logo-ot {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border-default);
}
.v10-header-logo-ot-by {
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.v10-header-ot-wordmark {
  display: block;
  color: var(--text-secondary);
  opacity: 0.9;
}
.v10-header-ot-wordmark svg {
  display: block;
  stroke: none;
  fill: currentColor;
}
.v10-header-logo-text {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.v10-header-logo-version { color: var(--text-tertiary); font-weight: 300; }
.v10-header-sep {
  width: 1px;
  height: 20px;
  background: var(--border-default);
  margin: 0 12px 0 16px;
}
.v10-header-agent-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.v10-header-agent-switcher:hover { background: var(--bg-hover); }
.v10-header-agent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
}
.v10-header-agent-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.v10-header-agent-addr {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.85;
}
.v10-header-spacer { flex: 1; }
.v10-header-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
}
.v10-header-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.v10-header-status-dot.online { background: var(--accent-green); }
.v10-header-status-dot.offline { background: var(--accent-amber); }
.v10-header-meta-sep { color: var(--text-ghost); }
.v10-header-actions { display: flex; align-items: center; gap: 4px; }
.v10-header-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-tertiary);
  transition: all 0.15s;
  position: relative;
}
.v10-header-icon-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.v10-header-icon-btn.active-toggle { color: var(--text-secondary); }
.v10-header-notif-wrap { position: relative; }
.v10-header-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  background: var(--accent-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.v10-header-notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 320px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 200;
  overflow: hidden;
}
.v10-header-notif-title {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-subtle);
}
.v10-header-notif-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}
.v10-header-notif-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.1s;
}
.v10-header-notif-item:hover { background: var(--bg-hover); }
.v10-header-notif-item:last-child { border-bottom: none; }
.v10-header-notif-item-text { font-size: 12px; color: var(--text-primary); }
.v10-header-notif-item-time { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; font-family: var(--font-mono); }
.v10-notif-join { border-left: 3px solid #f59e0b; padding-left: 9px; }
.v10-notif-approved { border-left: 3px solid #10b981; padding-left: 9px; }
.v10-notif-rejected { border-left: 3px solid #ef4444; padding-left: 9px; }
.v10-notif-join-icon { margin-right: 4px; }
.v10-notif-clickable { cursor: pointer; }
.v10-notif-clickable:hover { background: var(--bg-hover); }

/* ── Body ── */
.v10-app-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
}

/* ── Resize handles ── */
.v10-resize-handle-h {
  width: 1px;
  flex-shrink: 0;
  background: var(--border-subtle);
  cursor: col-resize;
  transition: background 0.15s, width 0.1s;
}
.v10-resize-handle-h:hover,
.v10-resize-handle-h.active { background: var(--accent-green); width: 3px; }
/* Vertical twin for the bottom panel (drag the top edge up/down). */
.v10-resize-handle-v {
  height: 1px;
  flex-shrink: 0;
  background: var(--border-subtle);
  cursor: row-resize;
  transition: background 0.15s, height 0.1s;
}
.v10-resize-handle-v:hover,
.v10-resize-handle-v.active { background: var(--accent-green); height: 3px; }

/* ── Left panel ── */
.v10-panel-left {
  height: 100%;
  flex-shrink: 0;
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.v10-tree-header {
  height: var(--tab-h);
  min-height: var(--tab-h);
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.v10-tree-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.v10-tree-dashboard {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background 0.1s;
  margin-bottom: 4px;
}
.v10-tree-dashboard:hover { background: var(--bg-hover); color: var(--text-primary); }
.v10-tree-dashboard.active { background: var(--bg-active); color: var(--text-primary); }
.v10-tree-empty-state {
  padding: 24px 16px;
  text-align: center;
}
.v10-tree-empty-state p {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Tree sections (project list) */
.v10-tree-section { margin-bottom: 2px; }
.v10-tree-section-header {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  gap: 8px;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}
.v10-tree-section-header:hover { background: var(--bg-hover); }
.v10-tree-section-header.active { background: var(--bg-active); }
.v10-tree-chevron {
  color: var(--text-tertiary);
  transition: transform 0.15s;
  display: flex;
  align-items: center;
}
.v10-tree-chevron.open { transform: rotate(90deg); }
.v10-tree-section-label {
  /* CG names — the single biggest sidebar readability win. 12 → 13. */
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hover-revealed "hide" affordance on each project row. Keeps the tree
   quiet by default and lets the user dismiss any leftover project from
   their sidebar without a daemon-side delete. */
.v10-tree-hide-btn {
  flex-shrink: 0;
  margin-left: 6px;
  width: 18px; height: 18px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none;
  color: var(--text-ghost);
  font-size: 14px; line-height: 1;
  cursor: pointer; border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.v10-tree-section-header:hover .v10-tree-hide-btn { opacity: 1; }
.v10-tree-hide-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--accent-red, #ef4444);
}

/* "My Projects" / "Participating Projects" group dividers. Token
   moved from --text-ghost → --text-tertiary (PR8) — ghost was never
   meant for navigational labels; the contrast was below the 3:1 floor
   even after PR8's ghost bump. */
.v10-tree-group-label {
  padding: 10px 14px 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

/* Move-to-other-group button (⤑), same reveal-on-hover shape as hide */
.v10-tree-move-btn {
  flex-shrink: 0;
  margin-left: 4px;
  width: 18px; height: 18px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none;
  color: var(--text-ghost);
  font-size: 12px; line-height: 1;
  cursor: pointer; border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.v10-tree-section-header:hover .v10-tree-move-btn { opacity: 1; }
.v10-tree-move-btn:hover {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue, #3b82f6);
}

.v10-tree-show-hidden {
  display: block;
  width: calc(100% - 16px);
  margin: 10px 8px 4px;
  padding: 6px 10px;
  background: none;
  border: 1px dashed var(--border-subtle);
  border-radius: 6px;
  color: var(--text-tertiary);
  font-size: 12px; font-family: var(--font-sans);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
}
.v10-tree-show-hidden:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.v10-tree-items { padding-left: 0; }
.v10-tree-item {
  display: flex;
  align-items: center;
  padding: 3px 12px 3px 38px;
  gap: 8px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 12px;
  color: var(--text-secondary);
}
.v10-tree-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.v10-tree-item.active { background: var(--bg-active); color: var(--text-primary); }
.v10-tree-layer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.v10-tree-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
/* Tree mode tabs */
.v10-tree-mode-btn {
  padding: 0 10px;
  height: 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  transition: all 0.15s;
}
.v10-tree-mode-btn:hover { color: var(--text-secondary); }
.v10-tree-mode-btn.active { color: var(--text-primary); }

/* Project dot */
.v10-tree-project-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-primary);
  flex-shrink: 0;
}
.v10-tree-integration-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--text-tertiary);
  flex-shrink: 0;
}

/* Layer headers inside project tree. Same token + size fix as
   .v10-tree-group-label — was unreadable on --text-ghost. */
.v10-tree-layer-header {
  padding: 3px 12px 3px 32px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 4px;
  cursor: default;
}

/* New project button */
.v10-new-project-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 16px);
  margin: 6px 8px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px dashed var(--border-strong);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.v10-new-project-btn:hover { color: var(--text-primary); border-color: var(--text-secondary); }

/* Journey empty card */
.v10-journey-empty-card {
  margin: 16px 10px;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-surface);
  text-align: center;
}
.v10-jec-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.v10-jec-hint { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; margin-bottom: 10px; }

/* Tree divider */
.v10-tree-divider { height: 1px; background: var(--border-subtle); margin: 8px 12px; }

/* Tree items are toggled via React state — no CSS display:none needed */

/* ── Center ── */
.v10-center-empty { flex: 1; min-width: 0; height: 100%; background: var(--bg-root); }

/* ── Center stack (center + bottom) ── */
.v10-center-stack {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.v10-center-stack-main { flex: 1; min-height: 0; overflow: hidden; }

/* ── Center panel ── */
.v10-panel-center {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-root);
}
.v10-center-tabs {
  height: var(--tab-h);
  min-height: var(--tab-h);
  display: flex;
  align-items: center;
  padding: 0 4px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-panel);
  overflow-x: auto;
  gap: 0;
}
.v10-center-tab {
  height: 100%;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.v10-center-tab:hover { color: var(--text-secondary); background: var(--bg-hover); }
.v10-center-tab.active { color: var(--text-primary); border-bottom-color: var(--text-secondary); }
.v10-center-tab-label { pointer-events: none; }
.v10-center-tab-close {
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 2px;
  border-radius: 2px;
}
.v10-center-tab:hover .v10-center-tab-close { opacity: 0.6; }
.v10-center-tab-close:hover { opacity: 1 !important; background: var(--bg-active); }
.v10-center-content {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 24px 28px;
}
.v10-view-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

/* ── Right panel ── */
.v10-panel-right {
  height: 100%;
  min-height: 0;
  flex-shrink: 0;
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.v10-agent-mode-tabs {
  height: var(--tab-h);
  min-height: var(--tab-h);
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 2px;
}
.v10-agent-mode-tab {
  padding: 4px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  transition: all 0.15s;
}
.v10-agent-mode-tab:hover { color: var(--text-secondary); background: var(--bg-hover); }
.v10-agent-mode-tab.active { color: var(--text-primary); background: var(--bg-active); }
.v10-agent-content { flex: 1; overflow-y: auto; }

/* Agent onboarding (stage 0) */
.v10-agent-onboarding { padding: 24px 16px; }
.v10-agent-onboarding-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.v10-agent-onboarding-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}
/* Agent tab */
.v10-agents-tab {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.v10-agents-tab > .v10-agent-add-surface {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
}
/* Network / Sessions tabs: simple padded scroll container (PR1 restored
   the padding that was removed when .v10-agents-tab became a flex column). */
.v10-agent-scroll-tab {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Network tab collapsible peer groups (Connected / Disconnected). */
.v10-peer-group {
  display: flex;
  flex-direction: column;
}
.v10-peer-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.15s;
}
.v10-peer-group-header:hover {
  color: var(--text-primary);
}
.v10-peer-group-header:focus-visible {
  outline: none;
  color: var(--text-primary);
}
.v10-peer-group-chevron {
  flex-shrink: 0;
  transition: transform 0.15s;
}
.v10-peer-group-chevron.expanded {
  transform: rotate(90deg);
}
.v10-peer-group-label {
  flex: 1;
}
.v10-peer-group-count {
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.v10-peer-group-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 8px;
}
@media (prefers-reduced-motion: reduce) {
  .v10-peer-group-chevron { transition: none; }
}
.v10-agents-summary {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; margin-bottom: 8px;
  font-size: 12px; color: var(--text-secondary);
}
.v10-agents-stat { display: flex; align-items: center; gap: 4px; }
.v10-agents-stat-dot { width: 6px; height: 6px; border-radius: 50%; }
.v10-agents-stat-dot.connected { background: var(--accent-green); }
.v10-agents-stat-dot.known { background: var(--text-tertiary); }
.v10-agents-stat-dot.offline { background: var(--accent-red); }
.v10-agents-stat-dot.degraded { background: #f59e0b; }
.v10-agents-refresh {
  margin-left: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 6px;
}
.v10-agents-refresh:hover { background: var(--bg-elevated); color: var(--text-primary); }
.v10-agents-refresh.disconnect {
  margin-left: 0;
  color: var(--text-danger);
  border-color: color-mix(in srgb, #ef4444 35%, var(--border-subtle));
}
.v10-agents-refresh.disconnect:hover {
  color: var(--text-danger-hover);
  background: color-mix(in srgb, #ef4444 10%, var(--bg-elevated));
}
.v10-agent-subtabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.v10-agent-subtab-group {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  border-radius: 4px;
  overflow: visible;
}
.v10-agent-subtab-group.active {
  background: var(--bg-active);
}
.v10-agent-subtab-group.active > .v10-agent-subtab.active {
  background: transparent;
  border-right-color: transparent;
  border-radius: 4px 0 0 4px;
  padding-right: 8px;
}
.v10-agent-subtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.v10-agent-subtab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.v10-agent-subtab.active {
  color: var(--text-primary);
  background: var(--bg-active);
  border-color: var(--border-subtle);
}
.v10-agent-subtab.add {
  min-width: 32px;
  justify-content: center;
  padding: 0 12px;
  font-size: 16px;
  line-height: 1;
}
.v10-agents-summary-active {
  gap: 10px;
  flex-wrap: wrap;
}
.v10-agents-status-detail {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.v10-agents-loading { padding: 16px; color: var(--text-tertiary); font-size: 12px; text-align: center; }
.v10-agents-section-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-tertiary); margin: 12px 0 6px; padding: 0 2px;
}
.v10-agent-add-surface { padding-top: 8px; }
.v10-agent-card {
  padding: 10px 12px; border-radius: 6px; margin-bottom: 4px;
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
  transition: background 0.15s;
}
.v10-agent-card:hover { background: var(--bg-elevated); }
.v10-agent-card.self { border-color: var(--accent-blue); border-left: 3px solid var(--accent-blue); }
.v10-agent-card-header { display: flex; align-items: center; gap: 6px; }
.v10-agent-card-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.v10-agent-card-dot.self { background: var(--accent-blue); }
.v10-agent-card-dot.connected { background: var(--accent-green); }
.v10-agent-card-dot.known { background: var(--text-tertiary); }
.v10-agent-card-dot.degraded { background: #f59e0b; }
.v10-agent-card-name { font-size: 12px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v10-agent-card-badge {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
  background: var(--bg-elevated); color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
}
.v10-agent-card-meta {
  display: flex; gap: 8px; margin-top: 4px;
  font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono);
  flex-wrap: wrap;
}

/* Peer-axis Network-tab card — extends .v10-agent-card. The peer's
   name reads as a primary identifier (own line treatment via
   .v10-peer-card-name). Meta line: --text-secondary (identifying state,
   not decoration); we intentionally diverge from .v10-agent-card-meta's
   legacy tertiary here for AA on bg-elevated. */
.v10-peer-card-name {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v10-peer-card-meta {
  display: flex; gap: 8px; margin-top: 4px;
  font-size: 10px; color: var(--text-secondary); font-family: var(--font-mono);
  flex-wrap: wrap;
}
/* Override the legacy badge color to --text-secondary on peer cards
   (the badge carries identifying state — `direct` / `relayed` — not
   decoration; tertiary on bg-elevated is borderline AA). Scoped so the
   legacy Agents-tab cards keep their existing token. */
.v10-peer-card .v10-agent-card-badge { color: var(--text-secondary); }
/* Agents-as-chips inside each peer card. flex-wrap handles long lists
   gracefully; the +N more button toggles inline expansion (card grows
   vertically). Class is .v10-peer-chip (NOT .v10-agent-chip) — the
   latter is the attribution-pill component (~styles.css:5451) and the
   namespaces would collide. */
.v10-peer-card-chips {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.v10-peer-chip {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 140px;
  min-width: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v10-peer-chip-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "+N more" / "Show less" toggle button. Shares the chip-pill geometry
   so it sits in the same row; one-tier-stronger border + transparent
   background distinguish it as interactive. No scoped :focus-visible —
   the global focus ring (styles.css:167) is the convention. */
.v10-peer-chip-more {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.v10-peer-chip-more:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.v10-local-agent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v10-local-agent-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.v10-local-agent-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}
.v10-local-agent-card.active {
  border-color: var(--accent-blue);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-blue) 42%, transparent);
}
.v10-local-agent-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v10-local-agent-badge,
.v10-local-agent-status-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  display: inline-block;
  text-align: center;
}
.v10-local-agent-badge.chat_ready,
.v10-local-agent-status-pill.chat_ready {
  color: var(--text-success);
  border-color: color-mix(in srgb, var(--accent-green) 35%, var(--border-subtle));
}
.v10-local-agent-badge.connecting,
.v10-local-agent-status-pill.connecting {
  color: var(--text-info);
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border-subtle));
}
.v10-local-agent-badge.bridge_offline,
.v10-local-agent-status-pill.bridge_offline {
  color: var(--text-warning);
  border-color: color-mix(in srgb, #f59e0b 35%, var(--border-subtle));
}
.v10-local-agent-badge.degraded,
.v10-local-agent-status-pill.degraded {
  color: var(--text-warning);
  border-color: color-mix(in srgb, #f59e0b 35%, var(--border-subtle));
}
.v10-local-agent-badge.available,
.v10-local-agent-status-pill.available {
  color: var(--text-info);
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border-subtle));
}
.v10-local-agent-detail {
  margin-top: 12px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--bg-surface) 86%, var(--bg-elevated));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v10-local-agent-choice {
  margin-top: 0;
}
.v10-local-agent-chat-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative; /* anchor for the drop overlay */
}
.v10-local-agent-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.v10-local-agent-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.v10-local-agent-subtitle {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.v10-local-agent-chat-shell > .v10-local-agent-notice,
.v10-local-agent-chat-shell > .v10-local-agent-error,
.v10-local-agent-chat-shell > .v10-local-agent-warning {
  margin: 8px 12px 0;
}

/* Agent tab kebab menu (Refresh / Disconnect overflow) */
.v10-agent-tab-menu {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.v10-agent-tab-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
.v10-agent-tab-menu-trigger:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.v10-agent-subtab-group.active .v10-agent-tab-menu-trigger {
  color: var(--text-primary);
}
.v10-agent-tab-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  /* Anchor to the LEFT edge of the trigger so the popover grows rightward
     into the panel — left-most agent tabs (the common case) used to clip
     against the panel's left edge with right:0. AgentTabMenu measures
     after open and flips to .align-right when the projected right edge
     would overflow the panel (rightmost tabs on narrow layouts). */
  left: 0;
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 200;
  overflow: hidden;
  padding: 4px;
}
.v10-agent-tab-menu-popover.align-right {
  /* Right-anchored fallback when the left-anchored popover would
     overflow the panel's right edge (rightmost tabs on narrow layouts).
     AgentTabMenu measures after open and toggles this class. */
  left: auto;
  right: 0;
}
.v10-agent-tab-menu-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}
.v10-agent-tab-menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 12px;
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}
.v10-agent-tab-menu-item:hover:not(:disabled) {
  background: var(--bg-hover);
}
.v10-agent-tab-menu-item:disabled {
  color: var(--text-tertiary);
  cursor: default;
}
.v10-agent-tab-menu-item.danger {
  color: var(--text-danger);
}
.v10-agent-tab-menu-item.danger:hover:not(:disabled) {
  background: color-mix(in srgb, #ef4444 12%, var(--bg-hover));
  color: var(--text-danger-hover);
}

/* Custom Select (replaces native <select> for theme-aware dropdowns) */
.v10-select {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
}
.v10-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
.v10-select-trigger:hover:not(:disabled) {
  border-color: var(--border-default);
  background: var(--bg-hover);
}
.v10-select-trigger:focus-visible {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue);
}
.v10-select.open .v10-select-trigger {
  border-color: var(--border-strong);
}
.v10-select-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.v10-select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v10-select-value.placeholder {
  color: var(--text-secondary);
}
.v10-select-caret {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-tertiary);
  transition: transform 0.15s;
}
.v10-select.open .v10-select-caret {
  transform: rotate(180deg);
}
.v10-select-menu {
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.v10-select-menu:focus { outline: none; }
.v10-select-menu-above {
  margin-top: -4px;
}
.v10-select-menu-below {
  margin-top: 4px;
}
.v10-select-option {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v10-select-option.highlighted,
.v10-select-option:hover {
  background: var(--bg-hover);
}
.v10-select-option.selected {
  background: var(--bg-active);
  color: var(--text-primary);
}
.v10-select-option.disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}
.v10-select-option.empty {
  color: var(--text-tertiary);
  cursor: default;
}
.v10-local-agent-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
}

/* Floating "scroll to latest" pill — sticks to the bottom-center of the
   visible portion of the messages region while the user is scrolled away
   from the bottom. Sticky inside the scroll container means it rides
   along automatically with no scroll listener positioning math. */
.v10-scroll-to-bottom {
  position: sticky;
  /* Lift above the composer so there's breathing room between the pill
     and the input shell below. */
  bottom: 16px;
  align-self: center;
  /* Lock the box to 32x32 in every direction. The messages region is a
     flex column with default `align-items: stretch`; without min/max
     and flex: none, the cross-axis sizing can drift the button into a
     horizontal pill instead of a circle. */
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  flex: none;
  aspect-ratio: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out, background 0.15s, color 0.15s;
  z-index: 5;
  /* Negative top margin so the pill overlays the previous message instead
     of forcing extra vertical space when invisible. */
  margin-top: -32px;
  margin-bottom: 0;
}
.v10-scroll-to-bottom.visible {
  opacity: 1;
  pointer-events: auto;
}
.v10-scroll-to-bottom:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
@media (prefers-reduced-motion: reduce) {
  .v10-scroll-to-bottom { transition: none; }
}
.v10-local-agent-msg-time {
  /* Bumped from `--text-tertiary` to `--text-secondary` after PR4's
     timestamp-expansion change made these strings noticeably more
     visible (full date + time vs. previous time-only). Pre-existing
     AA fail surfaced by PR4: tertiary clears only 2.31-2.66:1 against
     bg-panel; secondary clears 5.58/7.17. UI-lead Task #68. */
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  /* Hidden by default, revealed on message hover/focus — same recipe
     as `.v10-md-copy`. Reduces transcript noise now that PR4 made
     assistant turns full-width with no bubble. Colour/contrast (AA per
     Task #68) is unchanged; only visibility toggles. */
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.v10-chat-msg:hover .v10-local-agent-msg-time,
.v10-chat-msg:focus-within .v10-local-agent-msg-time {
  opacity: 1;
}
.v10-local-agent-msg-time.user {
  align-self: flex-end;
}
.v10-local-agent-msg-time.assistant {
  align-self: flex-start;
}
/* Touch (no hover) and reduced-motion users always see the timestamp —
   mirrors the `.v10-md-copy` accessibility fallbacks. */
@media (hover: none) {
  .v10-local-agent-msg-time { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .v10-local-agent-msg-time { opacity: 1; transition: none; }
}
.v10-local-agent-setup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v10-local-agent-warning {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.55;
  border: 1px solid var(--border-default);
}
.v10-local-agent-warning.connecting {
  color: #bfdbfe;
  background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border-subtle));
}
.v10-local-agent-warning.offline {
  color: #fcd34d;
  background: color-mix(in srgb, #f59e0b 10%, var(--bg-surface));
  border-color: color-mix(in srgb, #f59e0b 28%, var(--border-subtle));
}
.v10-local-agent-copy {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.v10-local-agent-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.v10-local-agent-target-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  margin: 0;
}
.v10-local-agent-target-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.v10-local-agent-target-select {
  flex: 1;
  width: 100%;
  min-width: 0;
}
.v10-local-agent-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v10-local-agent-composer-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
/* Composer shell: vertical stack — textarea on top, controls toolbar
   (attach + project picker + send) below, all inside one rounded box. */
.v10-local-agent-composer-shell {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 10px 12px;
  gap: 8px;
  border-radius: 14px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  transition: border-color 0.15s;
}
.v10-local-agent-composer-shell:focus-within {
  border-color: var(--border-strong);
}
.v10-composer-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.v10-composer-controls-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.v10-composer-attach {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.v10-composer-attach:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.v10-composer-attach:focus-visible {
  outline: none;
  background: var(--bg-hover);
  color: var(--text-primary);
}
.v10-composer-attach:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.v10-local-agent-inline-send {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: var(--text-primary);
  color: var(--bg-root);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.v10-local-agent-inline-send:hover:not(:disabled) {
  opacity: 0.9;
}
.v10-local-agent-inline-send:disabled {
  /* Muted but still legibly filled — keeps the active-state silhouette
     while clearly signalling disabled. --text-secondary lands in the
     contrast sweet spot in both themes (~4.7:1 dark / ~5.5:1 light
     against the composer shell). */
  background: var(--text-secondary);
  color: var(--bg-surface);
  cursor: not-allowed;
}
/* Streaming: button remains clickable as a stop-button. Distinguish
   it visually from the idle Send button so a user typing a follow-up
   mid-stream doesn't reflexively click "Send" and accidentally abort
   the in-flight reply (UX-lead P1-B). Switch the filled silhouette
   for an outlined-square treatment — same shape, different surface
   reading — matches Claude / ChatGPT's stop-button pattern. The
   `--border-prominent` token clears WCAG 1.4.11 3:1 against
   `--bg-active` in both themes (~3.8:1 dark / ~3.2:1 light). */
.v10-local-agent-inline-send-streaming {
  cursor: pointer;
  background: var(--bg-active);
  color: var(--text-primary);
  border: 1px solid var(--border-prominent);
}
/* Override the generic `:hover { opacity: 0.9 }` on .v10-local-agent-inline-send
   — the outlined Stop button reads better with a surface bump than an
   opacity dip. */
.v10-local-agent-inline-send-streaming:hover {
  background: var(--bg-hover);
  opacity: 1;
}
/* Uploading: spinner spins continuously. The button is disabled in this
   state (informational only) — the underlying :disabled rule above
   handles its appearance; this rule just animates the inner icon. */
.v10-local-agent-inline-send-spinner {
  animation: v10-spin 0.85s linear infinite;
}
@keyframes v10-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .v10-local-agent-inline-send-spinner { animation: none; }
}

/* Project picker now lives INSIDE the composer-controls row to the right of
   the attach button. Lets the picker fill the available space in the row
   (between the attach button on its left and the send button anchored
   right) so most project names fit without truncation. Long names still
   ellipsize and surface in a `title` tooltip on hover of each option. */
.v10-composer-target {
  flex: 1;
  min-width: 0;
}
/* Borderless at rest — matches the ghost feel of the attach button. The
   open state and hover state both lift the background instead of stamping
   a visible outline. */
.v10-composer-target .v10-select-trigger {
  border-color: transparent;
  background: transparent;
}
.v10-composer-target .v10-select-trigger:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: transparent;
}
.v10-composer-target .v10-select.open .v10-select-trigger {
  background: var(--bg-hover);
  border-color: transparent;
}

/* Inline Select prefix icon (e.g. Folder for the project picker). */
.v10-select-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-right: 6px;
}
/* Attachment chips (compact, ChatGPT/Claude pattern) */
.v10-attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v10-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 8px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  max-width: 100%;
  min-width: 0;
}
.v10-attachment-chip[data-status="error"] {
  border-color: color-mix(in srgb, #ef4444 35%, var(--border-subtle));
}
.v10-attachment-chip[data-status="uploading"] {
  border-color: color-mix(in srgb, var(--accent-blue) 35%, var(--border-subtle));
}
.v10-attachment-chip-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-active);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.v10-attachment-chip-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.v10-attachment-chip-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.v10-attachment-chip-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.v10-attachment-chip-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.v10-attachment-chip[data-status="error"] .v10-attachment-chip-status {
  color: var(--text-danger);
}
.v10-attachment-chip-remove {
  /* Bumped from --text-tertiary to --text-secondary so the X icon at rest
     clears WCAG 1.4.11 3:1 non-text contrast against the chip's
     --bg-elevated background: ~4.07:1 dark, ~7.1:1 light. Hover still
     promotes to --text-primary for additional affordance. */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.v10-attachment-chip-remove:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.v10-attachment-chip-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Drop overlay — covers the entire chat-shell (messages + composer) with a
   centered card. Claude-Desktop-style affordance: clear visual cue with a
   backdrop dim so the user knows the drop target is the chat. */
.v10-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms ease-out;
  background: color-mix(in srgb, var(--bg-root) 60%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.v10-drop-overlay.active {
  opacity: 1;
  /* Keep the overlay non-interactive (`pointer-events: none` from the
     base rule above). The dropzone root owns the drag lifecycle —
     turning the overlay interactive while it sits inside the drop
     target can steal the follow-up `dragenter`/`dragleave`/`drop`
     sequence in real browsers and cause flicker or dropped files
     failing to register. */
}
.v10-drop-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 28px;
  border-radius: 14px;
  background: var(--bg-elevated);
  /* Monochrome border + icon — matches the rest of the node design
     instead of competing with it as the blue accent did. Theme-aware
     via --text-primary (~white in dark mode, ~black in light mode). */
  border: 2px dashed var(--text-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  text-align: center;
  max-width: 320px;
}
.v10-drop-overlay.refuse .v10-drop-overlay-card {
  border-color: var(--border-strong);
}
.v10-drop-overlay-icon {
  color: var(--text-primary);
}
.v10-drop-overlay.refuse .v10-drop-overlay-icon {
  color: var(--text-tertiary);
}
.v10-drop-overlay-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.v10-drop-overlay.refuse .v10-drop-overlay-title {
  color: var(--text-secondary);
}
.v10-drop-overlay-hint {
  font-size: 11px;
  color: var(--text-secondary);
}
@media (prefers-reduced-motion: reduce) {
  .v10-drop-overlay { transition: none; }
}
.v10-local-agent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v10-local-agent-notice,
.v10-local-agent-error {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.5;
}
.v10-local-agent-notice {
  background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--accent-blue) 30%, var(--border-subtle));
  color: var(--text-secondary);
}
.v10-local-agent-error {
  background: color-mix(in srgb, #ef4444 12%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, #ef4444 30%, var(--border-subtle));
  color: #fca5a5;
}
.v10-agent-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 0 12px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.v10-agent-link-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.v10-agent-empty-state {
  padding: 24px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.v10-agent-empty-state-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.v10-agent-empty-state-hint {
  font-size: 11px;
  color: var(--text-tertiary);
}
/* Legacy: bare-text empty states elsewhere (NetworkTab, SessionsTab, Add-agent) */
.v10-agent-empty-state:not(:has(.v10-agent-empty-state-title)) {
  padding: 16px;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* Agent input */
.v10-agent-input-area {
  flex-shrink: 0;
  padding: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-panel);
}
.v10-agent-input {
  width: 100%;
  padding: 4px 2px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  /* Match the chat bubble (13px) — typed text and rendered reply
     should read at the same size in the same column (qa-lead). The
     global input/textarea rule (12px, mono) is for compact forms; the
     chat composer is conversational. */
  font-size: 13px;
  font-family: var(--font-sans);
  line-height: 1.5;
  min-width: 0;
  resize: none;
}
.v10-agent-input:focus { outline: none; }
.v10-agent-input::placeholder {
  color: var(--text-secondary);
}
.v10-agent-send-btn {
  min-width: 56px;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.v10-agent-send-btn.secondary {
  background: var(--bg-elevated);
}
.v10-agent-send-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }

/* ── Bottom panel ── */
.v10-panel-bottom {
  background: var(--bg-panel);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  /* Height is driven by inline style (store-persisted) when expanded.
     Transition only applies when collapsing/expanding, not during drag. */
  transition: height 0.15s ease;
}
.v10-panel-bottom.collapsed { height: var(--tab-h); }
.v10-panel-bottom.maximised { height: 80vh !important; }

.v10-resize-handle-v {
  height: 4px;
  min-height: 4px;
  flex-shrink: 0;
  cursor: row-resize;
  background: transparent;
  transition: background 0.15s;
}
.v10-resize-handle-v:hover,
.v10-resize-handle-v.active { background: var(--accent-blue, #3b82f6); }
.v10-bottom-tabs {
  height: var(--tab-h);
  min-height: var(--tab-h);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
}
.v10-bottom-tab {
  padding: 0 12px;
  height: 100%;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--text-tertiary);
  border: none;
  outline: none;
  background: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.v10-bottom-tab:hover { color: var(--text-secondary); }
.v10-bottom-tab:focus { outline: none; }
.v10-bottom-tab.active { color: var(--text-primary); border-bottom-color: var(--accent-blue, #3b82f6); }
.v10-bottom-toggle {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 4px;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.v10-bottom-toggle:hover { color: var(--text-primary); background: var(--bg-hover); }
.v10-bottom-toggle:focus { outline: none; }
.v10-bottom-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* Log viewer */
.v10-log-container { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.v10-log-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.v10-log-filter {
  flex: 1;
  min-width: 0;
  padding: 3px 8px;
  font-size: 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  outline: none;
}
.v10-log-filter:focus { border-color: var(--accent-blue, #3b82f6); }
.v10-log-level-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 3px 22px 3px 8px;
  font-size: 11px;
  background: var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 6px center;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  outline: none;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s;
}
.v10-log-level-select:hover { border-color: var(--border-default); color: var(--text-primary); }
.v10-log-level-select:focus { outline: none; border-color: var(--accent-blue, #3b82f6); }
.v10-log-output {
  flex: 1;
  overflow: auto;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.65;
}
.v10-log-line {
  padding: 1px 12px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-all;
}
.v10-log-line:hover { background: rgba(255,255,255,.03); }

/* ══════════════════════════════════════════
   AGENT CHAT (V10)
   ══════════════════════════════════════════ */
.v10-chat-messages { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.v10-chat-msg { display: flex; flex-direction: column; }
.v10-chat-msg.user { align-items: flex-end; }
.v10-chat-msg.assistant {
  align-items: stretch;
  /* Assistant messages render full-width within the messages region,
     matching Claude Desktop / ChatGPT / VS Code Copilot. The .v10-chat-msg
     wrapper sets the stretch axis so the inner .v10-chat-bubble.assistant
     fills the available width without an explicit width: 100%. */
}
.v10-chat-bubble {
  /* Chat copy is dense; +1 not +2 — keeps the bubble height-economical
     while tracking the body base bump (PR8). */
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: var(--text-primary);
}
.v10-chat-plaintext {
  /* User-side bubbles render as literal text — preserve whitespace and
     newlines so the transcript shows the exact prompt the user sent.
     `pre-wrap` keeps `\n` visible without collapsing runs of spaces;
     the inherited word-break / overflow-wrap on the bubble still
     handles long unbroken tokens. */
  white-space: pre-wrap;
}
.v10-chat-bubble.user {
  /* User pill — right-aligned, capped width, distinct surface. */
  padding: 10px 14px;
  border-radius: 10px;
  max-width: 85%;
  background: var(--bg-active);
  border: 1px solid var(--border-default);
}
.v10-chat-bubble.assistant {
  /* No bubble container — assistant content reads as full-width body
     copy on the panel background, the same pattern industry-standard
     AI chat UIs use. Padding stays narrow so the assistant typography
     visually separates from the bordered code blocks / blockquotes /
     tables that live inside `.v10-md`. No background, no border, no
     `max-width` — those previously created the "two cramped chat boxes"
     look. */
  padding: 4px 0;
}
/* ── Markdown rendering (PR3) ── */
.v10-md {
  font-size: 12px;
  line-height: 1.5;
  color: inherit;
}
.v10-md > *:first-child { margin-top: 0; }
.v10-md > *:last-child { margin-bottom: 0; }
.v10-md-h1, .v10-md-h2, .v10-md-h3 {
  font-weight: 600;
  line-height: 1.3;
  margin: 12px 0 6px;
  color: var(--text-primary);
}
.v10-md-h4, .v10-md-h5, .v10-md-h6 {
  font-weight: 600;
  line-height: 1.4;
  margin: 10px 0 6px;
  color: var(--text-primary);
}
.v10-md-h1 { font-size: 18px; }
.v10-md-h2 { font-size: 16px; }
.v10-md-h3 { font-size: 14px; }
.v10-md-h4 { font-size: 13px; }
.v10-md-h5 { font-size: 12px; }
.v10-md-h6 { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
/* Explicit `--text-primary` on body-text elements. A global
   `p { color: var(--text-secondary) }` (≈styles.css:2682) would
   otherwise win over these (bare-element specificity 0,0,1 beats
   inherited color from an ancestor). Before PR4 the assistant bubble's
   own `color: var(--text-primary)` masked it; with the bubble removed
   full-width assistant prose was inheriting the dim global and reading
   as unreadable muted gray in dark mode. The `.v10-md-*` class
   selectors (0,1,0) beat the global `p` cleanly. Headings already set
   this explicitly; links / code / h6 keep their intentional non-primary
   colors. Blockquote body is re-dimmed below (its inner `<p>` would
   otherwise pick up this `--text-primary` directly, defeating the
   intentional dim-quote affordance). */
.v10-md-p { margin: 4px 0; color: var(--text-primary); }
.v10-md-ul, .v10-md-ol { margin: 4px 0; padding-left: 20px; }
.v10-md-ul { list-style: disc; }
.v10-md-ol { list-style: decimal; }
.v10-md-li { margin: 2px 0; color: var(--text-primary); }
.v10-md-li > .v10-md-ul, .v10-md-li > .v10-md-ol { margin: 2px 0; padding-left: 18px; }
/* Task lists (remark-gfm) */
.v10-md-ul .v10-md-li input[type="checkbox"] {
  margin-right: 6px;
  vertical-align: middle;
  accent-color: var(--accent-blue);
}
.v10-md-link {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.v10-md-link:hover { text-decoration: none; }
.v10-md-link-inert {
  /* Inert sibling of .v10-md-link: relative / unsupported-scheme hrefs
     from untrusted chat content render as a span (not <a>), so the user
     can read the link text but can't be silently navigated by it.
     Dotted underline keeps the affordance honest. */
  color: var(--text-secondary);
  text-decoration: underline dotted;
  text-decoration-skip-ink: none;
  text-underline-offset: 2px;
  cursor: help;
}
.v10-md-blockquote {
  /* Left rail bumped from `--border-strong` to `--border-prominent`
     after the assistant bubble was removed in PR4 — the rail is the
     only visual cue defining the blockquote (the 5% wash inside is
     effectively imperceptible on bg-panel) and `--border-strong`
     fails WCAG 1.4.11 (3:1 non-text) against `--bg-panel` in both
     themes. `--border-prominent` clears 5.58:1 dark / 7.17:1 light,
     same swap recipe as `.v10-md-hr` and the inline-code chip
     border. Codex / UI-lead Task #67. */
  margin: 6px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--border-prominent);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-tertiary) 5%, transparent);
  border-radius: 0 6px 6px 0;
}
/* react-markdown renders blockquote body as `<blockquote><p
   class="v10-md-p">…</p></blockquote>`. The `.v10-md-p` rule above now
   sets `--text-primary` directly on that inner `<p>`, which a direct
   rule always beats over the `--text-secondary` the `<p>` would
   otherwise inherit from `.v10-md-blockquote`. Re-dim quoted body text
   with a scoped descendant selector (0,2,0 > the 0,1,0 `.v10-md-p`),
   preserving the "quoted content reads dimmer than body" affordance.
   Clears WCAG AA at 5.45:1 dark / 6.92:1 light. UI-lead PR4 r6. */
.v10-md-blockquote .v10-md-p,
.v10-md-blockquote .v10-md-li { color: var(--text-secondary); }
.v10-md-hr {
  /* `--border-subtle` was invisible against the panel background — the
     assistant content now sits directly on `--bg-panel` after the
     bubble removal, and even the dark-theme `--border-default` /
     `--border-strong` still fail WCAG 1.4.11 (3:1 non-text) here.
     `--border-prominent` is the same chip-outline token already in
     use by inline-code chips on user bubbles and clears 3:1 against
     `--bg-panel` in both themes. */
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--border-prominent);
}
.v10-md-table-scroll {
  /* Outer border bumped to `--border-prominent` for the same reason
     `.v10-md-hr` / `.v10-md-blockquote` / `.v10-md-pre` did — after
     PR4's bubble removal, the table sits on `--bg-panel` and the old
     `--border-subtle` clears only ~1.15:1 against panel (fails 3:1).
     UI-lead Task #66. */
  margin: 8px 0;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border-prominent);
}
.v10-md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.v10-md-thead {
  background: var(--bg-elevated);
}
.v10-md-th {
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.v10-md-td {
  /* Table data is primary content, not metadata — `--text-secondary`
     read as dim/unreadable on the no-bubble dark panel (same root
     cause as `.v10-md-p`). Match the header (`--text-primary`). */
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: top;
}
.v10-md-tr:last-child .v10-md-td { border-bottom: 0; }
/* Inert placeholder rendered in place of markdown images. The chat renders
   untrusted agent output, so `<img>` is replaced with a label that names
   the resource without fetching it. */
.v10-md-image-placeholder {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-active);
  color: var(--text-secondary);
  font-size: 11px;
  font-style: italic;
  border: 1px solid var(--border-prominent);
  cursor: help;
}

.v10-md-code {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--bg-active);
  color: var(--text-primary);
  /* 1px border keeps the chip visible on bubbles whose bg is also --bg-active
     (e.g., user bubbles). Uses --border-prominent so contrast clears 3:1
     non-text on every bubble × theme combination. */
  border: 1px solid var(--border-prominent);
  /* Default `box-decoration-break: slice` so that a single chip wrapping
     across lines shows open edges at the wrap point (matches Claude
     Desktop: the right edge of line 1 and the left edge of line 2 stay
     open, signalling "this is one continuous token"). Vertical separation
     between lines is handled by the parent's line-height below. */
}
/* Paragraphs and list items that contain inline-code chips bump line-height
   so the chips have breathing room without needing each line to render a
   fully-closed padding box. Codex CGaLL: drop the `>` child combinator —
   `:has(> .v10-md-code)` only matched when the paragraph was a single
   `<code>` node, so the common `text <code> text` case missed the rule. */
.v10-md-p:has(.v10-md-code),
.v10-md-li:has(.v10-md-code) {
  line-height: 1.85;
}
.v10-md-pre {
  /* Code-block container outline bumped to `--border-prominent` for
     the same reason as `.v10-md-hr` / `.v10-md-blockquote` /
     `.v10-md-table-scroll` — the `--bg-elevated` fill is barely a
     lift over `--bg-panel` (~1.05-1.11:1) once the assistant bubble
     was removed in PR4, so the border is now the only visual cue
     defining the code block. `--border-subtle` fails 3:1 against
     panel; `--border-prominent` clears it in both themes. UI-lead
     Task #65. */
  position: relative;
  margin: 8px 0;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-prominent);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11px;
}
.v10-md-pre-lang {
  position: absolute;
  top: 6px;
  left: 10px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-radius: 4px;
  pointer-events: none;
}
.v10-md-pre-rendered,
.v10-md-pre-fallback {
  margin: 0;
  padding: 28px 12px 10px;
  overflow-x: auto;
}
.v10-md-pre-rendered pre,
.v10-md-pre-fallback {
  margin: 0;
  background: transparent !important;
}
.v10-md-pre-rendered code,
.v10-md-pre-fallback code {
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  padding: 0;
}
.v10-md-copy {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bg-active) 75%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease-out, background 0.15s, color 0.15s;
}
.v10-md-pre:hover .v10-md-copy,
.v10-md-copy:focus-visible {
  opacity: 1;
}
.v10-md-copy:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}
@media (hover: none) {
  .v10-md-copy { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .v10-md-copy { opacity: 1; transition: none; }
}
.v10-md-copy-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.v10-chat-cursor {
  display: inline-block;
  width: 5px;
  height: 14px;
  background: var(--text-secondary);
  margin-left: 2px;
  animation: pulse 1s ease-in-out infinite;
  vertical-align: text-bottom;
}

/* Pre-first-token "thinking" indicator (ChatGPT-style sheen sweep).
   `color: var(--text-secondary)` is declared first as the graceful
   fallback — if `background-clip: text` is unsupported the word still
   shows at the AA-clearing secondary tone (5.58:1 dark / 7.17:1
   light). The animated highlight only sweeps brighter (toward
   --text-primary), so contrast never drops below the base. */
.v10-chat-thinking {
  display: inline-block;
  font-size: 13px;
  color: var(--text-secondary);
  background: linear-gradient(
    90deg,
    var(--text-secondary) 0%,
    var(--text-secondary) 35%,
    var(--text-primary) 50%,
    var(--text-secondary) 65%,
    var(--text-secondary) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: v10-thinking-sheen 1.6s ease-in-out infinite;
}
@keyframes v10-thinking-sheen {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* Static, fully legible — no sweep. */
  .v10-chat-thinking {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--text-secondary);
  }
}

/* Sessions list */
.v10-sessions-list { padding: 8px 0; }
.v10-session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  transition: background 0.1s;
}
.v10-session-item:hover { background: var(--bg-hover); }
.v10-session-preview {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}
.v10-session-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   DASHBOARD VIEW
   ══════════════════════════════════════════ */
/* Widened from 1200 → 1440: the old cap left a big empty right gutter
   and the cards read sparse. 1440 fills the viewport on common large
   screens while keeping readable line lengths and stopping the list row
   from over-stretching past comfort (ui-lead — capped below 1600). */
.v10-dashboard { max-width: 1440px; min-width: 0; }
/* Subtle one-shot mount lift for dashboard cards/sections. Short
   (160ms), opacity + 4px translate only, `both` so it doesn't flash the
   pre-animation state. Fully disabled under reduced-motion. */
@keyframes v10DashMount { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.v10-anim-mount { animation: v10DashMount 160ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .v10-anim-mount { animation: none; } }

.v10-dash-header { margin-bottom: 24px; }
/* Keep hero title pinned (PR8); subtitle gets promoted from tertiary
   muted-mono to a readable secondary line. */
.v10-dash-title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.v10-dash-subtitle { font-size: 13px; color: var(--text-secondary); font-family: var(--font-mono); }
.v10-dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 24px; }
.v10-dash-stats .stat-card { min-width: 0; }
.v10-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.v10-dash-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 16px 18px;
  /* Same hover lift/glow as the stat cards so the lower panels feel
     part of the same surface family (round-2 feedback). */
  transition: border-color .15s, box-shadow .15s;
}
.v10-dash-section:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.v10-dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.v10-dash-section-header h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
/* Icon + title cluster on the left of a section header. Icon inherits
   --text-secondary so it reads as a quiet affordance, not a control. */
.v10-dash-section-title { display: flex; align-items: center; gap: 6px; }
.v10-dash-section-title svg { color: var(--text-secondary); flex-shrink: 0; }
.v10-dash-section-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  padding: 2px 8px;
  border-radius: 4px;
}
.v10-dash-section-link {
  font-size: 12px;
  color: var(--text-secondary);
  transition: color 0.15s;
}
.v10-dash-section-link:hover { color: var(--text-primary); }

/* ── PR6 dashboard: 3 stat panels + My Context Graphs list ── */
.v10-dash-stats-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .v10-dash-stats-3 { grid-template-columns: 1fr; } }
.v10-dash-grid-2 { grid-template-columns: minmax(0, 2.2fr) minmax(320px, 1fr); }
@media (max-width: 720px) { .v10-dash-grid-2 { grid-template-columns: 1fr; } }
.v10-dash-section-wide { min-width: 0; }

/* Curator/Joined split bar in the My Context Graphs card — same
   spacing rhythm as the Size card's metric → bar → legend stack. */
.v10-cg-rolesplit { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 2px; transition: opacity 0.12s; }
/* Identity refetch in flight: signal the split is not authoritative
   right now without flickering it away (the underlying data may still
   be correct after the refetch). */
.v10-cg-rolesplit.is-refreshing { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .v10-cg-rolesplit { transition: none; } }

/* Dim inline label. `--text-secondary` (NOT tertiary): these annotate
   real numbers, so they must clear AA on the card surface. */
.v10-cg-dim { color: var(--text-secondary); font-weight: 400; }

/* Context Graph Size: the two metrics ARE the headline now (the
   redundant combined top number was removed). Big number + small unit
   label, each over its WM/SWM/VM bar; tightened so the card is compact. */
/* The two metrics carry the panel — give them air now they're large
   (ui-lead: 14px between metrics, 6px number→bar). */
.v10-cg-size-detail { margin-top: 2px; display: flex; flex-direction: column; gap: 14px; }
.v10-cg-size-metric { display: flex; flex-direction: column; gap: 6px; }
.v10-cg-size-num { display: flex; align-items: baseline; gap: 6px; }
.v10-cg-size-big {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.v10-cg-size-num .v10-cg-dim { font-size: 12px; }
.v10-cg-size-empty { font-size: 20px; font-weight: 600; padding: 6px 0; }
/* The Size card is the densest of the three stat cards; trim its
   padding so the two big numbers + bars + legend + sub don't bloat it
   past the other two (ui-lead). */
/* Tighter padding for content-heavy stat cards (Size + My Context
   Graphs) so the inner bar's right edge aligns across both cards
   (round-3 feedback). */
.stat-card.v10-stat-tight { padding: 16px 18px; }
/* Loading placeholder used in every stat card's value slot AND in the
   Size card's inline empty/loading area. Reset the inherited
   `.stat-value` (28px/700) so "loading…" reads as a quiet placeholder
   instead of a huge headline. Keeps the layout box close to a real
   value so the surrounding sub-text doesn't jump on settle. */
.v10-stat-loading {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.4;
  padding: 6px 0;
}
/* Empty placeholder ("—") for the same value slot. Same sizing as the
   loading state but non-italic so it reads as "no data" rather than
   "still loading". Resets the inherited `.stat-value` and the older
   `.v10-cg-size-empty` font sizes so the dash is consistent across
   all three top cards. */
.v10-stat-empty {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.4;
  padding: 6px 0;
}
/* Track background + 1px gap between segments shows the track colour as
   a hairline separator, and the outline keeps the light-theme WM
   segment's boundary readable even though its remapped token fill is
   low-contrast on its own (ui-lead non-text-contrast fix). */
.v10-layerbar {
  display: flex;
  gap: 1px;
  height: 7px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
}
.v10-layerbar-seg { height: 100%; }
.v10-layerbar-empty { flex: 1; background: var(--bg-elevated); }
.v10-layer-legend { display: flex; gap: 12px; margin-top: 4px; }
.v10-layer-legend-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono);
}
.v10-layer-legend-dot { width: 8px; height: 8px; border-radius: 2px; }

/* My Context Graphs list — column grid shared by header + rows. */
.v10-cg-colhead, .v10-cg-row {
  display: grid;
  /* Reverted from the round-2 over-flex: a fully-flexible Size column
     wrapped the inline "N entities · M triples" onto multiple lines on
     narrow widths, which read worse than a slightly-truncated name
     (round-3 feedback). Back to the pre-round-2 fixed-ish Size width
     and 1fr Name (Name truncates with ellipsis when squeezed). */
  grid-template-columns: minmax(0, 1fr) 40px minmax(140px, 190px) 52px 76px;
  align-items: center;
  gap: 8px;
}
.v10-cg-colhead {
  padding: 5px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.v10-cg-list {
  display: flex;
  flex-direction: column;
  /* ~10 rows then internal scroll; global scrollbar styling applies. */
  max-height: 360px;
  overflow-y: auto;
}
.v10-cg-row {
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-subtle);
  background: none;
  transition: background 0.12s;
}
.v10-cg-row:last-child { border-bottom: 0; }
.v10-cg-row:hover { background: var(--bg-hover); }
.v10-cg-cell { font-size: 13px; color: var(--text-secondary); min-width: 0; }
.v10-cg-name {
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v10-cg-type { display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.v10-cg-agents { text-align: right; font-variant-numeric: tabular-nums; }
/* Role cell: left-anchor the badge. A pill centered in its column reads
   as unmoored (ui-lead) — left-aligning it under a left header keeps the
   column edge stable as role labels vary in width. */
.v10-cg-role { display: flex; align-items: center; justify-content: flex-start; }
/* Header cells align to their column's content (Name/Size/Role left,
   Type centered over the glyph, Agents right over the numbers) — a
   left-aligned header over centered/right content read as misaligned
   in the screenshot review. */
.v10-cg-colhead .v10-cg-type { justify-content: center; text-align: center; }
.v10-cg-colhead .v10-cg-agents { text-align: right; }
/* Role badge — same small-status-badge family as `.v10-agent-card-badge`. */
.v10-cg-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}
/* Filled chip: `--accent-green` text on `--bg-elevated` fails AA in
   light theme (~1.9:1 — accent-green is theme-invariant, bg-elevated is
   not). Invert to a solid green chip with fixed near-black text — AA in
   BOTH themes (~10:1, accent-green is constant) and rightly emphasises
   the consequential "curator" role vs the quiet outlined "joined". #86 */
.v10-cg-badge-curator { background: var(--accent-green); color: #0a0a0a; border-color: var(--accent-green); }
.v10-cg-badge-joined { color: var(--text-secondary); }
.v10-cg-empty { color: var(--text-secondary); font-size: 12px; padding: 16px 4px; }

/* Wallets and Spending sidebar card — compact, reuses existing tokens. */
/* Section titles inside the Wallets card. Stronger than the previous
   10px caps so "Node wallets" and "Spending" read as distinct sections
   rather than blending with rows, with extra top-spacing + a hairline
   divider to separate them (round-3 feedback). */
.v10-ws-subhead {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 18px 0 8px;
}
.v10-ws-subhead:first-of-type { margin-top: 4px; }
/* Hairline divider above every section except the first to reinforce
   the section break visually. */
.v10-ws-subhead + * { margin-top: 0; }
.v10-ws-subhead:not(:first-of-type) {
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

/* Chain row above the wallet table: small key:value pair, muted key,
   primary value. */
.v10-ws-chain-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
}
.v10-ws-chain-label {
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.v10-ws-chain-value { color: var(--text-primary); }
/* (Older `.v10-ws-chain` inline subhead suffix is no longer used — the
   chain now has its own `.v10-ws-chain-row` above the wallets section.) */

/* Wallet table: Wallet | TRAC | Gas — one shared grid for header +
   rows so values sit under their column headers (round-2 feedback). */
.v10-ws-wtable { display: flex; flex-direction: column; gap: 5px; }
.v10-ws-wrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5em 5em;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.v10-ws-wrow .v10-ws-bal,
.v10-ws-wrow .v10-ws-bal-sec { text-align: right; font-size: 13px; }
.v10-ws-wrow .v10-ws-bal-sec { color: var(--text-secondary); }
.v10-ws-whead {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.v10-ws-whead span:not(:first-child) { text-align: right; }

.v10-ws-wallets { list-style: none; display: flex; flex-direction: column; gap: 6px; }
/* Wallet row: address left, balances right-stacked (TRAC primary, ETH
   secondary) — a 2-col grid so the address can ellipsis while the
   balance column stays a stable right edge (ui-lead). */
.v10-ws-wallet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.v10-ws-addr {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v10-ws-balcol { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.v10-ws-bal {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Secondary ETH line: smaller, --text-secondary (NOT tertiary — it's a
   real balance, must clear AA). */
.v10-ws-bal-sec {
  color: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Spending mini-table: Period | Publishes | TRAC, with a tiny header
   row so the bare numbers are labelled (ui-lead). */
.v10-ws-spend { display: flex; flex-direction: column; gap: 4px; }
.v10-ws-spend-head, .v10-ws-spend-row {
  display: grid;
  /* Fixed numeric columns (not `auto auto`): with auto, small numbers
     collapsed together so Publishes looked empty and both sat under
     TRAC. Explicit widths keep each value under its own header
     (round-2 feedback). */
  grid-template-columns: minmax(0, 1fr) 7em 5em;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.v10-ws-spend-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.v10-ws-spend-head span:not(:first-child),
.v10-ws-spend-val { text-align: right; }
.v10-ws-spend-val {
  color: var(--text-primary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Chain/RPC partial-error caveat under the wallet list. --text-secondary
   (AA on the card surface), small but not micro. */
.v10-ws-note { color: var(--text-secondary); font-size: 12px; margin-top: 6px; }

/* Quick actions */
.v10-quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.v10-quick-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: var(--bg-elevated);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.v10-quick-action:hover { border-color: var(--border-strong); color: var(--text-primary); }
.v10-quick-action-icon { font-size: 14px; width: 20px; text-align: center; }

/* Recent ops */
.v10-recent-ops { display: flex; flex-direction: column; gap: 0; }
.v10-recent-op {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
}
.v10-recent-op:last-child { border-bottom: none; }
.v10-recent-op-type { font-weight: 500; color: var(--text-primary); }
.v10-recent-op-status { font-family: var(--font-mono); font-size: 11px; }
.v10-recent-op-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); margin-left: auto; }

/* Project cards in dashboard */
.v10-dash-projects { display: flex; flex-direction: column; gap: 6px; }
.v10-dash-project-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  transition: all 0.15s;
  text-align: left;
}
.v10-dash-project-card:hover { border-color: var(--border-default); }
.v10-dash-project-name { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.v10-dash-project-count { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); }

/* ══════════════════════════════════════════
   PROJECT VIEW
   ══════════════════════════════════════════ */
.v10-project-view { max-width: 800px; min-width: 0; }
.v10-pv-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
.v10-pv-project-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--text-primary); margin-top: 6px; flex-shrink: 0; }
.v10-pv-title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.v10-pv-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.v10-pv-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-tertiary); }
.v10-pv-meta-sep { color: var(--text-ghost); }
.v10-pv-meta-item { }
.v10-pv-layers { display: flex; flex-direction: column; gap: 10px; }
.v10-layer-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  text-align: left;
  transition: all 0.15s;
}
.v10-layer-card:hover { border-color: var(--border-strong); }
.v10-layer-card-header { display: flex; align-items: center; gap: 10px; }
.v10-layer-card-icon { font-size: 16px; }
.v10-layer-card-label { font-size: 14px; font-weight: 600; color: var(--text-primary); flex: 1; }
.v10-layer-card-arrow { color: var(--text-tertiary); font-size: 14px; }
.v10-layer-card-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* ══════════════════════════════════════════
   MEMORY LAYER VIEW
   ══════════════════════════════════════════ */
.v10-memory-layer-view { max-width: 1000px; min-width: 0; }
.v10-mlv-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.v10-mlv-icon { font-size: 20px; }
.v10-mlv-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.v10-mlv-desc { font-size: 12px; color: var(--text-secondary); }
.v10-vm-search-panel {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-surface);
  padding: 12px;
  margin-bottom: 16px;
}
.v10-vm-search-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.v10-vm-search-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.v10-vm-search-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.v10-vm-search-toggle {
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.v10-vm-search-toggle:hover { border-color: var(--border-strong); color: var(--text-primary); }
.v10-vm-search-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: 8px;
}
.v10-vm-search-select {
  min-width: 108px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 12px;
}
.v10-vm-search-select:focus { outline: none; border-color: var(--border-strong); }
.v10-mlv-query-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.v10-mlv-query-input {
  flex: 1;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  color: var(--text-primary);
}
.v10-mlv-query-input:focus { border-color: var(--border-strong); }
.v10-cg-query-view { max-width: 1180px; }
.v10-memory-explorer-page .v10-cg-query-view {
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.v10-cg-query-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 16px;
}
.v10-cg-query-textarea {
  min-height: 156px;
  resize: vertical;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  color: var(--text-primary);
}
.v10-cg-query-textarea:focus { border-color: var(--border-strong); outline: none; }
.v10-cg-query-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v10-cg-query-catalog {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.v10-mlv-run-btn {
  padding: 8px 16px;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.v10-mlv-run-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.v10-mlv-save-btn {
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.35);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-info);
  transition: all 0.15s;
}
.v10-mlv-save-btn:hover {
  border-color: rgba(56, 189, 248, 0.65);
  color: var(--text-link);
}
.v10-cg-query-save-panel {
  display: grid;
  grid-template-columns: minmax(160px, 0.6fr) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  margin: -4px 0 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-panel);
}
.v10-cg-query-save-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.v10-cg-query-save-field span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.v10-cg-query-save-field input {
  height: 34px;
  font-family: var(--font-sans);
}
.v10-cg-query-save-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.v10-mlv-status { font-size: 12px; color: var(--text-tertiary); padding: 8px 0; }
.v10-mlv-empty { padding: 32px 0; text-align: center; }
.v10-mlv-empty p { font-size: 12px; color: var(--text-tertiary); }
.v10-mlv-table-wrap { overflow-x: auto; border: 1px solid var(--border-default); border-radius: 8px; }
.v10-cg-query-results {
  flex: 1 1 auto;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.v10-cg-query-results .v10-mlv-empty {
  flex: 1 1 auto;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v10-cg-query-results .v10-mlv-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.v10-mlv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.v10-mlv-table thead { background: var(--bg-elevated); }
.v10-mlv-table th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-default);
}
.v10-mlv-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v10-mlv-table tr:hover td { background: var(--bg-hover); }
@media (max-width: 900px) {
  .v10-vm-search-header { flex-direction: column; align-items: stretch; }
  .v10-vm-search-controls,
  .v10-mlv-query-bar,
  .v10-cg-query-editor { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  .v10-cg-query-actions { flex-direction: row; }
  .v10-cg-query-save-panel { grid-template-columns: 1fr; }
  .v10-cg-query-save-actions { justify-content: flex-end; }
}

/* ── Assertion List (WM → SWM) ── */
.v10-assertion-list { margin-bottom: 16px; border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden; }
.v10-assertion-list-loading { font-size: 12px; color: var(--text-tertiary); padding: 8px 0; }
.v10-assertion-list-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--bg-elevated); border-bottom: 1px solid var(--border-default); }
.v10-assertion-list-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.v10-btn-promote-all {
  padding: 5px 14px; border-radius: 6px; border: none;
  /* Fallback corrected (PR8 round-4): was #7c6ef0 (purple) — `--layer-shared`
     is amber. The fallback only kicks in if the var is undefined, which
     shouldn't happen, but the wrong color leaks a brand inconsistency
     in any token-stripped render. */
  background: var(--layer-shared, #f59e0b); color: var(--text-on-accent);
  font-size: 11px; font-weight: 600; cursor: pointer; transition: opacity .15s;
}
.v10-btn-promote-all:hover { opacity: .85; }
.v10-btn-promote-all:disabled { opacity: .5; cursor: not-allowed; }
.v10-assertion-items { max-height: 220px; overflow-y: auto; }
.v10-assertion-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--border-subtle, rgba(128,128,128,.08));
}
.v10-assertion-item:last-child { border-bottom: none; }
.v10-assertion-item-info { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.v10-assertion-item-name {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v10-assertion-item-count { font-size: 10px; color: var(--text-tertiary); flex-shrink: 0; }
.v10-btn-promote {
  padding: 3px 10px; border-radius: 5px; background: transparent;
  /* Fallback corrected (PR8 round-4): purple → amber, see promote-all. */
  border: 1px solid var(--layer-shared, #f59e0b); color: var(--text-warning);
  font-size: 11px; font-weight: 500; cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.v10-btn-promote:hover { background: var(--layer-shared, #f59e0b); color: var(--text-on-accent); }
.v10-btn-promote:disabled { opacity: .5; cursor: not-allowed; }
.v10-promote-result { padding: 8px 12px; font-size: 12px; }
.v10-promote-result.success { color: var(--text-success); background: rgba(34,197,94,.06); }
.v10-promote-result.error { color: var(--text-danger); background: rgba(239,68,68,.06); }

/* ── Publish Panel (SWM → VM) ── */
.v10-publish-panel {
  margin-bottom: 16px; border: 1px solid var(--border-default); border-radius: 8px; overflow: hidden;
}
.v10-publish-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--bg-elevated); border-bottom: 1px solid var(--border-default);
}
.v10-publish-panel-header-actions { display: flex; align-items: center; gap: 8px; }
.v10-publish-panel-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.v10-publish-panel-refresh {
  background: none; border: none; color: var(--text-tertiary); font-size: 14px; cursor: pointer;
  padding: 2px 6px; border-radius: 4px;
}
.v10-publish-panel-refresh:hover { color: var(--text-primary); background: var(--bg-hover); }
.v10-publish-panel-empty { padding: 16px 12px; font-size: 12px; color: var(--text-tertiary); text-align: center; }
.v10-publish-select-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border-subtle, rgba(128,128,128,.08));
  background: var(--bg-primary);
}
.v10-publish-select-all {
  display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); cursor: pointer;
}
.v10-publish-select-all input { cursor: pointer; }
.v10-publish-entity-check {
  display: flex; align-items: center; padding-right: 8px; cursor: pointer; flex-shrink: 0;
}
.v10-publish-entity-check input { cursor: pointer; }
.v10-assertion-item.selected { background: rgba(245,158,11,.04); }
.v10-btn-publish {
  padding: 5px 14px; border-radius: 6px; border: none;
  /* Fallback corrected (PR8 round-4): was #f59e0b (amber) — `--layer-verified`
     is green. Same brand-leak concern as promote-all. */
  background: var(--layer-verified, #22c55e); color: var(--text-on-accent);
  font-size: 11px; font-weight: 600; cursor: pointer; transition: opacity .15s; white-space: nowrap;
}
.v10-btn-publish:hover { opacity: .85; }
.v10-btn-publish:disabled { opacity: .5; cursor: not-allowed; }
.v10-publish-result-card {
  margin: 0 12px 12px; padding: 12px; border-radius: 6px; font-size: 12px;
}
.v10-publish-result-card:first-of-type { margin-top: 12px; }
.v10-publish-result-card.success { background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.2); }
.v10-publish-result-card.error { background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.2); color: var(--text-danger); }
.v10-publish-result-title { font-weight: 600; color: var(--text-success); margin-bottom: 8px; }
.v10-publish-result-details { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.v10-publish-result-label { font-weight: 600; color: var(--text-primary); margin-right: 4px; }
.v10-publish-result-tx { font-family: var(--font-mono); font-size: 11px; }
.v10-publish-result-block { color: var(--text-tertiary); }

/* ══════════════════════════════════════════
   SHARED COMPONENT STYLES
   ══════════════════════════════════════════ */

/* Tooltip */
.tt{position:fixed;transform:translate(-50%,-100%) translateY(-8px);padding:8px 12px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:8px;color:var(--text-secondary);font-size:11px;font-weight:400;text-transform:none;letter-spacing:normal;line-height:1.5;pointer-events:none;z-index:99999;box-shadow:0 4px 16px rgba(0,0,0,.4);white-space:normal;word-wrap:break-word}
.tt.tt-below{transform:translate(-50%,0) translateY(8px)}
.tt::after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:var(--bg-elevated);border-right:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong)}
.tt.tt-below::after{bottom:auto;top:-5px;border-right:none;border-bottom:none;border-left:1px solid var(--border-strong);border-top:1px solid var(--border-strong)}

p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* Unified button styles */
.dkg-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;border:1px solid rgba(34,197,94,.3);background:var(--green-dim);color:var(--accent-green);cursor:pointer;transition:filter .15s;font-family:inherit;min-height:36px}
.dkg-btn:hover{filter:brightness(1.2)}
.dkg-btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.dkg-btn-secondary{background:var(--bg-surface);border:1px solid var(--border-default);color:var(--text-secondary)}
.dkg-btn-solid{background:var(--accent-green);border:none;color:var(--bg-root);font-weight:700}
.dkg-btn-solid:hover{filter:brightness(1.1)}

/* Cards */
.card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:12px;overflow:hidden;transition:border-color .15s}
.card-header{padding:14px 18px;border-bottom:1px solid var(--border-default);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:12px;font-weight:700;color:var(--text-primary);letter-spacing:.04em;text-transform:uppercase}

/* ── Observability page shared components ───────────────────────────────── */

/* Page layout */
.page-section { padding: 20px 24px; max-width: 1400px; }
.page-title { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }

/* Tab bar (legacy v9-style, used by Observability page) */
.tab-group {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0;
}
.tab-item {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--text-tertiary);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  outline: none;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.tab-item:hover { color: var(--text-secondary); }
.tab-item:focus { outline: none; }
.tab-item.active { color: var(--text-primary); border-bottom-color: var(--accent-blue); }

/* Form inputs and selects */
.input {
  padding: 6px 10px;
  font-size: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s;
}
.input:focus { border-color: var(--accent-blue); }
.input.mono { font-family: var(--font-mono); }
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  cursor: pointer;
}

/* Filter bar */
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }

/* Data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.data-table th {
  padding: 8px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--bg-panel);
}
.data-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  white-space: nowrap;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.badge-success { background: rgba(34,197,94,.12); color: #22c55e; }
.badge-error   { background: rgba(239,68,68,.12);  color: #ef4444; }
.badge-warn    { background: rgba(245,158,11,.12); color: #f59e0b; }
.badge-info    { background: rgba(59,130,246,.12); color: #3b82f6; }

/* Empty states */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
}
.empty-state--compact { padding: 28px 16px; }
.empty-state--rich    { padding: 40px 24px; }
.empty-state-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.empty-state-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.empty-state-desc  { font-size: 12px; color: var(--text-secondary); max-width: 340px; line-height: 1.6; }

/* Phase bar (inline progress bars in the operations table) */
.phase-bar-wrap { display: flex; gap: 1px; border-radius: 3px; overflow: hidden; height: 6px; min-width: 80px; background: var(--bg-elevated); }
.phase-bar-seg  { height: 100%; min-width: 2px; }

/* Tx link icon */
.tx-link-icon { color: var(--text-tertiary); opacity: 0.6; transition: opacity 0.15s; }
.tx-link-icon:hover { opacity: 1; color: var(--accent-blue); }

/* Stat cards */
.stat-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:12px;padding:18px 20px;flex:1;min-width:0;position:relative;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.stat-card:hover{border-color:var(--border-strong);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.stat-card .accent{position:absolute;top:0;left:0;right:0;height:2px}
.stat-label{font-size:12px;color:var(--text-secondary);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.stat-value{font-size:28px;font-weight:700;color:var(--text-primary);line-height:1}
.stat-sub{font-size:13px;color:var(--text-secondary);margin-top:6px}

/* Badges */
.agent-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:600;white-space:nowrap;font-family:var(--font-mono)}
.agent-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.verify-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:6px;font-size:10px;font-weight:600;font-family:var(--font-mono)}
.verify-badge.verified{background:rgba(34,197,94,.1);color:var(--accent-green);border:1px solid rgba(34,197,94,.2)}
.verify-badge.pending{background:var(--amber-dim);color:var(--accent-amber);border:1px solid rgba(251,191,36,.2)}

/* Mode tabs */
.mode-tabs{display:flex;gap:4px;background:var(--bg-surface);border-radius:8px;padding:3px;border:1px solid var(--border-default)}
.mode-tab{padding:8px 14px;border-radius:6px;border:none;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:transparent;color:var(--text-secondary);min-height:36px}
.mode-tab.active{background:var(--green-dim);color:var(--accent-green)}

/* Chat (legacy) */
.chat-area{flex:1;overflow:auto;padding:16px 20px}
.chat-msg{margin-bottom:14px;display:flex;flex-direction:column}
.chat-msg.user{align-items:flex-end}
.chat-msg.assistant{align-items:flex-start}
.chat-bubble{padding:10px 14px;border-radius:10px;max-width:80%;font-size:12px;line-height:1.55;word-break:break-word;overflow-wrap:anywhere}
.chat-bubble.user{background:var(--green-dim);color:var(--accent-green);border:1px solid rgba(34,197,94,.13)}
.chat-bubble.assistant{background:rgba(255,255,255,.04);color:var(--text-primary);border:1px solid var(--border-default)}
.chat-input-row{padding:16px 20px;border-top:1px solid var(--border-default);display:flex;gap:12px;align-items:center}
.chat-input{flex:1;padding:12px 16px;border-radius:10px;border:1px solid var(--border-default);background:var(--bg-root);color:var(--text-primary);font-size:13px;outline:none;font-family:inherit;min-height:44px;box-sizing:border-box}
.chat-input:focus{border-color:rgba(34,197,94,.4)}

/* ══════════════════════════════════════════
   MODAL STYLES (V10)
   ══════════════════════════════════════════ */
.v10-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: fadeSlideIn 0.15s ease;
}
.v10-modal-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.v10-modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.v10-modal-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.v10-modal-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.v10-modal-body {
  padding: 20px 24px;
}
.v10-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.v10-modal-btn {
  height: 34px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  background: none;
}
.v10-modal-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.v10-modal-btn.primary {
  background: var(--text-primary);
  color: var(--bg-root);
  border-color: var(--text-primary);
}
.v10-modal-btn.primary:hover { opacity: 0.85; }
.v10-modal-btn.primary:disabled { opacity: 0.4; cursor: not-allowed; }

.v10-modal-error {
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--text-danger);
  line-height: 1.5;
}

.v10-modal-tip {
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.v10-modal-tip-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

/* ── File Preview Modal ── */
.v10-file-preview-modal { width: 720px; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; }
.v10-file-preview-modal .v10-modal-header {
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.v10-modal-close {
  background: none; border: none; color: var(--text-tertiary); font-size: 22px; cursor: pointer;
  padding: 0 4px; line-height: 1; border-radius: 4px;
}
.v10-modal-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.v10-file-preview-loading { padding: 32px 24px; text-align: center; font-size: 12px; color: var(--text-tertiary); }
.v10-file-preview-error {
  margin: 16px 24px; padding: 14px; border-radius: 8px;
  background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--text-danger); font-size: 12px;
}
.v10-file-preview-meta {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.v10-file-preview-meta-item {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  background: var(--bg-surface, var(--bg-secondary)); color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.v10-file-preview-content { flex: 1; overflow: auto; min-height: 200px; }
.v10-file-preview-iframe { width: 100%; height: 60vh; border: none; display: block; }
.v10-file-preview-image { max-width: 100%; max-height: 60vh; display: block; margin: 16px auto; }
.v10-file-preview-text {
  margin: 0; padding: 16px 24px; font-size: 12px; line-height: 1.6;
  font-family: var(--font-mono); color: var(--text-primary);
  white-space: pre-wrap; word-break: break-word; overflow-y: auto; max-height: 60vh;
}
.v10-file-preview-binary { padding: 32px 24px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.v10-file-preview-footer {
  display: flex; gap: 12px; padding: 12px 24px; border-top: 1px solid var(--border-subtle); flex-shrink: 0;
}
.v10-file-preview-download {
  font-size: 11px; color: var(--accent); text-decoration: none; font-weight: 500;
}
.v10-file-preview-download:hover { text-decoration: underline; }

/* Clickable assertion name */
.v10-assertion-item-name.clickable {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}
.v10-assertion-item-name.clickable:hover { text-decoration: underline; }

/* Form elements */
.v10-form-group { margin-bottom: 16px; }
.v10-form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.v10-form-input {
  width: 100%;
  height: 36px;
  border-radius: 6px;
  font-size: 12px;
  padding: 0 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--font-sans);
  box-sizing: border-box;
}
.v10-form-input:focus { border-color: var(--border-strong); }
.v10-form-textarea {
  width: 100%;
  min-height: 60px;
  border-radius: 6px;
  font-size: 12px;
  padding: 8px 12px;
  resize: vertical;
  font-family: var(--font-sans);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  box-sizing: border-box;
}
.v10-form-textarea:focus { border-color: var(--border-strong); }
.v10-form-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 16px 0;
}
.v10-form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v10-form-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.v10-form-radio input[type="radio"] {
  accent-color: var(--text-primary);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.v10-form-radio-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 22px;
  margin-top: -4px;
}
.v10-form-select {
  width: 100%;
  height: 36px;
  border-radius: 6px;
  font-size: 12px;
  padding: 0 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--font-sans);
  cursor: pointer;
  appearance: auto;
}
.v10-form-select:focus { border-color: var(--border-strong); }
.v10-form-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  user-select: none;
  margin-top: 16px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
}
.v10-form-adv-chevron {
  font-size: 10px;
  color: var(--text-tertiary);
  transition: transform 0.15s;
  display: inline-block;
}
.v10-form-adv-chevron.open { transform: rotate(90deg); }
.v10-form-advanced-body {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border-radius: 6px;
}
.v10-layer-preview {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.8;
}
.v10-layer-preview-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

/* Light theme modal overrides */
body.light .v10-modal-box {
  background: #ffffff;
  border-color: var(--border-default);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
body.light .v10-modal-btn.primary { background: #1a1a1a; color: #ffffff; border-color: #1a1a1a; }

/* ═══════════════════════════════════════════
   IMPORT / INGESTION UI
   ═══════════════════════════════════════════ */
.v10-import-dropzone {
  border: 2px dashed var(--border-default);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 16px;
}
.v10-import-dropzone:hover,
.v10-import-dropzone.drag-over {
  border-color: var(--accent-blue, var(--border-strong));
  background: var(--bg-hover);
}
.v10-import-dropzone-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.v10-import-dropzone-hint {
  font-size: 11px;
  color: var(--text-tertiary);
}
.v10-import-file-list {
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
  max-height: 200px;
  overflow-y: auto;
}
.v10-import-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.v10-import-file-item:last-child { border-bottom: none; }
.v10-import-file-icon {
  font-size: 14px;
  color: var(--text-tertiary);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.v10-import-file-name { flex: 1; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v10-import-file-size { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); flex-shrink: 0; }
.v10-import-file-remove {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.v10-import-file-remove:hover { color: var(--accent-red); }
.v10-import-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 0;
}
.v10-import-option input[type="checkbox"] {
  accent-color: var(--text-primary);
  width: 14px;
  height: 14px;
}
.v10-import-progress {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border-radius: 6px;
}
.v10-import-progress-bar {
  height: 4px;
  background: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.v10-import-progress-fill {
  height: 100%;
  background: var(--accent-blue, #3b82f6);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.v10-import-progress-text {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 6px;
}
.v10-import-result {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
}
.v10-import-result.success {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: var(--text-success);
}
.v10-import-result.error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--text-danger);
}

/* Light overrides for import UI */
body.light .v10-import-dropzone { border-color: #d4d4d4; }
body.light .v10-import-dropzone:hover,
body.light .v10-import-dropzone.drag-over { border-color: #b0b0b0; background: #e8e8e8; }

/* ══════════════════════════════════════════
   GRAPH VISUALIZATION (MemoryLayerView + ProjectView)
   ══════════════════════════════════════════ */

/* ── View toggle (table / graph) ── */
.v10-mlv-view-toggle {
  display: flex;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  overflow: hidden;
  margin-left: auto;
  flex-shrink: 0;
}
.v10-mlv-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-tertiary);
  background: var(--bg-surface);
  transition: all 0.15s;
  border-right: 1px solid var(--border-default);
}
.v10-mlv-toggle-btn:last-child { border-right: none; }
.v10-mlv-toggle-btn:hover { color: var(--text-secondary); background: var(--bg-hover); }
.v10-mlv-toggle-btn.active {
  color: var(--text-primary);
  background: var(--bg-active);
}

/* ── Clear / Reset button ── */
.v10-mlv-clear-btn {
  padding: 8px 12px;
  border-radius: 6px;
  background: none;
  border: 1px solid var(--border-default);
  font-size: 11px;
  color: var(--text-tertiary);
  transition: all 0.15s;
}
.v10-mlv-clear-btn:hover { border-color: var(--border-strong); color: var(--text-secondary); }

/* ── Result count badge ── */
.v10-mlv-result-count {
  padding: 6px 12px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

/* ── Graph container (MemoryLayerView) ── */
.v10-mlv-graph-container {
  position: relative;
  height: 500px;
  min-height: 400px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface);
}
.v10-mlv-graph-info {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  pointer-events: none;
}
.v10-mlv-graph-info-custom {
  padding: 1px 6px;
  background: var(--accent-amber);
  color: var(--bg-root);
  font-weight: 600;
  border-radius: 3px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.v10-mlv-graph-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* ── Node detail panel (overlay inside graph) ── */
.v10-mlv-node-panel {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 280px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 20;
  font-size: 12px;
  color: var(--text-primary);
}
.v10-mlv-node-panel h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px 0;
  word-break: break-word;
}
.v10-mlv-node-panel h4 {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin: 12px 0 4px;
}

/* ── Project overview graph (ProjectView) ── */
.v10-pv-overview-graph {
  margin-top: 24px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-surface);
}
.v10-pv-overview-graph-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.v10-pv-overview-graph-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.v10-pv-overview-graph-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
}
.v10-pv-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.v10-pv-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.v10-pv-overview-graph-canvas {
  height: 280px;
  cursor: pointer;
  transition: background 0.15s;
}
.v10-pv-overview-graph-canvas:hover {
  background: var(--bg-hover);
}
.v10-pv-overview-graph-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-tertiary);
  font-size: 12px;
}
.v10-pv-overview-graph-empty {
  margin-top: 24px;
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--border-default);
  border-radius: 10px;
}
.v10-pv-overview-graph-empty p {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Layer card triple count */
.v10-layer-card-count {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  margin-left: auto;
  margin-right: 4px;
}

/* ══════════════════════════════════════════
   RESPONSIVE: Graph containers
   ══════════════════════════════════════════ */
@media (max-height: 700px) {
  .v10-mlv-graph-container { height: 350px; min-height: 300px; }
  .v10-pv-overview-graph-canvas { height: 200px; }
}
@media (max-width: 700px) {
  .v10-mlv-node-panel { width: 200px; max-height: 200px; }
  .v10-pv-overview-graph-legend { flex-direction: column; gap: 4px; }
}

/* ══════════════════════════════════════════
   MEMORY EXPLORER (entity-centric project view)
   ══════════════════════════════════════════ */

.v10-memory-explorer {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  max-width: none; margin: -24px -28px; overflow: hidden;
}
.v10-memory-explorer-page {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.v10-memory-explorer-page[data-view="overview"],
.v10-memory-explorer-page[data-view="query"],
.v10-memory-explorer-page[data-view="entity"],
.v10-memory-explorer-page[data-view="subgraph"] {
  overflow: auto;
}
.v10-memory-explorer-page > .v10-layer-detail,
.v10-memory-explorer-page > .v10-ka-detail,
.v10-memory-explorer-page > .v10-sgov,
.v10-memory-explorer-page > .v10-memory-layer-view {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.v10-memory-explorer-page > .v10-sgov-state {
  flex: 1 1 auto;
  min-height: 220px;
  margin: 0 12px 12px;
}
.v10-memory-explorer-page[data-view="entity"] > .v10-ka-detail,
.v10-memory-explorer-page[data-view="subgraph"] > .v10-layer-detail {
  min-height: 420px;
}

/* ── Trust Summary ── */
.v10-trust-summary { padding: 8px 16px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.v10-trust-summary-bar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--bg-elevated); margin-bottom: 6px; }
.v10-trust-bar-seg { min-width: 4px; transition: width 0.3s ease; }
.v10-trust-bar-seg.trust-working { background: #64748b; }
.v10-trust-bar-seg.trust-shared { background: #f59e0b; }
.v10-trust-bar-seg.trust-verified { background: #22c55e; }
.v10-trust-summary-labels { display: flex; gap: 14px; font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); }
.v10-trust-summary-item { display: flex; align-items: center; gap: 4px; }
.v10-trust-summary-item .v10-trust-summary-dot { width: 6px; height: 6px; border-radius: 50%; }
.v10-trust-summary-item.trust-working .v10-trust-summary-dot { background: #64748b; }
.v10-trust-summary-item.trust-shared .v10-trust-summary-dot { background: #f59e0b; }
.v10-trust-summary-item.trust-verified .v10-trust-summary-dot { background: #22c55e; }

/* ── Trust Badges ── */
.v10-trust-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; }
.v10-trust-badge-icon { font-size: 10px; }
.v10-trust-badge.trust-verified { background: rgba(34, 197, 94, 0.12); color: var(--text-success); }
.v10-trust-badge.trust-shared { background: rgba(245, 158, 11, 0.12); color: var(--text-warning); }
.v10-trust-badge.trust-working { background: rgba(100, 116, 139, 0.12); color: var(--text-tertiary); }
.v10-trust-ring { font-size: 14px; line-height: 1; }
.v10-trust-ring.trust-verified { color: #22c55e; }
.v10-trust-ring.trust-shared { color: #f59e0b; }
.v10-trust-ring.trust-working { color: #64748b; }

/* ── Loading / Error / Empty ── */
.v10-me-loading { display: flex; align-items: center; justify-content: center; flex: 1; }
.v10-me-loading-text { font-size: 12px; color: var(--text-tertiary); }

/* ── Sub-graph Bar ── */
.v10-subgraph-bar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--surface-1, rgba(255,255,255,0.02));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: 10px;
}
.v10-subgraph-bar-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary, #94a3b8);
  padding-right: 4px;
}
.v10-subgraph-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  background: var(--surface-2, rgba(255,255,255,0.04));
  color: var(--text-secondary, #cbd5e1);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.v10-subgraph-chip:hover {
  background: var(--surface-3, rgba(255,255,255,0.07));
  transform: translateY(-1px);
}
.v10-subgraph-chip.active {
  border-color: var(--sg-color, #a855f7);
  background: color-mix(in srgb, var(--sg-color, #a855f7) 18%, transparent);
  color: var(--text-primary, #f8fafc);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sg-color, #a855f7) 40%, transparent) inset;
}
.v10-subgraph-chip-icon { font-size: 13px; line-height: 1; }
.v10-subgraph-chip-label { font-weight: 600; }
.v10-subgraph-chip-count {
  font-size: 11px;
  opacity: 0.75;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}

/* ── Verified Memory Hero Banner ── */
.v10-vm-hero {
  --v10-vm-accent: #86efac;
  --v10-vm-accent-strong: var(--layer-verified);
  --v10-vm-border: color-mix(in srgb, var(--v10-vm-accent-strong) 28%, var(--border-default));
  --v10-vm-surface: color-mix(in srgb, var(--v10-vm-accent-strong) 8%, var(--bg-surface));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  margin-bottom: 10px;
  /* Banner sits above the scrollable EntityList inside a fixed-height
     (70vh) flex-column. Without flex-shrink:0 it competes with the list
     for vertical space and squeezes the list below the visible region,
     which makes scrolling the list impossible. */
  flex-shrink: 0;
  background: color-mix(in srgb, var(--v10-vm-accent-strong) 5%, var(--bg-panel));
  border: 1px solid var(--v10-vm-border);
  border-radius: 10px;
  box-shadow: none;
}
.v10-vm-hero-title {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}
.v10-vm-hero-heading {
  display: flex;
  flex: 1 1 220px;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.v10-vm-hero-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(34,197,94,0.16);
  color: var(--v10-vm-accent);
  border: 1px solid var(--v10-vm-border);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v10-vm-hero-headline {
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-primary, #f8fafc);
  font-weight: 650;
}
.v10-vm-hero-context {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-tertiary, #94a3b8);
  overflow-wrap: anywhere;
}
.v10-vm-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.v10-vm-hero-stat {
  padding: 12px 14px;
  background: var(--v10-vm-surface);
  border: 1px solid var(--v10-vm-border);
  border-radius: 8px;
}
.v10-vm-hero-stat-val {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  font-family: var(--font-mono, ui-monospace);
  line-height: 1.1;
}
.v10-vm-hero-stat-lbl {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-tertiary, #94a3b8);
  margin-top: 6px;
}
.v10-vm-hero-stats .v10-stat-strip-cell {
  background: var(--v10-vm-surface);
  border-color: var(--v10-vm-border);
}
.v10-vm-hero-stats .v10-stat-strip-value {
  font-size: 24px;
}
.v10-vm-hero-stats .v10-stat-strip-label {
  font-size: 11px;
  letter-spacing: 0.07em;
}
.v10-vm-hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v10-vm-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #cbd5e1);
  background: var(--v10-vm-surface);
  border: 1px solid var(--v10-vm-border);
  border-radius: 999px;
}
.v10-vm-hero-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  box-shadow: 0 0 6px currentColor;
}
body.light .v10-vm-hero {
  --v10-vm-accent: #166534;
  --v10-vm-accent-strong: #16a34a;
}
.v10-layer-expand-body.entities-tab > .v10-vm-hero {
  margin: 16px 16px 10px;
}
.v10-vm-hero-empty {
  gap: 16px;
}
.v10-empty-state.v10-vm-empty-state {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--v10-vm-surface);
  border: 1px solid var(--v10-vm-border);
  border-radius: 8px;
}
.v10-vm-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--v10-vm-accent);
  background: rgba(34,197,94,0.14);
  border: 1px solid var(--v10-vm-border);
  font-size: 15px;
  line-height: 1;
}
.v10-vm-empty-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.v10-vm-empty-title {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--text-primary, #f8fafc);
}
.v10-vm-empty-text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary, #cbd5e1);
}

/* ── VM graph legend (floating overlay) ──
   Pinned to the top-right of the Verified Memory graph, this panel is the
   in-graph key for the two synthetic node glyphs (anchor ◉, agent identity
   ◈) we inject to make provenance legible. It's also a lightweight ledger:
   it reports the total anchor count, distinct signers, and latest publish
   time without needing a detail pane. Kept small and lightly translucent so
   it never fights the graph behind it. */
.v10-vm-legend {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  min-width: 180px;
  max-width: 240px;
  background: color-mix(in srgb, var(--surface-0, #0b1020) 85%, transparent);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 10px;
  box-shadow: 0 8px 24px -12px rgba(34,197,94,0.3),
              0 0 0 1px rgba(34,197,94,0.12) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 11px;
  color: var(--text-secondary, #cbd5e1);
  pointer-events: none;
}
.v10-vm-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.v10-vm-legend-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4ade80;
  justify-content: space-between;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(34,197,94,0.18);
}
.v10-vm-legend-count {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #f1f5f9);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.3);
  letter-spacing: 0;
  text-transform: none;
  font-size: 10px;
}
.v10-vm-legend-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: #0b1020;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 10px -2px currentColor;
}
.v10-vm-legend-label {
  color: var(--text-primary, #f1f5f9);
  font-size: 11px;
}
.v10-vm-legend-foot {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.06);
  font-size: 10px;
  color: var(--text-tertiary, #94a3b8);
  font-variant-numeric: tabular-nums;
}

/* ── SWM attribution legend (floating overlay) ──
   Visual analogue of .v10-vm-legend but for the Shared Working Memory
   layer. Lists each promoting agent + colour slot + how many entities
   they've proposed, plus a conflict pill when multiple agents touch the
   same entity. Amber accent instead of VM's green to reinforce the
   layer-palette convention (SWM = amber across the UI). */
.v10-swm-legend {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  min-width: 200px;
  max-width: 260px;
  background: color-mix(in srgb, var(--surface-0, #0b1020) 85%, transparent);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 10px;
  box-shadow: 0 8px 24px -12px rgba(245,158,11,0.3),
              0 0 0 1px rgba(245,158,11,0.12) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 11px;
  color: var(--text-secondary, #cbd5e1);
  pointer-events: none;
}
.v10-swm-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.v10-swm-legend-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fbbf24;
  justify-content: space-between;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(245,158,11,0.18);
}
.v10-swm-legend-count {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #f1f5f9);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  letter-spacing: 0;
  text-transform: none;
  font-size: 10px;
}
.v10-swm-legend-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  color: #0b1020;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 8px -2px currentColor;
}
.v10-swm-legend-label {
  color: var(--text-primary, #f1f5f9);
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v10-swm-legend-metric {
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary, #94a3b8);
  font-size: 10px;
}
.v10-swm-legend-conflict {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(245,158,11,0.22);
  color: #fbbf24;
}
.v10-swm-legend-conflict .v10-swm-legend-label { color: #fbbf24; }

/* ── GenUI Panel / Loading / Error ── */
.v10-genui-panel { display: flex; flex-direction: column; gap: 8px; }
.v10-genui-loading {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-tertiary, #94a3b8);
  font-style: italic;
}
.v10-genui-error {
  padding: 10px 12px;
  font-size: 12px;
  color: #f87171;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 8px;
}
/* When the error is specifically "LLM not configured", we upgrade to a
   call-to-action card: amber tone (info, not error), a head row, and a
   button jumping to the Settings tab. */
.v10-genui-error-cta {
  color: var(--text-primary);
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.3);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v10-genui-error-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.v10-genui-error-icon {
  font-size: 20px;
  line-height: 1;
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 1px;
}
.v10-genui-error-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  margin-bottom: 4px;
}
.v10-genui-error-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.55;
}
.v10-genui-error-cta-btn {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(245,158,11,0.16);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.4);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, border-color 0.15s;
}
.v10-genui-error-cta-btn:hover {
  background: rgba(245,158,11,0.24);
  border-color: rgba(245,158,11,0.6);
}
.v10-me-error { padding: 12px 16px; font-size: 12px; color: var(--accent-red); background: rgba(239,68,68,0.06); }

/* ── Graph View (full graph tab) ── */
.v10-gv-container { flex: 1; position: relative; min-height: 0; background: var(--bg-surface); }
.v10-me-graph-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-tertiary); font-size: 12px; }
.v10-me-graph-legend {
  position: absolute; bottom: 10px; left: 10px; z-index: 10;
  display: flex; gap: 10px; padding: 4px 10px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  border-radius: 5px; font-size: 10px; font-family: var(--font-mono); color: var(--text-secondary);
}
body.light .v10-me-graph-legend { background: rgba(255,255,255,0.8); }
.v10-me-legend-item { display: flex; align-items: center; gap: 4px; }
.v10-me-legend-dot { width: 7px; height: 7px; border-radius: 50%; }

/* ══════════════════════════════════════════
   TIMELINE VIEW
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   DRILLDOWN PANEL (focused 2-hop graph + rich card)
   ══════════════════════════════════════════ */

.v10-dd-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.v10-dd-header { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.v10-dd-back {
  font-size: 11px; color: var(--text-tertiary); background: none; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: 4px; transition: all 0.15s;
}
.v10-dd-back:hover { color: var(--text-primary); background: var(--bg-hover); }

.v10-dd-graph { height: 260px; flex-shrink: 0; position: relative; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
.v10-dd-graph-info {
  position: absolute; bottom: 8px; left: 10px; font-size: 10px; font-family: var(--font-mono);
  color: var(--text-tertiary); pointer-events: none;
}

.v10-dd-card { flex: 1; overflow-y: auto; padding: 0; }
.v10-dd-card-header { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.v10-dd-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.v10-dd-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0; word-break: break-word; }
.v10-dd-type-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.v10-dd-type { font-size: 11px; font-family: var(--font-mono); color: var(--text-tertiary); }
.v10-dd-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; padding: 0 16px 12px; border-bottom: 1px solid var(--border-subtle); margin: 0; }
.v10-dd-uri { font-size: 10px; color: var(--text-tertiary); padding: 8px 16px; word-break: break-all; border-bottom: 1px solid var(--border-subtle); }

.v10-dd-section { padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
.v10-dd-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); margin: 0 0 8px; }
.v10-dd-prop { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.v10-dd-prop-key { font-size: 10px; font-weight: 600; color: var(--text-tertiary); text-transform: capitalize; }
.v10-dd-prop-val { font-size: 12px; color: var(--text-primary); word-break: break-word; line-height: 1.4; }
.v10-dd-conn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 5px 8px; border-radius: 5px; text-align: left; font-size: 11px;
  background: none; border: none; color: inherit; cursor: pointer; transition: background 0.1s;
}
.v10-dd-conn:hover { background: var(--bg-hover); }
.v10-dd-conn-pred { color: var(--text-tertiary); text-transform: capitalize; flex-shrink: 0; }
.v10-dd-conn-arrow { color: var(--text-ghost); flex-shrink: 0; }
.v10-dd-conn-target { color: var(--text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v10-dd-conn-date { font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); margin-left: auto; flex-shrink: 0; }
.v10-dd-conn-sim { font-size: 10px; font-family: var(--font-mono); color: #6366f1; margin-left: auto; flex-shrink: 0; }
.v10-dd-source-link {
  font-size: 11px; color: #6366f1; text-decoration: none;
  padding: 4px 10px; border-radius: 5px; background: rgba(99, 102, 241, 0.08);
  display: inline-block; transition: background 0.15s;
}
.v10-dd-source-link:hover { background: rgba(99, 102, 241, 0.18); }

/* ── Responsive ── */
@media (max-width: 700px) {
  .v10-me-search { width: 120px; }
  .v10-me-search:focus { width: 160px; }
  .v10-dd-graph { height: 180px; }
}

/* ══════════════════════════════════════════
   TRUST STATUS BOX (right-side badge)
   ══════════════════════════════════════════ */

.v10-trust-status-box {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px; border-radius: 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
  border: 2px solid; background: transparent; flex-shrink: 0; margin-top: 2px;
}

/* ══════════════════════════════════════════
   PROJECT HOME (header card + stats)
   ══════════════════════════════════════════ */

.v10-ph { padding: 12px 16px 8px; border-bottom: 1px solid var(--border-subtle); }
.v10-ph-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 10px; }

.v10-ph-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.v10-ph-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 56px; }
.v10-ph-stat-val { font-size: 18px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }
.v10-ph-stat-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-tertiary); font-weight: 600; }

.v10-ph-agents { display: flex; flex-direction: column; gap: 6px; }
.v10-ph-agents-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-tertiary); }
.v10-ph-agents-list { display: flex; flex-wrap: wrap; gap: 6px; }
.v10-ph-agent-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;
  background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary);
}
.v10-ph-agent-tool { font-size: 9px; font-weight: 500; color: var(--text-tertiary); background: var(--bg-elevated); padding: 0 5px; border-radius: 3px; }

.v10-ph-join-requests { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.v10-ph-join-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; border-radius: 8px; font-size: 9px; font-weight: 700;
  background: #f59e0b; color: #000; margin-left: 6px; padding: 0 4px;
}
.v10-ph-join-list { display: flex; flex-direction: column; gap: 6px; }
.v10-ph-join-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-radius: 8px; background: var(--bg-surface);
  border: 1px solid #f59e0b44;
}
.v10-ph-join-info { display: flex; flex-direction: column; gap: 1px; }
.v10-ph-join-name { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.v10-ph-join-addr { font-size: 9px; font-family: var(--font-mono); color: var(--text-tertiary); }
.v10-ph-join-actions { display: flex; gap: 4px; }
.v10-ph-join-btn {
  border: none; border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer;
  padding: 4px 10px; transition: background 0.15s;
}
.v10-ph-join-btn.approve { background: #22c55e22; color: var(--text-success); border: 1px solid #22c55e44; }
.v10-ph-join-btn.approve:hover { background: #22c55e44; }
.v10-ph-join-btn.reject { background: #ef444422; color: var(--text-danger); border: 1px solid #ef444444; padding: 4px 8px; }
.v10-ph-join-btn.reject:hover { background: #ef444444; }
.v10-ph-join-btn:disabled { opacity: 0.5; cursor: default; }

/* Lazy route spinner */
.lazy-spinner{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-tertiary);font-size:13px}

/* ══════════════════════════════════════════
   PROJECT OVERVIEW REDESIGN — Layer-centric UI
   ══════════════════════════════════════════ */

/* ── Layer Switcher Bar ── */
.v10-layer-switcher {
  flex-shrink: 0; display: flex; align-items: center;
  border-bottom: 1px solid var(--border-subtle); background: var(--bg-panel);
  padding: 0 4px; height: 36px; min-height: 36px; gap: 0;
  flex-wrap: nowrap;
}
.v10-layer-switch-btn {
  height: 100%; padding: 0 14px; display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--text-tertiary);
  border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; transition: all 0.15s; white-space: nowrap;
  font-family: var(--font-sans);
}
.v10-layer-switch-label { display: inline; }
.v10-layer-switch-label-compact { display: none; }
.v10-layer-switch-btn:hover { color: var(--text-secondary); background: var(--bg-hover); }
.v10-layer-switch-btn.active { color: var(--text-primary); }
.v10-layer-switch-btn.active[data-layer="overview"] { border-bottom-color: var(--text-secondary); }
.v10-layer-switch-btn.active[data-layer="graph-overview"] { border-bottom-color: #38bdf8; }
.v10-layer-switch-btn.active[data-layer="query"] { border-bottom-color: #38bdf8; }
.v10-layer-switch-btn.active[data-layer="wm"] { border-bottom-color: #64748b; }
.v10-layer-switch-btn.active[data-layer="swm"] { border-bottom-color: #f59e0b; }
.v10-layer-switch-btn.active[data-layer="vm"] { border-bottom-color: #22c55e; }
.v10-layer-switch-icon { font-size: 11px; }
.v10-layer-switch-separator {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: var(--border-subtle);
}
.v10-layer-switch-count {
  font-family: var(--font-mono); font-size: 9px; padding: 1px 5px;
  border-radius: 3px; background: var(--bg-elevated); color: var(--text-tertiary);
}
.v10-layer-switch-btn.active .v10-layer-switch-count { color: var(--text-tertiary); }
.v10-layer-switcher-spacer { flex: 1; min-width: 6px; }
.v10-layer-switcher-actions { display: flex; align-items: center; gap: 4px; padding-right: 4px; flex: 0 0 auto; }
.v10-layer-more {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  flex: 0 0 auto;
}
.v10-layer-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 178px;
  padding: 4px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-panel);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.v10-layer-more-item {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.v10-layer-more-item:hover,
.v10-layer-more-item.active {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.v10-layer-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.v10-layer-action-icon {
  flex: 0 0 auto;
  line-height: 1;
}
.v10-layer-action-label {
  line-height: 1;
}

/* Shared Context Graph empty/stat patterns */
.v10-empty-state {
  --v10-empty-accent: var(--border-strong);
  flex: 1 1 auto;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--v10-empty-accent) 28%, var(--border-default));
  border-radius: 8px;
  background: color-mix(in srgb, var(--v10-empty-accent) 7%, var(--bg-surface));
  color: var(--text-secondary);
  text-align: left;
}
.v10-empty-state.compact {
  min-height: 118px;
  padding: 18px;
}
.v10-empty-state.inline {
  flex: 0 0 auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  justify-content: flex-start;
  gap: 6px;
}
.v10-empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--v10-empty-accent);
  background: color-mix(in srgb, var(--v10-empty-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--v10-empty-accent) 34%, var(--border-default));
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.v10-empty-state.inline .v10-empty-state-icon {
  width: 18px;
  height: 18px;
  font-size: 10px;
  background: transparent;
}
.v10-empty-state-copy {
  display: flex;
  min-width: 0;
  max-width: 560px;
  flex-direction: column;
  gap: 5px;
}
.v10-empty-state.inline .v10-empty-state-copy { max-width: none; }
.v10-empty-state-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}
.v10-empty-state.inline .v10-empty-state-title {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
}
.v10-empty-state-desc {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.v10-empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.v10-empty-state-action {
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border-default);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.v10-empty-state-action.primary {
  border-color: color-mix(in srgb, var(--v10-empty-accent) 55%, var(--border-default));
  background: color-mix(in srgb, var(--v10-empty-accent) 18%, var(--bg-elevated));
  color: var(--text-primary);
}
.v10-empty-state-action:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
.v10-stat-strip {
  --v10-stat-accent: var(--border-strong);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  min-width: 0;
}
.v10-stat-strip-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--v10-stat-accent) 18%, var(--border-default));
  border-radius: 8px;
  background: color-mix(in srgb, var(--v10-stat-accent) 5%, var(--bg-surface));
}
.v10-stat-strip-value {
  display: block;
  order: 1;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.v10-stat-strip-label {
  display: block;
  order: 2;
  margin-top: 5px;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}
.v10-stat-strip-hint {
  display: block;
  order: 3;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}
.v10-stat-strip.compact {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--v10-stat-accent) 16%, var(--border-default));
  border-radius: 8px;
  background: var(--bg-surface);
}
.v10-stat-strip.compact .v10-stat-strip-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
}
.v10-stat-strip.compact .v10-stat-strip-cell:last-child { border-bottom: 0; }
.v10-stat-strip.compact .v10-stat-strip-value {
  order: 2;
  font-size: 13px;
}
.v10-stat-strip.compact .v10-stat-strip-label {
  order: 1;
  margin-top: 0;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Project Overview Card ── */
.v10-po { flex-shrink: 0; padding: 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-panel); }
.v10-po-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.v10-po-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-primary); flex-shrink: 0; margin-top: 4px; }
.v10-po-heading { flex: 1 1 auto; min-width: 0; }
.v10-po-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.v10-po-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; line-height: 1.5; }
.v10-po-stat-strip { margin-bottom: 12px; }
.v10-po-stats { display: flex; gap: 20px; margin-bottom: 12px; flex-wrap: wrap; }
.v10-po-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 50px; }
.v10-po-stat-val { font-size: 20px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }
.v10-po-stat-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-tertiary); font-weight: 600; }
.v10-po-participants { margin-bottom: 12px; }
.v10-po-participants-label { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
.v10-po-participants-list { display: flex; flex-wrap: wrap; gap: 6px; }
.v10-po-participant {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;
  background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary);
}
.v10-po-participant-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.v10-po-progress { margin-bottom: 0; }
.v10-po-progress-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-tertiary); margin-bottom: 4px; }
.v10-po-progress-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--bg-elevated); }
.v10-po-progress-seg { min-width: 3px; transition: width 0.3s ease; }
.v10-po-progress-seg.wm { background: #64748b; }
.v10-po-progress-seg.swm { background: #f59e0b; }
.v10-po-progress-seg.vm { background: #22c55e; }
.v10-po-progress-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 9px; font-family: var(--font-mono); color: var(--text-tertiary); }
.v10-po-legend-item { display: flex; align-items: center; gap: 4px; }
.v10-po-legend-dot { width: 6px; height: 6px; border-radius: 50%; }
.v10-po-badges {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 45%;
}
.v10-po-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.v10-po-badge.curator,
.v10-po-badge.public {
  border-color: rgba(34, 197, 94, 0.38);
  background: rgba(34, 197, 94, 0.11);
  color: var(--text-success);
}
.v10-po-badge.participant,
.v10-po-badge.curated {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.12);
  color: var(--text-warning);
}
.v10-po-badge.viewer,
.v10-po-badge.unknown {
  color: var(--text-tertiary);
}
.v10-po-pipeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 12px;
}
.v10-po-pipeline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.v10-po-section-title {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}
.v10-po-section-desc {
  max-width: 760px;
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.v10-po-primer-link {
  flex: 0 0 auto;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  min-height: 30px;
  padding: 0 12px;
}
.v10-po-primer-link:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-hover);
}
.v10-po-pipeline-track {
  display: flex;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-elevated);
}
.v10-po-pipeline-seg {
  min-width: 0;
}
.v10-po-pipeline-empty {
  width: 100%;
  background: var(--border-subtle);
}
.v10-po-pipeline-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.v10-po-pipeline-step {
  --po-layer-color: var(--border-strong);
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--po-layer-color) 28%, var(--border-default));
  border-radius: 8px;
  background: color-mix(in srgb, var(--po-layer-color) 6%, var(--bg-surface));
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
}
.v10-po-pipeline-step:hover {
  border-color: color-mix(in srgb, var(--po-layer-color) 48%, var(--border-strong));
  background: color-mix(in srgb, var(--po-layer-color) 10%, var(--bg-hover));
}
.v10-po-pipeline-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--po-layer-color) 20%, transparent);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.v10-po-pipeline-step-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.v10-po-pipeline-step-label {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.v10-po-pipeline-step-desc {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.3;
}
.v10-po-pipeline-step-count {
  flex: 0 0 auto;
  max-width: 42%;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
  text-align: right;
}

@media (max-width: 1500px) {
  .v10-layer-switch-label-full { display: none; }
  .v10-layer-switch-label-compact { display: inline; }
  .v10-layer-action-label { display: none; }
  .v10-layer-action-btn {
    min-width: 30px;
    padding-left: 9px;
    padding-right: 9px;
  }
}

@media (max-width: 1320px) {
  .v10-layer-switch-label-full { display: none; }
  .v10-layer-switch-label-compact { display: inline; }
}

@media (max-width: 1180px) {
  .v10-layer-switch-btn { padding: 0 9px; gap: 5px; font-size: 11px; }
  .v10-layer-switch-count { display: none; }
  .v10-layer-switch-separator { margin: 0 4px; }
}

@media (max-width: 920px) {
  .v10-layer-switcher { padding: 0 2px; }
  .v10-layer-switch-btn {
    width: 30px;
    min-width: 30px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .v10-layer-switch-label { display: none; }
  .v10-layer-switch-separator { margin: 0 2px; }
  .v10-layer-switcher-spacer { flex: 0 0 2px; min-width: 2px; }
  .v10-layer-switcher-actions { gap: 2px; padding-right: 2px; }
  .v10-layer-action-btn {
    min-width: 28px;
    width: 28px;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 900px) {
  .v10-po-top,
  .v10-po-pipeline-head {
    flex-direction: column;
    align-items: stretch;
  }
  .v10-po-badges {
    max-width: none;
    justify-content: flex-start;
  }
  .v10-po-pipeline-steps {
    grid-template-columns: 1fr;
  }
  .v10-po-primer-link {
    align-self: flex-start;
  }
}

/* ── Memory Strip ── */
.v10-memory-strip { flex-shrink: 0; border-bottom: 1px solid var(--border-subtle); background: var(--bg-panel); }
.v10-memory-layer {
  display: flex; align-items: stretch; border-bottom: 1px solid var(--border-subtle); min-height: 0; cursor: pointer;
}
.v10-memory-layer:last-child { border-bottom: none; }
.v10-layer-label {
  width: 160px; flex-shrink: 0; display: flex; align-items: center;
  gap: 8px; padding: 8px 12px;
  border-right: 1px solid var(--border-subtle); cursor: pointer;
  transition: background 0.15s;
}
.v10-layer-label:hover { background: var(--bg-hover); }
.v10-layer-abbr { font-family: var(--font-sans); font-size: 12px; font-weight: 600; white-space: nowrap; }
.v10-layer-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); margin-left: auto; }
.v10-layer-items {
  flex: 1; display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; overflow-x: auto; min-width: 0;
}
.v10-layer-chip {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px; font-size: 11px;
  border: 1px solid var(--border-default); background: var(--bg-surface);
  cursor: pointer; transition: all 0.15s; max-width: 260px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v10-layer-chip:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
.v10-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.v10-chip-text { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.v10-chip-meta { font-family: var(--font-mono); font-size: 9px; color: var(--text-tertiary); flex-shrink: 0; }
@keyframes v10-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.v10-chip-activity { animation: v10-pulse 2s ease-in-out infinite; }
.v10-memory-layer.wm { background: rgba(100,116,139,0.03); }
.v10-memory-layer.wm .v10-layer-chip { border-style: dashed; opacity: 0.8; }
.v10-memory-layer.wm .v10-layer-chip:hover { opacity: 1; }
.v10-memory-layer.swm { background: rgba(245,158,11,0.02); }
.v10-memory-layer.vm { background: rgba(34,197,94,0.02); }
.v10-memory-layer.vm .v10-layer-chip { border-color: rgba(34,197,94,0.2); }
.v10-layer-chevron {
  font-size: 10px; color: var(--text-ghost); transition: transform 0.2s; margin-right: 2px;
  flex-shrink: 0; width: 14px; text-align: center;
}
.v10-memory-layer.expanded .v10-layer-chevron { transform: rotate(90deg); }

/* ── Expandable layer in overview ── */
.v10-layer-expand-content {
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
  background: var(--bg-root); border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
}
.v10-layer-expand-content.open { max-height: 70vh; height: 70vh; }

/* Tab body fills the remaining space below the tabs strip */
.v10-layer-expand-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.v10-layer-expand-body.full-width > * {
  flex: 1 1 auto; min-height: 0;
  width: 100%;
}
.v10-layer-empty-shell {
  padding: 16px;
  box-sizing: border-box;
}
/* Entities tab body is a single block-level scroll region. We deliberately
   opt out of the parent's flex-column layout here: with flex, each child
   (hero banner, widget strip, entity list, footer) competes for vertical
   space via its own flex-basis/shrink rules, and any sibling that ends up
   oversized silently clips the entity list below. As a plain block with
   overflow-y:auto the children stack by their natural height and the body
   itself scrolls — simple, predictable, and independent of how individual
   widgets grow. */
.v10-layer-expand-body.entities-tab {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Inside a block-scrolling body the list is just content — its
   flex:1/min-height/overflow-y rules from the flex-layout world would
   either collapse it to zero or spawn a nested scrollbar that fights the
   outer one. Neutralise them here without touching the layer-detail view
   that still uses the flex layout. */
.v10-layer-expand-body.entities-tab .v10-entity-list {
  flex: none;
  min-height: 0;
  overflow: visible;
}

/* Horizontal widget strip at the top of the Entities tab — sticky, not vertically scrollable */
.v10-layer-widgets-strip {
  flex-shrink: 0;
  display: flex; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-panel);
  overflow-x: auto;
  /* Cap the widget strip so it never eats more than ~40% of the 70vh
     expanded layer box — leaves at least ~40vh for the EntityList below. */
  max-height: 30vh;
}
.v10-layer-widgets-strip.empty {
  justify-content: center; align-items: center;
  padding: 24px 16px;
}
.v10-layer-widgets-strip-stats {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.v10-layer-widgets-strip-action {
  flex: 0 0 280px; max-width: 320px;
  display: flex; align-items: stretch;
}
.v10-layer-widgets-strip-action > .v10-gen-widget {
  flex: 1;
}
.v10-layer-widgets-strip .v10-gen-widget {
  width: auto;
  height: 100%;
  display: flex; flex-direction: column;
  animation: none;                    /* don't re-animate on every collapse/expand */
}
.v10-layer-widgets-strip .v10-gen-widget-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .v10-layer-widgets-strip { flex-direction: column; }
  .v10-layer-widgets-strip-stats { grid-template-columns: minmax(0, 1fr); }
  .v10-layer-widgets-strip-action { flex: 0 0 auto; max-width: none; }
}

/* Enhanced entity list — sortable, scrollable, with type pill */
.v10-entity-list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
}
.v10-entity-list.empty {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
}
.v10-entity-list-empty {
  color: var(--text-tertiary); font-size: 12px; font-style: italic;
}
.v10-entity-list-header {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-root);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px; color: var(--text-tertiary);
}
.v10-entity-list-count { font-weight: 600; color: var(--text-secondary); font-family: var(--font-mono); }
.v10-entity-list-hint { font-style: italic; font-size: 10px; flex: 1; padding: 0 12px; }
.v10-entity-list-extra { display: inline-flex; align-items: center; }

.v10-entity-card-timestamp {
  font-size: 10px;
  color: var(--text-tertiary, var(--text-ghost));
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--bg-elevated, transparent);
}
.v10-entity-list-sort {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-tertiary); font-style: normal;
}
.v10-entity-list-sort-label { text-transform: uppercase; letter-spacing: 0.04em; }
.v10-entity-list-sort-select {
  appearance: none;
  background: var(--bg-elevated, #1a1a1a);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 3px 22px 3px 8px;
  font-size: 11px; font-family: var(--font-mono);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
                    linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%);
  background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.v10-entity-list-sort-select:hover { border-color: var(--border-strong, var(--text-ghost)); }
.v10-entity-list-sort-select:focus { outline: 1px solid var(--accent, #8b5cf6); outline-offset: 1px; }
.v10-entity-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer; transition: background 0.12s;
}
.v10-entity-card:last-child { border-bottom: none; }
.v10-entity-card:hover { background: var(--bg-hover); }
.v10-entity-card-icon {
  width: 18px; flex-shrink: 0; text-align: center;
  font-size: 14px; color: var(--text-tertiary);
}
.v10-entity-card-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.v10-entity-card-title {
  font-size: 12px; font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v10-entity-card-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px;
}
.v10-entity-type-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 9px;
  font-size: 10px; font-weight: 500;
  background: var(--bg-elevated); color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  line-height: 1.4;
}
.v10-entity-card-triples {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary);
}
.v10-layer-expand-tabs {
  display: flex; align-items: center; gap: 2px;
  padding: 0 10px; border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-panel); height: 28px; min-height: 28px;
  flex-shrink: 0;
}
.v10-layer-expand-tab {
  height: 100%; padding: 0 10px; font-size: 10px; font-weight: 500;
  color: var(--text-tertiary); border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s; display: flex; align-items: center; gap: 4px;
  font-family: var(--font-sans);
}
.v10-layer-expand-tab:hover { color: var(--text-secondary); }
.v10-layer-expand-tab.active { color: var(--text-primary); border-bottom-color: var(--text-secondary); }
.v10-layer-expand-items {
  padding: 0;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
}
.v10-layer-expand-items .v10-item-row { padding: 6px 16px; }
.v10-layer-expand-items .v10-item-row:last-child { border-bottom: none; }
.v10-layer-expand-footer {
  padding: 6px 16px 8px; display: flex; gap: 8px;
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-root);
}
.v10-layer-expand-footer-btn {
  font-size: 10px; font-weight: 600; color: var(--text-tertiary);
  padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border-default);
  transition: all 0.15s; background: none; cursor: pointer; font-family: var(--font-sans);
}
.v10-layer-expand-footer-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.v10-layer-expand-footer-btn.promote { color: var(--text-warning); border-color: rgba(245,158,11,0.25); }
.v10-layer-expand-footer-btn.promote:hover { background: rgba(245,158,11,0.08); }
.v10-layer-expand-footer-btn.publish { color: var(--text-success); border-color: rgba(34,197,94,0.25); }
.v10-layer-expand-footer-btn.publish:hover { background: rgba(34,197,94,0.08); }

/* ── Item rows (shared by strip and layer views) ── */
.v10-item-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 0.1s;
}
.v10-item-row:hover { background: var(--bg-hover); }
.v10-item-row.selected { background: var(--bg-active); }
.v10-item-icon { font-size: 14px; width: 22px; text-align: center; flex-shrink: 0; color: var(--text-tertiary); }
.v10-item-info { flex: 1; min-width: 0; }
.v10-item-name { font-size: 12px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v10-item-ual { font-size: 9px; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v10-item-meta-row { display: flex; gap: 8px; margin-top: 1px; }
.v10-item-type { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); }
.v10-item-count { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); }
.v10-item-owner { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); flex-shrink: 0; margin-right: 6px; }
.v10-item-owner-dot { width: 5px; height: 5px; border-radius: 50%; }
.v10-trust-badge {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px;
  border-radius: 4px; font-size: 9px; font-weight: 600; letter-spacing: 0.3px; flex-shrink: 0;
}
.v10-trust-badge.vm { background: rgba(34,197,94,0.12); color: var(--text-success); }
.v10-trust-badge.swm { background: rgba(245,158,11,0.12); color: var(--text-warning); }
.v10-trust-badge.wm { background: rgba(100,116,139,0.12); color: var(--text-tertiary); }
.v10-item-promote-btn {
  padding: 3px 10px; border-radius: 5px; font-size: 10px; font-weight: 600;
  border: 1px solid var(--border-default); color: var(--text-tertiary);
  flex-shrink: 0; transition: all 0.15s; background: none; cursor: pointer;
  font-family: var(--font-sans);
}
.v10-item-promote-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }

/* ── Layer Detail View (full WM/SWM/VM) ── */
.v10-layer-detail { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.v10-layer-detail-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 10px;
}
.v10-layer-detail-icon { font-size: 18px; }
.v10-layer-detail-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.v10-layer-detail-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.v10-layer-detail-actions { margin-left: auto; display: flex; gap: 6px; }
.v10-layer-detail-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.v10-layer-action-btn {
  padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border-default); color: var(--text-secondary); transition: all 0.15s;
  background: none; cursor: pointer; font-family: var(--font-sans);
}
.v10-layer-action-btn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.v10-layer-action-btn.primary { background: rgba(34,197,94,0.08); color: var(--text-success); border-color: rgba(34,197,94,0.3); }
.v10-layer-action-btn.primary:hover { background: rgba(34,197,94,0.15); }
.v10-layer-action-btn.promote { background: rgba(245,158,11,0.08); color: var(--text-warning); border-color: rgba(245,158,11,0.25); }
.v10-layer-action-btn.promote:hover { background: rgba(245,158,11,0.15); }
.v10-layer-detail-content { flex: 1; overflow: auto; }

/* ── Content tabs (inside layer views) ── */
.v10-content-tabs {
  flex-shrink: 0; display: flex; align-items: center;
  border-bottom: 1px solid var(--border-subtle); background: var(--bg-panel);
  padding: 0 12px; height: 32px; min-height: 32px; gap: 2px;
}
.v10-content-tab {
  height: 100%; padding: 0 12px; font-size: 11px; font-weight: 500;
  color: var(--text-tertiary); border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s; display: flex; align-items: center; gap: 5px;
  font-family: var(--font-sans);
}
.v10-content-tab:hover { color: var(--text-secondary); }
.v10-content-tab.active { color: var(--text-primary); border-bottom-color: var(--text-secondary); }
.v10-content-tab-icon { font-size: 12px; }

/* ── Split-Pane Layout (canvas left | content right) ── */
.v10-split-pane {
  display: flex; flex: 1; min-height: 0; overflow: hidden;
}
.v10-split-canvas {
  flex: 1; min-width: 0; overflow-y: auto; padding: 16px;
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 12px;
}
.v10-split-content {
  flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
}

/* ── Generative Widgets ── */
.v10-gen-widget {
  width: 100%; border: 1px solid var(--border-default);
  border-radius: 10px; background: var(--bg-surface); overflow: hidden;
  animation: v10SlideUp 0.3s ease;
}
@keyframes v10SlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.v10-gen-widget-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-elevated);
}
.v10-gen-widget-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.v10-gen-widget-right { display: flex; align-items: center; gap: 10px; }
.v10-gen-widget-agent { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); }
.v10-gen-widget-agent-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-blue); }
.v10-gen-widget-dismiss {
  font-size: 14px; color: var(--text-tertiary); padding: 2px 4px; border-radius: 3px;
  transition: all 0.15s; cursor: pointer; border: none; background: none;
}
.v10-gen-widget-dismiss:hover { color: var(--text-secondary); background: var(--bg-hover); }
.v10-gen-widget-body { padding: 14px; }
.v10-gen-widget-footnote { padding: 10px 14px; border-top: 1px solid var(--border-subtle); font-size: 10px; color: var(--text-tertiary); line-height: 1.5; }
.v10-gen-widget.dissolved { opacity: 0.3; filter: blur(1px); pointer-events: none; max-height: 40px; overflow: hidden; transition: all 0.5s; }

/* Layer summary widget */
.v10-layer-summary { display: flex; flex-direction: column; gap: 10px; }
.v10-layer-summary-stat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--border-subtle);
}
.v10-layer-summary-stat:last-child { border-bottom: none; }
.v10-layer-summary-label { font-size: 11px; color: var(--text-tertiary); }
.v10-layer-summary-value { font-size: 12px; font-weight: 600; font-family: var(--font-mono); color: var(--text-primary); }
.v10-layer-summary-bar { height: 4px; border-radius: 2px; background: var(--bg-hover); overflow: hidden; }
.v10-layer-summary-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }

/* Decision card widget */
.v10-decision-question { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; line-height: 1.4; }
.v10-decision-context { font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; }
.v10-decision-evidence {
  padding: 10px 12px; border-radius: 6px; background: var(--bg-elevated);
  border: 1px solid var(--border-subtle); margin-bottom: 14px;
}
.v10-evidence-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); margin-bottom: 6px; }
.v10-evidence-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-tertiary); padding: 2px 0; }
.v10-evidence-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-ghost); flex-shrink: 0; }
.v10-decision-actions { display: flex; gap: 8px; }
.v10-decision-btn {
  flex: 1; height: 32px; border-radius: 6px; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s; cursor: pointer;
}
.v10-decision-btn.approve { background: rgba(34,197,94,0.1); color: var(--text-success); border: 1px solid rgba(34,197,94,0.3); }
.v10-decision-btn.approve:hover { background: rgba(34,197,94,0.2); }
.v10-decision-btn.revise { background: rgba(245,158,11,0.08); color: var(--text-warning); border: 1px solid rgba(245,158,11,0.25); }
.v10-decision-btn.revise:hover { background: rgba(245,158,11,0.15); }
.v10-decision-btn.discuss { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-default); }
.v10-decision-btn.discuss:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Primary CTA variant — prominent solid button for the main publish-to-VM action */
.v10-decision-btn.primary-cta.publish-vm {
  height: 44px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color: var(--text-on-accent);
  border: 1px solid #15803d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 2px 8px rgba(34,197,94,0.35);
  text-shadow: none;
  gap: 6px;
}
.v10-decision-btn.primary-cta.publish-vm:hover:not(:disabled) {
  background: linear-gradient(180deg, #2dd66b 0%, #16a34a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 3px 14px rgba(34,197,94,0.5);
  transform: translateY(-1px);
}
.v10-decision-btn.primary-cta.publish-vm:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 1px 4px rgba(34,197,94,0.35);
}
.v10-decision-btn.primary-cta.publish-vm:disabled {
  background: linear-gradient(180deg, #86efac 0%, #65d98a 100%);
  cursor: not-allowed;
}

/* Canvas empty state */
.v10-canvas-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; color: var(--text-tertiary); gap: 8px;
  min-height: 120px;
}
.v10-canvas-empty-icon { font-size: 28px; opacity: 0.3; }
.v10-canvas-empty-text { font-size: 11px; max-width: 240px; line-height: 1.6; }

/* ── Provenance Bar ── */
.v10-provenance-bar {
  flex-shrink: 0; padding: 6px 14px; border-top: 1px solid var(--border-subtle);
  background: var(--bg-panel); display: flex; align-items: center; gap: 8px;
  font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono);
}
.v10-provenance-bar-dot { width: 4px; height: 4px; border-radius: 50%; background: #22c55e; }

/* ── Graph view inside layer detail ── */
.v10-graph-view {
  flex: 1; position: relative; background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center; min-height: 300px;
}
/* Fills the parent completely — used when the graph tab is active inside a
   flex-column body (both in the inline strip and the full LayerDetailView). */
.v10-graph-view-fill {
  flex: 1 1 auto; min-height: 0; width: 100%;
}
.v10-graph-placeholder {
  color: var(--text-tertiary); font-size: 12px; font-family: var(--font-mono);
}
.v10-docs-placeholder {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-size: 12px;
}
.v10-layer-state {
  flex: 1 1 auto;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-tertiary);
  font-size: 12px;
  text-align: center;
}
.v10-items-list { padding: 0; }

/* ── KA Detail View ── */
.v10-ka-detail { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.v10-ka-header {
  padding: 12px 20px; border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
}
.v10-ka-back {
  align-self: flex-start; border: 1px solid var(--border-default); border-radius: 5px;
  background: none; color: var(--text-secondary); font-size: 11px; font-weight: 600;
  padding: 4px 10px; cursor: pointer; font-family: var(--font-sans); transition: all 0.15s;
}
.v10-ka-back:hover { color: var(--text-primary); border-color: var(--border-strong); }
.v10-ka-header-left { display: flex; flex-direction: column; gap: 2px; }
.v10-ka-label { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
.v10-ka-name { font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.v10-ka-ual { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 2px; }
.v10-ka-split { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.v10-ka-left { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px; border-right: 1px solid var(--border-subtle); }
.v10-ka-right { width: 300px; flex-shrink: 0; overflow-y: auto; padding: 16px; }
.v10-ka-section { margin-bottom: 16px; }
.v10-ka-section-title {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-tertiary); margin-bottom: 8px;
}
.v10-ka-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.7; }
.v10-ka-desc p { margin-bottom: 8px; }
.v10-ka-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); }
.v10-ka-meta-item { display: flex; align-items: center; gap: 4px; }
.v10-ka-prop { display: flex; gap: 8px; padding: 4px 0; font-size: 11px; border-bottom: 1px solid var(--border-subtle); }
.v10-ka-prop:last-child { border-bottom: none; }
.v10-ka-prop-key { color: var(--text-tertiary); font-weight: 600; min-width: 120px; flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; }
.v10-ka-prop-val { color: var(--text-secondary); word-break: break-all; }
.v10-ka-conn {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 5px 8px;
  border-radius: 4px; cursor: pointer; border: none; background: none; color: inherit;
  font-family: var(--font-sans); font-size: 11px; transition: background 0.1s;
}
.v10-ka-conn:hover { background: var(--bg-hover); }
.v10-ka-conn-pred { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10px; min-width: 80px; }
.v10-ka-conn-arrow { color: var(--text-ghost); }
.v10-ka-conn-target { color: var(--text-secondary); font-weight: 500; }
.v10-ka-triples-table { width: 100%; border-collapse: collapse; font-size: 10px; font-family: var(--font-mono); }
.v10-ka-triples-table th {
  padding: 6px 8px; text-align: left; font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-default); background: var(--bg-elevated);
}
.v10-ka-triples-table td {
  padding: 5px 8px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary);
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v10-ka-timeline { position: relative; padding-left: 24px; }
.v10-ka-timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: var(--border-default); }
.v10-ka-event { position: relative; padding: 0 0 16px 0; }
.v10-ka-event:last-child { padding-bottom: 0; }
.v10-ka-event-dot {
  position: absolute; left: -21px; top: 2px; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid var(--border-strong); background: var(--bg-elevated);
}
.v10-ka-event-dot.created { border-color: var(--layer-working); background: rgba(100,116,139,0.15); }
.v10-ka-event-dot.shared { border-color: var(--layer-shared); background: rgba(245,158,11,0.15); }
.v10-ka-event-dot.verified { border-color: var(--layer-verified); background: rgba(34,197,94,0.15); }
.v10-ka-event-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.v10-ka-event-title { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.v10-ka-event-time { font-family: var(--font-mono); font-size: 9px; color: var(--text-tertiary); white-space: nowrap; margin-left: auto; }
.v10-ka-event-desc { font-size: 10px; color: var(--text-tertiary); line-height: 1.5; }

/* ── Sub-graph Overview (Graph Overview tab) ──
   One "wall of graphs": a responsive grid of mini RdfGraph cards, one per
   registered sub-graph. Each card is self-contained (title, stats, graph)
   and styled by its profile color through the --sg-color custom prop. */
.v10-sgov { display: flex; flex: 1; flex-direction: column; gap: 12px; min-height: 0; padding: 0 12px 12px; }
.v10-sgov-header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 2px;
}
.v10-sgov-title { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.02em; }
.v10-sgov-sub { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono); }
.v10-empty-state.v10-sgov-state {
  min-height: 220px;
  margin: 0 12px 12px;
}
/* The grid auto-fills: 3-up on wide screens, 2-up around 1100px, single column
   under 720px. Each cell has a stable minimum height so the mini graphs get
   room to breathe regardless of triple density. */
.v10-sgov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  align-content: start;
  overflow: auto;
  padding-bottom: 12px;
}
.v10-sgov-card {
  display: flex; flex-direction: column;
  min-height: 320px;
  background: var(--surface-1, rgba(255,255,255,0.02));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.v10-sgov-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -12px var(--sg-color, rgba(100,116,139,0.6));
}
.v10-sgov-card-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px 8px 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.v10-sgov-card-icon { font-size: 18px; line-height: 1; margin-top: 1px; }
.v10-sgov-card-title-wrap { flex: 1; min-width: 0; }
.v10-sgov-card-title {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v10-sgov-card-desc {
  font-size: 10px; color: var(--text-tertiary); line-height: 1.4;
  margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.v10-sgov-card-open {
  appearance: none; background: transparent; color: var(--text-tertiary);
  border: 1px solid var(--border-subtle); border-radius: 6px;
  padding: 2px 6px; cursor: pointer; font-size: 12px; line-height: 1;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.v10-sgov-card-open:hover {
  color: var(--sg-color, var(--text-primary));
  border-color: var(--sg-color, var(--border-strong));
  background: color-mix(in srgb, var(--sg-color, #64748b) 10%, transparent);
}
.v10-sgov-card-stats {
  display: flex; gap: 12px; padding: 6px 12px;
  font-size: 11px; color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.v10-sgov-card-stat b {
  color: var(--text-primary); font-weight: 600; margin-right: 3px;
  font-variant-numeric: tabular-nums;
}
.v10-sgov-card-graph {
  position: relative; flex: 1; min-height: 220px;
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--sg-color, #64748b) 6%, transparent) 0%,
      transparent 70%),
    var(--surface-0, rgba(0,0,0,0.2));
}
.v10-sgov-card-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-tertiary);
}
.v10-sgov-card-pyramid {
  padding: 0 10px 6px;
}

/* ── Mini layer pyramid (WM/SWM/VM segmented bar + legend) ── */
.v10-minipyr {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.v10-minipyr.compact { flex-direction: row; align-items: center; gap: 6px; }
.v10-minipyr-empty {
  font-size: 10px; color: var(--text-tertiary); font-style: italic;
}
.v10-minipyr-bar {
  display: flex; height: 6px; width: 100%;
  border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.v10-minipyr-seg {
  height: 100%;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.v10-minipyr-seg.dim { opacity: 0.3; filter: grayscale(0.6); }
.v10-minipyr-legend {
  display: flex; gap: 4px; flex-wrap: wrap;
  align-items: center;
}
.v10-minipyr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 10px; font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  cursor: default;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.v10-minipyr-chip.interactive { cursor: pointer; }
.v10-minipyr-chip.interactive:hover { border-color: var(--border-strong); color: var(--text-primary); }
.v10-minipyr-chip.dim { opacity: 0.4; }
.v10-minipyr-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
}
.v10-minipyr-short { letter-spacing: 0.04em; }
.v10-minipyr-count { font-variant-numeric: tabular-nums; color: var(--text-tertiary); }

/* ── Sub-graph detail view header + filters ── */
.v10-subgraph-detail {
  border-top: 3px solid color-mix(in srgb, var(--sg-color, #64748b) 40%, transparent);
}
.v10-subgraph-detail-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sg-color, #64748b) 8%, transparent) 0%,
    transparent 100%
  );
}
.v10-subgraph-detail-icon {
  font-size: 20px; line-height: 1;
}
.v10-subgraph-detail-title-wrap { flex: 1; min-width: 0; }
.v10-subgraph-detail-title {
  font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.v10-subgraph-detail-desc {
  font-size: 11px; color: var(--text-tertiary); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 520px;
}

/* Saved queries pills row */
.v10-subgraph-savedqueries {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.015);
}
.v10-subgraph-savedqueries-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-tertiary);
  margin-right: 4px;
}
.v10-subgraph-savedquery {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  font-size: 11px; color: var(--text-secondary);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.15s;
}
.v10-subgraph-savedquery:hover { border-color: var(--border-strong); color: var(--text-primary); }
.v10-subgraph-savedquery.active {
  background: color-mix(in srgb, var(--sg-color, #a855f7) 14%, transparent);
  border-color: var(--sg-color, #a855f7);
  color: var(--text-primary);
}
.v10-subgraph-savedquery:disabled { opacity: 0.5; cursor: default; }
.v10-subgraph-savedquery-glyph {
  font-size: 10px; color: var(--sg-color, #a855f7);
}
.v10-subgraph-savedquery-error {
  color: var(--text-danger); font-size: 11px;
}
.v10-subgraph-savedquery-count {
  margin-left: auto;
  font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}

/* Filter chips (profile-driven) */
.v10-subgraph-filters {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.01);
}
.v10-subgraph-filter-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.v10-subgraph-filter-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-tertiary);
  min-width: 62px;
}
.v10-subgraph-filter-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.v10-subgraph-filter-chip {
  padding: 2px 9px;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}
.v10-subgraph-filter-chip:hover {
  border-color: var(--border-strong); color: var(--text-primary);
}
.v10-subgraph-filter-chip.active {
  background: color-mix(in srgb, var(--sg-color, #a855f7) 22%, transparent);
  border-color: var(--sg-color, #a855f7);
  color: var(--text-primary);
}
.v10-subgraph-filter-reset {
  align-self: flex-start;
  padding: 2px 8px;
  background: none;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  font-size: 10px; font-family: var(--font-sans);
  cursor: pointer;
  border-radius: 10px;
}
.v10-subgraph-filter-reset:hover {
  border-color: var(--border-subtle); color: var(--text-secondary);
}

/* Timeline ribbon */
.v10-subgraph-timeline {
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: auto;
}
.v10-subgraph-timeline-empty {
  padding: 24px 16px;
  color: var(--text-tertiary); font-size: 12px;
  text-align: center;
}
.v10-subgraph-timeline-empty code {
  background: rgba(255,255,255,0.06);
  padding: 1px 4px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px;
}
.v10-subgraph-timeline-bucket { display: flex; flex-direction: column; gap: 6px; }
.v10-subgraph-timeline-bucket-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border-subtle);
}
.v10-subgraph-timeline-bucket-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-color, #64748b) 20%, transparent);
}
.v10-subgraph-timeline-bucket-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-primary);
}
.v10-subgraph-timeline-bucket-count {
  margin-left: auto;
  font-size: 10px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.v10-subgraph-timeline-items {
  display: flex; flex-direction: column; gap: 3px;
}
.v10-subgraph-timeline-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid color-mix(in srgb, var(--sg-color, #64748b) 60%, transparent);
  border-radius: 4px;
  font-size: 12px; color: var(--text-secondary);
  font-family: var(--font-sans);
  text-align: left; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.v10-subgraph-timeline-item:hover {
  border-color: var(--border-strong);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
}
.v10-subgraph-timeline-item-icon { width: 14px; text-align: center; }
.v10-subgraph-timeline-item-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v10-subgraph-timeline-item-date {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ── SubGraphBar chip badge (ambient "2 proposed" / "2 p0" / "N open") ── */
.v10-subgraph-chip.has-badge { padding-right: 6px; }
.v10-subgraph-chip-badge {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.06);
  font-family: var(--font-sans);
}
.v10-subgraph-chip-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  display: inline-block;
}
.v10-subgraph-chip-badge.tone-warn {
  background: rgba(245,158,11,0.15); color: var(--text-warning);
}
.v10-subgraph-chip-badge.tone-warn .v10-subgraph-chip-badge-dot {
  background: #f59e0b; box-shadow: 0 0 4px rgba(245,158,11,0.6);
}
.v10-subgraph-chip-badge.tone-danger {
  background: rgba(239,68,68,0.15); color: var(--text-danger);
}
.v10-subgraph-chip-badge.tone-danger .v10-subgraph-chip-badge-dot {
  background: #ef4444; box-shadow: 0 0 4px rgba(239,68,68,0.6);
  animation: v10-pulse-red 2s infinite;
}
.v10-subgraph-chip-badge.tone-info {
  background: rgba(59,130,246,0.15); color: var(--text-info);
}
.v10-subgraph-chip-badge.tone-info .v10-subgraph-chip-badge-dot {
  background: #3b82f6;
}
.v10-subgraph-chip-badge.tone-muted {
  background: rgba(100,116,139,0.15); color: var(--text-tertiary);
}
.v10-subgraph-chip-badge.tone-muted .v10-subgraph-chip-badge-dot {
  background: #64748b;
}
@keyframes v10-pulse-red {
  0%, 100% { box-shadow: 0 0 4px rgba(239,68,68,0.6); }
  50%      { box-shadow: 0 0 8px rgba(239,68,68,0.9); }
}

/* ── Cross-reference sub-graph badge (inside KA detail links) ── */
.v10-subgraph-badge {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--sg-color, #64748b) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sg-color, #64748b) 35%, transparent);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  white-space: nowrap;
}
.v10-subgraph-badge-icon { font-size: 10px; line-height: 1; }
.v10-subgraph-badge-label { text-transform: capitalize; }

/* ── Verify on DKG CTA (in KA detail right pane) ── */
/* Two variants: .promote (WM -> SWM, amber) and .publish (SWM -> VM, green).
   The layer-transition icon (◈ / ◉) matches LAYER_CONFIG so the CTA
   visually anticipates the destination layer. */
.v10-ka-verify {
  margin-top: 16px;
  padding: 14px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v10-ka-verify-promote {
  background: linear-gradient(135deg,
    rgba(245,158,11,0.10) 0%,
    rgba(168,85,247,0.05) 100%);
  border: 1px solid rgba(245,158,11,0.30);
}
.v10-ka-verify-publish {
  background: linear-gradient(135deg,
    rgba(34,197,94,0.10) 0%,
    rgba(168,85,247,0.06) 100%);
  border: 1px solid rgba(34,197,94,0.30);
}
.v10-ka-verify-head {
  display: flex; align-items: center; gap: 8px;
}
.v10-ka-verify-arrow {
  font-size: 18px;
  line-height: 1;
}
.v10-ka-verify-promote .v10-ka-verify-arrow { color: #f59e0b; }
.v10-ka-verify-publish .v10-ka-verify-arrow { color: #22c55e; }
.v10-ka-verify-title {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.v10-ka-verify-btn {
  display: block; width: 100%;
  padding: 8px 12px;
  border: none; border-radius: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: filter 0.15s, background 0.15s;
}
.v10-ka-verify-btn.promote {
  background: #f59e0b;
  color: #0a0a0a;
}
.v10-ka-verify-btn.publish {
  background: #22c55e;
  color: #0a0a0a;
}
.v10-ka-verify-btn:hover:not(:disabled) { filter: brightness(1.12); }
.v10-ka-verify-btn:disabled { opacity: 0.45; cursor: default; }
.v10-ka-verify-hint {
  margin-top: 8px;
  font-size: 10px; color: var(--text-tertiary); line-height: 1.5;
}
.v10-ka-verify-err {
  margin-top: 8px; padding: 6px 8px;
  background: rgba(239,68,68,0.12);
  border-radius: 4px;
  color: var(--text-danger); font-size: 11px;
  font-family: var(--font-mono);
}
.v10-ka-verify-ok {
  display: flex; flex-direction: column; gap: 4px;
}
.v10-ka-verify-ok-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  font-size: 11px;
}
.v10-ka-verify-ok-row:last-child { border-bottom: none; }
.v10-ka-verify-ok-lbl { color: var(--text-tertiary); text-transform: uppercase; font-size: 9px; letter-spacing: 0.08em; }
.v10-ka-verify-ok-val { color: var(--text-primary); font-weight: 600; }
.v10-ka-verify-ok-val.mono {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

/* ── AgentChip (attribution pill) ── */
.v10-agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 2px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--agent-color, #64748b) 30%, var(--border-subtle));
  background: color-mix(in srgb, var(--agent-color, #64748b) 6%, transparent);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  vertical-align: middle;
  max-width: 100%;
  user-select: none;
}
.v10-agent-chip.interactive { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.v10-agent-chip.interactive:hover {
  background: color-mix(in srgb, var(--agent-color, #64748b) 14%, transparent);
  border-color: color-mix(in srgb, var(--agent-color, #64748b) 50%, var(--border-default));
}
.v10-agent-chip-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--agent-color, #64748b);
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.v10-agent-chip-initials {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.v10-agent-chip-glyph {
  position: absolute;
  bottom: -2px;
  right: -4px;
  background: var(--bg-surface, #1a1d23);
  border: 1px solid color-mix(in srgb, var(--agent-color, #64748b) 50%, var(--border-default));
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--agent-color, #64748b);
  line-height: 1;
}
.v10-agent-chip-body {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
  max-width: 100%;
}
.v10-agent-chip-name {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v10-agent-chip-sub {
  display: inline-flex;
  gap: 4px;
  font-size: 9px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v10-agent-chip-fw { font-weight: 700; color: var(--agent-color, #64748b); }
.v10-agent-chip-sep { opacity: 0.5; }
.v10-agent-chip-op { opacity: 0.85; }

/* Size variants */
.v10-agent-chip-sm { font-size: 10px; padding: 1px 7px 1px 1px; }
.v10-agent-chip-sm .v10-agent-chip-avatar { width: 16px; height: 16px; font-size: 8px; }
.v10-agent-chip-sm .v10-agent-chip-glyph { width: 9px; height: 9px; font-size: 7px; bottom: -1px; right: -2px; }

.v10-agent-chip-md { font-size: 11px; padding: 2px 9px 2px 2px; }
.v10-agent-chip-md .v10-agent-chip-avatar { width: 22px; height: 22px; font-size: 9px; }
.v10-agent-chip-md .v10-agent-chip-glyph  { width: 11px; height: 11px; font-size: 8px; }

.v10-agent-chip-lg { font-size: 13px; padding: 4px 12px 4px 4px; }
.v10-agent-chip-lg .v10-agent-chip-avatar { width: 30px; height: 30px; font-size: 11px; }
.v10-agent-chip-lg .v10-agent-chip-glyph  { width: 14px; height: 14px; font-size: 10px; bottom: -2px; right: -4px; }

/* ── Activity feed ── */
.v10-activity-feed {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 16px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.015);
}
.v10-activity-feed-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.v10-empty-state.v10-activity-feed-empty-state { min-height: 96px; }
.v10-overview-activity.v10-activity-feed-empty {
  min-height: 140px;
}
.v10-activity-feed-bucket { display: flex; flex-direction: column; gap: 4px; }
.v10-activity-feed-bucket-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px;
  border-bottom: 1px dashed var(--border-subtle);
}
.v10-activity-feed-bucket-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.v10-activity-feed-bucket-count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary);
}
.v10-activity-feed-items { display: flex; flex-direction: column; }

.v10-activity-feed-row {
  display: grid;
  grid-template-columns: 16px auto 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: none;
  background: none;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: background 0.12s;
}
.v10-activity-feed-row:hover { background: rgba(255,255,255,0.04); }
.v10-activity-feed-row + .v10-activity-feed-row {
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
}
.v10-activity-feed-layer {
  font-size: 14px; line-height: 1;
  justify-self: center;
}
.v10-activity-feed-type {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--type-color, #a855f7) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--type-color, #a855f7) 30%, var(--border-subtle));
  white-space: nowrap;
}
.v10-activity-feed-type-icon { font-size: 11px; color: var(--type-color, #a855f7); }
.v10-activity-feed-title-text {
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.v10-activity-feed-status {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  background: var(--bg-elevated);
}
.v10-activity-feed-status.status-good  { color: var(--text-success); border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.08); }
.v10-activity-feed-status.status-warn  { color: var(--text-warning); border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.08); }
.v10-activity-feed-status.status-bad   { color: var(--text-danger); border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }
.v10-activity-feed-author { display: inline-flex; }
.v10-activity-feed-time {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
  min-width: 54px; text-align: right;
}

/* ── Agent profile page ── */
.v10-agent-profile {
  display: flex; flex-direction: column;
  overflow: auto;
  padding: 12px 0;
}
.v10-agent-profile-header {
  display: flex; flex-direction: column; gap: 14px;
  padding: 12px 20px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04) 0%,
    transparent 100%
  );
}
.v10-agent-profile-head {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.v10-agent-profile-reputation {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.55;
  max-width: 640px;
  flex: 1 1 260px;
}
.v10-agent-profile-meta {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 4px;
}
.v10-agent-profile-meta-row {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px;
}
.v10-agent-profile-meta-lbl {
  text-transform: uppercase;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-ghost);
  min-width: 80px;
}
.v10-agent-profile-meta-val { color: var(--text-secondary); }
.v10-agent-profile-meta-val.mono { font-family: var(--font-mono); font-size: 11px; }
.v10-agent-profile-wallet {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-primary);
}
.v10-agent-profile-copy {
  padding: 1px 6px;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-ghost);
  font-size: 10px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 0.15s, color 0.15s;
}
.v10-agent-profile-copy:hover { border-color: var(--border-strong); color: var(--text-primary); }

.v10-agent-profile-stats {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.v10-agent-profile-stat {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 6px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-elevated, rgba(255,255,255,0.03));
  cursor: pointer;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.v10-agent-profile-stat:hover {
  border-color: var(--stat-color, var(--border-strong));
  color: var(--text-primary);
}
.v10-agent-profile-stat.active {
  border-color: var(--stat-color, var(--accent-green));
  background: color-mix(in srgb, var(--stat-color, var(--accent-green)) 12%, transparent);
  color: var(--text-primary);
}
.v10-agent-profile-stat-val {
  font-size: 17px; font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
  color: var(--stat-color, var(--text-primary));
}
.v10-agent-profile-stat-lbl {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.v10-agent-profile-feed-sub {
  font-weight: 400;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Memory Stack — cross-project 3-layer overview ── */
.v10-memstack {
  display: flex; flex-direction: column;
  height: 100%; overflow: auto;
  padding: 18px 22px 28px;
}
.v10-memstack-head {
  margin-bottom: 18px;
}
.v10-memstack-title {
  font-size: 20px; font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}
.v10-memstack-sub {
  font-size: 12px; color: var(--text-tertiary);
  margin: 0;
}
.v10-memstack-empty {
  font-size: 12px; color: var(--text-tertiary);
  padding: 40px 0;
  text-align: center;
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
}
.v10-memstack-table {
  display: flex; flex-direction: column;
  gap: 10px;
}
.v10-memstack-colheads {
  display: grid;
  grid-template-columns: 220px repeat(3, 1fr);
  gap: 10px;
  padding: 0 2px 4px;
}
.v10-memstack-colhead {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.v10-memstack-colhead.project { border-bottom: none; }
.v10-memstack-colhead-icon { font-size: 14px; line-height: 1; }
.v10-memstack-colhead-title { color: inherit; }
.v10-memstack-colhead-desc {
  margin-left: auto;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-ghost);
  font-size: 10px;
}
.v10-memstack-row {
  display: grid;
  grid-template-columns: 220px repeat(3, 1fr);
  gap: 10px;
  align-items: stretch;
}
.v10-memstack-project {
  display: flex; flex-direction: column;
  padding: 12px 10px;
  border-right: 1px solid var(--border-subtle);
}
.v10-memstack-project-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 0; background: none; border: none;
  color: var(--text-primary);
  font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left;
  font-family: var(--font-sans);
  transition: color 0.15s;
}
.v10-memstack-project-btn:hover { color: var(--accent-blue, #3b82f6); }
.v10-memstack-project-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 0 3px rgba(168,85,247,0.15);
  flex-shrink: 0;
}
.v10-memstack-project-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v10-memstack-project-desc {
  font-size: 11px; color: var(--text-tertiary);
  margin-top: 4px;
  line-height: 1.45;
  max-height: 3em;
  overflow: hidden;
}
.v10-memstack-project-status {
  margin-top: 6px;
  font-size: 10px; color: var(--text-ghost);
  font-style: italic;
}
.v10-memstack-project-status.error { color: var(--accent-red, #ef4444); }

.v10-memstack-cell {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--cell-color, #64748b) 20%, var(--border-subtle));
  background: color-mix(in srgb, var(--cell-color, #64748b) 3%, transparent);
  min-height: 130px;
}
.v10-memstack-cell.empty {
  opacity: 0.5;
  background: transparent;
}
.v10-memstack-cell-stats {
  display: flex; align-items: baseline; gap: 4px;
  flex-wrap: wrap;
}
.v10-memstack-cell-n {
  font-size: 20px; font-weight: 700;
  font-family: var(--font-mono);
  color: var(--cell-color, var(--text-primary));
  line-height: 1;
}
.v10-memstack-cell-n-lbl {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.v10-memstack-cell-sep { color: var(--text-ghost); margin: 0 2px; }
.v10-memstack-cell-t {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}
.v10-memstack-cell-t-lbl {
  font-size: 9px;
  color: var(--text-ghost);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.v10-memstack-cell-recent {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  flex: 1;
}
.v10-memstack-cell-recent-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-secondary);
  padding: 2px 0;
}
.v10-memstack-cell-recent-bullet {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cell-color, #64748b);
  flex-shrink: 0;
}
.v10-memstack-cell-recent-label {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v10-memstack-cell-recent-time {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-ghost);
  white-space: nowrap;
}
.v10-memstack-cell-empty-hint {
  font-size: 10px; color: var(--text-ghost);
  font-style: italic;
  padding: 4px 0;
  flex: 1;
}
.v10-memstack-cell-open {
  align-self: flex-start;
  padding: 3px 10px;
  background: none;
  border: 1px solid color-mix(in srgb, var(--cell-color, #64748b) 30%, var(--border-subtle));
  border-radius: 6px;
  color: var(--cell-color, var(--text-secondary));
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: var(--font-sans);
  margin-top: auto;
  transition: background 0.15s, color 0.15s;
}
.v10-memstack-cell-open:hover {
  background: color-mix(in srgb, var(--cell-color, #64748b) 16%, transparent);
  color: var(--text-primary);
}

/* ── Verified Memory on-chain identity banner (KA detail, right pane) ── */
.v10-vm-identity {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(34,197,94,0.10) 0%,
    rgba(245,158,11,0.05) 100%
  );
  border: 1px solid rgba(34,197,94,0.35);
  display: flex; flex-direction: column; gap: 8px;
}
.v10-vm-identity-head {
  display: flex; align-items: center; gap: 8px;
}
.v10-vm-identity-glyph {
  font-size: 14px; color: #22c55e; line-height: 1;
}
.v10-vm-identity-title {
  font-size: 12px; font-weight: 700; color: var(--text-primary);
  letter-spacing: 0.01em;
}
.v10-vm-identity-badge {
  margin-left: auto;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 10px;
  color: var(--text-success);
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.35);
}
.v10-vm-identity-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 2px 0;
}
.v10-vm-identity-lbl {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-tertiary);
  min-width: 56px;
}
.v10-vm-identity-val {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 260px;
  white-space: nowrap;
}
.v10-vm-identity-val.mono {
  font-family: var(--font-mono); font-size: 11px;
}
.v10-vm-identity-wallet {
  color: var(--text-tertiary);
  font-size: 10px;
}
.v10-vm-identity-opid {
  color: var(--text-tertiary);
  font-size: 10px;
}
.v10-vm-identity-copy {
  padding: 1px 6px;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  color: var(--text-tertiary);
  font-size: 10px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 0.15s, color 0.15s;
}
.v10-vm-identity-copy:hover {
  border-color: var(--border-strong); color: var(--text-primary);
}

/* Inline attribution inside each Provenance Trail event
   ("Created by <agent>", "Promoted by <agent>", "Published by <agent>") */
.v10-ka-event-attribution {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-left: 18px;  /* line up under the title, past the dot */
  font-size: 11px;
  color: var(--text-tertiary);
}
.v10-ka-event-attribution-prefix {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-tertiary);
}

/* Author block in the KA detail header (prominent "Proposed by …" card) */
.v10-ka-header-author {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; margin-left: auto;
  padding-left: 16px;
  flex-shrink: 0;
}
.v10-ka-header-author-label {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

/* ── Persistent project header strip ── */
.v10-project-strip {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--sg-color, #a855f7) 8%, transparent) 0%,
    transparent 40%
  );
  min-height: 34px;
}
.v10-project-strip-dot {
  width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-color, #a855f7) 18%, transparent);
  flex-shrink: 0;
}
.v10-project-strip-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  background: none; border: none; padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 0.15s;
}
.v10-project-strip-name:disabled {
  cursor: default; opacity: 1;
}
.v10-project-strip-name:not(:disabled):hover {
  color: var(--sg-color, #a855f7);
}
.v10-project-strip-sep {
  color: var(--text-ghost);
  font-size: 14px;
  font-weight: 400;
}
.v10-project-strip-sg {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
}
.v10-project-strip-sg-icon { font-size: 13px; line-height: 1; }
.v10-project-strip-desc {
  font-size: 11px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-left: auto;
  max-width: 560px;
  padding-left: 12px;
}

/* Context Graph primer */
.v10-primer-view {
  height: 100%;
  overflow: auto;
  padding: 28px 32px;
  background: var(--bg-panel);
  color: var(--text-primary);
}
.v10-primer-header {
  max-width: 860px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-subtle);
}
.v10-primer-kicker {
  margin: 0 0 8px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.v10-primer-header h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: 26px;
  font-weight: 750;
  line-height: 1.2;
}
.v10-primer-header p {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}
.v10-primer-pipeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: center;
  max-width: 980px;
  gap: 10px;
  padding: 22px 0;
}
.v10-primer-pipeline span:not(.connector) {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.v10-primer-pipeline .wm {
  border-color: rgba(100, 116, 139, 0.48);
  background: rgba(100, 116, 139, 0.12);
}
.v10-primer-pipeline .swm {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
}
.v10-primer-pipeline .vm {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(34, 197, 94, 0.11);
}
.v10-primer-pipeline .connector {
  height: 1px;
  background: var(--border-strong);
}
.v10-primer-sections {
  max-width: 860px;
  display: flex;
  flex-direction: column;
}
.v10-primer-section {
  padding: 18px 0;
  border-top: 1px solid var(--border-subtle);
}
.v10-primer-section:first-child {
  border-top: 0;
}
.v10-primer-section h2 {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 750;
}
.v10-primer-section p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .v10-primer-view { padding: 22px 18px; }
  .v10-primer-pipeline {
    grid-template-columns: 1fr;
  }
  .v10-primer-pipeline .connector {
    width: 1px;
    height: 18px;
    justify-self: center;
  }
}
