:root {
  /* Type system */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Menlo, Monaco, 'Cascadia Mono', 'Roboto Mono',
    Consolas, monospace;

  /* Neutral surfaces */
  --bg-app: #fafafa;
  --bg-surface: #ffffff;
  --bg-muted: #f5f5f4;
  --bg-hover: #f1f3f5;

  /* Borders */
  --border: #e5e7eb;
  --border-strong: #d4d8de;
  --border-muted: #f0f1f3;

  /* Text */
  --text: #111827;
  --text-muted: #4b5563;
  --text-subtle: #6b7280;
  --text-faint: #9ca3af;

  /* Brand / accents (kept restrained) */
  --accent: #111827;
  --accent-soft: #f1f5f9;
  --brand: #1e293b;
  --brand-hover: #0f172a;
  /* Primary action colour — a modern indigo (not near-black). */
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --focus-ring: rgba(79, 70, 229, 0.22);

  /* Status */
  --success: #166534;
  --danger: #b91c1c;
  --warn: #b45309;

  /* ── Scale tokens (UX standardisation) ─────────────────────────────────
     Spacing on a 4/8 grid; a radius scale matching existing conventions
     (8px is the house default); elevation shadows; and a z-index ladder so
     the new chrome (rail / header / chat dock / palette / toasts) stacks
     predictably. Existing rules keep their literals; new chrome uses these. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);

  --z-rail: 100;
  --z-header: 200;
  --z-dock: 300;
  --z-popover: 400;
  --z-modal: 500;
  --z-palette: 600;
  --z-toast: 700;

  font-family: var(--font-sans);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  background: var(--bg-app);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}

::selection {
  background: rgba(17, 24, 39, 0.12);
}

.app-layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 248px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease, transform 0.2s ease;
}

/* Workspace secondary rail — the Workspace sections shown as left tabs in the
   main area (a flex sibling of the main sidebar). Visible only on Workspace
   tabs; the main sidebar sits collapsed (icon rail) to its left. */
.workspace-rail {
  width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 12px 10px 28px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.workspace-rail[hidden] { display: none; }
/* One left bar at a time: when the main sidebar is expanded (labels shown) the
   secondary rail collapses; it returns when the main sidebar folds to icons. */
.app-layout:not(.left-collapsed) .page-left-rail,
.app-layout:not(.left-collapsed) .workspace-rail { display: none; }
/* Module-name header shown atop every secondary rail (Workspace, Hive, Orbit,
   Settings, Docs). It sits flush at the rail's top (see the padding-top:0 rule
   below) so there's no empty gap between it and the header above. */
.page-rail-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  margin-bottom: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.page-rail-title span { font-size: 1.05rem; line-height: 1; }
/* Rails drop their top padding so the title sits flush under the header above —
   removes the small empty space. !important overrides the modules' inline rail
   padding (hive-nav / orbit-nav / settings-subnav / doc-nav). */
.page-left-rail,
.workspace-rail { padding-top: 0 !important; }
/* Make every secondary rail a reliable vertical scroll container. */
.page-left-rail { min-height: 0; overflow-y: auto; }
.page-left-rail > * { flex-shrink: 0; }
/* The Workspace rail now sits below the topbar (inside .canvas-body), so its title
   is the standard 46px rail header — same as Hive/Orbit. Keep the scroll setup:
   flex-shrink:0 lets tall content overflow + scroll instead of compressing. */
.workspace-rail { min-height: 0; }
.workspace-rail > * { flex-shrink: 0; }
.workspace-rail__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.855rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.workspace-rail__item:hover { background: var(--bg-muted); color: var(--text); }
.workspace-rail__item.is-active {
  background: rgba(79, 70, 229, 0.09);
  color: var(--primary);
  font-weight: 600;
}
.workspace-rail__icon { flex-shrink: 0; width: 18px; text-align: center; font-size: 0.9rem; line-height: 1; }
/* Expandable group (Members & Access) + its nested iam-admin children. */
.workspace-rail__group { width: 100%; }
/* The group header ("Members & Access") mirrors Hive's collapsible section labels
   (.hive-nav-summary): a slim uppercase summary, not a chunky nav item. */
.workspace-rail__summary {
  list-style: none;
  justify-content: space-between;
  margin: 12px 0 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.workspace-rail__summary::-webkit-details-marker { display: none; }
.workspace-rail__chev {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 1.3rem;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}
.workspace-rail__group:not([open]) .workspace-rail__chev { transform: rotate(-90deg); }
.workspace-rail__children { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 4px; }
.workspace-rail__child {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 9px 6px 36px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.855rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.workspace-rail__child:hover { background: var(--bg-muted); color: var(--text); }
.workspace-rail__child.is-active { background: rgba(79, 70, 229, 0.09); color: var(--primary); font-weight: 600; }
/* The iam-admin top sub-nav was moved into the Workspace rail — hide it in-page. */
#iam-admin-tab .settings-subnav { display: none; }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  box-sizing: border-box;   /* include the 1px bottom border so it equals the topbar */
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}

.sidebar-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-logo {
  width: auto;
  height: 1.4em;
  max-width: 2.4em;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}
/* App-mark ↔ org-logo swap in the sidebar brand: a slow coin-flip (rotateY); the
   image src is swapped at the edge-on midpoint by features/org/brandSwap.js. */
@keyframes brand-logo-flip {
  0%   { transform: perspective(320px) rotateY(0deg); }
  50%  { transform: perspective(320px) rotateY(90deg); }
  100% { transform: perspective(320px) rotateY(0deg); }
}
.brand-logo--flip { animation: brand-logo-flip 0.7s ease-in-out; }

.panel-toggle {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.panel-toggle:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.section-tabs {
  display: flex;
  gap: 0;
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}

.section-tab {
  flex: 1;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--text-subtle);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.section-tab:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.section-tab.active {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}

.sidebar-section {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sidebar-section.active {
  display: flex;
  flex-direction: column;
  /* Tight inter-button gap per the 2026-05-30 sidebar simplification —
     simple buttons with minimum gap. The expandable groups carry no
     extra margin so their summaries sit flush with the buttons above. */
  gap: 1px;
  padding: 4px 6px;
}

/* Unified sidebar: one toolbar with the "+ New" button + the single global
   search box that searches every type. */
.sidebar-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 10px 6px;
}
.new-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.new-button:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.new-button .plus {
  font-size: 1rem;
  font-weight: 600;
}
.global-search-wrap {
  flex: 1;
  min-width: 0;
}
.global-search {
  width: 100%;
}

/* "+ New" popup — pick what to start (Chat / Agent / Task plan / …). */
.new-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  padding: 16px;
}
.new-menu-overlay[hidden] {
  display: none;
}
.new-menu-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.new-menu-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 14px;
  color: var(--text);
}
.new-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.new-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-muted);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  font-size: 0.88rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
.new-menu-item:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.new-menu-item:active {
  transform: translateY(1px);
}
.new-menu-emoji {
  font-size: 1.2rem;
  line-height: 1;
}

.sidebar-action {
  padding: 12px 10px 6px;
}

.new-chat-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}

.new-chat-button:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-strong) !important;
}

.new-chat-button .plus {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
}

.chat-history-search-wrap {
  padding: 4px 8px 0;
}

.chat-history-search {
  width: 100%;
  padding: 6px 10px;
  font-size: 0.82rem;
  line-height: 1.3;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.chat-history-search::placeholder {
  color: var(--text-faint);
}

.chat-history-search:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.chat-history-heading {
  padding: 6px 12px 2px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.chat-history-list {
  padding: 1px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.chat-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 4px 5px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--text-muted);
  transition: background 0.12s ease, color 0.12s ease;
}

.chat-history-row-title {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-history-row-delete {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
  cursor: pointer;
}

.chat-history-row:hover .chat-history-row-delete,
.chat-history-row:focus-within .chat-history-row-delete {
  opacity: 1;
}

.chat-history-row-delete:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.06));
  color: var(--danger, #c0392b);
}

/* Recents rows: name + View / Edit / Delete actions */
.personal-row-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.personal-row-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.personal-row:hover .personal-row-actions,
.personal-row:focus-within .personal-row-actions {
  opacity: 1;
}
.personal-row-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}
.personal-row-act:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.06));
  opacity: 1;
}
.personal-row-act--danger:hover {
  color: var(--danger, #c0392b);
}

.chat-history-row:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.chat-history-row.active {
  background: var(--accent-soft);
  color: var(--text);
}

.chat-history-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.chat-history-row small {
  display: none;
}

.empty-state.small {
  padding: 8px 10px;
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-faint);
  line-height: 1.45;
}
/* Inline anchors inside empty-state nudges — let the call-to-action read
   as a link without redefining anchor styles globally for `.muted` text. */
.empty-state.small a {
  color: var(--accent, #38a);
  text-decoration: none;
}
.empty-state.small a:hover {
  text-decoration: underline;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 8px;
  /* No scroller here — the Learn list (the only tall thing) caps + scrolls
     itself, so the footer doesn't add a second scrollbar. */
}

.tab-footer {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: var(--text-muted) !important;
}

.tab-footer .cog {
  font-size: 0.95rem;
}

/* Learn accordion (above Settings) */

.learn-accordion {
  margin-bottom: 4px;
}

.learn-summary {
  list-style: none;
  cursor: pointer;
}

.learn-summary::-webkit-details-marker {
  display: none;
}

.learn-chevron {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}

.learn-accordion[open] .learn-chevron {
  transform: rotate(90deg);
}

.learn-sublist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 4px;
  /* The Learn list has many entries; cap its height when expanded and keep one
     default vertical scrollbar always shown so it scrolls in place instead of
     pushing the Report/Settings items off-screen. This is the only scroller in
     the footer (the footer itself no longer scrolls), so there's just one bar. */
  max-height: 260px;
  overflow-y: scroll;
}

.tab.learn-sub {
  padding-left: 28px;
  font-size: 0.82rem;
}

.tabs {
  padding: 10px 8px;
}

.nav-group {
  margin-bottom: 4px;
}

.nav-group-title {
  padding: 14px 12px 6px;
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tab {
  display: block;
  width: 100%;
  padding: 7px 12px;
  margin-bottom: 1px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  /* Some tabs are <a href="/x" data-tab="x"> for native right-click +
     middle-click support (industry-standard SPA nav); the others are
     <button>. Strip the default anchor underline so both render identically. */
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.tab:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.tab.active {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}

.canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-app);
  overflow: hidden;
  position: relative;
}
/* Content row below the topbar: the Workspace rail (when shown) sits to the left
   of the active tab, like the Hive/Orbit rails. The topbar spans full width above. */
.canvas-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* Descendant (not child) combinator: the tabs sit inside #app-tabs (display:contents),
   so `.canvas > .tab-content` would not match. */
.canvas .tab-content.active {
  flex: 1;
  min-height: 0;   /* let the tab + its inner rails scroll instead of growing */
  overflow-y: auto;
}

.canvas-header {
  padding: 6px 24px;
  min-height: 64px;        /* match the sidebar logo header + topbar */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.canvas-header h1 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Only the dynamic project labels remain (descriptions removed); keep them tight. */
.canvas-header p {
  margin: 2px 0 0;
  color: var(--text-subtle);
  font-size: 0.8rem;
}

.canvas-header + * {
  margin-top: 10px;
}
/* In the flex-column module tabs (Hive/Orbit/Docs/Flux) the canvas-header is a
   flush header, so the rail/content sits directly beneath it — no 10px gap. */
#hive-tab .canvas-header + *,
#orbit-tab .canvas-header + *,
#docs-tab .canvas-header + *,
#flux-tab .canvas-header + * {
  margin-top: 0;
}

.tab-content {
  display: none;
  padding: 24px 28px;
}

.tab-content.active {
  display: block;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.canvas-area {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 16px;
  padding: 20px;
}

.left-collapsed .sidebar {
  width: 0;
  overflow: hidden;
  border: 0;
}

.topbar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.topbar-toggle:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.left-collapsed .topbar-toggle {
  display: inline-flex;
}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;        /* match the sidebar logo header so top borders align */
  box-sizing: border-box;
  padding: 0 18px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.topbar-spacer {
  flex: 1;
}

.tb-control {
  position: relative;
}

/* Header active-organisation picker (global org selector). A single clean
   control — native chrome reset, fixed height to match the other topbar controls,
   box-sizing so padding never bloats it, ellipsis for long org names. */
/* Custom org picker — a button + menu (native <option> can't hold the org logo
   image), driven by features/org/orgPicker.js. Each item shows the org's uploaded
   logo, or the initial/DNA-swap fallback (features/workspace/orgLogo.js). */
.tb-org { position: relative; display: inline-flex; align-items: center; }
.tb-org-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  max-width: 196px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease;
}
.tb-org-btn:hover { border-color: var(--border-strong); }
.tb-org-btn:focus-visible { border-color: var(--border-strong); box-shadow: 0 0 0 2px var(--focus-ring); outline: none; }
.tb-org-mark { display: inline-flex; flex-shrink: 0; }
.tb-org-name { overflow: hidden; text-overflow: ellipsis; }
.tb-org-chev { flex-shrink: 0; margin-left: auto; font-size: 0.62rem; color: var(--text-faint); }
.tb-org-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  min-width: 224px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 70;
}
.tb-org-menu[hidden] { display: none; }
.tb-org-menu li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.tb-org-menu li:hover { background: var(--accent-soft); }
.tb-org-menu li.is-active { background: var(--accent-soft); color: var(--primary); font-weight: 600; }
.tb-org-menu .tb-org-name { white-space: nowrap; }

/* Cloud & AI settings pane — the moved Provider/Model/Cloud selectors. */
.card-subtle { color: var(--text-subtle); font-size: 0.82rem; margin: 0 0 10px; }
.cloud-ai-control .tb-selector { width: 100%; justify-content: space-between; height: 38px; }

.tb-selector {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tb-selector:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.tb-label {
  color: var(--text-subtle);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tb-value {
  font-weight: 500;
  color: var(--text);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-caret {
  color: var(--text-faint);
  font-size: 0.7rem;
}

.tb-profile-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-surface);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tb-profile-button:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.tb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-surface);
  font-size: 0.74rem;
  font-weight: 600;
}

.tb-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  z-index: 40;
}

.tb-menu-empty {
  padding: 12px;
  color: var(--text-faint);
  font-size: 0.84rem;
  text-align: center;
}

/* ── Notifications bell (topbar) ─────────────────────────────────────────── */
.tb-notif-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tb-notif-button:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.tb-notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e5484d;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

.tb-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 6px;
  color: var(--text-subtle);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tb-notif-readall {
  border: none;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  padding: 0;
}

.tb-notif-readall:hover { text-decoration: underline; }

.tb-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.tb-notif-item:hover {
  background: var(--bg-hover);
}

.tb-notif-item.is-unread {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.tb-notif-icon {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1.3;
}

.tb-notif-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tb-notif-title {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.tb-notif-sub {
  color: var(--text-subtle);
  font-size: 0.78rem;
  line-height: 1.35;
}

.tb-menu .tb-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  margin: 1px 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.tb-menu .tb-menu-item:hover {
  background: var(--bg-hover);
}

.tb-menu .tb-menu-item.active {
  background: var(--accent-soft);
  font-weight: 600;
}

.tb-menu .tb-menu-item.locked {
  /* Locked models stay selectable — clicking shows a friendly error on send.
     Visually they're dimmed so the user understands they need extra setup. */
  color: var(--text-muted);
}

.tb-menu .tb-menu-item.locked .tb-menu-bullet {
  opacity: 0.6;
}

.tb-menu-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-menu-hint {
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--bg-muted);
  color: var(--text-muted);
  cursor: default;
}

/* "Available" — user has a key for this provider. Green-tinted, calm. */
.tb-menu-hint-available {
  color: #14803c;
  background: rgba(20, 128, 60, 0.10);
  border-color: rgba(20, 128, 60, 0.22);
}

/* "Add API key" — actionable; clicking jumps to the API-keys page. */
.tb-menu-hint-add-key {
  color: #1e6fbf;
  background: rgba(30, 111, 191, 0.10);
  border-color: rgba(30, 111, 191, 0.28);
  cursor: pointer;
}

.tb-menu-hint-add-key:hover,
.tb-menu-hint-add-key:focus-visible {
  background: rgba(30, 111, 191, 0.18);
  color: #154e8f;
  outline: none;
}

/* "Upgrade to Pro" — actionable; clicking jumps to the Plans page. */
.tb-menu-hint-upgrade {
  color: #8a4b00;
  background: rgba(204, 102, 0, 0.10);
  border-color: rgba(204, 102, 0, 0.28);
  cursor: pointer;
}

.tb-menu-hint-upgrade:hover,
.tb-menu-hint-upgrade:focus-visible {
  background: rgba(204, 102, 0, 0.18);
  color: #6a3a00;
  outline: none;
}

.tb-menu-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border-radius: 5px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 600;
  flex-shrink: 0;
}

.tb-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: var(--text-faint);
  font-size: 0.6rem;
}

.tb-profile-menu {
  min-width: 280px;
}

.tb-profile-header {
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border-muted);
  margin-bottom: 4px;
}

.tb-profile-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.tb-profile-email {
  font-size: 0.8rem;
  color: var(--text-subtle);
  margin-top: 2px;
}

.tb-profile-plan {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tb-menu-section {
  padding: 4px 0;
  border-top: 1px solid var(--border-muted);
}

.tb-menu-section:first-of-type {
  border-top: 0;
}

.tb-menu-item-danger {
  color: var(--danger) !important;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.card h3,
.card-title {
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.empty-state {
  margin: 0;
  color: var(--text-subtle);
  font-size: 0.85rem;
}

.saved-chat-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.saved-chat-row:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.saved-chat-row span {
  font-weight: 500;
  font-size: 0.86rem;
}

.saved-chat-row small {
  margin-top: 3px;
  color: var(--text-subtle);
  font-size: 0.74rem;
}

.chat-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);
  min-height: 520px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.project-chat-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 40px);
}

.project-chat-shell.compact {
  min-height: 560px;
}

.project-header {
  margin: -20px -20px 20px;
}

.task-builder-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(460px, 1.4fr);
  gap: 20px;
  align-items: stretch;
}

.architecture-panel {
  min-height: 560px;
  padding: 18px;
  border: 1px solid #dedbd2;
  border-radius: 12px;
  background: #ffffff;
  overflow: auto;
}

.architecture-diagram {
  min-width: 980px;
}

.flow-reference-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #d8d5ca;
  border-radius: 10px;
  background: #f7f7f4;
  color: #29312c;
  font-size: 0.86rem;
}

.flow-reference-header div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.flow-reference-header span {
  color: #5d655f;
}

.architecture-lane {
  display: flex;
  justify-content: center;
}

.architecture-arrow {
  padding: 10px 0;
  color: #68716b;
  text-align: center;
  font-size: 1.4rem;
}

.architecture-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 14px;
}

.architecture-flow {
  display: grid;
  gap: 10px;
}

.flow-layer {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 12px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid #dcd9ce;
  border-radius: 10px;
  background: #ffffff;
}

.flow-layer-title {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px;
  border-radius: 8px;
  color: #1f2e27;
  font-size: 0.88rem;
  font-weight: 800;
  outline: none;
}

.flow-components {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.flow-node {
  min-height: 58px;
  margin-bottom: 0;
  font-size: 0.78rem;
}

.flow-input .flow-layer-title,
.flow-stakeholders .flow-layer-title {
  background: #eff6ff;
  border: 1px solid #cfe0f7;
}

.flow-governance .flow-layer-title {
  background: #fff7e8;
  border: 1px solid #ead8b8;
}

.flow-intelligence .flow-layer-title {
  background: #edf8ef;
  border: 1px solid #cddfcf;
}

.flow-orchestration .flow-layer-title {
  background: #eef5ff;
  border: 1px solid #cddcf5;
}

.flow-department .flow-layer-title {
  background: #fff1e8;
  border: 1px solid #efd0bd;
}

.flow-runtime .flow-layer-title,
.flow-tools .flow-layer-title {
  background: #f0f8eb;
  border: 1px solid #d5e5cc;
}

.flow-communication .flow-layer-title,
.flow-memory .flow-layer-title {
  background: #f4efff;
  border: 1px solid #dbd0ef;
}

.flow-learning .flow-layer-title {
  background: #fff0f6;
  border: 1px solid #efccdb;
}

.flow-infrastructure .flow-layer-title {
  background: #f2f5f8;
  border: 1px solid #d5dce3;
}

.architecture-grid section {
  padding: 12px;
  border: 1px solid #e2dfd5;
  border-radius: 10px;
  background: #fafaf7;
}

.architecture-grid h3 {
  margin: 0 0 10px;
  color: #26342d;
  font-size: 0.9rem;
}

.architecture-node {
  min-height: 44px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.4;
  outline: none;
  overflow-wrap: anywhere;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.architecture-node:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.input-node {
  width: min(520px, 100%);
  background: #edf6f0;
  border-color: #c9d8cf;
  text-align: center;
  font-weight: 700;
}

.step-node {
  border-color: #d8dfed;
  background: #f8faff;
}

.memory-node {
  border-color: #ded8ea;
  background: #fbf9ff;
}

.tool-node {
  border-color: #e6dccb;
  background: #fffbf4;
}

#custom-task-card {
  display: none;
}

.home-chat {
  /* Full canvas width so the inner `.chat-messages` scrollbar lands at the
     canvas's right edge (not at the inner 820px column boundary). The
     820px content column is enforced per-child (bubbles, composer,
     sticky question strip) via max-width + margin:auto below. */
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.home-chat > .chat-active-question,
.home-chat > .chat-form {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.home-chat .chat-message {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.home-brand {
  margin-bottom: 18px;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.chat-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 16px;
  align-items: end;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 24px;
  background: transparent;
}

/* Bubbles span the same column as the composer below — full width of the
   .home-chat container, no per-side max-width, no margin-auto. That keeps
   the user prompt, the assistant reply, and the input box all sharing the
   same left + right edge (matches ChatGPT / Claude layouts). */
.chat-message {
  width: 100%;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  box-sizing: border-box;
}

.chat-message.user {
  background: var(--bg-muted);
  border-color: var(--border);
}

.message-role {
  margin-bottom: 4px;
  color: var(--text-subtle);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chat-message.assistant .message-role {
  display: none;
}

.message-text {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Streaming cursor: small block-cursor character appended at the end of the
   assistant bubble while it's filling from the SSE stream. Blinks at a slow
   rate so it's clearly an "in progress" indicator, not part of the reply. */
.streaming-cursor {
  display: inline-block;
  width: 0.45em;
  margin-left: 1px;
  color: var(--text-subtle);
  animation: streaming-cursor-blink 1s steps(2, start) infinite;
  vertical-align: baseline;
  opacity: 0.6;
}

@keyframes streaming-cursor-blink {
  to { visibility: hidden; }
}

.markdown-body > :first-child {
  margin-top: 0;
}
.markdown-body > :last-child {
  margin-bottom: 0;
}
.markdown-body p {
  margin: 0 0 0.6em;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  margin: 1em 0 0.4em;
  font-weight: 600;
  line-height: 1.3;
}
.markdown-body h1 { font-size: 1.25rem; }
.markdown-body h2 { font-size: 1.12rem; }
.markdown-body h3 { font-size: 1rem; }
.markdown-body h4 { font-size: 0.95rem; }
.markdown-body ul,
.markdown-body ol {
  margin: 0 0 0.6em;
  padding-left: 1.5em;
}
.markdown-body li {
  margin-bottom: 0.25em;
}
.markdown-body li > p {
  margin: 0;
}
.markdown-body a {
  color: var(--accent, #2563eb);
  text-decoration: underline;
}
.markdown-body strong { font-weight: 600; }
.markdown-body em { font-style: italic; }
.markdown-body blockquote {
  margin: 0 0 0.6em;
  padding: 0.3em 0.9em;
  border-left: 3px solid var(--border);
  color: var(--text-subtle);
}
.markdown-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  padding: 0.1em 0.35em;
  background: var(--bg-muted);
  border-radius: 4px;
}
.markdown-body pre {
  margin: 0 0 0.7em;
  padding: 0.7em 0.9em;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.45;
}
.markdown-body pre code {
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: inherit;
}
.markdown-body table {
  border-collapse: collapse;
  margin: 0 0 0.7em;
  font-size: 0.88em;
}
.markdown-body th,
.markdown-body td {
  border: 1px solid var(--border);
  padding: 0.35em 0.6em;
  text-align: left;
}
.markdown-body th {
  background: var(--bg-muted);
  font-weight: 600;
}
.markdown-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1em 0;
}

.chat-form {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-form:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.chat-form textarea {
  display: block;
  width: 100%;
  min-height: 76px;
  padding: 4px 2px 8px;
  border: 0;
  border-radius: 0;
  outline: none;
  resize: vertical;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  background: transparent;
}

/* ---- Modern chat composer (ChatGPT / Claude / Cursor style) ----
   Used by the main chat tab. The shared `.chat-form` above stays the
   default; this class tightens it into a single pill-shaped box with a
   single-line auto-growing textarea and a circular send button. */
.chat-form-compact {
  padding: 10px 12px;
  border-radius: 18px;
}

/* Top-right corner of the composer: persistent AI-generated disclaimer
   (left of the row, faint) and the active model · provider tag (right).
   Both stay visible at the same tiny size so the user always knows which
   model is answering and that the reply is AI-generated. */
/* Composer top row: agent (left) · AI-generated notice (center) · model (right),
   all the same size and on one line. Grid with equal side columns keeps the
   center notice truly centered regardless of the side widths. */
.composer-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 0 2px 6px;
  min-height: 14px;
  font-size: 0.66rem;
  line-height: 1.2;
  color: var(--text-faint);
}

.composer-topbar > * {
  min-width: 0; /* allow the side cells to ellipsis instead of pushing center */
}

.composer-topbar > #chat-agent-label {
  justify-self: start;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-topbar > #chat-ai-disclaimer {
  justify-self: center;
  text-align: center;
}

.composer-topbar > #chat-active-model {
  justify-self: end;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-meta-notice {
  letter-spacing: 0.02em;
  font-style: italic;
  opacity: 0.75;
}

.chat-active-model {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  line-height: 1.2;
  text-align: right;
}

.chat-active-model[hidden] {
  display: none;
}

.chat-form-compact textarea {
  min-height: 36px;
  max-height: 240px;     /* ~10 lines before scrolling */
  padding: 6px 4px;
  resize: none;          /* no visible drag handle — JS handles auto-grow */
  overflow-y: auto;
  /* Use modern field-sizing where supported so the textarea grows with
     content without JS. Falls back to the JS auto-grow we wire in chat.js. */
  field-sizing: content;
}

.composer-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex: 0 0 auto;
}

.composer-icon-button:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-strong);
}

/* Send button — solid accent, white icon. Pushed to the far right via the
   image-preview's `flex: 1` (existing rule). */
.send-icon-button {
  margin-left: auto;
  background: var(--accent);
  color: var(--bg-surface);
  border-color: var(--accent);
}

.send-icon-button:hover:not(:disabled) {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}

.send-icon-button:disabled {
  background: var(--bg-muted);
  border-color: var(--border);
  color: var(--text-faint);
  cursor: not-allowed;
}

/* While a request is in-flight, drop the icon opacity slightly and disable
   pointer events. Same visual contract as the .ready / .needs-config classes
   updateSendButtonState already sets — both go through .disabled, so this
   only adds a busy-state visual without re-implementing the gating. */
.send-icon-button.is-sending {
  opacity: 0.6;
}

/* The legacy `.upload-control` square is overridden by `.composer-icon-button`
   geometry (border-radius: 50%) — re-state it here so the rule order matches
   the order in this file regardless of which class wins specificity-wise. */
.chat-form-compact .upload-control {
  width: 34px;
  height: 34px;
  font-size: 1rem;
  border-radius: 50%;
}

.chat-form textarea::placeholder {
  color: var(--text-faint);
}

.chat-form textarea:focus,
.chat-form textarea:focus-visible {
  border: 0;
  outline: none;
  box-shadow: none;
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
}

.upload-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 1.2rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.upload-control:hover {
  background: var(--bg-hover);
  color: var(--text);
}

#chat-image-input {
  display: none;
}

.image-preview {
  display: flex;
  flex: 1;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.image-preview span {
  max-width: 150px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Per-message temporary knowledge (Stage D) — collapsible panel above the
   composer actions + a count badge on its toggle button. */
.chat-ref-panel {
  margin: 6px 0;
}

.chat-ref-panel textarea {
  width: 100%;
  resize: vertical;
  min-height: 2.6rem;
  padding: 6px 8px;
  border: 1px solid var(--border, #d0d0d0);
  border-radius: 8px;
  background: var(--bg-input, #fff);
  font: inherit;
  font-size: 0.82rem;
}

#chat-ref-button {
  position: relative;
}

.composer-icon-button.has-attachment {
  color: var(--accent, #4f46e5);
}

.chat-ref-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--accent, #4f46e5);
  color: #fff;
  font-size: 0.62rem;
  line-height: 15px;
  text-align: center;
}

.compact-model {
  width: 168px;
  min-height: 38px;
  padding: 8px 10px;
}

.hidden-model-select {
  display: none;
}

.model-picker {
  position: relative;
}

.model-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.model-icon-button:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.model-menu {
  position: absolute;
  right: 0;
  bottom: 46px;
  width: 240px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  z-index: 20;
}

.model-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.model-menu-item:hover {
  background: var(--bg-hover);
}

.model-menu-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  border-radius: 6px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 800;
}

/* Legacy #send-chat rules removed — the button now uses .composer-icon-button
   + .send-icon-button (circular, modern). Old .ready / .needs-config classes
   set by updateSendButtonState still work via the disabled attribute path. */
#send-chat {
  margin-top: 0;
}

.home-chat .model-status {
  display: none;
}

.settings-block {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.settings-block button {
  width: 100%;
}

#api-key-status {
  margin: 8px 0 0;
  color: var(--warn);
  font-size: 0.78rem;
}

#api-key-status.ready {
  color: var(--success);
}

.reference-block {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.reference-block h4 {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reference-block img {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}

.reference-block p {
  margin: 10px 0 0;
  color: var(--text-subtle);
  font-size: 0.8rem;
  line-height: 1.5;
}

label {
  display: block;
  margin: 12px 0 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

input,
textarea,
select {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--bg-surface);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-faint);
}

/* Inline filter select (e.g. the activity feed's module picker) — keeps the global
   token styling but auto-width so it sits beside a heading instead of stretching full. */
.activity-filter-select {
  width: auto;
  max-width: 14rem;
  margin-left: auto;
  font-size: 0.85rem;
  padding: 5px 10px;
}

/* Buttons — a clean, safe reset for EVERY button (no UA chrome, no surprise
   margin/background/colour; typography is kept). The opinionated "primary" fill
   is scoped to BARE, class-less buttons only, so a styled (classed) button never
   inherits a surprise background, margin or hover. Style buttons via a class
   (.primary-button, .ghost-button, …). This is what stops the global look
   bleeding into icon / flex buttons such as the header-search controls. */
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

button:not([class]) {
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg-surface);
  transition: background 0.15s ease, opacity 0.15s ease;
}

button:not([class]):hover {
  background: var(--brand-hover);
}

.model-status {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-subtle);
}

.model-status .error,
.model-status.blocked {
  color: var(--warn);
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.analytics-card,
.layer-card {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

.analytics-card strong,
.layer-card strong {
  display: block;
  color: var(--text-subtle);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.analytics-card > div,
.layer-card > div {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.layer-card {
  margin-bottom: 10px;
}

.task-row {
  display: grid;
  grid-template-columns: 100px 140px 100px 100px 1fr 140px 140px;
  grid-gap: 10px;
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.task-row:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.task-header {
  background: var(--bg-muted);
  border-color: var(--border);
  color: var(--text-subtle);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: default;
  pointer-events: none;
}

.agent-row {
  display: grid;
  grid-template-columns: 160px 120px 1fr;
  grid-gap: 10px;
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.agent-row:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.agent-header {
  background: var(--bg-muted);
  border-color: var(--border);
  color: var(--text-subtle);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: default;
  pointer-events: none;
}

.list-item {
  margin: 6px 0;
  padding: 8px 12px;
  border: 1px solid var(--border-muted);
  border-radius: 6px;
  background: var(--bg-surface);
  font-size: 0.85rem;
  color: var(--text);
}

pre {
  background: var(--bg-muted);
  border: 1px solid var(--border-muted);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text);
}

.error {
  color: var(--danger);
}

.success {
  color: var(--success);
}

@media (max-width: 1200px) {
  .properties {
    width: 250px;
  }
}

@media (max-width: 900px) {
  .sidebar {
    width: 200px;
  }
  .properties {
    width: 200px;
  }
  .chat-toolbar {
    grid-template-columns: 1fr;
  }
}

.services-list,
.saved-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  transition: border-color 0.15s ease;
}

.service-row:hover {
  border-color: var(--border-strong);
}

.service-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-muted);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.service-meta strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.service-meta p {
  margin: 3px 0 8px;
  color: var(--text-subtle);
  font-size: 0.84rem;
  line-height: 1.5;
}

.service-tags {
  display: flex;
  gap: 6px;
}

.tag {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tag-muted {
  color: var(--text-faint);
}

.saved-task-row {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  transition: border-color 0.15s ease;
}

.saved-task-row:hover {
  border-color: var(--border-strong);
}

.saved-task-step {
  font-size: 0.88rem;
  color: var(--text);
}

.saved-task-row small {
  display: block;
  margin-top: 6px;
  color: var(--text-faint);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Auth overlay + governance UI */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(4px);
}

.auth-overlay[hidden] {
  display: none;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 22px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.auth-close:hover {
  opacity: 0.9;
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.auth-brand .brand-logo {
  width: auto;
  height: 30px;
}

/* ── Public front door (long-form marketing home) ───────────────────────────
   Slate-dark landing shown to signed-out visitors at the root path. Sits over
   the app shell like the auth overlay and hides the moment a CTA opens the
   sign-in card. Long n8n-style layout (sticky nav → hero → sections → footer)
   on the brand slate palette, so it reads as SMAIVIZ regardless of the app's
   light chrome. */
.home-landing {
  position: fixed;
  inset: 0;
  z-index: 95;
  overflow-y: auto;
  /* The marketing home is a self-contained LIGHT surface: every text colour,
     card and border below is tuned for a soft, cool light background. Pin the
     background and color-scheme to fixed light values so it never inherits the
     app theme — otherwise it would invert under [data-theme='dark'] (e.g. Safari
     with the OS in dark mode) and wash out. */
  /* Distinct, business-friendly palette — a confident teal primary with warm
     amber/coral accents (deliberately NOT the indigo/violet AI-app cliché).
     Scoped to the landing so the in-app theme is untouched. */
  --home-primary: #0f766e;          /* teal 700 — primary actions */
  --home-primary-hover: #115e59;    /* teal 800 */
  --home-primary-soft: rgba(15, 118, 110, 0.10);
  --home-accent: #b45309;           /* amber 700 — warm accent text (AA on light) */
  --home-border: rgba(15, 70, 65, 0.12);
  background: #f5f8f7;
  color: #45565a;
  color-scheme: light;
  scroll-behavior: smooth;
}

.home-landing[hidden] {
  display: none;
}

/* Pre-paint front-door guard (class set by the inline <head> script): for a
   likely signed-out visitor at "/", show the landing and hide the app shell
   immediately so the console never flashes before initAuth mounts the landing.
   initAuth removes .pre-landing once auth state is known. */
html.pre-landing .app-layout {
  display: none !important;
}

html.pre-landing #home-landing[hidden] {
  display: block;
}

/* Sticky nav */
.home-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  background: rgba(245, 248, 247, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.home-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0f172a;
  text-decoration: none;
}

.home-nav-brand .brand-logo {
  height: 1.55em;
  width: auto;
}

.home-nav-links {
  display: flex;
  gap: 24px;
  flex: 1;
  margin-left: 12px;
}

.home-nav-links a {
  color: #475569;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.home-nav-links a:hover {
  color: #0f172a;
}

.home-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-nav-signin {
  padding: 8px 16px;
  background: none;
  border: 1px solid var(--home-primary);
  border-radius: var(--radius-pill);
  color: var(--home-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.home-nav-signin:hover {
  background: var(--home-primary-soft);
  color: var(--home-primary-hover);
}

.home-nav-signin:focus-visible,
.home-cta:focus-visible,
.home-card-cta:focus-visible {
  outline: 2px solid var(--home-primary);
  outline-offset: 2px;
}

/* Brand wordmark (footer) */
.home-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0f172a;
}

.home-brand .brand-logo {
  width: auto;
  height: 1.5em;
}

/* Buttons */
.home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  padding: 12px 24px;
  border: 1px solid var(--home-primary);
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: var(--home-primary);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.home-cta:hover {
  background: var(--home-primary-soft);
  border-color: var(--home-primary-hover);
  color: var(--home-primary-hover);
  transform: translateY(-1px);
}

.home-cta--primary {
  background: var(--home-primary);
  border-color: var(--home-primary);
  color: #fff;
}

.home-cta--primary:hover {
  background: var(--home-primary-hover);
  border-color: var(--home-primary-hover);
  color: #fff;
}

.home-cta--ghost {
  background: transparent;
}

.home-cta--sm {
  min-width: 0;
  padding: 8px 16px;
  font-size: 0.85rem;
}

/* Hero */
.home-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 24px 56px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  background:
    radial-gradient(720px 380px at 12% -8%, rgba(13, 148, 136, 0.10), transparent 60%),
    radial-gradient(680px 360px at 95% 0%, rgba(245, 158, 11, 0.10), transparent 62%);
}

.home-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--home-accent);
}

.home-hero-title {
  margin: 0 0 18px;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.home-hero-sub {
  margin: 0 0 26px;
  max-width: 52ch;
  font-size: 1.08rem;
  line-height: 1.55;
  color: #475569;
}

.home-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.home-hero-link {
  display: inline-block;
  margin-top: 18px;
  color: #334155;
  text-decoration: none;
  font-size: 0.92rem;
}

.home-hero-link:hover {
  color: #0f172a;
}

/* Hero flow visual (original SMAIVIZ pipeline, not an n8n asset) */
.home-hero-visual {
  display: flex;
  justify-content: center;
}

.home-flow {
  width: 100%;
  max-width: 360px;
}

.home-flow-node {
  position: relative;
  margin: 0 0 26px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  font-size: 0.9rem;
  color: #334155;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.home-flow-node:last-child {
  margin-bottom: 0;
}

.home-flow-node::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 2px;
  height: 26px;
  background: linear-gradient(rgba(100, 116, 139, 0.45), rgba(100, 116, 139, 0.06));
  transform: translateX(-50%);
}

.home-flow-node:last-child::after {
  display: none;
}

.home-flow-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--home-primary);
}

.home-flow-node--agent {
  border-color: rgba(13, 148, 136, 0.45);
}

.home-flow-node--gate {
  border-color: rgba(217, 119, 6, 0.4);
}

.home-flow-node--gate .home-flow-kicker {
  color: #d97706;
}

.home-flow-node--output {
  border-color: rgba(5, 150, 105, 0.4);
}

.home-flow-node--output .home-flow-kicker {
  color: #059669;
}

/* Sections */
.home-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 24px;
}

.home-section--feature {
  margin: 24px auto;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 20px;
}

.home-section-title {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
  text-align: center;
}

.home-section-sub {
  margin: 0 auto 36px;
  max-width: 60ch;
  font-size: 1.02rem;
  line-height: 1.55;
  color: #475569;
  text-align: center;
}

/* Card / feature grids */
.home-cards {
  display: grid;
  gap: 18px;
}

.home-cards--3 {
  grid-template-columns: repeat(3, 1fr);
}

.home-cards--4 {
  grid-template-columns: repeat(4, 1fr);
}

.home-cards--5 {
  grid-template-columns: repeat(5, 1fr);
}

.home-card,
.home-feature {
  padding: 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Module cards stack their content so the Explore CTA can sit at the bottom,
   keeping the buttons aligned across cards of different text lengths. */
.home-card {
  display: flex;
  flex-direction: column;
}

.home-card-cta {
  margin-top: auto;
  padding-top: 14px;
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--home-primary);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

.home-card-cta:hover {
  text-decoration: underline;
}

/* Colourful, catchy module cards — a distinct accent per card from a curated,
   harmonious set (no indigo/violet). Cards stay white + clean so it reads
   business-friendly, with the colour as a top bar + matching Explore link. */
.home-cards--5 .home-card {
  border-top: 3px solid var(--home-primary);
}
.home-cards--5 .home-card:nth-child(1) { border-top-color: #0f766e; } /* teal */
.home-cards--5 .home-card:nth-child(2) { border-top-color: #d97706; } /* amber */
.home-cards--5 .home-card:nth-child(3) { border-top-color: #e2674a; } /* coral */
.home-cards--5 .home-card:nth-child(4) { border-top-color: #0284c7; } /* sky */
.home-cards--5 .home-card:nth-child(5) { border-top-color: #15803d; } /* green */
.home-cards--5 .home-card:nth-child(1) .home-card-cta { color: #0f766e; }
.home-cards--5 .home-card:nth-child(2) .home-card-cta { color: #b45309; }
.home-cards--5 .home-card:nth-child(3) .home-card-cta { color: #c2410c; }
.home-cards--5 .home-card:nth-child(4) .home-card-cta { color: #0369a1; }
.home-cards--5 .home-card:nth-child(5) .home-card-cta { color: #15803d; }

.home-cards--compact .home-feature {
  padding: 18px;
}

.home-card:hover,
.home-feature:hover {
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.home-card h3,
.home-feature h3 {
  margin: 10px 0 8px;
  font-size: 1.05rem;
  color: #0f172a;
}

.home-card p,
.home-feature p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #475569;
}

.home-card-tag {
  display: inline-block;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--home-primary);
  background: var(--home-primary-soft);
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 999px;
}

/* Split (text + code) */
.home-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.home-split-text .home-section-title,
.home-split-text .home-section-sub {
  margin-left: 0;
  text-align: left;
}

.home-bullets {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.home-bullets li {
  position: relative;
  padding-left: 26px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #334155;
}

.home-bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #059669;
  font-weight: 700;
}

.home-code {
  margin: 0;
  padding: 20px;
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #1e293b;
  overflow-x: auto;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.home-code-c { color: #64748b; }
.home-code-k { color: #0f766e; }
.home-code-f { color: #0369a1; }
.home-code-n { color: #b45309; }

.home-enterprise-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* "How the modules work together" — numbered step flow */
.home-steps {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.home-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.home-step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: var(--home-primary);
}

.home-step-tag {
  display: block;
  margin-bottom: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--home-primary);
}

.home-step p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #475569;
}

.home-together-note {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
  font-size: 1.02rem;
  font-weight: 500;
  color: #334155;
}

/* Final CTA */
.home-finalcta {
  max-width: 1080px;
  margin: 24px auto;
  padding: 72px 24px 80px;
  text-align: center;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.10), rgba(245, 158, 11, 0.10));
  border: 1px solid var(--home-border);
  border-radius: 20px;
}

.home-finalcta h2 {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.home-finalcta p {
  margin: 0 0 28px;
  font-size: 1.05rem;
  color: #475569;
}

.home-finalcta .home-hero-cta {
  justify-content: center;
}

/* Footer */
.home-footer {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: #eef4f2;
}

.home-footer-top {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px 32px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}

.home-footer-brand .home-brand {
  margin-bottom: 12px;
}

.home-footer-tagline {
  margin: 0;
  max-width: 30ch;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #64748b;
}

.home-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-footer-col h4 {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #334155;
}

.home-footer-col a,
.home-footer-link {
  font: inherit;
  font-size: 0.9rem;
  color: #64748b;
  text-decoration: none;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.home-footer-col a:hover,
.home-footer-link:hover {
  color: #0f172a;
}

/* Contact-sales line: spans the Product + Resources columns, sitting at the
   bottom of the footer columns (full width once the grid collapses on mobile). */
.home-footer-sales {
  grid-column: 2 / 4;
  align-self: end;
  font-size: 0.9rem;
  color: #64748b;
}

.home-footer-sales a {
  color: inherit;
  text-decoration: none;
}

.home-footer-sales a:hover {
  text-decoration: underline;
}

.home-footer-bottom {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px 28px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #64748b;
}

/* Status pill (footer) */
.home-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #475569;
}

.home-status[hidden] {
  display: none;
}

.home-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  animation: home-status-pulse 2.4s ease-in-out infinite;
}

.home-status--degraded .home-status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.home-status--down .home-status-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.home-status-link {
  margin-left: 4px;
  color: #334155;
  text-decoration: underline;
}

.home-status-link:hover {
  color: #0f172a;
}

@keyframes home-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Responsive */
@media (max-width: 860px) {
  .home-hero {
    grid-template-columns: 1fr;
    padding-top: 48px;
  }
  .home-split {
    grid-template-columns: 1fr;
  }
  .home-cards--3,
  .home-cards--4,
  .home-cards--5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .home-footer-sales {
    grid-column: 1 / -1;
  }
  .home-nav-links {
    display: none;
  }
}

@media (max-width: 520px) {
  .home-cards--3,
  .home-cards--4,
  .home-cards--5 {
    grid-template-columns: 1fr;
  }
  .home-footer-top {
    grid-template-columns: 1fr;
  }
  .home-cta {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-landing {
    scroll-behavior: auto;
  }
  .home-status-dot {
    animation: none;
  }
}

/* ── Public docs assistant (home "Chat") ────────────────────────────────────
   A small Q&A modal opened by the landing's Chat CTA. No AI, no backend — it
   answers from the in-page FAQ/Overview content (controllers/homeChat.js).
   NB: uses a `docs-chat` prefix, NOT `home-chat` — the app's own chat shell
   already uses `.home-chat` (see line ~1466), so the names must not collide. */
/* Floating launcher icon (bottom-right). Lives inside #home-landing, so it is
   only present for signed-out visitors. */
.docs-chat-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.5);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}

.docs-chat-launcher:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}

.docs-chat-launcher[hidden] {
  display: none;
}

/* LinkedIn-style docked panel (bottom-right). No backdrop — the page behind
   stays fully visible and interactive. */
.docs-chat {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 121;
  display: flex;
  flex-direction: column;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 110px);
  background: #0f172a;
  border: 1px solid rgba(226, 232, 240, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.docs-chat[hidden] {
  display: none;
}

.docs-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.08);
}

.docs-chat-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #f8fafc;
}

.docs-chat-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0; /* cancel the global button{margin-top:12px} leak */
  padding: 0;
  background: rgba(226, 232, 240, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.16);
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.docs-chat-close:hover {
  background: rgba(226, 232, 240, 0.16);
  color: #fff;
}

.docs-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.docs-chat-msg {
  display: flex;
}

.docs-chat-msg--user {
  justify-content: flex-end;
}

.docs-chat-bubble {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.docs-chat-msg--bot .docs-chat-bubble {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.10);
  color: #e2e8f0;
  border-bottom-left-radius: 4px;
}

.docs-chat-msg--user .docs-chat-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.docs-chat-mail {
  color: #a5b4fc;
  text-decoration: underline;
}

.docs-chat-mail:hover {
  color: #fff;
}

/* Collapsible "Suggested questions" disclosure — collapsed by default so the
   chips don't occupy the chat area; expands on click. */
.docs-chat-suggest {
  border-top: 1px solid rgba(226, 232, 240, 0.08);
}

.docs-chat-suggest-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  list-style: none;
  font-size: 0.8rem;
  color: #94a3b8;
  cursor: pointer;
  user-select: none;
}

.docs-chat-suggest-toggle::-webkit-details-marker {
  display: none;
}

.docs-chat-suggest-toggle::before {
  content: '▸';
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

.docs-chat-suggest[open] .docs-chat-suggest-toggle::before {
  transform: rotate(90deg);
}

.docs-chat-suggest-toggle:hover {
  color: #e2e8f0;
}

.docs-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 12px;
}

.docs-chat-chip {
  margin: 0; /* cancel the global button{margin-top:12px} leak */
  padding: 6px 12px;
  font-size: 0.8rem;
  color: #cbd5e1;
  background: rgba(226, 232, 240, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.16);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.docs-chat-chip:hover {
  background: rgba(226, 232, 240, 0.14);
  color: #fff;
}

.docs-chat-form {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(226, 232, 240, 0.08);
}

.docs-chat-input {
  flex: 1;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.9rem;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.18);
  border-radius: 10px;
}

.docs-chat-input::placeholder {
  color: #64748b;
}

.docs-chat-input:focus {
  outline: none;
  border-color: rgba(129, 140, 248, 0.6);
}

/* Circular icon Send button. flex:none keeps it square; margin:0 cancels the
   global button{margin-top:12px} leak so it aligns with the input. */
.docs-chat-send {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.docs-chat-send:hover {
  background: var(--primary-hover);
}

/* ── Cookie consent — banner + preference center ────────────────────────────
   App-wide first-party consent UI (controllers/cookies.js). Slate-dark so it
   reads consistently over both the light app and the dark landing. Sits above
   app chrome (banner 800 / prefs 900); the cookie-policy modal (.doc-modal,
   1000) opens above both. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  /* One step lighter than the home page (#0f172a) so the bar stands apart and
     reads as an action the visitor needs to take. */
  background: #1e293b;
  border-top: 1px solid rgba(226, 232, 240, 0.18);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
  color: #e2e8f0;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cookie-banner-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #cbd5e1;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-link {
  color: #a5b4fc;
  text-decoration: underline;
}

.cookie-link:hover {
  color: #fff;
}

/* Buttons — Accept all and Reject non-essential carry equal visual weight. */
.cookie-btn {
  margin: 0;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cookie-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.cookie-btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.cookie-btn--outline {
  background: transparent;
  border-color: rgba(226, 232, 240, 0.4);
  color: #e2e8f0;
}

.cookie-btn--outline:hover {
  background: rgba(226, 232, 240, 0.1);
}

.cookie-btn--ghost {
  background: transparent;
  color: #cbd5e1;
}

.cookie-btn--ghost:hover {
  color: #fff;
  text-decoration: underline;
}

/* Preference center modal */
.cookie-prefs {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 12, 22, 0.6);
}

.cookie-prefs[hidden] {
  display: none;
}

.cookie-prefs-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: min(640px, 88vh);
  background: #0f172a;
  border: 1px solid rgba(226, 232, 240, 0.14);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  color: #e2e8f0;
}

.cookie-prefs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.08);
}

.cookie-prefs-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #f8fafc;
}

.cookie-prefs-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  background: rgba(226, 232, 240, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.16);
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.cookie-prefs-close:hover {
  background: rgba(226, 232, 240, 0.16);
  color: #fff;
}

.cookie-prefs-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

.cookie-prefs-intro {
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #94a3b8;
}

.cookie-cat {
  padding: 14px 0;
  border-top: 1px solid rgba(226, 232, 240, 0.08);
}

.cookie-cat:first-of-type {
  border-top: 0;
}

.cookie-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cookie-cat-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #f8fafc;
}

.cookie-cat-state {
  font-size: 0.75rem;
  font-weight: 600;
  color: #34d399;
}

.cookie-cat-desc {
  margin: 5px 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #94a3b8;
}

.cookie-prefs-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(226, 232, 240, 0.08);
}

/* Toggle switch */
.cookie-switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 40px;
  height: 22px;
  cursor: pointer;
}

.cookie-switch input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.cookie-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.2);
  transition: background 0.15s ease;
}

.cookie-slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f8fafc;
  transition: transform 0.15s ease;
}

.cookie-switch input:checked + .cookie-slider {
  background: var(--primary);
}

.cookie-switch input:checked + .cookie-slider::before {
  transform: translateX(18px);
}

.cookie-switch input:focus-visible + .cookie-slider {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

/* Cookie policy inventory table (partials/cookies.html — light doc page) */
.cookie-table {
  width: 100%;
  margin: 12px 0 8px;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.cookie-table th,
.cookie-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.cookie-table th {
  font-weight: 600;
  color: var(--text);
  background: var(--bg-muted);
}

@media (max-width: 560px) {
  .cookie-banner-actions {
    width: 100%;
  }
  .cookie-btn {
    flex: 1 1 auto;
  }
  .cookie-table {
    display: block;
    overflow-x: auto;
  }
}

/* Appearance (theme) control inside the cookie popup */
.cookie-appearance {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.08);
}

.cookie-appearance-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f8fafc;
}

.cookie-theme {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.16);
  border-radius: 10px;
}

.cookie-theme-opt {
  position: relative;
  cursor: pointer;
}

.cookie-theme-opt input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.cookie-theme-opt span {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 7px;
  font-size: 0.76rem;
  color: #cbd5e1;
  transition: background 0.15s ease, color 0.15s ease;
}

.cookie-theme-opt:hover span {
  color: #fff;
}

.cookie-theme-opt input:checked + span {
  background: var(--primary);
  color: #fff;
}

.cookie-theme-opt input:focus-visible + span {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

.cookie-appearance-note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: #64748b;
}


.auth-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.auth-subtitle {
  margin: 6px 0 22px;
  color: var(--text-subtle);
  font-size: 0.9rem;
  line-height: 1.5;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-muted);
}

.auth-tab {
  padding: 5px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.auth-tab.active {
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field > span {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.auth-field input {
  margin: 0;
  font-size: 0.9rem;
}

.auth-hint {
  display: block;
  margin-top: 6px;
  color: var(--text-subtle);
  font-size: 0.74rem;
  line-height: 1.5;
}

/* Author display:block above would otherwise beat the UA [hidden] rule, so the
   hint stayed visible even when JS set hidden. Make the attribute win. */
.auth-hint[hidden] {
  display: none;
}

/* Honeypot — visually hidden but still rendered so naïve bots fill it.
   Keep off-screen rather than display:none so headless browsers see a real input. */
.auth-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.auth-turnstile {
  margin: 6px 0 2px;
  min-height: 0;
}

.auth-turnstile iframe {
  border: 0;
}

.auth-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(185, 28, 28, 0.08);
  color: var(--danger);
  font-size: 0.82rem;
}

.auth-success {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(22, 101, 52, 0.08);
  color: var(--success);
  font-size: 0.82rem;
}

.auth-field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.auth-field-label-row > span {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.auth-inline-link {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text-subtle);
  font: inherit;
  font-size: 0.74rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.auth-inline-link:hover,
.auth-inline-link:focus-visible {
  color: var(--text);
  background: transparent;
  outline: none;
}

.auth-submit {
  margin: 4px 0 0;
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.auth-submit:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-divider {
  position: relative;
  margin: 14px 0 12px;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.78rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 24px);
  border-top: 1px solid var(--border);
}

.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }

.auth-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  margin: 0 0 12px;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  font-weight: 500;
  font-size: 0.88rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.auth-google:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.auth-google-icon {
  flex-shrink: 0;
}

.auth-google-disabled {
  color: var(--text-subtle);
}

.auth-google-disabled .auth-google-icon {
  opacity: 0.65;
}

.auth-footer {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.74rem;
  text-align: center;
  line-height: 1.6;
}

.doc-link {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.doc-link:hover,
.doc-link:focus-visible {
  color: var(--text);
  outline: none;
}

/* Doc modal (Terms / Privacy / Governance popups) */

.doc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000; /* above the cookie banner (800) + prefs (900) so the policy opens on top */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.doc-modal[hidden] {
  display: none;
}

.doc-modal-card {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
  overflow: hidden;
}

.doc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}

.doc-modal-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.doc-modal-close {
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.doc-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.doc-modal-body {
  padding: 18px 24px 24px;
  overflow-y: auto;
}

.doc-modal-body .doc-callout {
  margin-top: 0;
}

/* The Documentation page is a multi-page `.doc-content` (one page shown at a
   time via a side nav). When it opens in the doc modal as a popup we drop the
   page's own scroll/padding and reveal every page stacked into one scroll. */
.doc-modal-body .doc-content {
  overflow: visible;
  padding: 0;
}
.doc-modal-body .doc-content .doc-page {
  display: block;
  max-width: none;
}

/* Delete-account confirmation modal */

.delete-modal-card {
  width: min(460px, 100%);
}

.delete-modal-card .doc-modal-body {
  padding: 18px 22px 22px;
}

.delete-modal-card label {
  display: block;
  margin: 14px 0 6px;
  font-size: 0.84rem;
  color: var(--text-muted);
  font-weight: 500;
}

.delete-modal-card label code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text);
}

.delete-modal-card input[type="text"] {
  width: 100%;
  margin: 0;
}

.delete-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.delete-modal-actions button {
  margin: 0;
}

.delete-modal-actions .danger-button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Forgot-password + reset-password modals */

.forgot-modal-card {
  width: min(440px, 100%);
}

.forgot-modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px 22px;
}

.forgot-modal-form label {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.forgot-modal-form input {
  margin: 0;
  width: 100%;
}

.forgot-modal-help {
  margin: 0;
  color: var(--text-subtle);
  font-size: 0.82rem;
  line-height: 1.5;
}

.forgot-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.forgot-modal-actions button {
  margin: 0;
}

.consent-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(720px, calc(100% - 32px));
  padding: 14px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

.consent-banner[hidden] {
  display: none;
}

.consent-text {
  flex: 1;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.consent-accept {
  margin: 0;
  padding: 7px 14px;
  font-size: 0.82rem;
}

/* Account + API key cards in Settings */

.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.account-grid > .card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  margin-bottom: 0;
}

.account-grid > .card > .card-title {
  margin: 0 0 6px;
  flex-shrink: 0;
}

.account-grid > .card > .card-help {
  margin: 0 0 16px;
  flex-shrink: 0;
}

.account-grid > .card > .account-summary {
  margin: 0 0 16px;
}

.account-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}

.account-form label {
  margin: 14px 0 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.account-form label:first-of-type {
  margin-top: 0;
}

.account-form input {
  margin: 0;
}

.account-form button[type="submit"] {
  margin: 18px 0 0;
  align-self: flex-start;
}

.account-form .account-status {
  margin: 12px 0 0;
}

.account-grid > .card > .ghost-button,
.account-grid > .card > .danger-button {
  margin-top: auto;
  align-self: flex-start;
}

.account-form input[disabled] {
  background: var(--bg-muted);
  color: var(--text-subtle);
}

.account-status {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
}

.account-status.success {
  background: rgba(22, 101, 52, 0.08);
  color: var(--success);
}

.account-status.error {
  background: rgba(185, 28, 28, 0.08);
  color: var(--danger);
}

.account-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-muted);
  font-size: 0.85rem;
}

.account-row:last-of-type {
  border-bottom: 0;
}

.account-row span {
  color: var(--text-subtle);
}

.account-row strong {
  color: var(--text);
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}

.ghost-button,
.danger-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  /* Some ghost-buttons are <a> elements for native right-click + nav-friendly
     behaviour; strip the default anchor underline so both render identically. */
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ghost-button:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.ghost-button.danger {
  color: var(--danger);
  border-color: rgba(185, 28, 28, 0.3);
}

.ghost-button.danger:hover {
  background: rgba(185, 28, 28, 0.06);
}

.danger-button {
  margin-left: 8px;
  color: var(--danger);
  border-color: rgba(185, 28, 28, 0.3);
}

.danger-button:hover {
  background: rgba(185, 28, 28, 0.06);
}

.card-help {
  margin: -6px 0 12px;
  color: var(--text-subtle);
  font-size: 0.8rem;
  line-height: 1.5;
}

.api-keys-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 840px) {
  .api-keys-layout {
    grid-template-columns: 1fr;
  }
}

.api-key-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.api-key-provider-hint {
  margin: 6px 0 12px;
  padding: 8px 10px;
  background: var(--bg-muted);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.api-key-provider-hint a {
  color: var(--text);
  font-weight: 500;
}

.form-optional {
  color: var(--text-faint);
  font-weight: 400;
  font-size: 0.74rem;
}

.api-key-input-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.api-key-input-row input {
  flex: 1;
}

.api-key-field-row {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.api-key-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* The global `label { margin: 12px 0 6px }` puts vertical air above each
   label. Inside this side-by-side row the field already owns the spacing, so
   neutralize the leading margin to keep the two columns top-aligned. */
.api-key-field > label {
  margin-top: 0;
}

@media (max-width: 480px) {
  .api-key-field-row {
    flex-direction: column;
    gap: 4px;
  }
}

.api-key-reveal {
  margin: 0;
  padding: 0 14px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.api-key-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.api-key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  transition: border-color 0.15s ease;
}

.api-key-row:hover {
  border-color: var(--border-strong);
}

.api-key-meta {
  min-width: 0;
}

.api-key-headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.api-key-headline strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.api-key-provider-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.api-key-last4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-subtle);
  background: transparent;
  padding: 0;
}

.api-key-meta-line {
  display: block;
  margin-top: 4px;
  color: var(--text-subtle);
  font-size: 0.76rem;
}

.api-key-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.api-key-actions .ghost-button {
  padding: 6px 10px;
  font-size: 0.78rem;
}

.api-key-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.api-key-pill.default {
  background: rgba(34, 139, 230, 0.12);
  color: #1e6fbf;
}

.api-key-pill.expires {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.api-key-pill.expired {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.api-key-note {
  margin: 10px 0 4px;
  padding: 8px 12px;
  background: rgba(34, 139, 230, 0.08);
  border: 1px solid rgba(34, 139, 230, 0.18);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.api-key-note > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Hide the native disclosure marker — we provide our own caret. */
.api-key-note > summary::-webkit-details-marker {
  display: none;
}
.api-key-note > summary::marker {
  display: none;
  content: '';
}

.api-key-note > summary::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.6;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.api-key-note[open] > summary::after {
  transform: rotate(-135deg);
}

.api-key-note-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(34, 139, 230, 0.18);
  color: #1e6fbf;
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 18px;
  text-align: center;
}

.api-key-note-summary {
  flex: 1 1 auto;
  min-width: 0;
}

.api-key-note-body {
  margin: 8px 0 0;
  padding-left: 28px;
}

.api-key-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  margin: 10px 0 2px;
  cursor: pointer;
  user-select: none;
}

/* The global `input { width: 100% }` rule would stretch the checkbox into a
   full-width rectangle. Reset to native sizing so the box stays compact. */
.api-key-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--accent, #1e6fbf);
}

.api-key-test-result {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  line-height: 1.4;
}

.api-key-test-result.success {
  color: #14803c;
}

.api-key-test-result.error {
  color: #b91c1c;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent, #1e6fbf);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--accent-strong, #154e8f);
  background: none; /* override the global button:hover dark fill */
}

/* No dark hover-fill on links inside policy docs (tab or modal views). */
.doc-article a:hover,
.doc-modal-body a:hover {
  background: none;
}

/* ---- Plans page ---- */

.plans-page {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers every direct child on the cross axis */
  gap: 18px;
  margin-top: 8px;
}

/* Dev-bypass banner shown only when ENV != 'prod' — the backend's
   /billing/plans payload carries `dev_bypass_enabled` and the JS gates this
   element. Amber/striped so it's impossible to confuse with prod billing. */
.plans-dev-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px dashed rgba(204, 102, 0, 0.45);
  background: repeating-linear-gradient(
    45deg,
    rgba(204, 102, 0, 0.05) 0px,
    rgba(204, 102, 0, 0.05) 8px,
    rgba(204, 102, 0, 0.10) 8px,
    rgba(204, 102, 0, 0.10) 16px
  );
  color: var(--text);
  border-radius: 10px;
  font-size: 0.82rem;
  max-width: 720px;
  align-self: stretch;
}

.plans-dev-pill {
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: #cc6600;
  border-radius: 4px;
}

.plans-page > .plans-section {
  /* the card section needs to stretch back to full width */
  align-self: stretch;
}

/* Claude-style centered pill segmented control. Container is a soft rounded
   capsule; active tab has a raised white surface with a subtle shadow. Used
   for primary in-page category navigation on pricing-style pages. */
.plans-tabs {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  padding: 5px;
  margin: 8px 0 14px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-sizing: border-box;
}

.plans-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  padding: 9px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  outline: none;
  white-space: nowrap;
}

.plans-tab:hover:not(:disabled):not(.active) {
  color: var(--text);
  background: rgba(0, 0, 0, 0.03);
}

.plans-tab:focus-visible {
  outline: 2px solid rgba(30, 111, 191, 0.45);
  outline-offset: 2px;
}

.plans-tab.active {
  background: var(--bg-surface);
  color: var(--text);
  font-weight: 600;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

.plans-tab:disabled {
  color: var(--text-faint);
  cursor: not-allowed;
}

.plans-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 19px;
  padding: 0 7px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  transition: background 0.18s ease, color 0.18s ease;
}

.plans-tab.active .plans-tab-count {
  background: rgba(30, 111, 191, 0.12);
  color: #1e6fbf;
}

@media (max-width: 560px) {
  .plans-tabs {
    width: 100%;
    flex-direction: column;
    border-radius: 14px;
  }
  .plans-tab {
    min-width: 0;
    border-radius: 10px;
  }
}

.plans-section-header {
  margin-bottom: 12px;
}

.plans-section-header h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.plans-section-header p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.plan-card-current {
  border-color: rgba(20, 128, 60, 0.45);
  box-shadow: 0 4px 14px rgba(20, 128, 60, 0.08);
  position: relative;
}

.plan-card-current::before {
  content: 'Current plan';
  position: absolute;
  top: -10px;
  left: 16px;
  padding: 2px 8px;
  background: #14803c;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 999px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  min-height: 380px;
}

.plan-card-featured {
  border-color: rgba(34, 139, 230, 0.45);
  box-shadow: 0 4px 14px rgba(34, 139, 230, 0.08);
  position: relative;
}

.plan-card-featured::before {
  content: 'Most popular';
  position: absolute;
  top: -10px;
  left: 16px;
  padding: 2px 8px;
  background: #1e6fbf;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 999px;
}

.plan-card-header h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.plan-tagline {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.plan-amount {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text);
}

.plan-cadence {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.plan-features li {
  position: relative;
  padding-left: 18px;
  line-height: 1.45;
}

.plan-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #14803c;
  font-weight: 700;
}

.plan-cta {
  margin-top: auto;
  width: 100%;
}

button.plan-cta {
  /* When this is the featured CTA (no ghost-button class on the element), use
     the brand button. The ghost variant inherits from .ghost-button styles. */
  background: #1e6fbf;
  color: #fff;
  border: 1px solid #1e6fbf;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

button.plan-cta:hover:not(:disabled) {
  background: #154e8f;
  border-color: #154e8f;
}

button.plan-cta:disabled {
  background: var(--bg-muted);
  border-color: var(--border);
  color: var(--text-faint);
  cursor: not-allowed;
}

button.ghost-button.plan-cta {
  /* Reset brand styling when the ghost-button class is applied. */
  background: var(--bg-surface);
  color: var(--text);
  border-color: var(--border);
}

button.ghost-button.plan-cta:hover:not(:disabled) {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}

/* ---- Billing page ---- */

.billing-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}

@media (min-width: 720px) {
  .billing-layout {
    grid-template-columns: repeat(2, 1fr);
  }
  .billing-layout > .card:last-child {
    grid-column: span 2;
  }
}

.billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.billing-cards {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.billing-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  font-size: 0.85rem;
}

.billing-card-row small {
  color: var(--text-subtle);
  font-size: 0.74rem;
}

.billing-invoices {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.billing-invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  font-size: 0.85rem;
  gap: 12px;
}

.billing-invoice-meta {
  display: block;
  color: var(--text-subtle);
  font-size: 0.72rem;
  margin-top: 2px;
}

.billing-invoice-amount {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.account-plan-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ---- Usage meter (industry-standard progress bar) ---- */

.billing-usage:empty {
  display: none;
}

.usage-meter {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-muted);
}

.usage-meter-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.usage-meter-value {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.usage-meter-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.usage-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #1e6fbf, #14803c);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.usage-meter-meta {
  display: block;
  margin-top: 6px;
  color: var(--text-subtle);
  font-size: 0.72rem;
}

.usage-meter-fill.is-over {
  background: #c0392b;
}

/* Compact balance for the collapsed icon rail — hidden when the panel is open. */
.usage-meter-short {
  display: none;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
}
.usage-meter-short.is-over {
  color: #c0392b;
}
.left-collapsed #sidebar-usage-meter .usage-meter {
  display: none;
}
.left-collapsed #sidebar-usage-meter .usage-meter-short {
  display: block;
}

/* ── Plans page: comparison matrix + prepaid top-up packs ───────────────── */
.plans-compare__scroll {
  overflow-x: auto;
}
.plans-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.plans-compare__table th,
.plans-compare__table td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: center;
}
.plans-compare__table thead th {
  background: var(--bg-muted);
  font-weight: 600;
}
.plans-compare__table thead th.is-featured {
  color: var(--accent, #4c8cff);
}
.plans-compare__table th[scope="row"] {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
}
.topup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.topup-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
}
.topup-card__credits {
  font-weight: 600;
}
.topup-card__price {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: auto;
}

/* Coupon section (Plans page + in-app Billing — shared markup). */
.coupon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.coupon-input {
  flex: 1 1 200px;
  min-width: 160px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  font: inherit;
}
.coupon-status:empty {
  display: none;
}

/* =========================================================================
   Dark theme — applied via [data-theme="dark"] on <html>. The bootstrap
   <script> in index.html sets the attribute before paint, so there's no
   flash-of-light when the user prefers dark.
   ========================================================================= */
html[data-theme='dark'] {
  --bg-app: #0b0d10;
  --bg-surface: #14171c;
  --bg-muted: #1b1f25;
  --bg-hover: #232830;

  --border: #2a3038;
  --border-strong: #3b424c;
  --border-muted: #20242b;

  --text: #e5e7eb;
  --text-muted: #b3b8c2;
  --text-subtle: #9097a3;
  --text-faint: #6c727d;

  --accent: #e5e7eb;
  --accent-soft: #1d2330;
  --brand: #cbd5e1;
  --brand-hover: #e2e8f0;
  --primary: #6366f1;
  --primary-hover: #818cf8;
  --focus-ring: rgba(96, 165, 250, 0.35);
}

html[data-theme='dark'] body {
  background: var(--bg-app);
  color: var(--text);
}

html[data-theme='dark'] ::selection {
  background: rgba(229, 231, 235, 0.18);
}

/* =========================================================================
   Accessibility classes — applied to <html>
   ========================================================================= */
html.pref-reduced-motion *,
html.pref-reduced-motion *::before,
html.pref-reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

html.pref-larger-text body {
  font-size: 15.5px;
}

html.pref-high-contrast {
  --border: #4b5563;
  --border-strong: #1f2937;
  --text-muted: #1f2937;
  --text-subtle: #1f2937;
}
html.pref-high-contrast[data-theme='dark'] {
  --border: #cbd5e1;
  --border-strong: #f8fafc;
  --text-muted: #f1f5f9;
  --text-subtle: #e2e8f0;
}

/* =========================================================================
   Preferences page
   ========================================================================= */

.prefs-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}

@media (min-width: 720px) {
  .prefs-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

.prefs-section {
  padding: 18px 20px;
}

.prefs-section > .card-title {
  margin-top: 0;
}

.prefs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-top: 12px;
}

@media (max-width: 520px) {
  .prefs-row {
    grid-template-columns: 1fr;
  }
}

.prefs-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  margin: 0;
}

.prefs-field > span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* The global `label { margin: 12px 0 6px }` would space these out — neutralize. */
.prefs-section .prefs-field {
  margin-top: 0;
}

.prefs-theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.prefs-theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  margin: 0;
}

.prefs-theme-option:hover {
  border-color: var(--border-strong);
}

.prefs-theme-option input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.prefs-theme-option:has(input[type='radio']:checked) {
  border-color: #1e6fbf;
  box-shadow: 0 0 0 3px rgba(34, 139, 230, 0.18);
}

.prefs-theme-swatch {
  width: 100%;
  height: 56px;
  border-radius: 8px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.prefs-theme-swatch-system {
  background: linear-gradient(135deg, #fafafa 0 50%, #14171c 50% 100%);
}

.prefs-theme-swatch-light {
  background: #fafafa;
}
.prefs-theme-swatch-light::after {
  content: '';
  position: absolute;
  inset: 8px 8px auto 8px;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
}

.prefs-theme-swatch-dark {
  background: #14171c;
}
.prefs-theme-swatch-dark::after {
  content: '';
  position: absolute;
  inset: 8px 8px auto 8px;
  height: 8px;
  background: #2a3038;
  border-radius: 4px;
}

.prefs-theme-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.prefs-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border-muted);
  cursor: pointer;
  margin: 0;
}

.prefs-toggle:first-of-type {
  border-top: none;
  padding-top: 14px;
}

.prefs-toggle input[type='checkbox'] {
  width: auto;
  margin: 3px 0 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--accent, #1e6fbf);
}

.prefs-toggle-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.prefs-toggle-body strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.prefs-toggle-body small {
  font-size: 0.76rem;
  color: var(--text-subtle);
  line-height: 1.45;
}

.prefs-toggle-locked {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Small "Answered with X" line shown above the assistant bubble when the
   backend auto-fell-back to a different model (e.g. SMAIVIZ Pro → Flash on
   503). Intentionally subtle — it's an info breadcrumb, not a status. */
.chat-message.assistant-meta {
  margin: 4px 0 -4px;          /* nest tight against the bubble below */
  padding: 0 4px;
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

.chat-message.assistant-meta .message-text {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.4;
}

/* Guardrail system-notice bubble inside the chat transcript. Less prominent
   than an assistant/user message — it's metadata, not part of the dialogue. */
.chat-message.system {
  background: rgba(34, 139, 230, 0.05);
  border: 1px dashed rgba(34, 139, 230, 0.3);
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 5px 8px;
  border-radius: 6px;
  margin: 4px 0;
  letter-spacing: 0.005em;
}

.chat-message.system .message-role {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1e6fbf;
  margin-bottom: 2px;
}

/* Sticky strip above the transcript that shows the most recent user
   question (Claude-style chat title). Small, subtle, stays visible on
   scroll so the user can always see what they're asking about. */
.chat-active-question {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 6px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Diagnosis card — structured remediation rendered in place of a plain
   "Issue: …" string when /chat embeds a `diagnosis` block in the error
   response. Severity drives the accent color (info / warning / error).
   Pattern follows Stripe / Linear / Vercel inline-error cards. */
.chat-message.diagnosis {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(204, 0, 0, 0.22);
  background: rgba(204, 0, 0, 0.04);
  margin: 10px 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-message.diagnosis-info {
  border-color: rgba(30, 111, 191, 0.28);
  background: rgba(30, 111, 191, 0.05);
}

.chat-message.diagnosis-warning {
  border-color: rgba(204, 102, 0, 0.28);
  background: rgba(204, 102, 0, 0.05);
}

.chat-message.diagnosis-error {
  border-color: rgba(204, 0, 0, 0.28);
  background: rgba(204, 0, 0, 0.05);
}

.diagnosis-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.diagnosis-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 0.95rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.chat-message.diagnosis-error .diagnosis-icon {
  color: #a30000;
  background: rgba(204, 0, 0, 0.12);
}

.chat-message.diagnosis-warning .diagnosis-icon {
  color: #8a4b00;
  background: rgba(204, 102, 0, 0.14);
}

.chat-message.diagnosis-info .diagnosis-icon {
  color: #1e6fbf;
  background: rgba(30, 111, 191, 0.14);
}

.diagnosis-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.diagnosis-explanation {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.diagnosis-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.diagnosis-action {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.diagnosis-action:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong, rgba(0, 0, 0, 0.15));
}

.diagnosis-action.primary {
  background: #1e6fbf;
  border-color: #1e6fbf;
  color: #fff;
}

.diagnosis-action.primary:hover {
  background: #154e8f;
  border-color: #154e8f;
  color: #fff;
}

.diagnosis-docs {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 2px;
}

.diagnosis-docs:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Safety profile radios use the same .prefs-toggle styling as the
   accessibility checkboxes. The locked note has its own muted style. */
.prefs-safety-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
}

.prefs-safety-locked {
  margin-top: 12px;
  padding: 8px 10px;
  background: rgba(180, 83, 9, 0.08);
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-radius: 8px;
  color: #92400e;
  font-size: 0.78rem;
}

/* Age confirmation banner — shows above the preferences grid when the user's
   age band is "unknown" (legacy account pre-migration). */
.prefs-age-banner {
  margin-top: 4px;
  padding: 14px 16px;
  background: rgba(34, 139, 230, 0.08);
  border: 1px solid rgba(34, 139, 230, 0.25);
  border-radius: 10px;
}

.prefs-age-banner strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
  color: var(--text);
}

.prefs-age-banner p {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.prefs-age-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


.tb-selector-empty {
  background: var(--bg-muted);
}

.tb-selector-empty .tb-value {
  color: var(--text-faint);
  font-style: italic;
}


/* Long-form documentation pages */

.doc-article {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 40px;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.65;
}

.doc-article h2 {
  margin: 32px 0 10px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.doc-article h3 {
  margin: 16px 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.doc-article p {
  margin: 8px 0;
  color: var(--text-muted);
}

.doc-article .lead {
  margin: 4px 0 18px;
  font-size: 1rem;
  color: var(--text);
}

.doc-article code {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-muted);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.doc-code {
  display: block;
  padding: 12px 16px;
  margin: 12px 0;
  background: var(--bg-muted);
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text);
  overflow-x: auto;
}

.doc-list {
  margin: 8px 0 16px;
  padding-left: 24px;
  color: var(--text-muted);
}

.doc-list li {
  margin: 6px 0;
}

.doc-list strong {
  color: var(--text);
}

.doc-callout {
  margin: 18px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.86rem;
}

.doc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
}

.doc-cta .ghost-button {
  margin-top: 0;
}

/* FAQ accordion */

.faq-item {
  border-bottom: 1px solid var(--border-muted);
}

.faq-item:last-of-type {
  border-bottom: 0;
}

.faq-item summary {
  padding: 14px 0;
  cursor: pointer;
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: '+';
  display: inline-block;
  width: 18px;
  margin-right: 4px;
  color: var(--text-subtle);
  font-weight: 500;
  transition: transform 0.15s ease;
}

.faq-item[open] summary::before {
  content: '−';
}

.faq-item p {
  margin: 0 0 14px 22px;
  color: var(--text-muted);
}

/* Security feature grid */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}

.feature-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}

.feature-card h3 {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.feature-card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Blog list */

.blog-list {
  max-width: 720px;
}

.blog-card {
  padding: 22px 0;
  border-bottom: 1px solid var(--border-muted);
}

.blog-card:last-of-type {
  border-bottom: 0;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-subtle);
}

.blog-tag {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.blog-card h2 {
  margin: 8px 0 6px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.blog-excerpt {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.blog-footer {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.blog-intro {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Index cards are now <a> links to /blogs/<slug>. */
a.blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.12s ease;
}

a.blog-card:hover h2 {
  text-decoration: underline;
}

a.blog-card .blog-footer {
  color: var(--text-muted);
}

/* Single post view */
.blog-post {
  max-width: 720px;
}

.blog-post-back {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
}

.blog-post-back:hover {
  text-decoration: underline;
}

.blog-post h1 {
  margin: 10px 0 14px;
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}

.blog-lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 8px;
}

.blog-post h2 {
  margin: 28px 0 10px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
}

.blog-post h3 {
  margin: 18px 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.blog-post p,
.blog-post li {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.blog-post ul {
  margin: 8px 0 8px 0;
  padding-left: 20px;
}

.blog-post li {
  margin-bottom: 8px;
}

.blog-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 0.86rem;
}

.blog-table th,
.blog-table td {
  border: 1px solid var(--border-muted);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  color: var(--text-muted);
}

.blog-table th {
  background: var(--bg-muted);
  color: var(--text);
  font-weight: 600;
}

.blog-promo {
  margin: 28px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-muted);
  font-size: 0.82rem;
  color: var(--text-faint);
}

.blog-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-subtle);
}

.blog-related a {
  color: var(--text-muted);
}

/* Personal workspace (Agents / Routines / Tasks) — three collapsible
   <details> blocks acting as an exclusive accordion (HTML `name=` attribute
   in modern browsers; JS fallback in personal_workspace.js for older ones).
   All three start collapsed; expanding one closes the other two. */
.personal-group {
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.04));
}

.personal-group:last-child {
  border-bottom: none;
}

.personal-group-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  font-size: 0.85rem;
  color: var(--text-color);
  border-radius: 4px;
  /* The Tools group's summary is an <a> (not a <details> summary) so right-
     click "Open in new tab" works on the Tools entry; strip the default
     anchor underline so it matches the other group summaries. */
  text-decoration: none;
}

.personal-group-summary::-webkit-details-marker {
  display: none;
}

.personal-group-summary:hover {
  background: var(--surface-muted, rgba(255, 255, 255, 0.04));
}

.personal-group-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
}

details[open] > .personal-group-summary .personal-group-chevron {
  transform: rotate(90deg);
}

.personal-group-label {
  font-weight: 500;
}

.personal-group-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 4px;
}

/* "Tools" is a navigation menu, not a collapsible group: a button styled like
   a group summary. No chevron rotation (nothing expands); active = highlighted. */
.personal-group-link {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
}

.personal-group-link.active {
  background: var(--accent-soft);
  font-weight: 600;
}

/* ─── Tools page (icon grid + connect dialog, 2026-05-31) ────────────────────
   v1 was a vertical list with id + description + a runtime badge. v2 is
   an icon-led grid: utilities and connectors get distinct sections, each
   card is a button (clickable for connectors, decorative for utilities),
   and a Connect dialog drives the OAuth / MCP setup per-tool. Prompt-
   only entries are hidden — they shape an Agent's system prompt, not
   the user's capability inventory. */

.tools-catalog {
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tools-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.tools-section__head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.tools-section__head p {
  margin: 0;
}

.tools-grid {
  display: grid;
  /* Auto-fit ~140px-wide cards — gives 3-6 per row on a typical viewport
     without needing per-breakpoint media queries. */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

/* "Connected" section (top of Tools page, Notion / Zapier pattern).
   One row per active connection with provider icon + account email +
   relative connected-at + a Disconnect button. Only renders when the
   user has at least one connection — a fresh user sees the catalogue
   first + the section appears once they've connected. */
.tools-section--connected {
  /* Subtle accent so the active connections stand apart from the
     "browse the catalogue" sections below. */
  background: var(--bg-muted);
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.connected-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.connected-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.connected-row__icon {
  font-size: 1.3rem;
  line-height: 1;
  text-align: center;
}
.connected-row__title {
  font-weight: 600;
  font-size: 0.92rem;
}
.connected-row__sub {
  margin-top: 2px;
}
.connected-row__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.connected-row__reconnect {
  /* Reconnect = the "soft" action, primary affordance for someone who
     sees an expiry warning. Sits to the left of Disconnect so the
     destructive action stays at the right edge. */
  text-decoration: none;
  color: var(--text);
}
.connected-row__reconnect:hover {
  background: var(--bg-muted);
}
.connected-row__disconnect {
  /* Disconnect is destructive but not dramatic — danger styling would
     scare a user who's just trying to switch accounts. Muted by default;
     hover reveals the red. */
  color: var(--text-subtle);
  border-color: var(--border);
}
.connected-row__disconnect:hover {
  color: #b91c1c;
  border-color: #b91c1c;
  background: rgba(254, 226, 226, 0.4);
}
.connected-row__disconnect:disabled,
.connected-row__reconnect.is-disabled {
  opacity: 0.5;
  cursor: progress;
}

/* Expiry / health chip — inline next to the title. Yellow for the
   warning window (6–7 days); softer grey-yellow for "expired, please
   reconnect" (post-7-days). Tooltip carries the explanation so the
   chip itself stays short. */
.connected-row__chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.connected-row__chip.is-warn {
  /* Approaching / expired — warm tones drive the eye to take action. */
  background: #fef3c7;
  color: #92400e;
}
.connected-row__chip.is-soft {
  /* Days remaining — informative, not alarming. */
  background: var(--bg-muted);
  color: var(--text-subtle);
}

.tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: default;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
  /* Buttons inherit default focus styles via :focus-visible below. */
}
.tool-card--clickable {
  cursor: pointer;
}
.tool-card--clickable:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong, var(--border));
}
.tool-card--clickable:active {
  transform: translateY(1px);
}
.tool-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tool-card__icon {
  font-size: 1.8rem;
  line-height: 1;
}
.tool-card__name {
  font-weight: 600;
  font-size: 0.88rem;
}
/* Optional one-line description under the name (Skills + Powers cards).
   Clamped to two lines so cards stay uniform height in the grid. */
.tool-card__desc {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text-subtle, var(--text-muted));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tool-card__status {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.tool-card__status.is-on {
  color: #047857;
  background: #d1fadf;
}
.tool-card__status.is-cta {
  color: var(--bg-surface);
  background: var(--accent);
}
.tool-card__status.is-soft {
  color: var(--text-subtle);
  background: var(--bg-muted);
}
/* Power needing a human OK (approval gate). Amber, like a caution pill. */
.tool-card__status.is-warn {
  color: #92400e;
  background: #fef3c7;
}

/* Connect dialog — same visual family as the Output / Memory / Welcome
   dialogs (border + radius + backdrop alpha) so all modal surfaces feel
   like one app. */
.tool-connect-dialog {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  width: min(520px, 94vw);
  max-height: 86vh;
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}
.tool-connect-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
.tool-connect-dialog__form {
  margin: 0;
  display: flex;
  flex-direction: column;
  max-height: inherit;
}
.tool-connect-dialog__head {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.tool-connect-dialog__icon {
  font-size: 1.2rem;
  text-align: center;
}
.tool-connect-dialog__head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.tool-connect-dialog__close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-subtle);
  font-size: 1rem;
  cursor: pointer;
}
.tool-connect-dialog__close:hover {
  background: var(--bg-muted);
  color: var(--text);
}
.tool-connect-dialog__body {
  padding: 16px 20px 20px 20px;
  overflow-y: auto;
}
.tool-connect-dialog__intro {
  margin: 0 0 16px;
  font-size: 0.92rem;
  color: var(--text);
}
.tool-connect-dialog__footer {
  margin: 14px 0 0;
}

/* Provider buttons inside the OAuth flow (Google / Microsoft / …). */
.tool-connect-providers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-connect-provider {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-muted);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.1s ease, border-color 0.1s ease, transform 0.06s ease;
}
.tool-connect-provider:hover {
  background: var(--bg-surface);
  border-color: var(--accent);
}
.tool-connect-provider:active {
  transform: translateY(1px);
}
.tool-connect-provider.is-connected {
  /* Already connected — muted styling + the CTA chip swaps to "Connected ✓". */
  opacity: 0.78;
}
.tool-connect-provider__icon {
  font-size: 1.2rem;
  text-align: center;
}
.tool-connect-provider__cta {
  font-size: 0.78rem;
  color: var(--text-subtle);
  font-weight: 600;
}
.tool-connect-provider.is-connected .tool-connect-provider__cta {
  color: #047857;
}

/* MCP setup body — a numbered list of operator steps. */
.tool-connect-mcp__steps {
  margin: 12px 0;
  padding-left: 20px;
}
.tool-connect-mcp__steps li {
  margin-bottom: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.tool-connect-mcp__steps code {
  background: var(--bg-muted);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.82rem;
}

/* Sub-accordion (sits inside a sidebar group OR directly in a section) —
   collapsible "Recents" / "Templates" / "Recent agents" blocks. Lighter
   summary styling than the top-level groups, and the body indents so the
   parent/child relationship is visible. */
.sidebar-sub-group {
  margin: 0 0 2px;
}

.sidebar-sub-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-radius: 4px;
}

.sidebar-sub-summary::-webkit-details-marker {
  display: none;
}

.sidebar-sub-summary:hover {
  color: var(--text-muted);
}

.sidebar-sub-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-faint);
}

details[open] > .sidebar-sub-summary .sidebar-sub-chevron {
  transform: rotate(90deg);
}

.sidebar-sub-body {
  /* Visible indentation so the body reads as a child of the summary. */
  padding-left: 18px;
}

.new-personal-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.personal-row-status {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-muted, rgba(255, 255, 255, 0.06));
  color: var(--text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Personal home — landing tab when the user clicks the Personal section.
   Three big cards for Agents / Routines / Tasks plus a templates preview. */
.personal-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 960px;
  margin-bottom: 28px;
}

.personal-home-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 14px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: var(--surface-muted, rgba(255, 255, 255, 0.03));
  color: var(--text-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}

.personal-home-card:hover {
  border-color: var(--accent, #4c8cff);
  background: var(--surface-muted, rgba(255, 255, 255, 0.05));
}

.personal-home-card:active {
  transform: translateY(1px);
}

.personal-home-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--accent-soft, rgba(76, 140, 255, 0.16));
  color: var(--accent, #4c8cff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.personal-home-card-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.personal-home-card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.personal-home-card-cta {
  margin-top: auto;
  font-size: 0.82rem;
  color: var(--accent, #4c8cff);
}

.personal-home-section {
  max-width: 960px;
}

.personal-home-section-header h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.personal-home-section-header p {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Minimal active-agent label — matches the AI-disclaimer line above the
   textarea (small, italic, faint). Click to open the slash menu; typing
   `/` in the textarea works too. */
.chat-agent-label {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.66rem;
  line-height: 1.2;
  color: var(--text-faint);
  font-style: italic;
  letter-spacing: 0.02em;
  opacity: 0.75;
  cursor: pointer;
}

.chat-agent-label:hover {
  opacity: 1;
  color: var(--text-subtle);
}

.chat-agent-label.is-active {
  color: var(--text-muted);
  opacity: 0.9;
  font-style: normal;
}

/* Slash menu — light, in-flow list ABOVE the textarea. Uses the design
   system vars so it looks at home on the (light) app theme. */
.chat-slash-menu {
  margin: 4px 0;
  padding: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.chat-slash-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  text-align: left;
  transition: background 0.1s ease;
}

.chat-slash-row:hover {
  background: var(--bg-hover);
}

.chat-slash-row.is-active {
  background: var(--accent-soft);
}

.chat-slash-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}

.chat-slash-hint {
  font-size: 0.7rem;
  color: var(--text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.chat-slash-empty {
  padding: 8px 10px;
  font-size: 0.76rem;
  color: var(--text-subtle);
}

/* Editor panel — full-width single-column form. */
.personal-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}

.personal-editor h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.personal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.personal-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.personal-form label > span {
  font-weight: 500;
  color: var(--text-color);
}

.personal-form input[type='text'],
.personal-form textarea,
.personal-form select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  background: var(--surface-muted, rgba(255, 255, 255, 0.03));
  color: var(--text-color);
  font: inherit;
  resize: vertical;
}

.personal-form-inline {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.personal-form-inline > span {
  min-width: 80px;
}

.personal-form-inline select {
  width: auto;
}

.personal-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.personal-form-status {
  margin: 4px 0 0;
  min-height: 1em;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Built-in task agent details card. Replaces the editable form when the
   user clicks a built-in (read-only) agent in the sidebar list. Shows
   id, name, model, tools, description, and the system-prompt excerpt. */
.personal-builtin-details {
  padding: 4px 0 0;
}

.personal-builtin-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.personal-builtin-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.personal-builtin-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  row-gap: 4px;
  margin: 0 0 12px;
  font-size: 0.84rem;
}

.personal-builtin-meta dt {
  font-weight: 600;
  color: var(--text-muted);
}

.personal-builtin-meta dd {
  margin: 0;
}

.personal-builtin-meta code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-hover);
}

.personal-builtin-summary {
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ─── Task-plan timeline (vertical, top-down) ──────────────────────────── */

.planner-timeline {
  margin: 12px 12px 16px;
  padding: 12px 14px;
  list-style: none;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
}

.planner-timeline-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.86rem;
  position: relative;
}

/* Connector line between the dots. Drawn on every row except the last
   via a pseudo-element that runs from this dot to the next. */
.planner-timeline-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 22px;
  bottom: -6px;
  width: 2px;
  background: var(--border);
}

.planner-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-hover);
  border: 2px solid var(--border);
  box-sizing: border-box;
}

.planner-timeline-dot.planner-stage-status-done {
  background: var(--accent);
  border-color: var(--accent);
}
.planner-timeline-dot.planner-stage-status-running {
  background: rgba(180, 83, 9, 0.6);
  border-color: var(--warn);
  animation: planner-pulse 1.6s ease-in-out infinite;
}
.planner-timeline-dot.planner-stage-status-awaiting {
  background: rgba(234, 179, 8, 0.5);
  border-color: #92400e;
}
.planner-timeline-dot.planner-stage-status-failed {
  background: var(--danger);
  border-color: var(--danger);
}

.planner-timeline-label {
  color: var(--text);
}

/* ─── Cards (one per pipeline section) ─────────────────────────────────── */

.planner-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px;
}

.planner-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  overflow: hidden;
}

.planner-card-summary {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 0.92rem;
}

.planner-card-summary::-webkit-details-marker {
  display: none;
}

.planner-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.planner-card-title {
  font-weight: 600;
}

.planner-card-toggle {
  font-size: 1rem;
  transition: transform 0.18s ease;
  color: var(--text-muted);
}

.planner-card[open] .planner-card-toggle {
  transform: rotate(180deg);
}

.planner-card-body {
  padding: 4px 12px 12px;
}

.planner-plan-header-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

/* Sub-cards inside Steps / Phases / Action items — same toggle UX as
   the outer cards but lighter visual weight. */
.planner-substep,
.planner-phase,
.planner-action-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  margin-top: 6px;
}

.planner-substep > summary,
.planner-phase > summary,
.planner-action-item > summary {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  list-style: none;
  font-size: 0.86rem;
}

.planner-substep > summary::-webkit-details-marker,
.planner-phase > summary::-webkit-details-marker,
.planner-action-item > summary::-webkit-details-marker {
  display: none;
}

.planner-substep[open] .planner-card-toggle,
.planner-phase[open] .planner-card-toggle,
.planner-action-item[open] .planner-card-toggle {
  transform: rotate(180deg);
}

.planner-substep-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
}

.planner-substep-title {
  font-weight: 500;
}

.planner-substep-body {
  padding: 4px 12px 10px;
  margin: 0;
  font-size: 0.84rem;
  color: var(--text);
}

.planner-substeps,
.planner-actions,
.planner-phase-list,
.planner-phase-steps {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.planner-phase-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 12px 10px;
}

.planner-phase-steps li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}

.planner-phase-notes {
  margin: 4px 0 8px;
  font-size: 0.86rem;
  color: var(--text);
}

.planner-action-leaf {
  margin: 4px 12px 10px;
  font-size: 0.86rem;
}

.planner-plan-sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.84rem;
}

.planner-plan-sources-list a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}
.planner-plan-sources-list a:hover { text-decoration: underline; }

/* ─── Application-form-style Q&A ───────────────────────────────────────── */

.planner-application-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.planner-form-progress {
  margin: 0 0 4px;
  padding: 8px 12px;
  background: var(--accent-soft);
  border-radius: 6px;
  font-size: 0.84rem;
}

.planner-application-fields {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.planner-application-field {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
}

.planner-application-field-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.planner-application-field-no {
  font-weight: 700;
  font-size: 0.82rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: white;
}

.planner-application-field-kind {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}

.planner-application-field-id {
  margin-left: auto;
  font-family: var(--font-mono);
}

.planner-application-field-prompt {
  margin: 4px 0 8px;
  font-size: 0.96rem;
  color: var(--text);
  font-weight: 500;
}

.planner-application-answer {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  background: var(--bg-surface);
  border-radius: 4px;
  font-size: 0.9rem;
}

.planner-radio-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.planner-radio-group-inline {
  grid-template-columns: 1fr 1fr;
}

.planner-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  cursor: pointer;
  font-size: 0.86rem;
}

.planner-radio:hover {
  border-color: var(--accent);
}

.planner-radio input[type="radio"] {
  margin: 0;
}

.planner-human-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.planner-human-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.4;
  resize: vertical;
}

.planner-human-form button {
  align-self: flex-start;
}

/* ─── Agent execution plan card ───────────────────────────────────────── */

.planner-section-h {
  margin: 12px 0 6px;
  font-size: 0.86rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.planner-agent-classes {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.planner-agent-class {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
}

.planner-agent-class-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
}

.planner-agent-class-head code {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
}

.planner-agent-instances {
  list-style: none;
  padding: 4px 12px 10px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.planner-agent-instance {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
}

.planner-agent-instance-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.82rem;
}

.planner-agent-instance-id {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
}

.planner-agent-instance-class {
  font-weight: 600;
}

.planner-agent-instance-action {
  margin: 4px 0;
  font-size: 0.88rem;
}

.personal-builtin-prompt {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  max-height: 280px;
  overflow: auto;
}

/* Task-agent tool picker — fieldset of checkbox rows. At least one must be
   chosen before save; submit handler blocks otherwise. */
.personal-form-fieldset {
  border: 1px solid var(--border-muted);
  border-radius: 6px;
  padding: 8px 12px 10px;
  margin: 0;
}

.personal-form-fieldset legend {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  padding: 0 4px;
}

.personal-form-required {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-subtle);
  font-style: italic;
}

/* Agent builder (component-sectioned editor + live test) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.btn-sm {
  padding: 5px 10px;
  font-size: 0.8rem;
}
/* Small inline icon (emoji) inside a ghost-button/label. The button is already
   inline-flex with a gap, so this just normalises the glyph size + baseline so
   the icon reads as a compact affordance next to the label. */
.btn-ico {
  font-size: 0.95em;
  line-height: 1;
  flex: 0 0 auto;
}
/* IAM (Settings → IAM): roles / groups / bindings cards. Reuses .card/.ghost-button/.tag. */
.iam-grid { display: grid; gap: 16px; }
/* Phase 7c: each IAM section renders as a standard .app-page; stack them in the full grid. */
.iam-pages { display: flex; flex-direction: column; gap: 28px; }
/* Inside the .app-page-filters bar the project picker sits next to its label, not pushed right. */
.app-page-filters #iam-project-select { margin-left: 0; }
.iam-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--border);
}
.iam-row__act { display: inline-flex; gap: 6px; align-items: center; flex: 0 0 auto; flex-wrap: wrap; }
/* Inline role-tier dropdowns (member rows, project overrides) + the project picker — auto-width,
   not the global full-width select. */
.iam-row__act select, #iam-project-select {
  width: auto; max-width: 12rem; padding: 5px 8px; font-size: 0.82rem;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-surface); color: var(--text);
}
#iam-project-select { margin-left: auto; }
/* People card: a person row is a full-width plain clickable (overrides the global dark
   button) that opens the provenance drawer. */
.iam-person {
  width: 100%; text-align: left; margin: 0; padding: 2px 0; cursor: pointer;
  background: none; border: none; color: var(--text); font: inherit; display: flex;
  align-items: center; gap: 6px; flex-wrap: wrap;
}
.iam-person:hover { color: var(--primary); }
.iam-trace {
  margin: 2px 0 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg-muted); border: 1px solid var(--border);
}
.iam-trace-mod { margin-top: 8px; }
.iam-trace-mod > strong { font-size: 0.8rem; text-transform: capitalize; }
.iam-trace-mod ul { margin: 4px 0 0; padding: 0; list-style: none; }
.iam-trace-mod li {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.82rem; padding: 2px 0;
}
.iam-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.iam-inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.iam-form input[type="text"], .iam-form select, .iam-inline select {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-surface); color: var(--text); font: inherit; font-size: 0.82rem;
}
.iam-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.iam-perm-group { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.iam-perm-group legend {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted, #9aa0a6); padding: 0 4px;
}
.iam-perm { display: block; font-size: 0.82rem; padding: 2px 0; cursor: pointer; }
/* Org Analytics (Settings → Analytics): KPI cards + horizontal breakdown bars. */
.an-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.an-window { display: inline-flex; gap: 4px; }
.an-window .ghost-button.is-active { border-color: var(--border-strong); background: var(--bg-hover); }
.an-kpis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.an-kpi {
  border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.an-kpi__val { font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.an-kpi__lbl { font-size: 0.8rem; }
.an-kpi__sub { font-size: 0.72rem; color: var(--text-muted, #9aa0a6); }
.an-bar { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.an-bar__lbl { flex: 0 0 96px; font-size: 0.8rem; text-transform: capitalize; }
.an-bar__track {
  flex: 1; height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--bg-hover, rgba(127, 127, 127, 0.12));
}
.an-bar__fill { display: block; height: 100%; border-radius: 4px; background: var(--accent, #6366f1); }
.an-bar__val {
  flex: 0 0 auto; min-width: 24px; text-align: right;
  font-size: 0.8rem; color: var(--text-muted, #9aa0a6);
}
.an-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.an-chip {
  font-size: 0.8rem; padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 999px; text-transform: capitalize;
}
.an-chip strong { margin-right: 4px; }
/* Module enablement picker (Settings → Modules). */
.mod-grid { display: grid; gap: 8px; }
.mod-row { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; cursor: pointer; padding: 4px 0; }
.agent-builder {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.agent-builder__config {
  min-width: 0;
}

/* Editor header — title + the rolling-30-day usage chip, sitting together. */
.agent-editor-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.agent-editor-header h3 {
  margin: 0;
}

/* Graph on the left, the selected node's editor right beside it (not below). */
.agent-builder__main {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 760px) {
  .agent-builder__main {
    grid-template-columns: 1fr;
  }
}
.agent-node-editor {
  position: sticky;
  top: 8px;
}
.builder-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--bg-muted);
}
.builder-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.builder-card__head h4 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}
.builder-card__icon {
  font-size: 1.05rem;
  line-height: 1;
}
.builder-card--soon {
  opacity: 0.85;
}
.soon-badge {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-subtle);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}
.builder-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text);
}
/* Agent node graph (compact vertical pipeline: boxes + connectors) */
.agent-graph {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.agent-node {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-muted);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.agent-node:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
.agent-node--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.agent-node--hub {
  background: var(--accent-soft);
}
.agent-node__icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}
.agent-node__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.agent-node__label {
  font-weight: 600;
  font-size: 0.84rem;
}
.agent-node__summary {
  font-size: 0.74rem;
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* Vertical connector between the stacked top nodes (model → instructions → hub) */
.agent-graph > .agent-node + .agent-node,
.agent-graph > .agent-branches {
  margin-top: 18px;
  position: relative;
}
.agent-graph > .agent-node + .agent-node::before,
.agent-graph > .agent-branches::before {
  content: "";
  position: absolute;
  left: 19px;
  top: -18px;
  height: 18px;
  width: 2px;
  background: var(--border);
}
/* Branches under the hub: a left spine + a stub to each node */
.agent-branches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 28px;
}
.agent-branches::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 17px;
  width: 2px;
  background: var(--border);
}
.agent-branches .agent-node::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 9px;
  height: 2px;
  background: var(--border);
}
.agent-branches .agent-node {
  position: relative;
}

.agent-node-editor {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  background: var(--bg-surface);
}
.node-panel[hidden] {
  display: none;
}
.node-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 10px;
}
/* Trailing hint after the panel title (e.g. "— layered memory the Agent
   draws on") — visually downplayed so the panel title still reads first. */
.node-panel__hint {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--text-subtle);
}

/* Skill tiers (ADR-0002 Phase D) — the three sub-cards inside the Skills
   panel: Book / Experience / Contextual. Visually framed so the user reads
   them as one Skill grouping with three layers, not three unrelated cards. */
.skill-tier {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg-muted);
}
.skill-tier:last-child {
  margin-bottom: 0;
}
.skill-tier__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 6px;
}
.skill-tier__icon {
  font-size: 1rem;
  line-height: 1;
}
.skill-tier__label {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.skill-tier__subhead {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-subtle);
}

/* Book-Skill domain-pack picker — same checkbox-grid pattern as
   .personal-tool-grid so the rows look like the Tools / Powers grids. The
   grid is one column on narrow screens; two on wider. */
.agent-book-packs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
@media (max-width: 600px) {
  .agent-book-packs-grid {
    grid-template-columns: 1fr;
  }
}

/* Base agent info (name / model / instructions / notes) below the graph. */
.agent-info {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.agent-info__head {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 10px;
}
.agent-info__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .agent-info__grid {
    grid-template-columns: 1fr;
  }
}

/* Live test panel */
.agent-builder__test {
  display: flex;
  flex-direction: column;
}
.agent-test-messages {
  flex: 1;
  min-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  margin: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.agent-test-msg {
  max-width: 90%;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.agent-test-msg--user {
  align-self: flex-end;
  background: var(--accent-soft);
  color: var(--text);
}
.agent-test-msg--assistant {
  align-self: flex-start;
  background: var(--bg-muted);
  color: var(--text);
}
.agent-test-msg--error {
  color: var(--err, #c0392b);
}
.agent-test-form {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}
.agent-test-form textarea {
  flex: 1;
  resize: vertical;
}
.agent-test-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.personal-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 16px;
  margin-top: 6px;
}

/* Agent-edit tools picker — simple list. Each row is a single line
   (icon + name) by default; the description tucks underneath and is
   revealed only on hover, keyboard focus, or when the tool is
   selected. `title=""` on the row provides the same content as a
   native tooltip for mobile long-press / screen readers. */
.personal-tool-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0 8px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.personal-tool-row:hover {
  background: var(--bg-hover);
}

.personal-tool-row input[type='checkbox'] {
  align-self: center;
}

.personal-tool-name {
  font-weight: 500;
  color: var(--text);
  font-size: 0.85rem;
}

/* Descriptions are now exposed exclusively via native `title=""`
   tooltips on the row — no inline reveal — so .personal-tool-desc
   is no longer rendered. The selector is retained as a defensive
   `display: none` in case stale markup ships from a cached bundle. */
.personal-tool-desc { display: none; }

/* ─── Agent-edit tool picker v2 (2026-05-31) ───────────────────────────────
   Splits the picker into "Ready to use" (utility + connected connectors —
   checkboxes the user can toggle into the Agent) and "Needs setup"
   (unconnected connectors — read-only with a Set-up → button that jumps
   to the Tools page). Footer link lets the user browse all tools.
   Prompt-only entries are hidden from this picker entirely; they live
   in the Agent's system prompt, not as a real capability the Agent
   gets to call. */

.personal-tool-icon {
  /* Compact icon column shared by both ready + needs-setup rows. Sits
     between the checkbox (ready rows) and the name. */
  font-size: 0.95rem;
  line-height: 1;
  grid-column: auto;
  width: 18px;
  text-align: center;
  align-self: center;
}

/* Section heading inside the tool picker — small all-caps separator. */
.agent-tools-section {
  margin-top: 8px;
}
.agent-tools-section:first-child {
  margin-top: 0;
}
.agent-tools-section__head {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 4px 6px 4px;
}

/* Needs-setup row — same simple-list shape as the ready rows, just
   without a checkbox + with a Set-up button on the right. Description
   stays hidden by default and reveals on hover (no `:checked` branch
   here since these rows aren't selectable). */
.personal-tool-row--needs-setup {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0 8px;
  padding: 4px 6px;
  border-radius: 4px;
  background: transparent;
  cursor: default;
  opacity: 0.85;
}
.personal-tool-row--needs-setup:hover {
  background: var(--bg-hover);
}
.personal-tool-row--needs-setup .personal-tool-setup {
  align-self: center;
  white-space: nowrap;
}

/* Footer link — sits below both sections in the picker. */
.agent-tools-footer {
  margin: 14px 0 0;
  padding: 8px 4px 0;
  border-top: 1px dashed var(--border);
}
.agent-tools-footer a {
  margin-right: 4px;
}

/* Task planner — chat-style layout on the Personal home tab.
   Output area scrolls; composer sticks at the bottom. */
.planner-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 880px;
  margin: 0 auto;
}

.planner-output {
  flex: 1;
  overflow-y: auto;
  padding: 24px 8px 12px;
}

.planner-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 16px 16px;
}

/* `[hidden]`'s display:none has lower CSS specificity than the
   `.planner-empty` / `.planner-plan` class selectors above + below, so
   the browser keeps `display: flex` even when `hidden=true` is set.
   Spell out the override so `_showEmpty()` actually hides what it
   says it hides. */
.planner-empty[hidden],
.planner-plan[hidden] {
  display: none;
}

.planner-title {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
}

.planner-subtitle {
  margin: 0 0 24px;
  max-width: 620px;
  color: var(--text-subtle);
  font-size: 0.9rem;
  line-height: 1.5;
}

.planner-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 720px;
}

.planner-example {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.planner-example:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.planner-example-icon {
  color: var(--text-faint);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Plan view */
.planner-plan {
  padding: 4px 4px 16px;
}

.planner-plan-header h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 600;
}

.planner-plan-header p {
  margin: 0 0 8px;
  color: var(--text-subtle);
  font-size: 0.88rem;
  line-height: 1.5;
}

.planner-prompt {
  font-style: italic;
  color: var(--text-muted);
}

.planner-meta {
  font-size: 0.72rem;
  color: var(--text-faint);
  margin: 4px 0 16px;
}

/* Pipeline stage rows */
.planner-stages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.planner-stage {
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  background: var(--bg-surface);
  overflow: hidden;
}

.planner-stage.is-deferred {
  opacity: 0.6;
}

.planner-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--text);
}

.planner-stage-head[aria-disabled='true'] {
  cursor: default;
}

.planner-stage-head:not([aria-disabled='true']):hover {
  background: var(--bg-hover);
}

.planner-stage-head[disabled] {
  cursor: default;
  opacity: 0.6;
}

.planner-stage-id {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 24px;
}

.planner-stage-name {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 500;
}

.planner-stage-status {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-muted);
}

.planner-stage-status-done { background: var(--accent-soft); color: var(--text); }
.planner-stage-status-running { background: var(--accent-soft); color: var(--text); }
.planner-stage-status-awaiting { background: rgba(234, 179, 8, 0.18); color: #92400e; }
.planner-stage-status-failed { background: rgba(185, 28, 28, 0.12); color: var(--danger); }
.planner-stage-status-queued { background: transparent; color: var(--text-faint); }
.planner-stage-status-deferred { background: transparent; color: var(--text-faint); font-weight: 500; }

.planner-stage-body {
  padding: 0 12px 12px;
}

.planner-knowledge {
  margin: 0;
  padding: 10px 12px;
  background: var(--bg-app);
  border-radius: 6px;
  border-left: 3px solid var(--border-strong);
}

.planner-knowledge code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--text);
  background: transparent;
  padding: 0;
}

/* Architect spec view */
.planner-agents {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.planner-agent {
  padding: 10px 12px;
  background: var(--bg-app);
  border-radius: 6px;
}

.planner-agent-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.planner-agent-role {
  font-weight: 600;
  font-size: 0.9rem;
}

.planner-agent-badge {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text);
}

.planner-agent-prompt {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.planner-edges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.planner-edge {
  font-size: 0.78rem;
  padding: 2px 8px;
  background: var(--bg-hover);
  border-radius: 999px;
  color: var(--text-muted);
}

.planner-edge em {
  font-style: normal;
  color: var(--text-faint);
  margin: 0 4px;
}

.planner-edge small {
  font-size: 0.7rem;
  color: var(--text-faint);
}

/* P1.5 — edit / restage / delete affordances. */
.planner-plan-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.planner-plan-header-row h2 {
  flex: 1;
  margin: 0;
}

.small-button {
  font-size: 0.78rem;
  padding: 4px 10px;
}

.planner-stage-head-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.planner-stage-head-row .planner-stage-head {
  flex: 1;
}

.planner-stage-head-row .ghost-button {
  margin: 6px 6px 6px 0;
  align-self: center;
}

.planner-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 0 0 12px;
  font-size: 0.84rem;
}

.planner-banner-warn {
  background: rgba(180, 83, 9, 0.08);
  color: var(--warn);
  border: 1px solid rgba(180, 83, 9, 0.18);
}

.planner-banner-info {
  background: rgba(70, 120, 220, 0.08);
  color: var(--text, #1a1d21);
  border: 1px solid rgba(70, 120, 220, 0.22);
}

.planner-banner-action {
  margin-left: auto;
  padding: 2px 10px;
  border: 1px solid var(--warn);
  border-radius: 999px;
  background: transparent;
  color: var(--warn);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.planner-banner-action:hover {
  background: rgba(180, 83, 9, 0.12);
}

.planner-banner-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.planner-edit-area {
  width: 100%;
  min-height: 240px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.5;
  resize: vertical;
}

.planner-edit-area:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.planner-edit-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}

.planner-edit-hint {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-subtle);
  font-style: italic;
}

/* Sub-agent progress strip — one dot per sub-agent (e.g. S1.A1..A7). */
.planner-subagent-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px 8px;
  flex-wrap: wrap;
}

.planner-subagent-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--bg-hover);
  color: var(--text-faint);
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  justify-content: center;
}

.planner-subagent-dot:hover {
  border-color: var(--accent);
}

.planner-subagent-dot.is-expanded {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.planner-subagent-name {
  font-size: 0.6rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  opacity: 0.85;
}

.planner-subagent-dot-queued {
  background: var(--bg-hover);
  color: var(--text-faint);
}
.planner-subagent-dot-running {
  background: var(--accent-soft);
  color: var(--text);
  /* Subtle pulse so the user notices which one is active */
  animation: planner-pulse 1.6s ease-in-out infinite;
}
.planner-subagent-dot-done {
  background: var(--accent-soft);
  color: var(--text);
}
.planner-subagent-dot-failed {
  background: rgba(185, 28, 28, 0.12);
  color: var(--danger);
}

@keyframes planner-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.planner-subagent-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
}

.planner-subagent-iter {
  font-size: 0.58rem;
  opacity: 0.7;
}

/* Per-agent detail card — shown when a dot is clicked. Contains one
   block per PDCA iteration (status, tokens, duration, failed checks,
   collapsible JSON output). */
.planner-agent-detail {
  margin: 4px 12px 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.planner-agent-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.planner-agent-detail-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.planner-agent-detail-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.planner-iter {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
}

.planner-iter-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
}

.planner-iter-no {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-muted);
}

.planner-iter-check {
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.66rem;
  text-transform: uppercase;
}
.planner-iter-check-pass { background: rgba(34,197,94,0.18); color: #15803d; }
.planner-iter-check-fail { background: rgba(220,38,38,0.18); color: #b91c1c; }
.planner-iter-check-inconclusive { background: var(--bg-hover); color: var(--text-faint); }

.planner-iter-act {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.planner-iter-failed {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.74rem;
  color: var(--danger);
}

.planner-iter-output {
  margin-top: 6px;
  font-size: 0.72rem;
}

.planner-iter-output summary {
  cursor: pointer;
  color: var(--text-muted);
}

.planner-iter-output pre {
  margin: 6px 0 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  max-height: 280px;
  overflow: auto;
  font-size: 0.7rem;
  line-height: 1.35;
}

.planner-stage-desc {
  margin: 0 12px 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.planner-subagent-strip-label {
  padding: 4px 12px 2px;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* Clarification bubble — shows above the pipeline rows when the
   pipeline is awaiting a user answer for a blocker question. */
.planner-bubble {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
}

.planner-bubble-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.planner-bubble-iter {
  padding: 1px 6px;
  background: var(--bg-app);
  border-radius: 999px;
  font-size: 0.62rem;
  color: var(--accent);
}

.planner-bubble-body {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 8px;
}

.planner-bubble-form {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.planner-bubble-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  resize: vertical;
  min-height: 36px;
}

.planner-bubble-input:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* S3 agent rows — inline editor when "Edit" is open */
.planner-agent-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

.planner-agent.is-editing {
  background: var(--bg-app);
  border: 1px dashed var(--border-strong);
}

.planner-agent-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  margin-bottom: 6px;
}

.planner-agent-field > span {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.planner-agent-field input,
.planner-agent-field textarea {
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-surface);
  color: var(--text);
  resize: vertical;
}

.planner-agent-field input:focus,
.planner-agent-field textarea:focus {
  outline: none;
  border-color: var(--border-strong);
}

.planner-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.planner-step {
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--bg-surface);
}

.planner-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.planner-step-id {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.planner-step-name {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
}

.planner-run-step {
  margin-left: auto;
  font-size: 0.78rem;
}

.planner-step-desc {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
}

.planner-step-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--text-subtle);
  line-height: 1.4;
}

.planner-step-tag {
  flex-shrink: 0;
  min-width: 44px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  font-size: 0.66rem;
  padding-top: 2px;
}

.planner-step-tag-list code {
  font-size: 0.76rem;
  background: var(--bg-hover);
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 2px;
}

.planner-step-result {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--bg-app);
  border-radius: 6px;
  border-left: 3px solid var(--accent, #4c8cff);
}

.planner-step-result pre {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text);
  font-family: inherit;
}

.planner-step-result.is-error {
  border-left-color: var(--danger);
  color: var(--danger);
  font-size: 0.84rem;
}

/* Composer */
.planner-form {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 4px;
  background: var(--bg-app);
  border-top: 1px solid var(--border-muted);
}

.planner-form-status {
  min-height: 1em;
  font-size: 0.78rem;
  color: var(--text-subtle);
}

.planner-form-status.is-error {
  color: var(--danger);
}

.planner-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  font: inherit;
  resize: vertical;
  min-height: 64px;
}

.planner-input:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.planner-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.primary-button {
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.primary-button:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.primary-button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ─── Flow Diagram card (SVG visualisation of the refined plan) ───────── */

.planner-flow-scroll {
  width: 100%;
  overflow-x: auto;
  padding: 8px 0 4px;
}

.planner-flow-svg {
  display: block;
  min-width: 100%;
  font-family: inherit;
}

.planner-flow-header {
  fill: var(--bg-muted, #eef1f5);
  stroke: var(--border-muted, #d8dce3);
  stroke-width: 1;
}

.planner-flow-header-parallel {
  fill: rgba(120, 170, 255, 0.18);
}

.planner-flow-header-single {
  fill: rgba(150, 150, 150, 0.18);
}

.planner-flow-header-text {
  font-size: 13px;
  font-weight: 600;
  fill: var(--text, #1a1d21);
}

.planner-flow-rect {
  fill: var(--bg-surface, #ffffff);
  stroke: var(--border-strong, #b6bcc5);
  stroke-width: 1.5;
}

.planner-flow-node:hover .planner-flow-rect {
  stroke: var(--accent, #4f7cff);
  stroke-width: 2;
}

.planner-flow-no {
  font-size: 12px;
  font-weight: 700;
  fill: var(--accent, #4f7cff);
}

.planner-flow-title {
  font-size: 13px;
  font-weight: 600;
  fill: var(--text, #1a1d21);
}

.planner-flow-tool {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  fill: var(--text-muted, #5b6573);
}

.planner-flow-action {
  font-size: 11px;
  fill: var(--text-muted, #5b6573);
}

.planner-flow-arrow {
  stroke: var(--border-strong, #98a0ab);
  stroke-width: 2;
  fill: none;
}

.planner-flow-arrowhead-path {
  fill: var(--border-strong, #98a0ab);
}

/* ─── Human-interaction modal ─────────────────────────────────────────── */

.planner-modal-host {
  display: none;
}
.planner-modal-host.is-open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9000;
}

.planner-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 28, 0.55);
  backdrop-filter: blur(2px);
}

.planner-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: var(--bg-surface, #ffffff);
  color: var(--text, #1a1d21);
  border: 1px solid var(--border-strong, #b6bcc5);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.planner-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-muted, #d8dce3);
}
.planner-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.planner-modal-close {
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted, #5b6573);
  padding: 0 6px;
}
.planner-modal-close:hover {
  color: var(--text, #1a1d21);
}

.planner-modal-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-muted, #d8dce3);
  background: var(--bg-muted, #f4f6fa);
}
.planner-modal-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(120, 130, 145, 0.18);
  border-radius: 3px;
  overflow: hidden;
}
.planner-modal-progress-fill {
  height: 100%;
  background: var(--accent, #4f7cff);
  transition: width 0.2s ease;
}
.planner-modal-progress-text {
  font-size: 0.82rem;
  color: var(--text-muted, #5b6573);
  white-space: nowrap;
}

.planner-modal-form {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}
.planner-modal-form .planner-application-fields {
  margin: 0;
  padding: 16px 18px;
  list-style: none;
  overflow-y: auto;
  flex: 1;
}

.planner-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-muted, #d8dce3);
  background: var(--bg-muted, #f4f6fa);
}
.planner-modal-footer-msg {
  font-size: 0.82rem;
  color: var(--text-muted, #5b6573);
}
.planner-modal-footer-msg.is-error {
  color: var(--danger, #c0392b);
}
.planner-modal-footer-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

body.planner-modal-open {
  overflow: hidden;
}

/* Inline summary card — progress bar + open-modal button. */
.planner-human-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.planner-human-summary-bar {
  height: 6px;
  background: rgba(120, 130, 145, 0.18);
  border-radius: 3px;
  overflow: hidden;
}
.planner-human-summary-fill {
  height: 100%;
  background: var(--accent, #4f7cff);
  transition: width 0.2s ease;
}
.planner-human-summary [data-planner-open-human-modal] {
  align-self: flex-start;
}

.planner-human-review {
  border: 1px solid var(--border-muted, #d8dce3);
  border-radius: 6px;
  padding: 8px 12px;
}
.planner-human-review > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}
.planner-human-review-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.planner-human-review-row {
  border-top: 1px dashed var(--border-muted, #d8dce3);
  padding-top: 10px;
}
.planner-human-review-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.planner-human-review-q {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .planner-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    top: 8px;
    left: 8px;
    transform: none;
  }
}

/* ─── Similarity-match modal ──────────────────────────────────────────── */

.planner-modal-similar .planner-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}

.planner-similar-match {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.planner-similar-prompt {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent, #4f7cff);
  background: var(--bg-muted, #f4f6fa);
  color: var(--text, #1a1d21);
  font-style: italic;
  border-radius: 0 4px 4px 0;
}

.planner-similar-hint {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ─── Live pipeline diagram (the top of the planner result area) ─────── */

.planner-pipe-card {
  border: 1px solid var(--border-muted, #d8dce3);
  border-radius: 10px;
  background: var(--bg-surface, #ffffff);
  padding: 14px 16px;
  margin: 14px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.planner-pipe-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.planner-pipe-card-head h3 {
  margin: 0;
  font-size: 1.0rem;
}

.planner-pipe-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  margin: 0 0 10px;
  border-radius: 6px;
  background: rgba(70, 120, 220, 0.08);
  font-size: 0.86rem;
  color: var(--text, #1a1d21);
}

.planner-pipe-msg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #4f7cff);
  animation: planner-pipe-pulse-dot 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes planner-pipe-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.5; }
}

.planner-pipe-scroll {
  width: 100%;
  overflow-x: auto;
}

.planner-pipe-svg {
  display: block;
  min-width: 100%;
  font-family: inherit;
}

.planner-pipe-chip rect.planner-pipe-rect {
  fill: var(--bg-surface, #ffffff);
  stroke: var(--border-strong, #c0c5cd);
  stroke-width: 1.4;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.planner-pipe-chip text.planner-pipe-label {
  font-size: 12px;
  font-weight: 600;
  fill: var(--text, #1a1d21);
}

.planner-pipe-chip text.planner-pipe-state {
  font-size: 10.5px;
  fill: var(--text-muted, #5b6573);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.planner-pipe-chip-queued rect.planner-pipe-rect {
  fill: var(--bg-muted, #f4f6fa);
  stroke: var(--border-muted, #d8dce3);
}

.planner-pipe-chip-running rect.planner-pipe-rect {
  fill: rgba(70, 120, 220, 0.10);
  stroke: var(--accent, #4f7cff);
  stroke-width: 2;
}

.planner-pipe-chip-running text.planner-pipe-state {
  fill: var(--accent, #4f7cff);
  font-weight: 700;
}

.planner-pipe-chip-done rect.planner-pipe-rect {
  fill: rgba(34, 167, 92, 0.10);
  stroke: rgba(34, 167, 92, 0.55);
}

.planner-pipe-chip-done text.planner-pipe-state {
  fill: rgba(20, 120, 65, 1);
  font-weight: 600;
}

.planner-pipe-chip-failed rect.planner-pipe-rect {
  fill: rgba(192, 57, 43, 0.10);
  stroke: rgba(192, 57, 43, 0.55);
}

.planner-pipe-chip-failed text.planner-pipe-state {
  fill: rgba(160, 40, 30, 1);
  font-weight: 700;
}

.planner-pipe-chip-awaiting rect.planner-pipe-rect {
  fill: rgba(232, 168, 56, 0.12);
  stroke: rgba(232, 168, 56, 0.65);
}

.planner-pipe-chip-awaiting text.planner-pipe-state {
  fill: rgba(160, 110, 20, 1);
  font-weight: 700;
}

.planner-pipe-chip-skipped rect.planner-pipe-rect {
  fill: var(--bg-muted, #f4f6fa);
  stroke: rgba(160, 165, 175, 0.5);
  stroke-dasharray: 4 3;
}

.planner-pipe-chip-skipped text.planner-pipe-label,
.planner-pipe-chip-skipped text.planner-pipe-state {
  opacity: 0.55;
}

.planner-pipe-chip-pulse rect.planner-pipe-rect {
  animation: planner-pipe-pulse 1.8s ease-in-out infinite;
}

/* Per-chip rerun control. Lives in the top-right corner. Hidden until
   the user hovers the parent chip (or focuses the inner element via
   keyboard) so the diagram stays clean when nothing's interactive. */
.planner-pipe-rerun {
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease-in;
  pointer-events: auto;
}

.planner-pipe-chip:hover .planner-pipe-rerun,
.planner-pipe-rerun:focus,
.planner-pipe-rerun:focus-within {
  opacity: 1;
}

.planner-pipe-rerun-bg {
  fill: rgba(255, 255, 255, 0.92);
  stroke: rgba(60, 70, 85, 0.5);
  stroke-width: 1;
}

.planner-pipe-rerun:hover .planner-pipe-rerun-bg {
  fill: #2462e0;
  stroke: #2462e0;
}

.planner-pipe-rerun-icon {
  font-size: 12px;
  font-weight: 600;
  fill: #2462e0;
  pointer-events: none;
  user-select: none;
}

.planner-pipe-rerun:hover .planner-pipe-rerun-icon {
  fill: #ffffff;
}

@keyframes planner-pipe-pulse {
  0%, 100% { stroke-width: 2; }
  50% { stroke-width: 3.5; }
}

.planner-pipe-arrow {
  stroke: rgba(120, 130, 145, 0.6);
  stroke-width: 1.5;
  fill: none;
}

.planner-pipe-arrowhead-path {
  fill: rgba(120, 130, 145, 0.6);
}

.planner-pipe-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-muted, #5b6573);
}

.planner-pipe-counts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.planner-pipe-count {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-muted, #f4f6fa);
  border: 1px solid var(--border-muted, #d8dce3);
  font-size: 0.78rem;
  font-weight: 600;
}

.planner-pipe-count-done {
  background: rgba(34, 167, 92, 0.08);
  border-color: rgba(34, 167, 92, 0.30);
  color: rgba(20, 120, 65, 1);
}
.planner-pipe-count-running {
  background: rgba(70, 120, 220, 0.10);
  border-color: rgba(70, 120, 220, 0.30);
  color: var(--accent, #4f7cff);
}
.planner-pipe-count-failed {
  background: rgba(192, 57, 43, 0.10);
  border-color: rgba(192, 57, 43, 0.30);
  color: rgba(160, 40, 30, 1);
}
.planner-pipe-count-awaiting {
  background: rgba(232, 168, 56, 0.12);
  border-color: rgba(232, 168, 56, 0.45);
  color: rgba(160, 110, 20, 1);
}

.planner-pipe-progress-track {
  flex: 1;
  max-width: 240px;
  height: 6px;
  background: rgba(120, 130, 145, 0.18);
  border-radius: 3px;
  overflow: hidden;
}

.planner-pipe-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent, #4f7cff);
  transition: width 0.3s ease;
}

.planner-timeline-details {
  margin: 8px 0 12px;
  font-size: 0.86rem;
}
.planner-timeline-details > summary {
  cursor: pointer;
  color: var(--text-muted, #5b6573);
  padding: 4px 0;
}

/* ─── Skills modal ────────────────────────────────────────────────────── */

.planner-modal-skills {
  width: min(820px, calc(100vw - 32px));
}

.planner-skills-body {
  padding: 0;
  display: flex;
  flex: 1;
  overflow: hidden;
  height: 460px;
  max-height: calc(100vh - 200px);
}

.planner-skill-tabs {
  flex: 0 0 200px;
  border-right: 1px solid var(--border-muted, #d8dce3);
  background: var(--bg-muted, #f4f6fa);
  padding: 10px 6px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.planner-skill-tab {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text, #1a1d21);
  transition: background 0.12s ease;
}

.planner-skill-tab:hover {
  background: rgba(70, 120, 220, 0.06);
}

.planner-skill-tab.is-active {
  background: rgba(70, 120, 220, 0.12);
  border-color: rgba(70, 120, 220, 0.32);
  font-weight: 600;
}

.planner-skill-pane {
  flex: 1;
  padding: 14px 18px;
  overflow-y: auto;
  background: var(--bg-surface, #ffffff);
}

.planner-skill-pane-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.planner-skill-pane-head h4 {
  margin: 0;
  font-size: 1.0rem;
}

.planner-skill-markdown {
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (max-width: 600px) {
  .planner-skills-body {
    flex-direction: column;
    height: auto;
  }
  .planner-skill-tabs {
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--border-muted, #d8dce3);
    flex-direction: row;
    overflow-x: auto;
  }
  .planner-skill-tab {
    white-space: nowrap;
  }
}

/* ─── Executor (roadmap step #1): instance state + report ──────────── */

.planner-exec-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}

.planner-exec-report {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(34, 167, 92, 0.07);
  border: 1px solid rgba(34, 167, 92, 0.25);
  font-size: 0.86rem;
}

.planner-exec-report-error {
  background: rgba(192, 57, 43, 0.07);
  border-color: rgba(192, 57, 43, 0.3);
}

/* Partial-result panel — run completed but some steps failed/were skipped. */
.planner-partial {
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.3);
  font-size: 0.88rem;
}
.planner-partial > p { margin: 4px 0 8px; }
.planner-partial-list { list-style: none; margin: 0; padding: 0; }
.planner-partial-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 3px 0;
}

.planner-agent-instance-artefact {
  margin: 6px 0 0;
  padding: 6px 10px;
  background: rgba(34, 167, 92, 0.06);
  border-left: 3px solid rgba(34, 167, 92, 0.55);
  font-size: 0.86rem;
  border-radius: 0 4px 4px 0;
}

.planner-agent-instance-error {
  margin: 6px 0 0;
  padding: 6px 10px;
  background: rgba(192, 57, 43, 0.06);
  border-left: 3px solid rgba(192, 57, 43, 0.55);
  font-size: 0.86rem;
  border-radius: 0 4px 4px 0;
  color: rgba(160, 40, 30, 1);
}

.planner-instance-output {
  margin: 6px 0 0;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.02);
}
.planner-instance-output > summary {
  cursor: pointer;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted, #667085);
}
.planner-instance-output > summary:hover { color: var(--text, #1d2433); }
.planner-instance-output .planner-plan-body,
.planner-instance-output > pre,
.planner-instance-output > ul {
  margin: 0;
  padding: 4px 12px 12px;
}
.planner-output-pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8rem;
  margin: 0;
  padding: 4px 12px 12px;
}

.planner-agent-instance-running {
  border-color: var(--accent, #4f7cff);
  box-shadow: 0 0 0 1px rgba(70, 120, 220, 0.18) inset;
  animation: planner-exec-pulse 1.6s ease-in-out infinite;
}

@keyframes planner-exec-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(70, 120, 220, 0.18) inset; }
  50% { box-shadow: 0 0 0 2px rgba(70, 120, 220, 0.35) inset; }
}

.planner-agent-instance-done {
  border-color: rgba(34, 167, 92, 0.45);
}

.planner-agent-instance-failed {
  border-color: rgba(192, 57, 43, 0.5);
}

.planner-agent-instance-skipped {
  opacity: 0.65;
  border-style: dashed;
}

.planner-stage-status-skipped {
  background: var(--bg-muted, #f4f6fa);
  color: var(--text-muted, #5b6573);
  border: 1px dashed rgba(160, 165, 175, 0.6);
}

/* ─── Live refinement counters (inside the pipeline card) ─────────── */

.planner-refine-panel {
  margin: 10px 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-muted, #d8dce3);
  border-radius: 8px;
  background: var(--bg-muted, #f4f6fa);
}

.planner-refine-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 0.94rem;
}

.planner-refine-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.planner-refine-tile {
  text-align: center;
  padding: 10px 6px;
  border-radius: 6px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-muted, #d8dce3);
}

.planner-refine-tile-num {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text, #1a1d21);
  font-variant-numeric: tabular-nums;
}

.planner-refine-tile-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #5b6573);
  margin-top: 2px;
}

.planner-refine-tile-judges .planner-refine-tile-num { color: var(--accent, #4f7cff); }
.planner-refine-tile-splits .planner-refine-tile-num { color: rgba(180, 83, 9, 1); }
.planner-refine-tile-replaced .planner-refine-tile-num { color: rgba(20, 120, 65, 1); }

.planner-refine-budget {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.planner-refine-budget-track {
  flex: 1;
  height: 6px;
  background: rgba(120, 130, 145, 0.18);
  border-radius: 3px;
  overflow: hidden;
}

.planner-refine-budget-fill {
  display: block;
  height: 100%;
  background: var(--accent, #4f7cff);
  transition: width 0.25s ease;
}

.planner-refine-budget-fill.planner-refine-budget-warn {
  background: rgba(232, 168, 56, 1);
}

.planner-refine-budget-fill.planner-refine-budget-danger {
  background: rgba(192, 57, 43, 1);
}

@media (max-width: 600px) {
  .planner-refine-tiles {
    grid-template-columns: 1fr;
  }
}

/* ─── Stage outputs feed (live activity log below pipeline) ────────── */

.planner-stage-outputs {
  margin: 12px 0 6px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-muted, #d8dce3);
}

.planner-stage-outputs-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.planner-stage-outputs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.planner-stage-output-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-muted, #d8dce3);
  font-size: 0.9rem;
  line-height: 1.45;
}

.planner-stage-output-glyph {
  flex: 0 0 18px;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  margin-top: 1px;
  color: var(--text-muted, #5b6573);
}

.planner-stage-output-done .planner-stage-output-glyph { color: rgba(20, 120, 65, 1); }
.planner-stage-output-running .planner-stage-output-glyph {
  color: var(--accent, #4f7cff);
  animation: planner-stage-spin 1.5s linear infinite;
  display: inline-block;
}
.planner-stage-output-failed .planner-stage-output-glyph { color: rgba(160, 40, 30, 1); }
.planner-stage-output-awaiting .planner-stage-output-glyph { color: rgba(160, 110, 20, 1); }
.planner-stage-output-skipped .planner-stage-output-glyph { color: var(--text-muted, #5b6573); }

@keyframes planner-stage-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.planner-stage-output-body {
  flex: 1;
  min-width: 0;
}

.planner-stage-output-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.planner-stage-output-label {
  font-weight: 600;
  color: var(--text, #1a1d21);
}

.planner-stage-output-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #5b6573);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.planner-stage-output-text {
  margin: 4px 0 0;
  color: var(--text, #1a1d21);
  word-break: break-word;
}

.planner-stage-output-running {
  border-color: var(--accent, #4f7cff);
  background: rgba(70, 120, 220, 0.05);
}
.planner-stage-output-done {
  border-color: rgba(34, 167, 92, 0.35);
}
.planner-stage-output-failed {
  border-color: rgba(192, 57, 43, 0.45);
  background: rgba(192, 57, 43, 0.04);
}
.planner-stage-output-awaiting {
  border-color: rgba(232, 168, 56, 0.5);
  background: rgba(232, 168, 56, 0.06);
}
.planner-stage-output-skipped {
  opacity: 0.7;
  border-style: dashed;
}

/* Voice dictation (E7): planner mic recording state */
#planner-mic.is-listening { color: #d33; animation: mic-pulse 1.1s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }


/* ─── ADR-0002 Phase E.2 — Routines tab ─────────────────────────────────── */

/* Two-pane builder: form on the left, run-history on the right. Same shape
   as .agent-builder so the visual rhythm matches across tabs. */
.routine-builder {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .routine-builder {
    grid-template-columns: 1fr;
  }
}
.routine-builder__form fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
}
.routine-builder__form legend {
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0 6px;
}
.routine-mode-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  font-size: 0.9rem;
}
.routine-schedule-fields {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Day-of-week chip row for the "Specific days" picker. The chips behave
   like multi-select toggles — checked state pops the background. */
.routine-schedule-days {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}
.routine-schedule-days__label {
  font-size: 0.85rem;
  font-weight: 500;
  margin-right: 4px;
}
.routine-schedule-day {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.routine-schedule-day input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.routine-schedule-day span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.82rem;
  background: var(--bg-muted);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.routine-schedule-day input:checked + span {
  background: var(--accent, #38a);
  border-color: var(--accent, #38a);
  color: #fff;
}
.routine-schedule-day input:focus-visible + span {
  outline: 2px solid var(--accent, #38a);
  outline-offset: 2px;
}

/* Live schedule summary — small italic helper text under the picker that
   tells the user what their selections actually mean. */
#routine-schedule-summary {
  margin-top: 6px;
  font-style: italic;
  color: var(--text-subtle);
}

/* Stage rows — each row is its own bordered card with reorder buttons. */
.routine-stages-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.routine-stage-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  background: var(--bg-muted);
}
.routine-stage-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.routine-stage-row__num {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.routine-stage-row__controls {
  display: flex;
  gap: 4px;
}
/* ─── Drag-and-drop reorder (UX P16) ───────────────────────────────────────
   Drag handle on the left of the row head. Only the handle is draggable —
   the row stays selectable so textareas work as expected. `cursor: grab`
   on idle, `grabbing` while held. The ↑/↓ buttons remain as a fallback
   for touch + a11y (HTML5 drag events don't fire on touch screens). */
.routine-stage-row__handle {
  border: 0;
  background: transparent;
  color: var(--text-subtle);
  cursor: grab;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 6px;
  margin-right: 6px;
  border-radius: 4px;
  user-select: none;
  /* Slightly tighten the glyph so the two dots render compactly. */
  letter-spacing: -0.15em;
}
.routine-stage-row__handle:hover {
  background: var(--bg-surface);
  color: var(--text);
}
.routine-stage-row__handle:active {
  cursor: grabbing;
}
.routine-stage-row.is-dragging {
  /* Dim the source row so the user sees something is moving without
     hiding it entirely (hiding would jump the layout). */
  opacity: 0.4;
}
/* Drop-position indicator: a 2px accent line above or below the target row,
   driven by the dragover handler in routines.js. Negative margins so the
   line sits exactly between rows instead of nudging layout. */
.routine-stage-row.is-drop-above {
  box-shadow: 0 -2px 0 0 var(--accent, #3b82f6);
}
.routine-stage-row.is-drop-below {
  box-shadow: 0 2px 0 0 var(--accent, #3b82f6);
}

/* Run-history pane — compact rows with status colour coding. */
.routine-runs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.routine-run-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
}
.routine-run-row__head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px;
  align-items: center;
}
/* Retry button stays compact + neutral; failed-row color cues come from
   the left-border colour set on .routine-run-row--failed below. */
.routine-run-row__retry {
  padding: 2px 10px;
  font-size: 0.78rem;
}
.routine-run-row__status {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72rem;
}
.routine-run-row--pending { border-left: 3px solid #888; }
.routine-run-row--running { border-left: 3px solid #38a; }
.routine-run-row--done { border-left: 3px solid #2a7; }
.routine-run-row--failed { border-left: 3px solid #d33; }
.routine-run-row__trigger {
  font-size: 0.72rem;
  color: var(--text-subtle);
}
.routine-run-row__time {
  font-size: 0.78rem;
  color: var(--text-subtle);
}
/* Per-run tokens + estimated $ — small monospace chip so the user can
   scan column-by-column down the runs list to spot a cost spike. Tooltip
   on hover explains the rate. */
.routine-run-row__cost {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--text-subtle);
  background: var(--bg-muted);
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: help;
}

/* Routine editor header — title on the left, rolling-30-day cost chip
   on the right when the routine has runs in the window. */
.routine-builder__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.routine-builder__header h3 {
  margin: 0;
}
.routine-month-cost {
  /* Slightly larger than the per-run chip — this is the headline cost
     number, the per-run chips are details below. Still monospace so
     the user reads it as data, not a label. */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--text);
  background: var(--bg-muted);
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: help;
}
.routine-month-cost[hidden] {
  display: none;
}
/* Wraps the headline "Last 30d" + the projection "Next 30d" chips so
   they sit side-by-side on the routine editor header. Either may be
   hidden independently (e.g. on-demand routine has no forecast). */
.routine-cost-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}
/* The forecast chip uses the same shape as routine-month-cost; the
   accent on the background distinguishes a projected figure from the
   actual one. Subtle — same neutral palette, just lighter so the
   "Last 30d" remains the headline. */
.routine-forecast-cost {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted, var(--text));
}
.routine-run-row__error {
  font-size: 0.82rem;
  color: #d33;
  line-height: 1.4;
  cursor: help;
  padding: 4px 0 2px 0;
}

/* Outputs strip — card grid below the builder. */
.routine-outputs {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.routine-outputs__head h2 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
}
.routine-outputs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.routine-output-card {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg-muted);
  cursor: pointer;
  transition: border-color 0.12s;
}
.routine-output-card:hover {
  border-color: var(--accent, #38a);
}
.routine-output-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.routine-output-card__routine {
  font-weight: 600;
  font-size: 0.9rem;
}
.routine-output-card__kind {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-subtle);
}
.routine-output-card__preview {
  margin: 4px 0;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
  /* clamp to ~3 lines so the cards stay even. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.routine-output-card__meta {
  font-size: 0.72rem;
  color: var(--text-subtle);
}

/* Output detail dialog — full content, monospace preserves whitespace. */
.routine-output-dialog {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  max-width: min(800px, 90vw);
  max-height: 80vh;
  background: var(--bg-surface);
  color: var(--text);
}
.routine-output-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.routine-output-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.routine-output-dialog__head h3 {
  margin: 0;
  font-size: 1rem;
}
.routine-output-dialog__actions {
  display: inline-flex;
  gap: 6px;
}
.routine-output-dialog__body {
  padding: 16px;
  overflow: auto;
  max-height: 65vh;
}
.routine-output-dialog__pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Status banner colour codes for the save / run feedback. */
.personal-form-status--ok { color: #2a7; }
.personal-form-status--error { color: #d33; }

/* ─── Manage-all-shares panel (ADR-0002 UX P11) ────────────────────────── */
/* "Shared with others" — list of every active share link the user has
   issued so they can audit + revoke from one place. Lives at the bottom
   of the Routines tab; hidden when there are zero shares. */

.routine-shares {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.routine-shares[hidden] {
  display: none;
}
.routine-shares__head h2 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
}
.routine-shares-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.routine-share-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Same fade-on-hide as agent-memory-row for the undo pattern. */
  transition: opacity 180ms ease-out;
}
.routine-share-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
}
.routine-share-row__routine {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}
.routine-share-row__expiry {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  white-space: nowrap;
}
.routine-share-row__expiry--ok    { color: var(--text-subtle); }
.routine-share-row__expiry--warn  { color: #a60; border-color: rgba(170, 102, 0, 0.4); }
.routine-share-row__expiry--soon  { color: #d33; border-color: rgba(221, 51, 51, 0.5); }

.routine-output-dialog__share-group {
  display: inline-flex;
  align-items: center;
}
.routine-output-dialog__share-group select {
  padding: 4px 8px;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text);
}
.routine-share-row__kind {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-subtle);
}
.routine-share-row__time {
  font-size: 0.78rem;
  color: var(--text-subtle);
}
.routine-share-row__preview {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
  /* Clamp to ~2 lines so the row stays scannable. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.routine-share-row__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Token slug on the left (visual anchor); buttons hug the right edge. */
  justify-content: space-between;
  flex-wrap: wrap;
}
.routine-share-row__token {
  font-size: 0.72rem;
  color: var(--text-subtle);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ─── Toast notifications (ADR-0002 UX P9 — personality pass) ──────────── */
/* Transient celebratory feedback for action successes ("Saved", "Link
   copied"). Fixed bottom-right; stack newest-at-the-bottom; slide-in from
   the right, fade out. Inline status banners stay for form errors —
   toasts are for action confirmations, not validation. */

.toast-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  /* Don't block clicks on the page when no toast is visible. Individual
     toast nodes re-enable pointer events for their own buttons. */
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 380px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bg-surface, #fff);
  color: var(--text, #1a1a1a);
  border: 1px solid var(--border, #e5e5e5);
  border-left: 4px solid var(--border, #e5e5e5);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04);
  pointer-events: auto;
  font-size: 0.88rem;
  line-height: 1.4;
  /* Slide-in animation: starts off-screen-right + transparent. The
     `.toast--entering` class set on next animation frame snaps it back
     to the resting position so the transition runs. */
  transform: translateX(20px);
  opacity: 0;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}
.toast--entering {
  transform: translateX(0);
  opacity: 1;
}
.toast--leaving {
  /* Slide right + fade out on dismiss. */
  transform: translateX(20px);
  opacity: 0;
}
.toast--success {
  border-left-color: #2a7;
}
.toast--error {
  border-left-color: #d33;
}
.toast--info {
  border-left-color: #38a;
}
.toast__icon {
  font-size: 1rem;
  line-height: 1;
  /* Match the left-border colour to the kind icon so colourblind users
     have the icon-shape distinction in addition to the colour. */
}
.toast--success .toast__icon { color: #2a7; }
.toast--error   .toast__icon { color: #d33; }
.toast--info    .toast__icon { color: #38a; }
.toast__body {
  flex: 1;
  word-break: break-word;
}
.toast__action {
  background: transparent;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 6px;
  color: var(--accent, #38a);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.toast__action:hover {
  background: var(--bg-muted, #f4f4f4);
}
.toast__close {
  background: transparent;
  border: none;
  color: var(--text-subtle, #888);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.toast__close:hover {
  color: var(--text, #1a1a1a);
  background: var(--bg-muted, #f4f4f4);
}
.toast__close:focus-visible {
  outline: 2px solid var(--accent, #38a);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .toast-container {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .toast {
    min-width: 0;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: opacity 120ms ease-out;
    transform: none;
  }
  .toast--leaving {
    transform: none;
  }
}

/* ─── Agent trust panel (ADR-0002 UX P8) ─────────────────────────────────── */
/* The "What this Agent remembers about me" disclosure inside the Experience
   Skill tier. Wrapped in a <details> so the user can collapse it once they've
   audited; opens by default the first time it's seen. */

.agent-trust-panel {
  margin-top: 12px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.agent-trust-panel[hidden] {
  display: none;
}
.agent-trust-panel__head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}
.agent-trust-panel__head::-webkit-details-marker {
  display: none;
}
.agent-trust-panel__head::before {
  content: "›";
  display: inline-block;
  transition: transform 0.14s;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-subtle);
}
details[open] > .agent-trust-panel__head::before {
  transform: rotate(90deg);
}
.agent-trust-panel__title {
  font-weight: 600;
  font-size: 0.88rem;
}
.agent-trust-panel__body {
  margin-top: 10px;
}
.agent-trust-panel__list {
  margin: 0 0 10px 0;
  padding: 0;
  /* Cap to ~3 rows visible at once; scroll for the rest so a long memory
     log doesn't push the Save buttons offscreen. */
  max-height: 320px;
  overflow-y: auto;
}
.agent-trust-panel__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agent-memory-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-muted);
  padding: 8px 10px;
  /* Smooth fade on optimistic-hide for the undo pattern (UX P14). The
     toast countdown is 5s; the fade itself is ~180ms so the row settles
     quickly without being jarring. */
  transition: opacity 180ms ease-out;
}
.agent-memory-row--user {
  border-left: 3px solid #6b8;
}
.agent-memory-row--assistant {
  border-left: 3px solid #88a;
}
.agent-memory-row__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}
.agent-memory-row__role {
  font-weight: 600;
  font-size: 0.78rem;
}
.agent-memory-row__time {
  font-size: 0.72rem;
  color: var(--text-subtle);
}
.agent-memory-row__content {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text);
  /* Clamp very long turns so the panel scans quickly; full content stays
     in the <pre> so it can be selected + copied. */
  max-height: 6em;
  overflow-y: auto;
}
.agent-trust-panel__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  /* The three buttons (Preview, Export, Forget all) can wrap on narrow
     screens rather than overflow horizontally. */
  flex-wrap: wrap;
}

/* Memory preview modal (ADR-0002 UX P13). Mirrors routine-output-dialog
   but uses a slightly different accent so users distinguish "Agent's
   prompt block" from "Routine Output content". */
.agent-memory-preview-dialog {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  max-width: min(780px, 92vw);
  max-height: 82vh;
  background: var(--bg-surface);
  color: var(--text);
}
.agent-memory-preview-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.agent-memory-preview-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.agent-memory-preview-dialog__head h3 {
  margin: 0;
  font-size: 1rem;
}
.agent-memory-preview-dialog__body {
  padding: 16px;
  overflow: auto;
  max-height: 68vh;
}
.agent-memory-preview-dialog__body p {
  margin: 0 0 12px 0;
}
.agent-memory-preview-dialog__pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 12px 14px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}

/* ─── Cmd+K command palette (ADR-0002 UX P15 — fast nav) ─────────────────────
   Lazy-mounted <dialog> rendered by features/palette/palette.js. Sits over
   the whole app, opened by ⌘K / Ctrl+K. Visual language borrows from the
   existing Output / Memory dialogs (same border radius, same backdrop alpha)
   so it feels like part of the same family. Anchored a little above centre
   so the keyboard doesn't push it off-screen on small viewports. */
.cmdk-dialog {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  width: min(640px, 92vw);
  max-height: 70vh;
  background: var(--bg-surface);
  color: var(--text);
  /* Anchor toward the top — feels like Spotlight / VS Code's palette. */
  margin: 12vh auto auto auto;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}
.cmdk-dialog::backdrop {
  background: rgba(0, 0, 0, 0.32);
  /* Soft blur so the underlying UI is visible-but-defocused. */
  backdrop-filter: blur(2px);
}
.cmdk-form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  margin: 0;
}
.cmdk-input {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  font-size: 0.95rem;
  background: transparent;
  color: var(--text);
  outline: none;
  border-radius: 10px 10px 0 0;
}
.cmdk-input::placeholder {
  color: var(--text-subtle);
}
.cmdk-list {
  list-style: none;
  padding: 6px;
  margin: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.cmdk-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.cmdk-row__icon {
  font-size: 1rem;
  text-align: center;
}
.cmdk-row__label {
  font-size: 0.9rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-row__hint {
  font-size: 0.72rem;
  color: var(--text-subtle);
}
.cmdk-row.is-active,
.cmdk-row:hover {
  /* Mute-blue active row — readable on both light + dark themes since the
     palette inherits theme-aware vars below. */
  background: var(--bg-muted);
}
.cmdk-row.is-active .cmdk-row__label {
  color: var(--text);
  font-weight: 500;
}
.cmdk-empty {
  list-style: none;
  padding: 18px;
  text-align: center;
  color: var(--text-subtle);
  font-size: 0.85rem;
}
.cmdk-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--text-subtle);
}
.cmdk-footer kbd {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
}

/* ─── First-run welcome dialog (UX P17) ────────────────────────────────────
   Lazy-mounted by features/onboarding/welcome.js. Shown once to fresh
   users to introduce the 5-term vocabulary + surface 3 quick-start CTAs.
   Wider than the cmdk palette because the body has a definition list and
   readable line lengths matter. */
.welcome-dialog {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  width: min(560px, 94vw);
  max-height: 88vh;
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}
.welcome-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
.welcome-dialog__form {
  margin: 0;
  max-height: inherit;
  display: flex;
  flex-direction: column;
}
.welcome-dialog__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 12px 20px;
  border-bottom: 1px solid var(--border);
}
.welcome-dialog__head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.welcome-dialog__icon {
  font-size: 1.3rem;
}
.welcome-dialog__body {
  padding: 16px 20px 20px 20px;
  overflow-y: auto;
}
.welcome-dialog__lede {
  margin: 0 0 12px 0;
  font-size: 0.92rem;
  color: var(--text);
}
.welcome-dialog__vocab {
  display: grid;
  /* Term column auto-sized; definition takes the rest. The blank row
     between each pair adds breathing room. */
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  margin: 0 0 20px 0;
}
.welcome-dialog__vocab dt {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  white-space: nowrap;
}
.welcome-dialog__vocab dt span {
  margin-right: 4px;
}
.welcome-dialog__vocab dd {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-subtle);
  line-height: 1.4;
}
.welcome-dialog__ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px 0;
}
.welcome-dialog__footer-hint {
  margin: 0;
  text-align: center;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.welcome-dialog__footer-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
}

/* ─── Keyboard shortcuts help (UX P18) ─────────────────────────────────────
   Opened with `?`. Lazy-mounted dialog grouped by surface — Navigation,
   Command palette, Chat composer, Routine stages. Same dialog vocabulary
   as cmdk + welcome so it reads as one family. */
.shortcuts-dialog {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  width: min(560px, 94vw);
  max-height: 86vh;
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}
.shortcuts-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
.shortcuts-dialog__form {
  margin: 0;
  display: flex;
  flex-direction: column;
  max-height: inherit;
}
.shortcuts-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.shortcuts-dialog__head h2 {
  margin: 0;
  font-size: 1rem;
}
.shortcuts-dialog__body {
  padding: 16px 20px 20px 20px;
  overflow-y: auto;
}
.shortcuts-group {
  margin-bottom: 18px;
}
.shortcuts-group:last-child {
  margin-bottom: 0;
}
.shortcuts-group__title {
  margin: 0 0 8px 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
}
.shortcuts-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shortcuts-row {
  display: grid;
  /* Wide first column so the longest kbd run lines up; rest goes to the
     label. The auto sizing keeps short keys compact while letting "Drag ⋮⋮"
     widen as needed. */
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 14px;
  align-items: baseline;
}
.shortcuts-row__keys {
  margin: 0;
  font-size: 0.82rem;
  white-space: nowrap;
}
.shortcuts-row__label {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text);
}
.shortcuts-row__keys kbd {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}
.shortcuts-or {
  margin: 0 6px;
  font-size: 0.72rem;
  color: var(--text-subtle);
}

/* ─── Unified sidebar History (2026-05-30) ─────────────────────────────────
   Top-level "History" link in the sidebar that aggregates chats + agents +
   tasks + routines + plans + outputs into one expandable list, each row
   prefixed with its type ("chat - …", "task - …", "routine - …"). The
   per-section "Recents" sub-collapsers below are gone — section bodies
   now render their lists directly (the inlined contents reuse the
   .chat-history-list / .sidebar-sub-body classes that already drove the
   former Recents look, so no other layout tweaks are needed here). */
.unified-history-list {
  /* Slightly tighter than a free-floating list so the type-prefixed rows
     pack into the sidebar's column without truncating the title text. */
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.unified-history-row {
  /* Inherits .chat-history-row's button styling; tweak only the layout
     to fit the [type] [title] [meta] grid. */
  display: grid;
  grid-template-columns: max-content 1fr auto;
  align-items: baseline;
  gap: 6px;
  padding: 4px 8px;
  text-align: left;
}
.unified-history-row__type {
  /* Tag-like prefix — muted + monospace so the user reads "kind — title"
     as a two-part affordance, not one long title. */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: var(--text-subtle);
  white-space: nowrap;
  text-transform: lowercase;
}
.unified-history-row__title {
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.unified-history-row__meta {
  font-size: 0.7rem;
  color: var(--text-subtle);
  white-space: nowrap;
}

/* ─── Sidebar section buttons + section-menu popup (2026-05-30) ────────────
   The sidebar's chat/agents/plans/tasks/routines links are now plain
   buttons that open the section-menu popup. The popup hosts a 3-button
   level-1 view (New / Templates / History) and swaps to a list view
   when the user picks one — list views show the existing renderers'
   target nodes, borrowed from #sidebar-data-mounts and returned on
   close. Visual language is intentionally aligned with #new-menu so
   the two popups feel like one family. */

/* Flat sidebar button — simple, tight, with a small icon. No chevron
   on plain buttons (clicking opens a popup or navigates). The
   expandable variants (Workspace, Components) carry .sidebar-link--
   expandable + a separate chevron span; their open/close state rotates
   the chevron via the host <details>[open] selector below. Sub-items
   under an expanded group use .sidebar-link--sub for a smaller icon
   + a left indent so the hierarchy reads at a glance. */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s ease;
}
.sidebar-link:hover {
  background: var(--bg-muted);
}
.sidebar-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.sidebar-link-icon {
  /* Small icon — emoji at this size reads as a chip, not a logo. */
  font-size: 0.85rem;
  line-height: 1;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-link-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-link-chevron {
  /* Chevron only on the expandable group summaries. Tiny, muted; rotates
     to ▼ when its host <details> is open (rule below). */
  font-size: 1.3rem;
  color: var(--text-subtle);
  transition: transform 0.15s ease;
  width: 10px;
  text-align: center;
  flex-shrink: 0;
}
/* Expandable group summary — same look as a flat button but with the
   chevron column reserved. Native <details>+<summary> drives state. */
.sidebar-collapse {
  margin: 0;
}
.sidebar-collapse > summary.sidebar-link--expandable {
  list-style: none;  /* hide the native disclosure triangle */
}
.sidebar-collapse > summary.sidebar-link--expandable::-webkit-details-marker {
  display: none;
}
.sidebar-collapse[open] > summary .sidebar-link-chevron {
  transform: rotate(90deg);
}
/* Expanded body — minimum spacing between sub-items + a left rail to
   visually attach them to the parent. */
.sidebar-collapse-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1px 0 2px 0;
}
.sidebar-link--sub {
  padding-left: 24px;  /* line up the icon with the parent's label */
  font-size: 0.82rem;
  font-weight: 400;
}
.sidebar-link--sub .sidebar-link-icon {
  font-size: 0.78rem;
  width: 12px;
}

/* Section-menu popup card — wider than the +New popup so list views
   inside it have enough room to render comfortably. */
.section-menu-card {
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 0;  /* head + body each carry their own padding */
}
.section-menu-head {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.section-menu-title {
  margin: 0;
  font-weight: 600;
  font-size: 0.98rem;
  text-align: center;
}
.section-menu-back,
.section-menu-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-subtle);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.section-menu-back:hover,
.section-menu-close:hover {
  background: var(--bg-muted);
  color: var(--text);
}
.section-menu-back[hidden] {
  visibility: hidden;  /* keep the grid column reserved */
  display: inline-flex;
}

/* Level-1 grid + list slot share the same body padding so the size
   doesn't jump when the user moves between views. */
.section-menu-grid,
.section-menu-list {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.section-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.section-menu-option {
  /* Inherits .new-menu-item; only the grid-column tweak differs (single
     column reads more deliberate for 3 vertical choices than 2-wide). */
  width: 100%;
}
/* The borrowed list node (chat history, personal agents/tasks/etc.) is
   a flex column. Strip the off-screen container's hidden behaviour
   when it lands inside the popup body. */
.section-menu-list > .chat-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Empty-state messages inside a borrowed list need a bit more breathing
   room than they get in the sidebar's compact column. */
.section-menu-list .empty-state {
  padding: 12px 8px;
  text-align: center;
}

/* ─── Approvals inbox (2026-05-30) ─────────────────────────────────────────
   Sidebar pill + count badge, plus the tab content (filter pills + cards).
   The badge inherits the topbar notification-bell visual language so the
   user reads "X waiting" the same way regardless of which surface it
   shows up on. Cards are accordion-style: head shows summary + status +
   age; clicking expands the payload + actions inline. */

/* Tiny chip badge on the sidebar Approvals link — shows pending count. */
.sidebar-link-badge {
  background: var(--accent);
  color: var(--bg-surface);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
  line-height: 1.3;
  flex-shrink: 0;
}
.sidebar-link-badge[hidden] {
  display: none;
}

/* Approvals tab content shell. */
.approvals-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 4px;
  max-width: 880px;
}
.approvals-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.approvals-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.filter-pill {
  /* Toggle-style pill — small + muted until active. Mirrors the run-status
     pills in the routines tab. */
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-subtle);
  padding: 4px 12px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.filter-pill:hover {
  background: var(--bg-muted);
  color: var(--text);
}
.filter-pill.is-active {
  background: var(--accent);
  color: var(--bg-surface);
  border-color: var(--accent);
}

.approvals-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Card = one approval row. Head is always visible; body shows on
   .is-expanded so only one card is open at a time. */
.approval-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  overflow: hidden;
}
.approval-card.is-expanded {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.approval-card__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: background 0.1s ease;
}
.approval-card__head:hover {
  background: var(--bg-muted);
}
.approval-card__summary {
  flex: 1;
  font-weight: 500;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.approval-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--text-subtle);
  flex-shrink: 0;
}
.approval-card__kind {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.approval-card__time {
  font-size: 0.72rem;
}
.approval-status {
  /* Per-status tinting. Visual signals match what the user expects:
     pending = neutral, executed = green, rejected/expired = grey,
     approved-but-failed = red. */
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.approval-status--pending { background: var(--bg-muted); color: var(--text); }
.approval-status--executed { background: #d1fadf; color: #047857; }
.approval-status--approved { background: #fee2e2; color: #b91c1c; }
.approval-status--rejected { background: var(--bg-muted); color: var(--text-subtle); }
.approval-status--expired { background: var(--bg-muted); color: var(--text-subtle); text-decoration: line-through; }

.approval-card__body {
  padding: 0 14px 12px 14px;
  border-top: 1px solid var(--border);
  margin-top: 0;
}
.approval-card__payload {
  background: var(--bg-muted);
  padding: 8px 10px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 8px 0;
  max-height: 320px;
  overflow: auto;
}
.approval-card__result,
.approval-card__error,
.approval-card__rejection {
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 6px 0;
}
.approval-card__result { background: #d1fadf; color: #047857; }
.approval-card__error { background: #fee2e2; color: #b91c1c; }
.approval-card__rejection { background: var(--bg-muted); color: var(--text-subtle); }
.approval-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}


/* ─── Cost & Billing card (Settings) ──────────────────────────────────── */
/* Wider card so the budget form + top-N tables breathe. The dashboard grid
   defaults to auto-fit columns — `grid-column: 1 / -1` makes this card
   span the full width when room allows. */
.billing-card {
  grid-column: 1 / -1;
}
.billing-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 16px;
  flex-wrap: wrap;
}
.billing-hero__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.billing-hero__label {
  font-size: 0.78rem;
  color: var(--text-subtle, var(--text));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.billing-hero__amount {
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.billing-hero__meta {
  margin-top: 2px;
}
.billing-hero__cap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 220px;
}
.billing-cap-bar {
  width: 200px;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden;
}
.billing-cap-bar__fill {
  height: 100%;
  background: #16a34a;
  transition: width 240ms ease;
}
.billing-cap-bar__fill[data-state="alert"] { background: #d97706; }
.billing-cap-bar__fill[data-state="over"]  { background: #dc2626; }
.billing-cap-badge {
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text);
}
.billing-cap-badge[data-state="alert"] { background: #fef3c7; color: #92400e; }
.billing-cap-badge[data-state="over"]  { background: #fee2e2; color: #b91c1c; }

.billing-section {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.billing-section > summary {
  cursor: pointer;
  margin-bottom: 6px;
}

.billing-topn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.billing-topn-title {
  font-size: 0.85rem;
  margin: 0 0 6px;
  color: var(--text-subtle, var(--text));
}
.billing-topn {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.billing-topn-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
}
.billing-topn-row:nth-child(odd) {
  background: var(--bg-muted);
}
.billing-topn-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.billing-topn-meta {
  white-space: nowrap;
}
.billing-topn-cost {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Per-stage cost breakdown panel (routine editor sidebar) ────────── */
.routine-cost-breakdown {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.routine-cost-breakdown > summary {
  cursor: pointer;
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.routine-cost-breakdown__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.routine-cost-breakdown__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "stage name total"
    ".     avg  avg";
  gap: 2px 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
}
.routine-cost-breakdown__row:nth-child(odd) {
  background: var(--bg-muted);
}
.routine-cost-breakdown__stage {
  grid-area: stage;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle, var(--text));
}
.routine-cost-breakdown__name {
  grid-area: name;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.routine-cost-breakdown__avg {
  grid-area: avg;
}
.routine-cost-breakdown__total {
  grid-area: total;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Top-N rows in Settings → Cost & Billing become buttons when they're
   click-through links to the routine / agent editor. Reset the button
   chrome so the row reads the same as the original <div>. */
.billing-topn-row--link {
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.billing-topn-row--link:hover,
.billing-topn-row--link:focus-visible {
  background: var(--bg-hover, var(--bg-muted));
  outline: 1px solid var(--accent, #6366f1);
  outline-offset: -1px;
}

/* ─── Recent runs feed (Settings → Cost & Billing) ──────────────────── */
.billing-recent-runs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
/* Recent-run row uses a <details> wrapping <summary> (the row itself)
   + a <div class="...__expand"> (the inline output preview). Native
   chevron suppressed so we render our own that rotates on open. */
.billing-run-row {
  border-radius: 6px;
  padding: 0;
}
.billing-run-row:nth-child(odd) { background: var(--bg-muted); }
.billing-run-row[open] {
  background: var(--bg-hover, var(--bg-muted));
  outline: 1px solid var(--accent, #6366f1);
  outline-offset: -1px;
}
.billing-run-row__summary {
  display: grid;
  grid-template-columns: 14px 90px 1fr auto auto;
  grid-template-areas:
    "chev when name status cost"
    ".    .    error error error";
  align-items: baseline;
  gap: 4px 10px;
  padding: 6px 10px;
  list-style: none;
  cursor: pointer;
}
.billing-run-row__summary::-webkit-details-marker { display: none; }
.billing-run-row__chevron {
  grid-area: chev;
  color: var(--text-subtle, var(--text));
  font-size: 0.72rem;
  transition: transform 120ms ease;
  align-self: center;
}
.billing-run-row[open] .billing-run-row__chevron { transform: rotate(90deg); }
.billing-run-row__when   { grid-area: when; white-space: nowrap; }
.billing-run-row__name   { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.billing-run-row__status { grid-area: status; font-size: 0.74rem; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.billing-run-row__status--done    { color: #047857; background: #d1fadf; border-color: transparent; }
.billing-run-row__status--failed  { color: #b91c1c; background: #fee2e2; border-color: transparent; }
.billing-run-row__status--running { color: #92400e; background: #fef3c7; border-color: transparent; }
.billing-run-row__status--pending { color: var(--text-subtle, var(--text)); }
.billing-run-row__cost   { grid-area: cost; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.billing-run-row__error  { grid-area: error; }

/* Expand panel — output preview (success) or full error (failure)
   + a small Open-editor sub-link. Indented to align with the row's
   name column so the panel reads as commentary on the row above. */
.billing-run-row__expand {
  padding: 8px 14px 10px 30px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.billing-run-row__output {
  max-height: 280px;
  overflow: auto;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.86rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.billing-run-row__error-full {
  margin: 0;
  padding: 8px 10px;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 6px;
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
}
.billing-run-row__open-editor {
  align-self: flex-start;
  font-size: 0.82rem;
  color: var(--accent, #6366f1);
  text-decoration: none;
}
.billing-run-row__open-editor:hover { text-decoration: underline; }

/* ── Today tab ─────────────────────────────────────────────────────────
   The landing "what needs me, right now?" feed. Four stacked sections
   (approvals, due runs, fresh outputs, notifications) each rendered as
   a list of row links. Layout mirrors `.approvals-shell` so the visual
   language is consistent across the personal section. */
.today-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 4px;
  max-width: 880px;
}
.today-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface, transparent);
}
.today-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.today-section-head h2 {
  font-size: 0.95rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.today-count {
  font-size: 0.72rem;
  background: var(--border);
  color: var(--text-subtle);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.today-section-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.today-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.today-row:hover,
.today-row:focus-visible {
  background: var(--hover, rgba(127,127,127,0.06));
  border-color: var(--border);
  outline: none;
}
.today-row-icon {
  font-size: 1.05rem;
  line-height: 1.2;
}
.today-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.today-row-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-row-meta {
  font-size: 0.78rem;
}
.today-row-preview {
  font-size: 0.82rem;
  color: var(--text-subtle);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.today-row-cta {
  font-size: 0.78rem;
  color: var(--accent, #6366f1);
  white-space: nowrap;
  align-self: center;
}
.today-pill {
  display: inline-block;
  font-size: 0.7rem;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 6px;
  font-weight: 500;
}
.today-pill--warn {
  background: rgba(220, 38, 38, 0.12);
  color: rgb(220, 38, 38);
}

/* ── Approvals bulk-select toolbar ─────────────────────────────────────
   Sticky bar above the cards once at least one is selected. Mirrors
   Gmail/Linear: a thin row of buttons + a count + a keyboard hint. */
.approval-bulkbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--accent, #6366f1);
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.08);
  position: sticky;
  top: 0;
  z-index: 1;
}
.approval-bulkbar kbd {
  font-family: inherit;
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
}
.approval-card__head-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: center;
}
.approval-card__check {
  margin: 0;
  cursor: pointer;
}
.approval-card__check--spacer {
  display: inline-block;
}
.approval-card.is-selected {
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) inset;
}

/* ── Sidebar usage meter ───────────────────────────────────────────────
   Lives just above the footer (Report / Settings). Shows plan + runs
   used vs cap + a thin progress bar. Three states: ok (default), warn
   (≥80%), over (≥100%). The anchor is a real link to /billing so a
   click drills into the full breakdown. */
.sidebar-usage {
  display: block;
  padding: 10px 12px;
  margin: 4px 8px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  font-size: 0.78rem;
  line-height: 1.3;
}
.sidebar-usage:hover {
  border-color: var(--accent, #6366f1);
}
.sidebar-usage__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}
.sidebar-usage__plan {
  text-transform: capitalize;
  font-weight: 600;
}
.sidebar-usage__count {
  font-variant-numeric: tabular-nums;
}
.sidebar-usage__bar {
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.sidebar-usage__fill {
  display: block;
  height: 100%;
  background: var(--accent, #6366f1);
  transition: width 0.3s ease;
}
.sidebar-usage__meta {
  margin-top: 4px;
  font-size: 0.72rem;
}
.sidebar-usage--warn .sidebar-usage__fill {
  background: #d97706;  /* amber */
}
.sidebar-usage--over .sidebar-usage__fill {
  background: #dc2626;  /* red */
}
.sidebar-usage--over {
  border-color: #dc2626;
}

/* ── Incident banner ──────────────────────────────────────────────────
   Sticky top bar shown when /status reports `degraded` or `down`.
   Pushes the rest of the page down via `body.has-incident { padding-top }`
   so it doesn't overlap any of the floating headers. */
.incident-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 8px 14px;
  text-align: center;
  font-size: 0.86rem;
  color: #fff;
  background: #d97706;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.incident-banner--down {
  background: #dc2626;
}
.incident-banner__link {
  color: #fff;
  text-decoration: underline;
  margin-left: 6px;
}
body.has-incident {
  padding-top: 36px;
}

/* ── Shared loading skeletons + error-state actions ────────────────────
   Reusable across feature surfaces. Mirrors the shimmer pattern from
   Linear / Notion / GitHub: a faint pulsing block that hints at the
   shape of the content arriving. */
@keyframes skeleton-pulse {
  0%   { opacity: 0.5; }
  50%  { opacity: 0.9; }
  100% { opacity: 0.5; }
}
.skeleton-line,
.skeleton-row {
  background: var(--border);
  border-radius: 6px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-line {
  display: block;
  height: 12px;
  width: 40%;
  margin: 4px 0;
}
.skeleton-line--md { width: 30%; }
.skeleton-line--lg { width: 60%; }
.skeleton-row {
  height: 44px;
  margin: 4px 0;
}
.empty-state__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
}

/* ── Accessibility — universal focus ring ──────────────────────────────
   Visible on every keyboard-focused interactive element. Uses the
   :focus-visible selector so mouse clicks don't get the ring (which
   is the WCAG-recommended distinction). */
:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip-to-content link — invisible until focused, jumps to <main>.
   Required by WCAG 2.4.1 (Bypass Blocks). The link element itself
   lives in index.html; this rule controls visibility. */
.skip-to-content {
  position: absolute;
  left: -10000px;
  top: 0;
  z-index: 10000;
  background: var(--accent, #6366f1);
  color: #fff;
  padding: 8px 14px;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-to-content:focus {
  left: 0;
}

/* Respect `prefers-reduced-motion`. Skeleton shimmer + banner shadows
   are decorative; users who've opted out of motion shouldn't see them
   pulse. */
@media (prefers-reduced-motion: reduce) {
  .skeleton-line,
  .skeleton-row {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ── Powers / Skills catalog tweaks ────────────────────────────────────
   Both pages reuse .tool-card / .tools-grid / .tools-section so they
   inherit the Tools page styling. A few small additions for the parts
   Tools doesn't render (a one-line hint under the name, and a chip
   strip in the detail dialog). */
.tool-card__hint {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  line-height: 1.3;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.power-detail__kws {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.skill-detail-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
}
.skill-detail-dialog__body h1,
.skill-detail-dialog__body h2,
.skill-detail-dialog__body h3 {
  margin-top: 14px;
}
.skill-detail-dialog__body p,
.skill-detail-dialog__body li {
  font-size: 0.9rem;
  line-height: 1.45;
}

/* ── Settings sub-tabs ─────────────────────────────────────────────────
   Vertical nav rail on the left of #config-tab; the active
   `.settings-section` panel fills the space to its right. The nested
   Admin section keeps its own horizontal pill nav. */
.settings-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.settings-subnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  width: 180px;
  border-right: 1px solid var(--border);
  padding-right: 12px;
}
.settings-subnav__btn {
  background: transparent;
  border: 0;
  color: var(--text-subtle);
  text-align: left;
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: color 0.1s ease, border-color 0.1s ease, background 0.1s ease;
}
.settings-subnav__btn:hover {
  background: var(--hover, rgba(127, 127, 127, 0.06));
  color: var(--text);
}
.settings-subnav__btn.is-active {
  color: var(--text);
  background: var(--hover, rgba(127, 127, 127, 0.06));
  border-left-color: var(--accent, #6366f1);
}

.settings-section {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.settings-section[hidden] {
  display: none;
}

/* Stack the rail above the panel on narrow viewports. */
@media (max-width: 720px) {
  .settings-layout {
    flex-direction: column;
    gap: 14px;
  }
  .settings-subnav {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 8px;
  }
  .settings-subnav__btn {
    width: auto;
    border-left: 0;
  }
}

.settings-admin-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.settings-admin-nav__btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-subtle);
  padding: 6px 12px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.settings-admin-nav__btn:hover {
  border-color: var(--accent, #6366f1);
}
.settings-admin-nav__btn.is-active {
  background: var(--accent, #6366f1);
  color: #fff;
  border-color: var(--accent, #6366f1);
}
.settings-admin-section[hidden] {
  display: none;
}
.settings-admin-section h2 {
  font-size: 1.05rem;
  margin: 0 0 10px;
}

/* ── Workspace tab (Organisations → Projects → resources) ─────────────── */
.workspace-view .ws-section { margin: 1.25rem 0; }
.workspace-view .ws-section__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.5rem;
}
.workspace-view .ws-section__head h2,
.workspace-view .ws-section__head h3 { margin: 0; font-size: 0.95rem; }
.workspace-view .ws-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border, #2a2a2a);
  border-radius: 8px; margin-bottom: 0.4rem;
}
.workspace-view .ws-row__actions { display: flex; gap: 0.5rem; align-items: center; }
/* Project/org card + its action controls sit side by side; the card grows. */
.workspace-view .ws-project { position: relative; display: flex; align-items: stretch; gap: 0.4rem; }
.workspace-view .ws-project .tool-card { flex: 1 1 auto; min-width: 0; }
.workspace-view .ws-project__del { flex: 0 0 auto; align-self: flex-start; }
.workspace-view .ws-project__actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.25rem; align-self: flex-start; }
/* Lifecycle buttons (rename / set-default / delete) under a detail header. */
.workspace-view .ws-header-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.workspace-view .ws-back {
  display: inline-block; margin-bottom: 0.5rem; font-size: 0.85rem;
  color: var(--muted, #9aa0a6); text-decoration: none;
}
.workspace-view .ws-back:hover { text-decoration: underline; }
.workspace-view .ws-subtabs {
  display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.75rem 0;
  border-bottom: 1px solid var(--border, #2a2a2a);
}
.workspace-view .ws-subtab {
  background: none; border: none; padding: 0.4rem 0.7rem; cursor: pointer;
  color: var(--muted, #9aa0a6); border-bottom: 2px solid transparent;
  text-transform: capitalize; font-size: 0.85rem;
}
.workspace-view .ws-subtab.is-active { color: var(--text, #e8eaed); border-bottom-color: var(--accent, #8ab4f8); }

/* Sidebar brand → home link (inherits the heading look, no underline). */
.sidebar-header .brand-home {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: inherit; text-decoration: none; cursor: pointer;
}
.sidebar-header .brand-home:hover { opacity: 0.85; }
/* Brand wordmark ↔ active-org cross-slide (see features/org/brandSwap.js). The
   label gently slides out left + back in from the right on each swap. Clipped so
   the horizontal travel never overflows the sidebar header. */
.brand-home { overflow: hidden; }
.brand-swap {
  display: inline-block; white-space: nowrap; max-width: 11rem;
  overflow: hidden; text-overflow: ellipsis;
  transition: transform 0.55s ease, opacity 0.55s ease; will-change: transform, opacity;
}
.brand-swap--out { transform: translateX(-16px); opacity: 0; }
.brand-swap--in { transform: translateX(16px); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .brand-swap, .brand-swap--out, .brand-swap--in { transition: opacity 0.3s ease; transform: none; }
}

/* ── Members & Access (IAM) — Settings → access ───────────────────────── */
.access-root .access-picker {
  display: flex; align-items: center; gap: 0.6rem; margin: 0.75rem 0;
}
.access-root .access-picker > span { font-weight: 600; font-size: 0.9rem; }
.access-root .access-picker select { padding: 0.35rem 0.5rem; }
.access-section { margin: 1.25rem 0; }
.access-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.access-section__head h3 { margin: 0; font-size: 0.95rem; }
.access-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border, #2a2a2a);
  border-radius: 8px; margin-bottom: 0.4rem;
}
.access-row__actions { display: flex; align-items: center; gap: 0.5rem; }
.access-row__actions select { padding: 0.25rem 0.4rem; }
.access-invite { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.6rem; flex-wrap: wrap; }
.access-invite input[type="email"] { flex: 1 1 240px; padding: 0.4rem 0.5rem; }
.access-invites { margin-top: 0.75rem; }
.access-invites h4 { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--muted, #9aa0a6); }

/* "📖 Learn more" docs link — a subtle pill pinned to the header's far-right
   corner. Replaces the old inline descriptions on pages + builder panels. */
.canvas-header:has(.canvas-ref-link) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.canvas-header:has(.canvas-ref-link) > h1 { margin-right: auto; } /* push the rest right */
.node-panel__head { display: flex; align-items: center; gap: 0.5rem; }

.canvas-ref-link {
  order: 9; /* after the title + any action button → the rightmost item */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  color: var(--muted, #9aa0a6);
  text-decoration: none;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 999px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.canvas-ref-link:hover {
  color: var(--text, #e8eaed);
  border-color: var(--accent, #8ab4f8);
  background: color-mix(in srgb, var(--accent, #8ab4f8) 14%, transparent);
  text-decoration: none;
}
.node-panel__head .canvas-ref-link { margin-left: auto; }
/* Docs anchors: offset so smooth-scroll targets aren't flush to the top. */
.doc-article h2[id] { scroll-margin-top: 1rem; }

/* ── "Start from a template" popup ────────────────────────────────────── */
.templates-dialog {
  border: 1px solid var(--border); border-radius: 14px; padding: 0; max-width: 760px; width: 92vw;
  background: var(--bg-surface); color: var(--text);
  box-shadow: 0 20px 60px rgba(17, 24, 39, 0.22);
}
.templates-dialog::backdrop { background: rgba(17, 24, 39, 0.45); }
.templates-dialog__card { display: flex; flex-direction: column; max-height: 80vh; }
.templates-dialog__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border);
}
.templates-dialog__head h3 { margin: 0; font-size: 1rem; color: var(--text); }
.templates-dialog__close {
  background: none; border: none; color: var(--text-subtle);
  font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.templates-dialog__close:hover { color: var(--text); }
.templates-dialog__body { padding: 1.1rem; overflow-y: auto; }

/* Report-an-issue dialog (reuses the .templates-dialog shell). */
.report-dialog { max-width: 480px; }
.report-dialog__body { display: flex; flex-direction: column; gap: 0.9rem; }
.report-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); }
.report-input {
  font: inherit; font-size: 0.9rem; color: var(--text);
  padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-surface); resize: vertical;
}
.report-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.report-dialog__foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.2rem; }

/* Generic prompt dialog (utils/dialog.js). Reuses the report-field/input styles. */
.prompt-dialog { max-width: 460px; }
#prompt-dialog-label { white-space: pre-wrap; }

/* ── Data & Compliance settings section ─────────────────────────────────── */
.comp-form { display: flex; flex-direction: column; gap: 0.5rem; }
.comp-form--inline { flex-flow: row wrap; align-items: center; }
.comp-form--inline input, .comp-form--inline select { flex: 1 1 8rem; min-width: 7rem; }
.comp-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--text-muted); }
.comp-field input, .comp-field select, .comp-form input, .comp-form select {
  font: inherit; font-size: 0.85rem; color: var(--text); padding: 0.4rem 0.55rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface);
}
.comp-field input:focus, .comp-field select:focus, .comp-form input:focus, .comp-form select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring);
}
.comp-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--text); }
.comp-hint { font-size: 0.76rem; color: var(--text-subtle); margin: 0.2rem 0 0; }
.comp-muted { color: var(--text-subtle); font-size: 0.82rem; }
.comp-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--text); }
.comp-list { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.6rem; }
.comp-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); }
.comp-row-main { flex: 1; min-width: 0; font-size: 0.84rem; color: var(--text); display: flex; flex-direction: column; gap: 0.1rem; }
.comp-row-actions { display: inline-flex; gap: 0.35rem; flex: 0 0 auto; }
.comp-decls { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.4rem; }
.comp-badge { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--bg-muted); color: var(--text-subtle); }
.comp-badge--warn, .comp-badge--high, .comp-badge--critical { background: #fef3c7; color: #92400e; }
.comp-badge--critical { background: #fee2e2; color: #991b1b; }
.comp-badge--ok { background: #dcfce7; color: #166534; }
.comp-status { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.7rem; }
.comp-inline-sel { font: inherit; font-size: 0.75rem; padding: 0.15rem 0.35rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-surface); color: var(--text); }

/* Active sessions (Settings → Privacy & Data → features/account/sessions.js). */
.sessions-list { margin-top: 0.6rem; }
.sessions-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.sessions-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.55rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); }
.sessions-row.is-current { border-color: var(--border-strong); }
.sessions-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.sessions-row__device { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.sessions-row__meta { font-size: 0.74rem; color: var(--text-muted); }
.sessions-row .btn-sm { flex: 0 0 auto; }

/* Two-factor auth (Settings → Privacy & Data → features/account/mfa.js). */
.mfa-card { margin-top: 0.6rem; }
.mfa-status { font-size: 0.85rem; color: var(--text); margin: 0 0 0.6rem; }
.mfa-status.mfa-on strong { color: #166534; }
.mfa-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.4rem; }
.mfa-form input { font: inherit; font-size: 0.85rem; padding: 0.4rem 0.5rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-surface); color: var(--text); }
.mfa-secret { margin: 0.4rem 0; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-muted, var(--bg-surface)); }
.mfa-secret code { font-size: 1rem; letter-spacing: 0.12em; word-break: break-all; color: var(--text); }
.mfa-codes { list-style: none; margin: 0.5rem 0; padding: 0.6rem 0.7rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-surface); display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1rem; }
.mfa-codes li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem; color: var(--text); }

/* Generic confirm dialog (utils/dialog.js). */
.confirm-dialog { max-width: 440px; }
.confirm-dialog__message { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
#confirm-ok.danger-button { background: var(--danger, #dc2626); border-color: var(--danger, #dc2626); color: #fff; }
#confirm-ok.danger-button:hover { background: var(--danger-strong, #b91c1c); border-color: var(--danger-strong, #b91c1c); }

/* ── Agent builder: per-agent attachment editor (Tools/Powers/Skills) ───── */
.agent-attach { display: flex; flex-direction: column; gap: 0.6rem; }
.agent-attach-add-row { display: flex; flex-direction: column; gap: 0.4rem; }
.agent-attach-add-row .agent-attach-add { width: 100%; padding: 0.4rem 0.5rem; }
.agent-attach-search-wrap { position: relative; }
.agent-attach-search-wrap .agent-attach-search {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 8px;
  background: var(--bg-input, var(--bg-surface, #fff));
  font: inherit;
  font-size: 0.85rem;
}
/* Type-ahead results popup under the search box. */
.agent-attach-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 2px;
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 8px;
  background: var(--bg-surface, #fff);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.agent-attach-result {
  text-align: left;
  padding: 0.45rem 0.6rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border, #2a2a2a);
  color: var(--text, #e8eaed);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}
.agent-attach-result:last-child { border-bottom: none; }
.agent-attach-result:hover,
.agent-attach-result:focus { background: var(--bg-hover, rgba(127, 127, 127, 0.15)); }
.agent-attach-result--empty { color: var(--muted, #9aa0a6); cursor: default; }
.agent-attach-result--empty:hover { background: none; }
/* Required-field asterisk in the Agent details panel. */
.req { color: var(--danger, #d9534f); font-weight: 600; margin-left: 1px; }

/* Org/Project selector row + inline "＋ New" button. */
.agent-scope-row { display: flex; gap: 6px; align-items: center; }
.agent-scope-row select { flex: 1 1 auto; min-width: 0; }
.agent-scope-row .agent-scope-new { flex: 0 0 auto; white-space: nowrap; }
/* Inline create-org / create-project panel. */
/* `:not([hidden])` so the `hidden` attribute (display:none) wins — without it
   this rule's display:flex overrides [hidden] and the box can't be closed. */
.agent-scope-create:not([hidden]) { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.agent-scope-create input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 8px;
  background: var(--bg-input, var(--bg-surface, #fff));
  font: inherit;
  font-size: 0.85rem;
}
.agent-scope-status { margin-top: 4px; min-height: 1em; }
.agent-attach-list { display: flex; flex-direction: column; gap: 0.4rem; }
.agent-attach-row { border: 1px solid var(--border, #2a2a2a); border-radius: 8px; }
.agent-attach-row.is-open { border-color: var(--accent, #8ab4f8); }
.agent-attach-row__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.4rem 0.5rem;
}
.agent-attach-name {
  background: none; border: none; color: var(--text, #e8eaed); cursor: pointer;
  text-align: left; flex: 1; font-size: 0.9rem; padding: 0;
}
.agent-attach-name:hover { text-decoration: underline; }
.agent-attach-detail {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.6rem 0.6rem 0.7rem; border-top: 1px solid var(--border, #2a2a2a);
}
.agent-attach-field { display: flex; flex-direction: column; gap: 0.2rem; }
.agent-attach-field > span { font-size: 0.8rem; color: var(--muted, #9aa0a6); }
.agent-attach-field input,
.agent-attach-field select,
.agent-attach-field textarea {
  width: 100%; padding: 0.35rem 0.5rem; font: inherit;
}
.agent-attach-field textarea { resize: vertical; min-height: 2.5rem; font-family: ui-monospace, monospace; font-size: 0.82rem; }

/* Docs page — "On this page" table of contents + section polish. */
.doc-toc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin: 0 0 1.5rem; padding: 0.85rem 1rem;
  background: var(--bg-muted, rgba(255,255,255,0.03));
  border: 1px solid var(--border, #2a2a2a); border-radius: 12px;
}
.doc-toc__label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted, #9aa0a6); margin-right: 0.4rem;
}
.doc-toc a {
  font-size: 0.82rem; color: var(--text, #e8eaed); text-decoration: none;
  padding: 0.25rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--border, #2a2a2a);
}
.doc-toc a:hover {
  border-color: var(--accent, #8ab4f8);
  background: color-mix(in srgb, var(--accent, #8ab4f8) 14%, transparent);
}
.doc-article h2[id] {
  scroll-margin-top: 1rem;
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--border, #2a2a2a);
}
.doc-article h2[id]:first-of-type { border-top: none; padding-top: 0; margin-top: 1rem; }

/* ── Org logo + DNA-swap fallback (M4) ─────────────────────────────────── */
.org-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ol-size, 40px); height: var(--ol-size, 40px);
  position: relative; flex: none; border-radius: 8px; overflow: hidden;
  vertical-align: middle;
}
.org-logo__img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
/* No-logo fallback: a static badge with the org's first letter (no animation). */
.org-logo--initial {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #8ab4f8) 22%, transparent), transparent);
  color: var(--accent, #8ab4f8);
  font-weight: 800;
  font-size: calc(var(--ol-size, 40px) * 0.46);
  line-height: 1;
}
.ws-org-identity { display: flex; align-items: center; gap: 0.6rem; }
.ws-org-identity h1 { margin: 0; }
.ws-logo-edit { display: inline-flex; gap: 0.4rem; align-items: center; }

/* ============================================================================
   Work module (/work) — Asana-like PM surface. Namespaced `.wk-*`. Uses the
   shared theme tokens (var(--…)) so it adapts to dark mode automatically.
   ========================================================================== */

.wk-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wk-header__spacer { flex: 1 1 auto; }
.wk-nav { display: inline-flex; gap: 4px; background: var(--bg-muted); padding: 3px; border-radius: 10px; }
.wk-nav__item {
  border: 0; background: transparent; color: var(--text-subtle); font: inherit; font-size: 13px;
  font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: all .12s;
}
.wk-nav__item:hover { color: var(--text); background: var(--bg-hover); }
.wk-nav__item.is-active { color: var(--text); background: var(--bg-surface); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.wk-org-picker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-subtle); }
.wk-org-picker select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); color: var(--text); }

.wk-view { padding-top: 6px; }
.wk-empty { color: var(--text-faint); font-size: 13px; padding: 18px; text-align: center; }
.wk-muted { color: var(--text-subtle); font-size: 12px; }

/* Summary stat strip */
.wk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.wk-stat { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.wk-stat__num { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--text); }
.wk-stat__label { font-size: 12px; color: var(--text-subtle); margin-top: 2px; }
.wk-stat--alert .wk-stat__num { color: var(--danger); }
.wk-stat--alert { border-color: rgba(185,28,28,.3); background: rgba(185,28,28,.05); }

/* Section blocks */
.wk-section { margin-bottom: 26px; }
.wk-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wk-section__head h2 { font-size: 15px; font-weight: 700; margin: 0; color: var(--text); }

/* Card grids (projects, portfolios) */
.wk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.wk-card {
  display: block; width: 100%; text-align: left; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .05s;
}
.wk-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.wk-card:active { transform: translateY(1px); }
.wk-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wk-card__icon { font-size: 18px; }
.wk-card__title { font-size: 14px; font-weight: 650; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text-subtle); }

/* Progress bar */
.wk-progress { height: 7px; background: var(--bg-muted); border-radius: 99px; overflow: hidden; }
.wk-progress__fill { height: 100%; background: var(--success); border-radius: 99px; transition: width .25s; }
.wk-progress__label { font-size: 11px; color: var(--text-subtle); margin-top: 4px; }

/* Status pills (project / goal state) */
.wk-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.wk-pill--on_track { background: rgba(22,101,52,.12); color: var(--success); }
.wk-pill--at_risk  { background: rgba(180,83,9,.14); color: var(--warn); }
.wk-pill--off_track{ background: rgba(185,28,28,.12); color: var(--danger); }
.wk-pill--on_hold  { background: var(--bg-muted); color: var(--text-subtle); }
.wk-pill--complete { background: rgba(22,101,52,.12); color: var(--success); }

/* Priority flags */
.wk-prio { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; }
.wk-prio--none { display: none; }
.wk-prio--low    { background: rgba(100,116,139,.14); color: var(--text-subtle); }
.wk-prio--medium { background: rgba(30,64,175,.12); color: #1d4ed8; }
.wk-prio--high   { background: rgba(180,83,9,.16); color: var(--warn); }
.wk-prio--urgent { background: rgba(185,28,28,.14); color: var(--danger); }

/* Due chips */
.wk-due { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--bg-muted); color: var(--text-subtle); white-space: nowrap; }
.wk-due--today { background: rgba(180,83,9,.14); color: var(--warn); }
.wk-due--overdue { background: rgba(185,28,28,.14); color: var(--danger); }

/* Avatars */
.wk-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 99px; font-size: 10px; font-weight: 700; color: #fff; flex: none; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.wk-avatar--sm { width: 20px; height: 20px; font-size: 9px; }
.wk-avatar--lg { width: 32px; height: 32px; font-size: 12px; }
.wk-avatar--none { background: var(--bg-muted) !important; color: var(--text-faint); box-shadow: inset 0 0 0 1px var(--border); }

/* Agent (chat-agent) assignee — a bot chip instead of a human avatar. */
.wk-agent-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 160px;
  padding: 1px 7px 1px 5px; border-radius: 99px; font-size: 11px; font-weight: 600;
  color: var(--primary); background: rgba(99, 102, 241, 0.12);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.30); flex: none;
}
.wk-agent-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-agent-chip.wk-avatar--sm { font-size: 10px; padding: 0 6px 0 4px; }
.wk-status-dot { width: 7px; height: 7px; border-radius: 99px; flex: none; background: var(--text-faint); }
.wk-status-dot--idle { background: var(--text-faint); }
.wk-status-dot--running { background: var(--primary); }
.wk-status-dot--waiting { background: var(--warning, #f59e0b); }
.wk-status-dot--error { background: var(--danger, #ef4444); }
.wk-agent-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--primary); background: rgba(99, 102, 241, 0.12); border-radius: 5px; padding: 1px 5px;
}
.wk-agentpanel {
  margin: 14px 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-muted); display: flex; flex-direction: column; gap: 6px;
}
.wk-agentpanel__head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.wk-agentpanel__row { font-size: 12px; color: var(--text); }
.wk-agentpanel__actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.wk-agentpanel__actions .wk-muted { font-size: 11px; }
.wk-agentpanel__row select, .wk-agentpanel__row input[type="time"] { font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-surface); color: var(--text); }
.wk-sched { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 2px 0; }
.wk-presetrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.wk-chipbtn { font: inherit; font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 99px; background: var(--bg-surface); color: var(--text-subtle); cursor: pointer; }
.wk-chipbtn:hover { border-color: var(--primary); color: var(--primary); }
.wk-task__chip--recurring { color: var(--primary); }

/* Continuous-monitor trigger rules */
.wk-rules { display: flex; flex-direction: column; gap: 4px; margin: 2px 0; }
.wk-rule { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-surface); }
.wk-rule__txt { min-width: 0; }
.wk-rule__x { border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 12px; flex: none; }
.wk-rule__x:hover { color: var(--danger); }

/* Label chips */
.wk-label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px; }
.wk-label__x { cursor: pointer; opacity: .6; }
.wk-label__x:hover { opacity: 1; }
.wk-label--slate { background: rgba(100,116,139,.16); color: #475569; }
.wk-label--red { background: rgba(185,28,28,.14); color: #b91c1c; }
.wk-label--orange { background: rgba(234,88,12,.16); color: #c2410c; }
.wk-label--amber { background: rgba(180,83,9,.16); color: #b45309; }
.wk-label--green { background: rgba(22,101,52,.14); color: #166534; }
.wk-label--teal { background: rgba(13,148,136,.16); color: #0f766e; }
.wk-label--blue { background: rgba(30,64,175,.14); color: #1d4ed8; }
.wk-label--violet { background: rgba(124,58,237,.16); color: #6d28d9; }
.wk-label--pink { background: rgba(219,39,119,.14); color: #be185d; }

/* Simple rows (goals, portfolios, my-work groups) */
.wk-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; }
.wk-row__main { flex: 1; min-width: 0; }
.wk-row__title { font-size: 13px; font-weight: 600; color: var(--text); }
.wk-row__sub { font-size: 11px; color: var(--text-subtle); }
.wk-row--clickable { cursor: pointer; }
.wk-row--clickable:hover { border-color: var(--border-strong); }
.wk-group-head { font-size: 12px; font-weight: 700; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .03em; margin: 18px 0 8px; }

/* Project view: header + toolbar */
.wk-proj-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.wk-back { font-size: 12px; color: var(--text-subtle); text-decoration: none; }
.wk-back:hover { color: var(--text); }
.wk-proj-title { font-size: 22px; font-weight: 700; margin: 2px 0; color: var(--text); }
.wk-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 16px; }
.wk-toggle { display: inline-flex; background: var(--bg-muted); border-radius: 8px; padding: 3px; }
.wk-toggle button { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-subtle); padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.wk-toggle button.is-active { background: var(--bg-surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.wk-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk-filters select, .wk-filters input { font: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); color: var(--text); }
.wk-filters input { min-width: 160px; }

/* List view */
.wk-list { display: flex; flex-direction: column; gap: 14px; }
.wk-sec { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); overflow: hidden; }
.wk-sec__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-muted); cursor: pointer; }
.wk-sec__name { font-size: 13px; font-weight: 700; color: var(--text); }
.wk-sec__count { font-size: 11px; color: var(--text-faint); }
.wk-sec__chev { margin-left: auto; color: var(--text-faint); transition: transform .12s; }
.wk-sec.is-collapsed .wk-sec__chev { transform: rotate(-90deg); }
.wk-sec.is-collapsed .wk-sec__body, .wk-sec.is-collapsed .wk-addtask { display: none; }
.wk-task { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border-muted); }
.wk-task:last-child { border-bottom: 0; }
.wk-task:hover { background: var(--bg-hover); }
.wk-check { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 1.5px solid var(--border-strong); border-radius: 50%; cursor: pointer; flex: none; position: relative; }
.wk-check:checked { background: var(--success); border-color: var(--success); }
.wk-check:checked::after { content: '✓'; color: #fff; font-size: 11px; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.wk-task__title { flex: 1; min-width: 0; font: inherit; font-size: 13px; line-height: 1.3; color: var(--text); background: none; border: 0; text-align: left; cursor: pointer; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-task__title.is-done { color: var(--text-faint); text-decoration: line-through; }
/* Plain text-button titles must NOT fall through to the global button:hover
   (near-black --brand-hover). On hover use the app accent + transparent bg;
   the row itself provides the subtle grey highlight. */
.wk-task__title:hover,
.wk-tcard__title:hover,
.wk-subtask__title:hover,
.wk-dep__title:hover { background: transparent; color: var(--primary); }
/* All remaining plain work-module buttons: standard grey hover, never the
   global near-black button:hover. (× remove buttons go danger, like wk-dep__x.) */
.wk-toggle button:hover,
.wk-drawer__close:hover,
.wk-dep-result:hover,
.wk-tnode__chev:hover,
.wk-delete:hover { background: var(--bg-hover); color: var(--text); }
.wk-file__x:hover { background: transparent; color: var(--danger); }
.wk-task__meta { display: flex; align-items: center; gap: 8px; flex: none; }
.wk-task__chip { font-size: 11px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 3px; }
.wk-addtask { display: flex; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--border-muted); }
.wk-addtask input { flex: 1; font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-app); color: var(--text); }

/* Board (kanban) view */
.wk-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.wk-col { flex: 0 0 272px; background: var(--bg-muted); border-radius: 12px; padding: 8px; min-height: 80px; }
.wk-col--dragover { outline: 2px dashed var(--border-strong); outline-offset: -2px; }
.wk-col__head { display: flex; align-items: center; gap: 6px; padding: 4px 8px 8px; font-size: 12px; font-weight: 700; color: var(--text); }
.wk-col__count { font-size: 11px; color: var(--text-faint); font-weight: 600; }
.wk-col__body { display: flex; flex-direction: column; gap: 8px; min-height: 12px; }
.wk-tcard { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; cursor: grab; }
.wk-tcard:hover { border-color: var(--border-strong); }
.wk-tcard--dragging { opacity: .5; }
.wk-tcard__title { font-size: 13px; color: var(--text); margin-bottom: 6px; }
.wk-tcard__title.is-done { color: var(--text-faint); text-decoration: line-through; }
.wk-tcard__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wk-col__add { width: 100%; margin-top: 8px; border: 1px dashed var(--border); background: transparent; color: var(--text-subtle); font: inherit; font-size: 12px; padding: 7px; border-radius: 8px; cursor: pointer; }
.wk-col__add:hover { border-color: var(--border-strong); color: var(--text); }

/* Task detail drawer — `hidden` must win over the display rules below. */
.wk-drawer[hidden], .wk-drawer-scrim[hidden] { display: none !important; }
.wk-drawer-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 60; opacity: 0; animation: wkFade .15s forwards; }
@keyframes wkFade { to { opacity: 1; } }
.wk-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(560px, 94vw); background: var(--bg-surface);
  border-left: 1px solid var(--border); z-index: 61; box-shadow: -8px 0 30px rgba(0,0,0,.12);
  display: flex; flex-direction: column; transform: translateX(100%); animation: wkSlide .18s forwards;
}
@keyframes wkSlide { to { transform: translateX(0); } }
.wk-drawer__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-muted); }
.wk-drawer__head .wk-check { width: 20px; height: 20px; }
.wk-drawer__close { margin-left: auto; border: 0; background: transparent; font-size: 18px; color: var(--text-subtle); cursor: pointer; line-height: 1; }
.wk-drawer__body { flex: 1; overflow-y: auto; padding: 16px 18px 28px; }
.wk-dtitle { width: 100%; font-size: 18px; font-weight: 650; color: var(--text); border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: transparent; }
.wk-dtitle:hover { border-color: var(--border); }
.wk-dtitle:focus { border-color: var(--border-strong); background: var(--bg-app); outline: none; }
.wk-field { margin: 14px 0; }
.wk-field__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); margin-bottom: 5px; }
.wk-fieldgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wk-field select, .wk-field input[type="date"], .wk-field input[type="datetime-local"], .wk-field textarea {
  width: 100%; font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-app); color: var(--text);
}
.wk-field textarea { resize: vertical; min-height: 64px; }
.wk-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wk-subtasks { display: flex; flex-direction: column; gap: 4px; }
.wk-subtask { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.wk-subtask__title { font-size: 13px; color: var(--text); }
.wk-subtask__title.is-done { color: var(--text-faint); text-decoration: line-through; }

/* Timeline: comments + replies + activity */
.wk-timeline { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.wk-activity { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-subtle); }
.wk-activity__dot { width: 6px; height: 6px; border-radius: 99px; background: var(--border-strong); flex: none; margin: 0 8px; }
.wk-comment { display: flex; gap: 10px; }
.wk-comment__av { flex: none; }
.wk-comment__main { flex: 1; min-width: 0; }
.wk-comment__head { display: flex; align-items: baseline; gap: 8px; }
.wk-comment__author { font-size: 12px; font-weight: 700; color: var(--text); }
.wk-comment__time { font-size: 11px; color: var(--text-faint); }
.wk-comment__body { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.wk-comment__reply { font-size: 11px; color: var(--text-subtle); background: none; border: 0; cursor: pointer; padding: 2px 0; margin-top: 2px; }
.wk-comment__reply:hover { color: var(--text); }
.wk-replies { margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--border-muted); display: flex; flex-direction: column; gap: 10px; }
.wk-reply-box, .wk-comment-box { display: flex; gap: 8px; margin-top: 8px; }
.wk-reply-box textarea, .wk-comment-box textarea { flex: 1; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-app); color: var(--text); resize: vertical; min-height: 38px; }
.wk-comment-box { position: sticky; bottom: 0; padding-top: 10px; background: var(--bg-surface); border-top: 1px solid var(--border-muted); }
.wk-drawer__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--text-faint); margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border-muted); }
.wk-delete { border: 1px solid rgba(185,28,28,.4); background: transparent; color: var(--danger); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.wk-delete:hover { background: rgba(185,28,28,.08); }

/* Issue type chips (Goal/Epic/Story/Task/Subtask) */
.wk-type { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 5px; flex: none; }
.wk-type--goal { background: rgba(202,138,4,.16); color: #a16207; }
.wk-type--epic { background: rgba(124,58,237,.16); color: #6d28d9; }
.wk-type--story { background: rgba(22,101,52,.14); color: #166534; }
.wk-type--task { background: rgba(30,64,175,.14); color: #1d4ed8; }
.wk-type--subtask { background: rgba(100,116,139,.16); color: #475569; }

/* Workflow state chips */
.wk-state { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px; }
.wk-state--todo { background: var(--bg-muted); color: var(--text-subtle); }
.wk-state--in_progress { background: rgba(30,64,175,.12); color: #1d4ed8; }
.wk-state--in_review { background: rgba(180,83,9,.14); color: var(--warn); }
.wk-state--done { background: rgba(22,101,52,.12); color: var(--success); }

/* Saved-view chips */
.wk-views { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.wk-viewchip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-subtle); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 99px; padding: 4px 11px; cursor: pointer; }
.wk-viewchip:hover { border-color: var(--border-strong); color: var(--text); }
.wk-viewchip.is-active { background: var(--accent-soft); color: var(--text); border-color: var(--border-strong); }
.wk-viewchip__x { opacity: .5; font-size: 10px; }
.wk-viewchip__x:hover { opacity: 1; }
.wk-viewchip--add { border-style: dashed; }

/* Board card head (type chip + title) */
.wk-tcard__head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.wk-tcard__head .wk-tcard__title { margin: 0; background: none; border: 0; text-align: left; cursor: pointer; padding: 0; color: var(--text); font: inherit; font-size: 13px; }

/* ── Compact layout refinements (single-line bars, minimal filters) ───────── */

/* Tighter Work header — one line, ~sidebar header height. The compound selector
   matches the specificity of `.canvas-header:has(.canvas-ref-link)` so these win. */
.canvas-header.wk-header { min-height: 56px; padding: 0 24px; gap: 12px; flex-wrap: nowrap; }
.wk-header h1 { white-space: nowrap; }
.wk-header .wk-nav { flex: none; }
.wk-header-actions { display: inline-flex; align-items: center; gap: 8px; }

/* A bar that holds helpers on one line (saved views + list/board toggle, or the
   filter row). Wraps only when it truly must. */
.wk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.wk-bar--top { gap: 10px; }
.wk-bar__grow { flex: 1 1 auto; min-width: 0; }
.wk-views { margin: 0; }

/* Saved-views dropdown (label = active view; popover lists All + saved views). */
.wk-viewsel { position: relative; display: inline-flex; }
.wk-viewsel__btn {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.8rem; font-weight: 500;
  color: var(--text); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 0 10px; cursor: pointer; max-width: 220px;
}
.wk-viewsel__btn:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text); }
.wk-viewsel__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-viewsel__chev { color: var(--text-faint); font-size: 10px; line-height: 1; }
.wk-viewsel__pop {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; max-height: 320px; overflow-y: auto;
  padding: 4px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
.wk-viewsel__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left;
  font: inherit; font-size: 13px; color: var(--text); background: none; border: 0; border-radius: 7px;
  padding: 7px 10px; cursor: pointer;
}
.wk-viewsel__item:hover { background: var(--bg-hover); }
.wk-viewsel__item.is-active { background: var(--accent-soft); font-weight: 600; }
.wk-viewsel__x { opacity: .5; font-size: 11px; padding: 0 2px; }
.wk-viewsel__x:hover { opacity: 1; color: var(--danger); }

/* Unified-board filter bar: search · my-tasks · organize · sort · filters popover */
.wk-search { font: inherit; font-size: 12px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); color: var(--text); min-width: 180px; flex: 1 1 200px; max-width: 320px; }
.wk-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-subtle); }
.wk-inline select { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); color: var(--text); }
/* Toggle button (My tasks / Show completed) — clear on/off, no checkbox, no wasted space. */
.wk-toggle-btn { font: inherit; font-size: 12px; font-weight: 600; color: var(--text-subtle); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.wk-toggle-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text); }
.wk-toggle-btn.is-on { background: rgba(99, 102, 241, 0.14); border-color: var(--primary); color: var(--primary); }
.wk-fp__donebtn { align-self: flex-start; }
.wk-toggle[hidden] { display: none; }

.wk-fp { position: relative; display: inline-flex; }
.wk-fp__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; }
.wk-fp__pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 252px; padding: 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.16); display: flex; flex-direction: column; gap: 8px; }
.wk-fp__pop[hidden] { display: none !important; }
.wk-fp__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-subtle); white-space: nowrap; }
.wk-fp__row select { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-app); color: var(--text); max-width: 150px; }
.wk-fp__check { justify-content: flex-start; gap: 4px; color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.wk-fp__clear { align-self: flex-start; margin-top: 2px; }

/* Hierarchy tree (Goal>Epic>Story>Task>Subtask) with expand/collapse. */
.wk-tree { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); overflow: hidden; }
.wk-tnode { display: flex; align-items: center; gap: 8px; padding: 7px 12px; padding-left: calc(12px + var(--depth, 0) * 22px); border-bottom: 1px solid var(--border-muted); }
.wk-tnode:last-child { border-bottom: 0; }
.wk-tnode:hover { background: var(--bg-hover); }
.wk-tnode .wk-task__title { flex: 1; min-width: 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text); font: inherit; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-tnode .wk-task__title.is-done { color: var(--text-faint); text-decoration: line-through; }
.wk-tnode__chev { width: 18px; height: 18px; flex: none; border: 0; background: none; color: var(--text-faint); cursor: pointer; font-size: 11px; transition: transform .12s; padding: 0; }
.wk-tnode__chev.is-open { transform: rotate(90deg); }
.wk-tnode__chev--leaf { cursor: default; visibility: hidden; }

/* Compact the top of the Work tab — no wasted space above the toolbar.
   The toolbar buttons are .ghost-buttons, which carry margin-top:12px by
   default — zero it inside the bars so the toolbar sits flush to the top. */
#work-tab.tab-content { padding-top: 8px; }
#work-content { margin-top: 0; }
#work-tab .wk-bar { margin-top: 0; }
#work-tab .wk-bar .ghost-button, #work-tab .wk-bar .wk-toggle button, #work-tab .wk-bar .primary-button { margin-top: 0; }
#work-tab .wk-bar--top { margin-bottom: 6px; }
#work-tab .wk-bar.wk-filters { margin-bottom: 12px; }
/* Line up every top-toolbar control to one height so their edges align. */
#work-tab .wk-bar--top { align-items: center; }
#work-tab .wk-bar--top > * { margin: 0; }
#work-tab #wk-views-bar, #work-tab #wk-views-bar .wk-viewsel { display: inline-flex; align-items: center; }
#work-tab .wk-bar--top .ghost-button,
#work-tab .wk-bar--top .wk-toggle-btn,
#work-tab .wk-bar--top .wk-viewsel__btn,
#work-tab .wk-bar--top .wk-toggle {
  height: 32px; box-sizing: border-box; display: inline-flex; align-items: center;
  padding-top: 0; padding-bottom: 0; line-height: 1;
}
#work-tab .wk-bar--top .wk-toggle { padding: 0 3px; }
#work-tab .wk-bar--top .wk-toggle button { height: 26px; display: inline-flex; align-items: center; }
/* Comment box moved to the top of the timeline (newest-first). */
.wk-comment-box--top { position: static; border-top: 0; padding-top: 0; margin: 0 0 10px; }

/* Dependencies */
.wk-task__chip--blocked { color: var(--danger); }
.wk-deps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.wk-deps__group { display: flex; flex-direction: column; gap: 4px; }
.wk-deps__lbl { font-size: 11px; font-weight: 700; color: var(--text-subtle); }
.wk-dep { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.wk-dep__title { flex: 1; min-width: 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text); font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-dep__title--locked { cursor: default; color: var(--text-subtle); }
.wk-dep__proj { font-size: 11px; color: var(--text-faint); flex: none; }
.wk-dep__x { border: 0; background: none; color: var(--text-faint); cursor: pointer; font-size: 11px; flex: none; }
.wk-dep__x:hover { color: var(--danger); }
.wk-dep__req { flex: none; }
.wk-dep-results { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; margin: 4px 0; }
.wk-dep-result { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--text); background: none; border: 0; border-radius: 7px; padding: 7px 9px; cursor: pointer; }
.wk-dep-result:hover { background: var(--bg-hover); }

/* Task attachments */
.wk-files { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.wk-file { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.wk-file__name { flex: 1; min-width: 0; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-file__name:hover { text-decoration: underline; }
.wk-file__size { font-size: 11px; color: var(--text-faint); flex: none; }
.wk-file__x { border: 0; background: none; color: var(--text-faint); cursor: pointer; font-size: 11px; flex: none; }
.wk-file__x:hover { color: var(--danger); }

/* Minimal-width filters: small font + padding so they don't eat horizontal space. */
.wk-filters { gap: 6px; width: 100%; }
.wk-filters select { font-size: 11px; padding: 4px 6px; max-width: 132px; }
.wk-filters input { font-size: 11px; padding: 4px 8px; min-width: 130px; flex: 1 1 150px; max-width: 240px; }
.wk-toggle button { min-width: 30px; }

/* Per-row status dropdown (replaces the checkbox). Native arrow kept for affordance. */
.wk-statesel {
  font: inherit; font-size: 10px; font-weight: 700; border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 4px; background: var(--bg-surface); color: var(--text-subtle);
  cursor: pointer; max-width: 116px; flex: none;
}
.wk-statesel--in_progress { color: #1d4ed8; border-color: rgba(30,64,175,.4); }
.wk-statesel--in_review { color: var(--warn); border-color: rgba(180,83,9,.4); }
.wk-statesel--done { color: var(--success); border-color: rgba(22,101,52,.4); }
.wk-statesel--head { font-size: 12px; padding: 4px 8px; max-width: 150px; }
.wk-drawer__head { gap: 8px; }

/* Responsive: stack the board into a single column on narrow screens */
@media (max-width: 900px) {
  .wk-fieldgrid { grid-template-columns: 1fr; }
  .wk-drawer { width: 100vw; }
}

/* ── Header consolidation: page title + "Help docs" live in the topbar ─────── */

/* Page title in the topbar (mirrored from the active page's heading). */
/* The left-bar expand/collapse toggle now lives in the topbar, where the page
   title used to sit — borderless so it reads as a quiet control by the search. */
.topbar-panel-toggle {
  flex-shrink: 0;
  border-color: transparent;
  background: transparent;
  color: var(--text-subtle);
  font-size: 1.05rem;
}
.topbar-panel-toggle:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border);
}
/* Context-aware docs link in the topbar (subtle pill, like the old ref link). */
.topbar-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 1.2rem;          /* icon-only, larger */
  line-height: 1;
  color: var(--text-subtle);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.topbar-help:hover { background: var(--bg-muted); color: var(--text); border-color: var(--border-strong); }

/* The page title + page-level docs link now live in the topbar — hide the
   in-page copies. Only DIRECT children of .canvas-header (the builder
   node-panel "Help docs" links stay). */
.canvas-header > h1,
.canvas-header > .canvas-ref-link { display: none; }
/* Rail modules: their canvas-header only held the page title + help link — both
   now hidden (title removed from the topbar; help is the topbar icon) — leaving an
   empty bar between the topbar and the content. The module rail shows the name, so
   drop the empty header. */
#hive-tab > .canvas-header,
#orbit-tab > .canvas-header,
#flux-tab > .canvas-header,
#docs-tab > .canvas-header { display: none; }

/* Collapse the page-title band entirely unless it still holds interactive
   controls (nav / buttons / the templates link). Pages with only a title get
   no empty header band → cleaner, more room for content. */
.canvas-header:not(:has(button, nav, select, input, textarea, .ghost-button, .primary-button, .tab, [data-open-templates])) {
  display: none;
}

/* ── Workspace: folder-style Orgs → Portfolios → Projects ─────────────────── */

.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ws-grid--create { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-bottom: 14px; }

/* Org AI agent module toggles — one checkbox row per module. */
.ws-tool-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; }
.ws-tool-toggle { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface); cursor: pointer; }
.ws-tool-toggle:hover { border-color: var(--border-strong); }
.ws-tool-toggle.is-unavailable { opacity: 0.7; }

/* Tile (org / project) — a card with a clickable main area + a ⋯ menu. */
.ws-tile { position: relative; display: flex; align-items: stretch; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color .12s, box-shadow .12s; }
.ws-tile:hover { border-color: var(--border-strong); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
/* The currently-active org in the Org Settings switcher. */
.ws-tile.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.ws-tile__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text); }
.ws-tile__icon { font-size: 20px; display: inline-flex; flex: none; }
.ws-tile__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-tile__name { font-size: 14px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-tile__desc { font-size: 12px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-tile--project { background: var(--bg-app); }

/* "➕ New …" create tile — dashed, leads each grid. */
.ws-create-tile { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; border: 1.5px dashed var(--border-strong); border-radius: 12px; background: transparent; color: var(--text-subtle); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s; }
.ws-create-tile:hover { border-color: var(--brand); color: var(--text); background: var(--bg-hover); }
.ws-create-tile__plus { font-size: 18px; line-height: 1; }

/* Portfolio folder — expandable; reveals its projects. */
.ws-folder { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); margin-bottom: 10px; overflow: hidden; }
.ws-folder__head { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; }
.ws-folder__toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.ws-folder__chev { color: var(--text-faint); transition: transform .12s; display: inline-block; }
.ws-folder.is-open .ws-folder__chev { transform: rotate(90deg); }
.ws-folder__icon { font-size: 16px; }
.ws-folder__name { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-folder__count { font-size: 11px; color: var(--text-faint); font-weight: 600; }
.ws-folder__desc { margin: 0 14px 6px 40px; font-size: 12px; color: var(--text-subtle); }
.ws-folder__projects { display: none; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; padding: 0 12px 12px 38px; }
.ws-folder.is-open .ws-folder__projects { display: grid; }
.ws-folder--loose { border-style: dashed; background: transparent; }
.ws-folder--loose .ws-folder__head { padding: 9px 12px; }
/* Hover-revealed edit/delete icon buttons on a portfolio folder (Project Settings). */
.ws-folder__actions { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.ws-folder:hover .ws-folder__actions, .ws-folder__actions:focus-within { opacity: 1; }
.ws-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; cursor: pointer; font-size: 13px; line-height: 1; opacity: .75; transition: background .12s, opacity .12s, border-color .12s; }
.ws-icon-btn:hover { opacity: 1; background: var(--bg-app); border-color: var(--border); }
.ws-icon-btn.danger:hover { border-color: var(--danger); }
/* AI Agents page: per-project agent groups + the read-only effective-prompt preview. */
.ws-agent-group { margin: 10px 0; }
.ws-agent-group > h3 { font-size: 13px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.ws-effective { width: 100%; resize: vertical; font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-subtle); background: var(--bg-app); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; }
/* Hover-revealed edit/open/delete icons on a project tile (overlaid on the right,
   on a soft fade so they stay legible over the project name/description). */
.ws-tile__actions { position: absolute; top: 0; right: 0; height: 100%; display: inline-flex; align-items: center; gap: 2px; padding: 0 8px 0 22px; border-radius: 0 12px 12px 0; opacity: 0; transition: opacity .12s; pointer-events: none; }
.ws-tile:hover .ws-tile__actions, .ws-tile__actions:focus-within { opacity: 1; pointer-events: auto; }
.ws-tile--project .ws-tile__actions { background: linear-gradient(to right, transparent, var(--bg-app) 30%); }

/* ⋯ actions menu */
.ws-menu { position: relative; display: flex; align-items: center; flex: none; padding-right: 6px; }
.ws-menu__btn { width: 28px; height: 28px; border: 0; background: transparent; color: var(--text-subtle); font-size: 16px; line-height: 1; border-radius: 7px; cursor: pointer; }
.ws-menu__btn:hover { background: var(--bg-hover); color: var(--text); }
.ws-menu__popover { position: absolute; right: 4px; top: calc(100% - 2px); z-index: 20; min-width: 180px; padding: 4px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.ws-menu__item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; border-radius: 7px; cursor: pointer; }
.ws-menu__item:hover { background: var(--bg-hover); }
.ws-menu__item.danger { color: var(--danger); }

/* Edit / create / move dialog */
.ws-dialog { border: 1px solid var(--border); border-radius: 14px; padding: 0; background: var(--bg-surface); color: var(--text); max-width: 440px; width: 92vw; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.ws-dialog::backdrop { background: rgba(0,0,0,.35); }
.ws-dialog__form { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.ws-dialog__form h3 { margin: 0; font-size: 16px; }
.ws-dialog__field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-subtle); }
.ws-dialog__field input, .ws-dialog__field textarea, .ws-dialog__field select { font: inherit; font-size: 13px; font-weight: 400; color: var(--text); padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-app); }
.ws-dialog__field textarea { resize: vertical; }
/* Standard: section/block descriptions are not shown inline — they live as a
   small-font tooltip revealed on hover of the header (with a tiny ⓘ affordance). */
[data-tip] { position: relative; cursor: help; }
.ws-tip-i { font-size: 10px; color: var(--text-subtle); opacity: .65; margin-left: 4px; vertical-align: middle; font-weight: 400; }
[data-tip]:hover .ws-tip-i { opacity: 1; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 60;
  width: max-content; max-width: 320px;
  padding: 5px 8px;
  font-size: 10px; font-weight: 400; line-height: 1.35; letter-spacing: 0; text-transform: none;
  white-space: normal; color: var(--text); background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); }
/* Inline Org Settings editor (replaces the org dialogs) — a card at the top of the
   Organisations list with name/description, logo, access, and a danger zone. */
.ws-org-editor { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; background: var(--bg-surface); }
.ws-org-editor .ws-section__head { margin-bottom: 4px; }
.ws-org-editor .ws-section__head h2 { font-size: 1rem; }
.ws-edit-block { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ws-edit-block + .ws-edit-block { border-top: 1px solid var(--border-muted); padding-top: 12px; }
.ws-edit-block h3 { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); }
.ws-edit-block .primary-button { align-self: flex-start; }
.ws-add-access { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ws-add-access input[type="email"] { flex: 1 1 220px; min-width: 180px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; background: var(--bg-app); color: var(--text); }
.ws-edit-danger h3 { color: var(--danger); }
.ws-create-tile.is-disabled { opacity: 0.5; cursor: not-allowed; border-style: dashed; }
.ws-create-tile.is-disabled:hover { border-color: var(--border-strong); color: var(--text-subtle); background: transparent; }
/* Two-path delete dialog (archive vs permanent). */
.ws-del-opt { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.ws-del-opt--danger { border-color: #f3c9c9; }
.ws-del-opt .ghost-button { align-self: flex-start; }
.ws-confirm-hint { margin: 4px 0 0; }
.ws-confirm-hint.is-ok { color: #15803d; }
.ws-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════════
   UX OVERHAUL — persistent left icon rail
   Collapsed (.left-collapsed) is now a slim ICON RAIL (icons stay clickable
   + tooltips), not a hidden panel. Pinned-expanded shows icons + labels.
   Toggled via #collapse-left; the topbar hamburger is retired since the rail
   is always visible. These rules sit last so they win by source order.
   ════════════════════════════════════════════════════════════════════════ */
.left-collapsed .sidebar {
  width: 60px;
  overflow: visible;
  border-right: 1px solid var(--border);
}
/* The topbar ☰ is gone — the rail is always present; expand via the rail's
   own ‹/› pin toggle. */
.topbar-toggle,
.left-collapsed .topbar-toggle { display: none !important; }

/* Header: keep the brand mark + pin toggle, drop the wordmark. */
.left-collapsed .sidebar-header { padding: 0 6px; justify-content: center; gap: 4px; }
.left-collapsed .sidebar-header h2 { gap: 0; }
.left-collapsed .brand-swap { display: none; }

/* In-rail search hides when collapsed (it lives in the header now); the
   +New button condenses to its glyph (font-size:0 hides the bare "New" text
   node, the .plus span restores the glyph). */
.left-collapsed .global-search-wrap { display: none; }
.left-collapsed .sidebar-toolbar { padding: 8px 10px; justify-content: center; }
.left-collapsed .new-button { width: 40px; padding: 0; justify-content: center; font-size: 0; }
.left-collapsed .new-button .plus { font-size: 1.05rem; }

/* Nav links: icon-only, centered, labels/chevrons hidden; a pending badge
   shrinks to a corner dot. */
.left-collapsed .sidebar-link { position: relative; justify-content: center; padding: 8px 0; gap: 0; }
.left-collapsed .sidebar-link-label,
.left-collapsed .sidebar-link-chevron { display: none; }
.left-collapsed .sidebar-link-icon { width: auto; font-size: 1.05rem; }
.left-collapsed .sidebar-link-badge {
  position: absolute; top: 4px; right: 12px; min-width: 8px; height: 8px;
  padding: 0; font-size: 0; border-radius: var(--radius-pill);
}
/* Expandable groups (Components) only reveal their sub-items when expanded. */
.left-collapsed .sidebar-collapse-body { display: none; }

/* Footer: drop the Learn sub-list + usage meter text when collapsed. */
.left-collapsed .learn-sublist,
.left-collapsed .sidebar-usage { display: none; }
/* Footer items (Report / Settings) collapse to icon-only, like the nav links —
   matching the collapsed nav-icon size (1.05rem). */
.left-collapsed .tab-footer { justify-content: center; gap: 0; padding: 8px 0; }
.left-collapsed .tab-footer-label { display: none; }
.left-collapsed .tab-footer .tab-footer-ico { font-size: 1.05rem; }
.left-collapsed .learn-summary { justify-content: center; font-size: 0; }
.left-collapsed .learn-summary .learn-chevron { font-size: 0.8rem; }

/* The pin toggle reads ‹ when expanded, › when collapsed (set in JS via the
   aria-label, but flip the glyph here for clarity). */
.left-collapsed .panel-toggle { transform: rotate(180deg); }

/* ════════════════════════════════════════════════════════════════════════
   UX OVERHAUL — the one app-wide search (Amazon-style: scope dropdown + input
   + go button), centered in the header. Wired by features/search/header.js.
   ════════════════════════════════════════════════════════════════════════ */
.topbar-search-wrap {
  position: relative;          /* anchor for the suggestions dropdown */
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 0 var(--space-3);
}
.topbar-search {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 560px;
  height: 36px;            /* fixed height so every control fills it evenly */
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.topbar-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* Custom scope dropdown — replaces the native <select> so the menu always opens
   downward (the native popup re-positions over the selected item, jumping up). */
.topbar-search__scope {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
}
.topbar-search__scope-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* label left, chevron right */
  gap: 6px;
  width: 108px;                     /* fixed so it doesn't resize per selection */
  margin: 0;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-subtle);
  font: inherit;
  font-size: 0.8rem;
  padding: 0 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.topbar-search__scope-btn:hover { background: var(--bg-muted); color: var(--text); }
.topbar-search__scope-label { overflow: hidden; text-overflow: ellipsis; }
.topbar-search__scope-chev { flex-shrink: 0; font-size: 1.3rem; color: var(--text-faint); }
.topbar-search__scope-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  min-width: 168px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 70;
}
.topbar-search__scope-menu[hidden] { display: none; }
.topbar-search__scope-menu li {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.topbar-search__scope-menu li:hover { background: var(--accent-soft); }
.topbar-search__scope-menu li.is-active { background: var(--accent-soft); color: var(--primary); font-weight: 600; }
.topbar-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  padding: 0 12px;        /* height comes from the pill; input centers its text */
}
.topbar-search__input:focus-visible { outline: none; }
.topbar-search__input::placeholder { color: var(--text-faint); }
.topbar-search__go {
  flex-shrink: 0;
  align-self: stretch;       /* fill the full pill height */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;                 /* override the global button margin-top:12px (pushed it down) */
  border: 0;
  border-radius: 0;          /* the pill handles rounding; no dark rounded block */
  background: transparent;   /* blend into the search area */
  color: var(--text-subtle);
  padding: 0 12px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.topbar-search__go svg { width: 16px; height: 16px; display: block; }
.topbar-search__go:hover,
.topbar-search__go:focus,
.topbar-search__go:active { background: transparent; color: var(--primary); }

/* Live autocomplete dropdown (shown for the index-backed scopes). */
.topbar-search__suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 2 * var(--space-3)));   /* match the pill width */
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  padding: 6px;
}
.tb-sg-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tb-sg-item:hover,
.tb-sg-item.is-active { background: var(--accent-soft); }
.tb-sg-item__kind {
  flex-shrink: 0;
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
}
.tb-sg-item__title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-sg-hint { color: var(--text-subtle); }
.tb-sg-empty { padding: 8px 10px; color: var(--text-subtle); font-size: 0.82rem; }

/* The header bar is now the only visible search. Every former search box is kept
   in the DOM (the header drives the peer ones programmatically) but hidden. */
.orbit-search-wrap,
#orbit-account-search, #orbit-contact-search,
#hive-worker-search, #flux-search, #wk-search,
#search-tab #search-input { display: none !important; }

/* Narrow viewports: drop the scope dropdown; keep the input + go button. */
@media (max-width: 760px) {
  .topbar-search__scope { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   UX OVERHAUL — chat dock (LinkedIn-style: launcher bar → panel → maximize)
   #chat-tab is repurposed from a full tab into a fixed bottom-right dock that
   lives on every screen. State is driven by a body class:
     .chat-dock-min  → only the launcher bar shows
     .chat-dock-open → the floating panel (default size)
     .chat-dock-max  → the panel fills the work area for focus mode
   The chat shell + controller inside are untouched; only positioning changes.
   ════════════════════════════════════════════════════════════════════════ */
#chat-tab.chat-dock {
  position: fixed;
  right: 20px;
  bottom: 0;
  width: 400px;
  height: min(620px, 78vh);
  z-index: var(--z-dock);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: 0;
}
/* Minimised: the panel is gone, only the launcher remains. */
body.chat-dock-min #chat-tab.chat-dock { display: none; }
/* Maximised: fill the work area (below the sticky topbar). */
body.chat-dock-max #chat-tab.chat-dock {
  right: 0;
  bottom: 0;
  top: 56px;
  left: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* The chat shell fills whatever space the dock gives it. */
#chat-tab.chat-dock .chat-shell { height: 100%; min-height: 0; flex: 1; padding: 0; }
#chat-tab.chat-dock .chat-messages { flex: 1; min-height: 0; padding: var(--space-3) var(--space-4); }
#chat-tab.chat-dock .chat-form { padding: var(--space-2) var(--space-3) var(--space-3); }

/* Dock header — title + context chip + min/max controls. Injected by
   features/chat/chatDock.js as the first child of #chat-tab. */
.chat-dock-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-muted);
  flex: 0 0 auto;
}
.chat-dock-head__title { font-weight: 650; font-size: 0.9rem; color: var(--text); }
.chat-dock-head__ctx {
  font-size: 0.72rem;
  color: var(--text-subtle);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.chat-dock-head__spacer { flex: 1; }
.chat-dock-head__btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.95rem;
}
.chat-dock-head__btn:hover { background: var(--bg-hover); color: var(--text); }

/* Launcher bar — fixed bottom-right; the only thing visible when minimised. */
.chat-dock-launcher {
  position: fixed;
  right: 20px;
  bottom: 16px;
  z-index: var(--z-dock);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.chat-dock-launcher:hover { background: var(--bg-muted); box-shadow: var(--shadow-lg); }
.chat-dock-launcher:active { transform: translateY(1px); }
.chat-dock-launcher__dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--primary); display: none;
}
.chat-dock-launcher.has-unread .chat-dock-launcher__dot { display: inline-block; }
/* The launcher only shows when the dock is minimised. */
body:not(.chat-dock-min) .chat-dock-launcher { display: none; }

/* Mobile: the open dock becomes a full-width bottom sheet. */
@media (max-width: 600px) {
  body.chat-dock-open #chat-tab.chat-dock {
    right: 0; left: 0; width: auto; height: 80vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .chat-dock-launcher { right: 12px; bottom: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════
   UX OVERHAUL — Inbox filter chips (All / Approvals / Tasks)
   The chips live in partials/today.html; clicking one adds a flt-<kind> class
   to #today-list, and these rules hide the non-matching sections (CSS-only).
   ════════════════════════════════════════════════════════════════════════ */
.inbox-filters {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-2);
}
.inbox-chip {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.inbox-chip:hover { background: var(--bg-hover); color: var(--text); }
.inbox-chip.is-active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
/* Approvals view → only approval sections; Tasks view → tasks + due runs. */
.today-shell.flt-approvals .today-section:not([data-kind='approvals']) { display: none; }
.today-shell.flt-tasks .today-section:not([data-kind='tasks']):not([data-kind='due']) { display: none; }

/* Bell → Inbox link (ties notifications to the unified Inbox). */
.tb-notif-foot {
  display: block;
  text-align: center;
  padding: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  border-top: 1px solid var(--border);
  text-decoration: none;
}
.tb-notif-foot:hover { background: var(--bg-hover); }

/* ── App Admin (platform back-office, appadmin/) ─────────────────────────── */
.appadmin-body { padding: 4px 2px 24px; }
.appadmin-section { margin: 18px 0; }
.appadmin-section__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
}
.appadmin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.appadmin-stat { padding: 14px 16px; }
.appadmin-stat__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.appadmin-stat__label { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }
.appadmin-stat__sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; opacity: 0.8; }
.appadmin-table { width: 100%; margin-top: 6px; }
.appadmin-grant-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.appadmin-grant-row .input { flex: 1 1 160px; min-width: 140px; }
.appadmin-badge { font-size: 0.7rem; font-weight: 600; padding: 1px 6px; border-radius: 8px; margin-left: 6px; }
.appadmin-badge--danger { background: var(--danger-bg, #fde8e8); color: var(--danger, #b42318); }
.appadmin-approvals { margin: 6px 0; padding-left: 18px; font-size: 0.85rem; }

/* ─── Pricing gate / configurator (features/onboarding/pricing.js) ───────── */
.pricing-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(880px, 94vw);
  max-height: 92vh;
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.pricing-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.pricing-dialog__form { display: flex; flex-direction: column; max-height: 92vh; }
.pricing-dialog__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.pricing-dialog__title { margin: 0 0 2px; font-size: 1.15rem; }
.pricing-dialog__body { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.pricing-dialog__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 22px; border-top: 1px solid var(--border);
}
.pricing-section-title { margin: 0 0 8px; font-size: 0.95rem; font-weight: 600; }

.pricing-currency { display: inline-flex; gap: 4px; }
.pricing-currency-btn,
.pricing-size-chip {
  font: inherit; cursor: pointer; background: var(--bg-surface);
  border: 1px solid var(--border); color: var(--text);
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.pricing-currency-btn.is-active,
.pricing-size-chip.is-active { border-color: var(--primary); background: var(--bg-hover); color: var(--primary); }
.pricing-sizes { display: flex; flex-wrap: wrap; gap: 8px; }

.pricing-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pricing-tier-card {
  position: relative; text-align: left; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px;
}
.pricing-tier-card:hover { border-color: var(--border-strong); }
.pricing-tier-card.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.pricing-tier-card.is-featured { border-color: var(--primary); }
.pricing-tier-badge {
  position: absolute; top: -9px; right: 10px; font-size: 0.65rem; font-weight: 700;
  background: var(--primary); color: #fff; padding: 1px 8px; border-radius: var(--radius-pill);
}
.pricing-tier-name { font-weight: 600; }
.pricing-tier-price { font-size: 0.95rem; color: var(--text); }
.pricing-tier-modules, .pricing-tier-tagline { font-size: 0.78rem; }

.pricing-addons { display: flex; flex-wrap: wrap; gap: 14px; }
.pricing-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--text-muted); }
.pricing-field input, .pricing-field select {
  font: inherit; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text); min-width: 120px;
}
.pricing-summary {
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.pricing-summary-row, .pricing-summary-total { display: flex; justify-content: space-between; padding: 3px 0; }
.pricing-summary-total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; font-size: 1.05rem; }
.pricing-summary-contact { margin: 0; color: var(--text-muted); }
.pricing-error { color: var(--danger, #b42318); font-size: 0.85rem; margin: 0; }

/* AI-credit usage meter — overage state (features/usage/controller.js) */
.usage-meter-fill.is-over { background: linear-gradient(90deg, #d97706, #b42318); }

/* Pricing gate — coupon row (features/onboarding/pricing.js) */
.pricing-coupon { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pricing-coupon input {
  font: inherit; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text); min-width: 150px;
}

/* Pricing gate — tax / GSTIN row (features/onboarding/pricing.js) */
.pricing-tax { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pricing-tax input {
  font: inherit; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text); min-width: 170px;
}