/* Atlas palette — matches the docs site (atlas/web/docs/docs.css)
 * exactly so a transition from product → docs doesn't jar. Brand
 * gradient is the same cyan→blue→violet used by brand-icon.svg.
 *
 * Source of truth: docs.css `:root` and `.hero h1`. If you change
 * this, change it there too — both surfaces are the brand. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap");

:root {
  color-scheme: dark;
  --bg: #0d1117;           /* canvas (matches docs) */
  --bg-2: #161b22;         /* panel (matches docs) */
  --bg-3: #21262d;         /* raised — buttons, kbd (matches docs) */
  --bg-4: #30363d;         /* hover / border tone */
  --fg: #e6edf3;           /* ink (matches docs) */
  --fg-dim: #8b949e;       /* ink-soft (matches docs) */
  --accent: #58a6ff;       /* brand link blue (matches docs) */
  --accent-2: #5be0c2;     /* gradient stop 1 — cyan */
  --accent-3: #7d5cff;     /* gradient stop 3 — violet */
  --warn: #f85149;         /* GitHub-style danger */
  --good: #3fb950;         /* GitHub-style success */
  --info: #d29922;         /* GitHub-style warn-amber, used for tip strips */
  --border: #30363d;
  --active-bg: rgba(88, 166, 255, 0.10);
  --graph-bg: radial-gradient(ellipse at center, #161b22 0%, #0d1117 82%);
  --shadow: rgba(0, 0, 0, 0.55);
  --ring: rgba(88, 166, 255, 0.30);
  /* The mark gradient — cyan → blue → violet. Used by .brand text,
   * the gate brand wordmark, and the landing hero h1. */
  --gradient-brand: linear-gradient(135deg, #5be0c2 0%, #4ea2ff 50%, #7d5cff 100%);
  --gradient-card: linear-gradient(180deg, rgba(88, 166, 255, 0.04), transparent 60%);
  --brand-font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;           /* matches docs */
  --bg-2: #f6f8fa;         /* panel (matches docs) */
  --bg-3: #f6f8fa;
  --bg-4: #eaeef2;
  --fg: #1f2328;           /* ink (matches docs) */
  --fg-dim: #57606a;       /* ink-soft (matches docs) */
  --accent: #1f6feb;       /* matches docs */
  --accent-2: #5be0c2;
  --accent-3: #7d5cff;
  --warn: #d1242f;
  --good: #1a7f37;
  --info: #9a6700;
  --border: #d0d7de;       /* matches docs */
  --active-bg: #ddf4ff;    /* docs accent-soft */
  --graph-bg: radial-gradient(ellipse at center, #ffffff 0%, #f6f8fa 85%);
  --shadow: rgba(31, 35, 40, 0.12);
  --ring: rgba(31, 111, 235, 0.30);
  --gradient-brand: linear-gradient(135deg, #5be0c2 0%, #4ea2ff 50%, #7d5cff 100%);
  --gradient-card: linear-gradient(180deg, rgba(31, 111, 235, 0.04), transparent 60%);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--brand-font);
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  overflow: hidden;
}
.muted { color: var(--fg-dim); }
.small { font-size: 11px; }
.hidden { display: none !important; }
kbd {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
code { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: 12px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, select, input, textarea {
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 9px;
  font-size: 12px;
  font-family: inherit;
}
button { cursor: pointer; }
button:hover { background: var(--bg-4); }
button.ghost { background: transparent; }
button.ghost:hover { background: var(--bg-3); }
button.small { padding: 3px 7px; font-size: 11px; }
.icon-btn { padding: 4px 9px; font-size: 16px; line-height: 1; min-width: 34px; border: 1px solid var(--border); border-radius: 3px; }
.ghost-link {
  display: inline-flex;
  align-items: center;
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 7px;
  background: transparent;
  text-decoration: none;
}
.ghost-link:hover {
  color: var(--fg);
  background: var(--bg-3);
  text-decoration: none;
}
.ghost-link.small { font-size: 11px; }

/* ---- onboarding ---- */
.onboard {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.onboard-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 24px 28px;
  width: 600px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  position: relative;
}
.onboard-close {
  position: absolute;
  top: 8px;
  right: 10px;
   background: transparent;
   color: var(--fg-dim);
   font-size: 11px;
   line-height: 1.2;
   padding: 5px 8px;
   border-radius: 3px;
   cursor: pointer;
}
.onboard-close:hover { background: var(--bg-3); color: var(--fg); }
.onboard-card h1 { margin: 0 0 4px; font-size: 18px; }
.onboard-card details { margin: 12px 0; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.onboard-card details summary { cursor: pointer; user-select: none; padding: 4px 0; }
.onboard-card details ol { margin: 8px 0 8px 18px; padding: 0; }
.onboard-card details li { margin-bottom: 5px; }
.copy-snippet {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 100px;
  margin: 6px 0;
}
.method {
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--bg-3);
  border-radius: 4px;
  border-left: 3px solid var(--accent);
}
.method h4 { margin: 0 0 4px; font-size: 13px; }
.method p { margin: 4px 0; font-size: 12px; }
.method ol { margin: 6px 0 6px 18px; padding: 0; font-size: 12px; }
.method li { margin-bottom: 3px; }
.fallback { margin-top: 8px; }
.fallback > summary { color: var(--fg-dim); cursor: pointer; padding: 4px 0; font-size: 11px; }
.fallback .method { border-left-color: var(--bg-4); opacity: 0.85; }
.fallback .method h4 { font-size: 12px; }
.onboard-card form { margin-top: 12px; }
.onboard-card label { display: block; margin: 8px 0 4px; font-weight: 600; }
.label-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
}
.label-row label { margin-bottom: 4px; }
.onboard-card textarea {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  resize: vertical;
}
.onboard-card .row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.settings-subsection {
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
}
.settings-subtitle {
  color: var(--fg-dim);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.agent-lookup-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.agent-lookup-row input { flex: 1; min-width: 0; }
.known-agents {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.agent-chip {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--fg);
}
.agent-chip code { color: var(--fg-dim); font-size: 10px; }
.advanced-settings {
  margin-top: 12px;
  padding: 8px 0;
}
.advanced-settings input { width: 100%; }

/* ---- topbar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  min-height: 48px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 110px;
}
.brand-logo {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(60,184,122,0.30));
  transition: filter 200ms ease;
}
.brand:hover .brand-logo {
  filter: drop-shadow(0 0 10px rgba(42,184,168,0.45));
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
}
.brand-text strong {
  font-family: var(--brand-font);
  font-size: 18px;
  letter-spacing: 0.24em;
  font-weight: 700;
  background: linear-gradient(95deg, #3cb87a 0%, #2ab8a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.brand-tag {
  font-family: var(--brand-font);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
  opacity: 0.75;
}
:root[data-theme="light"] .brand-text strong {
  background: linear-gradient(95deg, #00574E 0%, #00aa7a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
:root[data-theme="light"] .brand-tag {
  color: #00574E;
}
.spacer { flex: 1; }
.sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
/* Topbar quick-open. Anchors a small dropdown of matching tickets
   directly below the input. The list is absolute so it doesn't push
   the topbar, and width is tied to the input's natural width below. */
.header-search {
  position: relative;
  flex: 0 1 280px;
  min-width: 160px;
}
.header-search > input {
  width: 100%;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
}
.header-search > input::placeholder { color: var(--fg-dim); }
.header-search > input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-2);
}
.jump-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  max-height: 380px;
  overflow-y: auto;
  z-index: 1000;
  min-width: 360px;
}
.jump-results.hidden { display: none; }
.jump-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--fg);
}
.jump-row.active,
.jump-row:hover { background: var(--bg-3); }
.jump-id {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  color: var(--fg-dim);
  font-size: 11px;
}
.jump-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jump-priority {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg-4);
  color: var(--fg-dim);
}
.jump-meta {
  font-size: 11px;
  color: var(--fg-dim);
}
.jump-archived {
  font-size: 10px;
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1px 6px;
}
.badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.badge.good { background: rgba(78,201,176,0.15); border-color: var(--good); color: var(--good); }
.badge.warn { background: rgba(255,199,119,0.12); border-color: #ffc777; color: #ffc777; }
.badge.bad { background: rgba(241,76,76,0.15); border-color: var(--warn); color: var(--warn); }
.badge.clickable { cursor: pointer; user-select: none; transition: filter 0.15s ease; }
.badge.clickable:hover { filter: brightness(1.2); }
.badge.busy { opacity: 0.75; cursor: progress; pointer-events: none; }
.sync-status {
  color: var(--fg-dim);
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.sync-status.busy { color: #ffc777; background: rgba(255,199,119,0.08); border-color: rgba(255,199,119,0.25); }
.sync-status.good { color: var(--good); background: rgba(78,201,176,0.08); border-color: rgba(78,201,176,0.25); }
.sync-status.warn { color: #ffc777; background: rgba(255,199,119,0.08); border-color: rgba(255,199,119,0.25); }
.sync-status.bad { color: var(--warn); background: rgba(241,76,76,0.08); border-color: rgba(241,76,76,0.25); }

/* Combined "connection status" capsule — packs the token badge and the
   sync-status pill into one continuous control. The token badge keeps
   its colored state (good/warn/bad) on the left; the sync-status text
   reads as the secondary detail on the right, separated by a faint
   divider rather than by a gap. Saves horizontal real estate and reads
   as a single thing instead of two competing pills. */
.conn-status {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-3);
  overflow: hidden;
  font-size: 11px;
  white-space: nowrap;
}
.conn-status .badge {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 3px 9px 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* Colored leading dot reflects token state without painting the whole
   left half — keeps the capsule visually unified. */
.conn-status .badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fg-dim);
  display: inline-block;
  flex: 0 0 auto;
}
.conn-status .badge.good::before { background: var(--good); }
.conn-status .badge.warn::before { background: #ffc777; }
.conn-status .badge.bad::before { background: var(--warn); }
.conn-status .badge.good,
.conn-status .badge.warn,
.conn-status .badge.bad { background: transparent; color: var(--fg); }
.conn-status .sync-status {
  border: 0;
  border-radius: 0;
  border-left: 1px solid var(--border);
  padding: 3px 10px;
  background: transparent;
  display: inline-flex;
  align-items: center;
}
.conn-status .sync-status.busy,
.conn-status .sync-status.good,
.conn-status .sync-status.warn,
.conn-status .sync-status.bad { background: transparent; }

/* Version chip — sits next to the connection capsule. Default state is
   a quiet "v1.2.0" so users can confirm the build at a glance. When
   the server reports a newer version than this tab loaded against,
   the chip flips to a clickable amber pill prompting a reload. */
.app-version {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--fg-dim);
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  user-select: none;
}
.app-version.clickable {
  cursor: pointer;
  transition: filter 0.15s ease;
}
.app-version.clickable:hover { filter: brightness(1.2); }
.app-version.warn {
  color: #ffc777;
  background: rgba(255,199,119,0.10);
  border: 1px solid rgba(255,199,119,0.35);
  padding: 2px 8px;
}
.app-version-update {
  font-family: var(--font-base, sans-serif);
  margin-left: 4px;
  text-decoration: underline;
}

.agent-select {
  min-width: 150px;
  max-width: 230px;
}

/* Agent filter — a labelled row in the collapsible filter panel. */
.agent-scope-section { display: flex; align-items: center; gap: 8px; }
.agent-scope-label { flex: 0 0 auto; }
.agent-filter { display: inline-flex; gap: 4px; flex: 1; min-width: 0; }
.agent-filter select {
  padding: 3px 6px;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--fg);
}
/* who: flexes but keeps a usable floor so it can never collapse to a
   sliver; role: just wide enough for its text. */
.agent-filter .agent-filter-who {
  flex: 1 1 140px;
  min-width: 108px;
  max-width: 200px;
  text-overflow: ellipsis;
}
.agent-filter .agent-filter-role { flex: 0 0 auto; }
.agent-filter select:disabled { opacity: 0.45; }
/* Inside a filter-bar popover panel the agent picker sizes to the panel,
   not a flex row — cancel the inherited greedy flex. */
.filter-pop-panel .agent-filter { display: flex; gap: 6px; flex: none; }
.filter-pop-panel .agent-filter-who { max-width: none; }
.date-filter-pop { display: flex; gap: 6px; }

/* ---- layout ---- */
.layout { display: flex; height: calc(100vh - 49px); }
.sidebar {
  flex: 0 0 25vw;
  min-width: 220px;
  max-width: 70vw;
  border-right: 1px solid var(--border);
  background: var(--bg-2);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.resizer-v {
  flex: 0 0 4px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  user-select: none;
  z-index: 5;
}
.resizer-v::before {
  content: "";
  position: absolute;
  inset: 0 -2px;
  background: transparent;
  transition: background 120ms ease;
}
.resizer-v:hover::before,
.resizer-v.dragging::before {
  background: var(--accent);
  opacity: 0.45;
}
body.is-resizing { cursor: col-resize !important; user-select: none !important; }
body.is-resizing * { cursor: col-resize !important; }
.sidebar-header {
  padding: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 6px;
}
.sidebar-header input { flex: 1; }
.sidebar-header select { width: 130px; }
/* Click-toggle filter panel — explicit down-arrow button in the header.
   Default state (collapsed vs open) and toggle state are persisted to
   localStorage by wireFilterToggle / wireGraphFilterToggle. */
.filter-panel {
  overflow: hidden;
  max-height: 800px;
  transition: max-height 220ms ease;
  border-bottom: 1px solid var(--border);
}
.filter-panel.collapsed {
  max-height: 0;
  border-bottom-color: transparent;
}
/* The tag-filter chip strip rides the filter toggle (see wireToggle) —
   hidden when the panel is collapsed. The color strip stays put. */
.tag-filter.collapsed { display: none; }
.filter-toggle-btn {
  background: transparent;
  border: none;
  color: var(--fg-dim);
  padding: 0 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  transition: transform 180ms ease, color 120ms ease;
}
.filter-toggle-btn:hover { color: var(--fg); background: transparent; }
.filter-toggle-btn[aria-expanded="false"] { transform: rotate(-90deg); }
.filter-section {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.sidebar-filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}

/* Tag color swatches (pane header) */
.color-swatches {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.pane-color-swatch {
  /* Real <button>s for keyboard access — reset the UA chrome so they
     render exactly like the spans they replaced. */
  appearance: none;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 120ms ease, border-color 120ms ease;
}
.pane-color-swatch:hover { transform: scale(1.2); }
.pane-color-swatch:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
.pane-color-swatch.active { border-color: var(--fg); transform: scale(1.15); }
.pane-color-swatch:disabled { cursor: default; opacity: 0.55; transform: none; }
.pane-color-clear {
  background: transparent;
  border: 1px dashed var(--fg-dim);
  font-size: 13px;
  line-height: 1;
  color: var(--fg-dim);
  width: 18px;
  height: 18px;
}
.pane-color-clear.active { border-color: var(--fg); color: var(--fg); }

/* Compact tag swatches for sidebar tag-color filters (board + graph). */
.color-filter, .graph-color-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  max-height: none;
}
.sidebar-color-filter {
  justify-content: center;
  padding: 7px 8px 6px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 120ms ease, border-color 120ms ease;
  background: var(--bg-3);
}
.color-swatch:hover { transform: scale(1.2); }
.color-swatch.active { border-color: var(--fg); transform: scale(1.15); }
.color-swatch-empty { border: 1px dashed var(--fg-dim); }
.color-swatch-empty.active { border-style: solid; border-color: var(--fg); }

.counts {
  padding: 4px 10px;
  font-size: 11px;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--border);
}
.counts .pill { display: inline-block; margin-right: 8px; }
.counts .pill b { color: var(--fg); }
.sidebar-filter-summary .counts {
  padding: 0;
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  /* Flows on the same wrapping row as the archive pill + snooze toggle —
   * `order` just keeps it last (after both toggles) when it fits, and it
   * wraps to its own line on a narrow sidebar. */
  order: 9;
}
.sidebar-filter-summary .counts .pill {
  margin-right: 0;
  white-space: nowrap;
}

.team-filter {
  padding: 8px 8px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 120px;
  overflow-y: auto;
}
.team-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  color: var(--fg-dim);
}
.team-chip:hover { background: var(--bg-4); color: var(--fg); }
.team-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.team-chip .count {
  font-size: 10px;
  background: rgba(255,255,255,0.12);
  padding: 1px 5px;
  border-radius: 8px;
}
.team-chip.active .count { background: rgba(0,0,0,0.25); }

/* Ghost state — used by team/category/status/tag chips when the
   filter is selected but the current visible set has zero matches
   (e.g. you selected "In Progress", then flipped Archive to "archived
   only" which has no In Progress tickets). Without this, the chip
   would drop out of the strip entirely and the user would be stuck
   with an invisible-but-active filter. Ghost chips stay rendered,
   stay clickable to undo, and use a dashed border so it reads as
   "selection without matches" rather than "active selection". */
.team-chip.is-ghost,
.category-chip.is-ghost,
.status-chip.is-ghost {
  opacity: 0.55;
  border-style: dashed !important;
  font-style: italic;
}
.team-chip.is-ghost.active,
.category-chip.is-ghost.active,
.status-chip.is-ghost.active {
  opacity: 0.85;
  border-color: var(--fg-dim) !important;
  background: transparent !important;
  color: var(--fg-dim) !important;
}
.color-swatch.is-ghost { opacity: 0.4; border-style: dashed; }

.filter-panel .team-filter {
  max-height: 92px;
  padding: 7px 8px;
}

.category-filter {
  padding: 8px 8px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 92px;
  overflow-y: auto;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  color: var(--fg-dim);
}
.category-chip:hover { background: var(--bg-4); color: var(--fg); }
.category-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.category-chip .count {
  font-size: 10px;
  background: rgba(255,255,255,0.12);
  padding: 1px 5px;
  border-radius: 8px;
}
.category-chip.active .count { background: rgba(0,0,0,0.25); }

.status-filter {
  padding: 8px 8px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 92px;
  overflow-y: auto;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  color: var(--fg-dim);
}
.status-chip:hover { background: var(--bg-4); color: var(--fg); }
.status-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.status-chip .count {
  font-size: 10px;
  background: rgba(255,255,255,0.12);
  padding: 1px 5px;
  border-radius: 8px;
}
.status-chip.active .count { background: rgba(0,0,0,0.25); }

.color-filter {
  padding: 8px 8px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tag-chip { text-transform: capitalize; }
/* Inside the graph's collapsible filter-panel, tag/team filters look like board */
.graph-color-filter,
.graph-team-filter {
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--border);
  max-height: 100px;
  overflow-y: auto;
}
.date-filter-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.date-filter-row .date-field { flex: 1 1 50%; }
.date-filter-row .date-range { flex: 1 1 50%; }
.filter-compact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}
.filter-compact-row select { min-width: 0; width: 100%; }
.filter-compact-row .filter-sort { grid-column: 1 / -1; }

/* 3-state pill: Active / Archived / All. */
.archive-pill {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px;
  background: var(--bg-3);
  gap: 2px;
}
.archive-pill-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 4px 6px;
  font-size: 11px;
  color: var(--fg-dim);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}
.archive-pill-btn:hover { color: var(--fg); background: var(--bg-4); }
.archive-pill-btn.active {
  background: #6cb4ff;
  color: #021029;
  font-weight: 600;
}
:root[data-theme="light"] .archive-pill-btn.active { color: #fff; background: #2a6fb5; }
.tag-chip-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
  border: 1px solid rgba(0,0,0,0.2);
}
.tag-chip-dot-empty {
  background: transparent;
  border: 1px dashed var(--fg-dim);
}

#ticket-list {
  list-style: none;
  margin: 0; padding: 0;
  overflow-y: auto;
  flex: 1;
}
#ticket-list li {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-left: 3px solid transparent;
}
#ticket-list li:hover { background: var(--bg-3); }
#ticket-list li.active { background: var(--active-bg); }
#ticket-list li.ticket-new {
  background: linear-gradient(90deg, rgba(78,201,176,0.13), transparent 42%);
}
#ticket-list li.ticket-updated {
  background: linear-gradient(90deg, rgba(255,199,119,0.11), transparent 42%);
}
#ticket-list .id { font-family: ui-monospace, monospace; color: var(--fg-dim); margin-right: 6px; font-size: 11px; }
#ticket-list .summary { display: block; line-height: 1.3; }
#ticket-list .reporter {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.2;
}
#ticket-list .reporter-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.01em;
}
#ticket-list .reporter-dept {
  font-size: 10.5px;
  color: var(--fg-dim);
  font-weight: 400;
}
#ticket-list li.active .reporter-name { color: var(--accent-2); }
#ticket-list .meta {
  font-size: 10px;
  color: var(--fg-dim);
  margin-top: 3px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#ticket-list .pri-1, #ticket-list .pri-2 { color: #ff8c8c; }
#ticket-list .reply-state {
  padding: 1px 5px;
  border-radius: 8px;
  border: 1px solid transparent;
}
#ticket-list .reply-state.needs-reply {
  color: #ffc777;
  border-color: rgba(255,199,119,0.25);
  background: rgba(255,199,119,0.08);
}
#ticket-list .reply-state.agent-replied {
  color: var(--good);
  border-color: rgba(78,201,176,0.25);
  background: rgba(78,201,176,0.08);
}
#ticket-list .reply-state.tentative { opacity: 0.85; }
.urgency-chip {
  padding: 1px 5px;
  border-radius: 8px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid transparent;
}
.urgency-chip.urgency-high { color: var(--warn); border-color: rgba(241,76,76,0.35); background: rgba(241,76,76,0.10); }
.urgency-chip.urgency-med { color: #ffc777; border-color: rgba(255,199,119,0.30); background: rgba(255,199,119,0.08); }
.urgency-chip.urgency-low { color: var(--fg-dim); border-color: var(--border); background: transparent; }
.cf-urgency-chip {
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
}
.cf-urgency-chip.cf-urg-high { color: #ff6b6b; border-color: rgba(255,107,107,0.55); background: rgba(255,107,107,0.14); }
.cf-urgency-chip.cf-urg-med  { color: #ffb454; border-color: rgba(255,180,84,0.45);  background: rgba(255,180,84,0.10); }
.cf-urgency-chip.cf-urg-low  { color: var(--fg-dim); border-color: var(--border); background: transparent; }
.cf-urgency-chip.cf-urg-mismatch { box-shadow: 0 0 0 1px rgba(241,76,76,0.45); }
.cf-urgency-chip.cf-urg-masked { font-style: italic; opacity: 0.85; }
.cf-urgency-chip.cf-urg-masked::before { content: "≈ "; opacity: 0.7; }
.status-pill, .priority-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pill, #888);
  border: 1px solid color-mix(in srgb, var(--pill, #888) 45%, transparent);
  background: color-mix(in srgb, var(--pill, #888) 12%, transparent);
  white-space: nowrap;
}
.fresh-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.fresh-badge.new { color: #001f1a; background: var(--good); }
.fresh-badge.updated { color: #261900; background: #ffc777; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tabs {
  display: flex;
  align-items: stretch;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tabs::-webkit-scrollbar { height: 4px; }
.tab {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px;
  border-right: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  background: var(--bg-3);
  border-top: 2px solid transparent;
  user-select: none;
}
.tab.active { background: var(--bg); border-top-color: var(--accent); }
/* Tab being drag-reordered — dimmed so the gap it leaves reads clearly. */
.tab.tab-dragging { opacity: 0.4; cursor: grabbing; }
.tab.preview span:not(.dot) { font-style: italic; }
.tab.preview { opacity: 0.85; }
.tab.preview.active { opacity: 1; }
.tab .close {
  color: var(--fg-dim);
  border: none;
  background: none;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
.tab .close:hover { color: var(--fg); background: var(--bg-3); }
.tab .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#ticket-list .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.panes { flex: 1; position: relative; overflow: hidden; }
.empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.empty h2 { margin: 0 0 6px; font-weight: 400; }
.pane {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.pane.active { display: flex; }
.pane-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.pane-title-row { display: flex; justify-content: flex-start; align-items: center; gap: 12px; flex-wrap: wrap; }
.pane-open-actions { display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; margin-left: auto; }
.pane-title { margin: 0 0 4px; font-size: 14px; line-height: 1.3; }
.pane-meta {
  color: var(--fg-dim);
  font-size: 11px;
  margin-bottom: 8px;
  line-height: 1.5;
  /* Plain inline flow so reporter, dept, dates, and assignee chips all
     wrap together as one line of text rather than each becoming its own
     stacked flex item. */
}
.pane-meta > span { display: inline-flex; align-items: baseline; vertical-align: baseline; margin-right: 6px; }
.pane-reporter {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0.01em;
}
.pane-reporter-dept {
  font-size: 11px;
  color: var(--fg-dim);
  font-weight: 400;
}
.pane-meta-tail { color: var(--fg-dim); }
.pane-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.pane-body { flex: 1; display: flex; min-height: 0; min-width: 0; }
/* flex-basis 0 (not auto) so wide content like long URLs or log lines doesn't
 * push min-content above the available width, which would pin the notes-pane
 * resizer at the notes-pane min-width regardless of where the user dragged. */
.ticket-detail {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 14px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
/* flex-shrink: 1 (not 0) so that on a narrow window the notes pane can
 * yield back room rather than squeezing ticket-detail off the screen.
 * Stored flex-basis still acts as the user's preferred width. */
.pane-body .notes-pane { flex: 0 1 25vw; min-width: 280px; max-width: 60vw; }
.ticket-detail h3 {
  margin: 14px 0 6px;
  font-size: 11px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.ticket-detail .block {
  background: var(--bg-2);
  padding: 8px 10px;
  border-radius: 3px;
  border: 1px solid var(--border);
  word-wrap: break-word;
  font-size: 12px;
  line-height: 1.45;
}
.ticket-detail .block.rich-html { white-space: normal; }
.ticket-detail ul.cf { margin: 0; padding-left: 18px; }
.ticket-detail ul.cf li { margin-bottom: 3px; }

.action {
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 8px;
  background: var(--bg-2);
  padding: 8px 10px;
}
.action.internal { border-left: 3px solid #c586c0; }
.action.user { border-left: 3px solid #569cd6; }
.action.agent { border-left: 3px solid var(--accent-2); }
/* The original ticket description renders with the same chat-bubble shape
   as a conversation action so reading flows naturally from the reporter's
   first message into the agent replies. Slightly stronger left border so
   it reads as the anchor of the thread. */
/* `.action.ticket-original` raises specificity above the .action.user / .action.agent
   border-left rules so we don't need !important to make the anchor row stand out. */
.action.ticket-original { border-left-width: 4px; margin-bottom: 22px; padding-bottom: 24px; border-bottom: 1px dashed var(--border); }
.ticket-original .ticket-details-content { padding-top: 4px; }
.initial-marker {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--active-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 3px;
  padding: 2px 6px;
  margin-right: 4px;
  flex-shrink: 0;
}
.action.important { box-shadow: 0 0 0 1px var(--warn) inset; }
.action-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  user-select: none;
  transition: margin-bottom 220ms ease;
}
.action-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.action-collapse-chevron {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
  color: var(--fg-dim);
  transition: transform 220ms ease;
  display: inline-block;
  width: 12px;
  text-align: center;
}
.action.collapsed > .action-head { margin-bottom: 0; }
.action.collapsed .action-collapse-chevron { transform: rotate(-90deg); }
.action.ticket-original { transition: padding-bottom 220ms ease, margin-bottom 220ms ease; }
.action.ticket-original.collapsed { padding-bottom: 8px; margin-bottom: 10px; }
.action-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 220ms ease, opacity 180ms ease;
  opacity: 1;
}
.action-collapse-inner {
  overflow: hidden;
  min-height: 0;
}
.action.collapsed > .action-collapse {
  grid-template-rows: 0fr;
  opacity: 0;
}
.action-head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
.action-head-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg);
  flex-wrap: wrap;
}
.action-head-sub {
  text-transform: capitalize;
  letter-spacing: 0.02em;
}
.action-head .who {
  color: var(--fg);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.action-when { flex-shrink: 0; white-space: nowrap; }
.action-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  background: var(--bg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.action-pill-internal { color: #c586c0; border-color: rgba(197,134,192,0.4); background: rgba(197,134,192,0.1); }
.action-pill-important { color: var(--warn); border-color: rgba(241,76,76,0.4); background: rgba(241,76,76,0.1); }

.pane-assignee {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 3px;
  border-radius: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--fg);
}
.pane-assignee-name { line-height: 1; padding-right: 2px; }
.pane-assignee em { color: var(--accent-2); font-style: normal; font-weight: 600; }
.pane-assignee-secondary { opacity: 0.7; font-size: 10.5px; }
.actions-placeholder {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 10px 12px;
  color: var(--fg-dim);
  background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2));
  background-size: 220% 100%;
  animation: soft-sweep 1.4s ease-in-out infinite;
}
.actions-header {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 14px 0 6px;
}
.actions-header h3 { margin: 0; }
.new-action-count { color: var(--good); font-size: 11px; }
.action-body {
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.action-body p,
.ticket-detail .block p { margin: 0 0 0.65em; }
.action-body p:last-child,
.ticket-detail .block p:last-child { margin-bottom: 0; }
.action-body img,
.ticket-detail .block img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.action-attachments {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.action-attachments ul { margin: 4px 0 0; padding-left: 18px; }
.att-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-dim); }
.att-link { color: var(--accent); text-decoration: none; font-size: 13px; }
.att-link:hover { text-decoration: underline; }
.att-size { font-size: 11px; color: var(--fg-dim); margin-left: 4px; }
@keyframes soft-sweep {
  0% { background-position: 0% 0; }
  100% { background-position: -220% 0; }
}

.notes-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-2);
}
.notes-pane-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.notes-pane-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 7px 10px 6px;
  font-size: 12px;
  color: var(--fg-dim);
}
.notes-pane-tab:hover { color: var(--fg); background: var(--bg-3); }
.notes-pane-tab.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.notes-pane-tab.tab-loading {
  /* Subtle dim while a count is in flight — pairs with the `(…)`
   * placeholder so the tab clearly reads as "loading" not "empty". */
  opacity: 0.6;
}
.notes-pane-body {
  flex: 1;
  position: relative;
  min-height: 0;
}
.notes-pane-section {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.notes-pane-section.active { display: flex; }
.notes-pane-section.notes-pane-similar > .similar-section,
.notes-pane-section.notes-pane-related > .related-section {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
}

/* Sub-tabs inside the Notes section (My Notes / AI Notes / Suggested Response).
 * Reused by both the Tile side-pane and the Graph drawer so the two views
 * stay structurally identical. */
.notes-subtabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  flex-shrink: 0;
}
.notes-subtab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 5px 10px 4px;
  font-size: 11px;
  color: var(--fg-dim);
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.notes-subtab:hover { color: var(--fg); background: var(--bg-3); }
.notes-subtab.active {
  color: var(--fg);
  border-bottom-color: var(--accent-2, var(--accent));
}
/* Dot indicator: populated sub-section gets a colored dot. Status hint
 * — green for present, gray for empty. Hidden by default; populated()
 * helper toggles it. */
.notes-subtab .subnote-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bg-3);
  display: inline-block;
  flex-shrink: 0;
}
.notes-subtab.populated .subnote-dot { background: var(--good, #4ec9b0); }
/* Outer tab count badge (Notes (n)). Re-uses the existing pop-count
 * badge style but pinned to the right of the Notes tab label. */
.notes-pane-tab .tab-count,
.drawer-tab .tab-count {
  margin-left: 5px;
  font-size: 10px;
  color: var(--fg-dim);
}
.notes-pane-tab.active .tab-count,
.drawer-tab.active .tab-count { color: var(--accent-2, var(--accent)); }
.notes-sub-body {
  flex: 1;
  position: relative;
  min-height: 0;
}
.notes-sub {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.notes-sub.active { display: flex; }
/* Drawer variant — drawer sub uses scroll on the rendered region directly. */
.drawer-section.drawer-notes {
  display: none;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.drawer-section.drawer-notes.active { display: flex; }
.drawer-section.drawer-notes > .notes-sub-body { flex: 1; }
.drawer-section.drawer-notes .notes-sub > .drawer-ai-notes,
.drawer-section.drawer-notes .notes-sub > .drawer-ai-response-mount {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
}
.drawer-section.drawer-notes .notes-sub > textarea.drawer-notes-text {
  flex: 1;
  resize: none;
  border: none;
  background: var(--bg-1);
  color: var(--fg);
  padding: 8px 12px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.notes-header {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
}
.notes {
  flex: 1;
  border: none;
  border-radius: 0;
  resize: none;
  padding: 12px;
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  background: var(--bg);
}
.notes:focus { outline: 1px solid var(--accent); outline-offset: -1px; }

/* AI Notes + Suggested Response share the rendered-markdown look. Both
 * tabs render the API's marked+sanitize output into a flex-grow div with
 * its own scrollbar; the textarea is the toggleable edit view. */
.ai-notes-rendered,
.ai-response-rendered {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg);
  font-size: 12.5px;
  line-height: 1.55;
  overflow-y: auto;
  /* Long URLs / unbroken strings used to force the rendered region to
   * scroll horizontally — `overflow-wrap: anywhere` lets the browser
   * break long words to fit, and `overflow-x: hidden` clamps anything
   * that still tries to escape (e.g. a wide <pre> handles its own
   * horizontal scroll inside its box). */
  overflow-x: hidden;
  overflow-wrap: anywhere;
  color: var(--fg);
  min-height: 0;
}
.ai-notes-rendered.hidden,
.ai-response-rendered.hidden { display: none; }
.ai-notes-rendered h1, .ai-notes-rendered h2, .ai-notes-rendered h3,
.ai-response-rendered h1, .ai-response-rendered h2, .ai-response-rendered h3 {
  font-size: 13px;
  margin: 14px 0 4px;
  color: var(--accent-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.ai-notes-rendered h2:first-child, .ai-notes-rendered h3:first-child,
.ai-response-rendered h2:first-child, .ai-response-rendered h3:first-child { margin-top: 0; }
.ai-notes-rendered code,
.ai-response-rendered code {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 11.5px;
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
}
.ai-notes-rendered pre,
.ai-response-rendered pre {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  overflow-x: auto;
  font-size: 11px;
  line-height: 1.45;
}
.ai-notes-rendered pre code,
.ai-response-rendered pre code { background: transparent; padding: 0; font-size: inherit; }
.ai-notes-rendered ul, .ai-notes-rendered ol,
.ai-response-rendered ul, .ai-response-rendered ol { padding-left: 22px; margin: 4px 0; }
.ai-notes-rendered li, .ai-response-rendered li { margin: 2px 0; }
.ai-notes-rendered blockquote,
.ai-response-rendered blockquote {
  border-left: 3px solid var(--accent);
  margin: 6px 0;
  padding-left: 10px;
  color: var(--fg-dim);
}
.ai-notes,
.ai-response {
  flex: 1;
  border: none;
  border-radius: 0;
  resize: none;
  padding: 12px;
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--fg);
  min-height: 0;
}
.ai-notes.hidden, .ai-response.hidden { display: none; }
.ai-notes:focus, .ai-response:focus { outline: 1px solid var(--accent); outline-offset: -1px; }
.ai-toggle-edit, .ai-response-toggle-edit, .ai-response-copy { margin-left: 6px; }

.last-responder.you { color: var(--good); }
.last-responder.them { color: #ffc777; }
.color-status.ok { color: var(--good); }
.color-status.err { color: var(--warn); }
.action.is-new {
  border-left-width: 4px;
  box-shadow: 0 0 0 1px var(--good) inset;
}
.action.is-new::before {
  content: "NEW";
  display: inline-block;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 2px;
  background: var(--good);
  color: #000;
  margin-right: 6px;
}
/* ---- view switcher ---- */
.nav-history {
  display: inline-flex;
  gap: 2px;
}
.nav-history .icon-btn {
  padding: 2px 8px;
  font-size: 14px;
  min-width: 28px;
}
.nav-history .icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
}
.view-switcher {
  display: inline-flex;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px;
  gap: 2px;
}
.view-switcher .view-btn {
  padding: 4px 12px;
  font-size: 12px;
  background: transparent;
  border: none;
  color: var(--fg-dim);
  border-radius: 3px;
  cursor: pointer;
}
.view-switcher .view-btn:hover { color: var(--fg); }
.view-switcher .view-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ---- graph view ---- */
.view-graph {
  display: flex;
  height: calc(100vh - 49px);
  background: var(--graph-bg);
}
.graph-sidebar {
  flex: 0 0 clamp(220px, 15vw, 400px);
  border-right: 1px solid var(--border);
  background: var(--bg-2);
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-width: 180px;
}
.graph-sidebar > * {
  flex-shrink: 0;
  min-width: 0;
}
/* Mirror the tile sidebar's header (.sidebar-header) so both surfaces
   behave the same when the sidebar is narrow. The scope select can shrink
   instead of snapping to an 84px column; the filter-toggle stays auto. */
.graph-sidebar-header {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  align-items: center;
}
.graph-sidebar-header > #graph-search { flex: 1 1 auto; min-width: 0; }
.graph-sidebar-header > #graph-search-scope { flex: 0 1 130px; min-width: 0; }
.graph-sidebar-header > .filter-toggle-btn { flex: 0 0 auto; }
/* Direct-child only: the date selects sit straight inside .filter-section
   and want full width, but the agent filter's nested who/role selects
   (.filter-section > .agent-filter > select) must keep their own sizing. */
.graph-sidebar .filter-section > select {
  min-width: 0;
  width: 100%;
}
.graph-sidebar .filter-panel {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 100%;
}
/* Two-column date filter row, matching the tile sidebar's `.date-filter-row`
   pattern (line 602). Narrow sidebars below ~180px wrap to a single column
   thanks to flex-wrap on `.filter-section`. */
.graph-sidebar .date-filter-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(80px, 1fr);
  gap: 6px;
  align-items: stretch;
}
.graph-sidebar .color-filter,
.graph-sidebar .team-filter {
  overflow-x: hidden;
}
.graph-section {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
}
.graph-section:last-child { border-bottom: none; }
.graph-section h3 {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.graph-section .check {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px;
  padding: 3px 0;
  cursor: pointer;
  user-select: none;
}
.graph-section .swatch {
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
}
.swatch-xref          { background: #ffb454; }
.swatch-project       { background: #4ec9b0; }
.swatch-project-root  { background: #6cb4ff; }
.swatch-reporter      { background: #c586c0; }
.swatch-team          { background: #5a5a5a; }

.graph-node[style*="display: none"] { pointer-events: none; }

.graph-stats { font-size: 11px; color: var(--fg-dim); line-height: 1.6; }
.graph-stats b { color: var(--fg); }

.graph-legend { font-size: 11px; }
.graph-legend .row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.graph-legend .swatch-circle {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}

.graph-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}
#graph-svg { width: 100%; height: 100%; cursor: grab; }
#graph-svg:active { cursor: grabbing; }

.graph-link {
  stroke-linecap: round;
  pointer-events: none;
}
.graph-node {
  cursor: pointer;
  transition: filter 0.15s ease;
}
.graph-node circle {
  transition: stroke-width 0.15s ease, opacity 0.15s ease;
}
.graph-node text {
  pointer-events: none;
  fill: var(--fg-dim);
  font-size: 9px;
  font-family: ui-monospace, monospace;
  text-anchor: middle;
}
.graph-node .node-initials {
  fill: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.65);
}
.graph-node .node-id-label {
  fill: var(--fg-dim);
  font-size: 9px;
}
.graph-node.dim { opacity: 0.15; }
.graph-node.highlighted text { fill: var(--fg); font-weight: 700; font-size: 10px; }
.graph-node.highlighted circle { stroke-width: 2.5; filter: drop-shadow(0 0 6px currentColor); }
.graph-node.is-new text,
.graph-node.is-updated text { fill: var(--fg); font-weight: 700; }
.graph-node.is-new circle { filter: drop-shadow(0 0 8px var(--good)); }
.graph-node.is-updated circle { filter: drop-shadow(0 0 8px #ffc777); }
.graph-link.dim { opacity: 0.05; }

/* Shared floating hover card (dashboard charts, beeswarm dots, etc.) */
.atlas-hover-card {
  position: fixed;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  pointer-events: none;
  font-size: 12px;
  max-width: 320px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  z-index: 9000;
}
.atlas-hover-card.hidden { display: none; }
.atlas-hover-card .hc-id { color: var(--fg-dim); font-family: ui-monospace, monospace; font-size: 10px; }
.atlas-hover-card .hc-summary { font-weight: 600; margin: 2px 0; line-height: 1.3; }
.atlas-hover-card .hc-meta { color: var(--fg-dim); font-size: 11px; }
.atlas-hover-card .hc-extra { margin-top: 4px; font-family: ui-monospace, monospace; font-size: 10px; color: var(--accent-2); }
.atlas-hover-card .hc-tag { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* ---- list / dashboard views ----
 * The view itself is a fixed-height flex container; scrolling happens
 * inside `.list-table-wrap` (and the dashboard's own scrollers) — NOT
 * here. If `.data-view` were the scroller, the sticky `<thead>` would
 * pin inside the view's padding, and rows scrolling past would bleed
 * visibly through the padding strip above the headers. */
.data-view {
  height: calc(100vh - 49px);
  overflow: hidden;
  background: var(--bg);
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.data-view-panel {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px var(--shadow);
  overflow: hidden;
}
/* The dashboard's content (cards + charts + breakdowns) can be tall, so
 * the panel needs an inner scroller. The header / filter row stays pinned
 * above. */
.view-dashboard .data-view-panel { overflow-y: auto; }
.view-dashboard .data-view-header,
.view-dashboard .shared-filter-mount { position: sticky; top: 0; z-index: 2; background: var(--bg-2); }
.data-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}
.data-view-header h2 {
  margin: 0;
  font-size: 15px;
}
.data-view-header p { margin: 0; font-size: 11px; }
.data-view-summary {
  white-space: nowrap;
  padding-top: 3px;
}
/* The scroll container for the list. Sticky `<thead>` below pins to
 * top:0 of THIS element so the column headers butt up against the
 * toolbar with no gap. (Scroll-snap was tried here but interfered with
 * the inline-pane expand animation — snapping re-fired mid-transition
 * and made the surrounding rows jitter.) */
.list-table-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.list-view-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}
.list-view-table th,
.list-view-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.list-view-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-2);
  /* Pin the th to a known height so the expanded row's `top` offset below
     lines up exactly under it (no thin gap from line-height drift). */
  line-height: 16px;
  height: 33px;
  box-sizing: border-box;
}
/* The first cell wraps a ui-monospace button — give it an explicit width
   so the column doesn't auto-resize on tag/status cell flips. */
.list-view-table th:first-child,
.list-view-table td:first-child { width: 84px; min-width: 84px; }
.list-view-table th button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--fg-dim);
  font-weight: 700;
}
.list-view-table th button.active,
.list-view-table th button:hover { color: var(--fg); background: transparent; }
.list-view-table tbody tr[data-id] { cursor: pointer; }
.list-view-table tbody tr[data-id]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
.list-view-table tr:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.list-summary {
  max-width: 520px;
  min-width: 260px;
}
.table-ticket-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--accent);
  font-family: ui-monospace, monospace;
}
.list-color {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: capitalize;
}
.list-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.2);
  flex: 0 0 auto;
}
.dashboard-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.dashboard-cards .dash-cards-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 12px;
}
.dashboard-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 92px;
  position: relative;
  overflow: hidden;
}
.dashboard-card-head { display: flex; flex-direction: column; gap: 3px; }
.dashboard-card span {
  color: var(--fg-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.dashboard-card strong {
  font-size: 30px;
  line-height: 1;
  font-weight: 600;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dashboard-card small {
  color: var(--fg-dim);
  font-size: 11px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.dash-spark {
  margin-top: auto;
  height: 36px;
  display: flex;
  align-items: flex-end;
  width: 100%;
  pointer-events: none;
}
.dash-spark svg { display: block; width: 100%; height: 100%; }
.dashboard-breakdowns {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}
.dashboard-breakdown {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
}
.dashboard-breakdown h3 {
  margin: 0 0 10px;
  color: var(--fg-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dash-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 170px) 1fr 32px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}
.dash-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-3);
  overflow: hidden;
}
.dash-bar-track span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}
.dash-bar-row b {
  text-align: right;
  font-size: 11px;
}
.dash-rank-wrap {
  min-height: 0;
}
.dash-rank-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-rank-row {
  --row-color: var(--accent);
  display: grid;
  grid-template-columns: 22px minmax(110px, 190px) minmax(110px, 1fr) 40px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--bg-3) 38%, transparent);
}
.dash-rank-num {
  color: var(--fg-dim);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 10px;
  text-align: right;
}
.dash-rank-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fg);
  font-size: 12px;
}
.dash-rank-label > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-rank-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
  flex: 0 0 auto;
}
.dash-rank-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-4);
  overflow: hidden;
}
.dash-rank-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--row-color) 62%, transparent), var(--row-color));
  box-shadow: 0 0 14px color-mix(in srgb, var(--row-color) 24%, transparent);
}
.dash-rank-row b {
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .dashboard-cards .dash-cards-body,
  .dashboard-breakdowns,
  .dashboard-row-split {
    grid-template-columns: 1fr;
  }
  .dash-rank-row {
    grid-template-columns: 22px minmax(0, 1fr) 44px;
  }
  .dash-rank-track { grid-column: 2 / 4; }
  .data-view-header {
    flex-direction: column;
  }
}

/* ---- editorial chart layer ---- */
.dashboard-row-charts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 16px 16px;
}
.dashboard-row {
  display: grid;
  gap: 14px;
}
.dashboard-row-full { grid-template-columns: 1fr; }
.dashboard-row-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Hero row: inflow chart owns ~70%, Field Notes panel owns the rest.
   Collapses to a single column on narrow viewports so the chart and
   the prose stack instead of squeezing each other. */
.dashboard-row-hero { grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr); }
@media (max-width: 1100px) {
  .dashboard-row-hero { grid-template-columns: 1fr; }
}
.dashboard-cell { min-width: 0; }
.dashboard-hero-chart { display: flex; }
.dashboard-hero-chart > * { flex: 1; min-width: 0; }
.dashboard-hero-notes { display: flex; }
.dashboard-hero-notes > * { flex: 1; min-width: 0; }

/* Field Notes — the italic-serif insight panel paired with the inflow
   chart. Deliberately literary in tone (the prose is generated from
   the same analyzer the deep-dive widget uses, but recast as
   observational sentences). The panel uses a soft accent border and a
   pull-quote glyph so it reads as marginalia rather than a card with
   the same visual weight as a chart. */
.field-notes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 14px;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  overflow: hidden;
  font-family: Georgia, "Iowan Old Style", "Hoefler Text", "Times New Roman", serif;
  line-height: 1.55;
}
.field-notes::before {
  content: "“";
  position: absolute;
  top: -10px; left: 8px;
  font-size: 64px;
  font-family: Georgia, serif;
  color: color-mix(in srgb, var(--accent) 22%, transparent);
  pointer-events: none;
  line-height: 1;
}
.field-notes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--brand-font, system-ui, sans-serif);
}
.field-notes-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.field-notes-count {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
}
.field-notes-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}
/* Slideshow stage — all insights stack in the same box; only the
   `.is-active` line is visible at a time. Stacking order keeps layout
   stable through fades (no jumping height while one fades out). */
.field-notes-stage {
  position: relative;
  flex: 1;
  height: 170px;        /* fixed — keeps the panel a consistent size
                           regardless of how long any one slide is.
                           Sized for the typical 3–5 sentence narrative
                           insight. Slides that still overflow scroll
                           internally (rare with the slide-length
                           budget the skill prompt enforces). */
}
.field-notes-stage > .field-notes-line {
  position: absolute;
  inset: 0;
  overflow-y: auto;     /* long slides (multi-paragraph chokepoints,
                           the longer "mine" insights) scroll inside
                           the slide; the panel as a whole stays the
                           same height every time. */
  padding-right: 4px;   /* breathing room against the scrollbar */
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  filter: blur(2px);
  pointer-events: none;
  transition:
    opacity 320ms ease,
    transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 320ms ease;
}
.field-notes-stage > .field-notes-line.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}
.field-notes-stage > .field-notes-line.is-leaving {
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  filter: blur(2px);
}
/* Scrollbar styling for the inner-slide scroll — keep it subtle so
   the box doesn't look like a generic scrolling container. */
.field-notes-stage > .field-notes-line::-webkit-scrollbar { width: 6px; }
.field-notes-stage > .field-notes-line::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg-dim) 30%, transparent);
  border-radius: 999px;
}
.field-notes-stage > .field-notes-line::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .field-notes-stage > .field-notes-line {
    transition: opacity 180ms linear;
    transform: none;
    filter: none;
  }
}

/* Pagination dots — let the user jump to a specific insight. The
   active dot widens into a bar so it reads like a progress indicator
   for the rotation. */
.field-notes-dots {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
}
.field-notes-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg-dim) 40%, transparent);
  cursor: pointer;
  transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1), background 240ms ease;
}
.field-notes-dot:hover { background: var(--fg-dim); }
.field-notes-dot.is-active {
  width: 22px;
  background: var(--accent);
}

.field-notes-line {
  margin: 0;
  font-size: 13px;
  color: var(--fg);
}
.field-notes-line strong {
  font-weight: 700;
  color: var(--fg);
}
.field-notes-line em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}
.field-notes-foot {
  font-family: var(--brand-font, system-ui, sans-serif);
  font-style: normal;
  border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  padding-top: 8px;
  font-size: 10.5px;
}
.field-notes-empty {
  font-style: italic;
  text-align: center;
  padding: 24px;
}

/* Stage wrapper so the prev/next arrow buttons can sit on the left
   and right margins without overlapping the text. Arrows are vertically
   centered against the stage at a fixed compact size — they don't
   stretch to the (potentially tall) slide content. */
.field-notes-stage-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-notes-stage-wrap > .field-notes-stage {
  flex: 1;
  min-width: 0;
}

/* Prev/next arrows — chevron SVGs in a borderless 28×28 button.
   Always present (not hover-revealed) so the affordance is obvious,
   but quiet enough not to compete with the text. */
.field-notes-arrow {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  user-select: none;
}
.field-notes-arrow svg {
  display: block;
}
.field-notes-arrow:hover {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg-dim) 14%, transparent);
}
.field-notes-arrow:active {
  transform: scale(0.92);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.field-notes-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Slide content layout — narrative slides have a kind label, an
   optional title, and a prose body. Heuristic-detector slides only
   have prose (no kind/title), so the first two are present-only. */
.field-notes-kind {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.field-notes-kind.tldr        { color: var(--accent); }
.field-notes-kind.chokepoint  { color: var(--warn-fg, #c45a00); background: color-mix(in srgb, #c45a00 14%, transparent); }
.field-notes-kind.team        { color: var(--ok-fg, #2a8); background: color-mix(in srgb, #2a8 14%, transparent); }
.field-notes-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg);
  margin-bottom: 4px;
}
.field-notes-prose {
  font-size: 13px;
  color: var(--fg);
  line-height: 1.5;
}
.field-notes-prose p           { margin: 0 0 6px; }
.field-notes-prose p:last-child { margin-bottom: 0; }
.field-notes-prose strong       { font-weight: 700; color: var(--fg); }
.field-notes-prose em           { font-style: normal; font-weight: 600; color: var(--accent); }
.field-notes-prose code         { font-family: var(--mono, monospace); font-size: 12px; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--fg-dim) 10%, transparent); }
.field-notes-prose ul,
.field-notes-prose ol           { margin: 4px 0 6px; padding-left: 22px; }
.field-notes-prose li           { margin-bottom: 2px; }
.field-notes-prose a            { color: var(--accent); }

.dash-chart-fig {
  margin: 0;
  padding: 14px 16px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  position: relative;
  overflow: hidden;
}
.dash-chart-fig::before {
  /* hairline accent on the top edge */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 40%, var(--accent) 60%, transparent);
  opacity: 0.5;
}
.dash-chart-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dash-chart-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg);
  text-transform: none;
}
.dash-chart-actions { display: inline-flex; gap: 4px; opacity: 0; transition: opacity 0.18s ease; }
.dash-chart-fig:hover .dash-chart-actions,
.dash-chart-fig:focus-within .dash-chart-actions { opacity: 1; }
.dash-chart-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-dim);
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.dash-chart-btn:hover { color: var(--fg); border-color: var(--border); background: var(--bg-3); }
.dash-chart-wrap {
  width: 100%;
  min-height: 60px;
  position: relative;
}
.dash-chart-wrap > svg, .dash-chart-wrap > figure { display: block; max-width: 100%; }
.dash-chart-wrap > figure { margin: 0; }
.dash-chart-wrap > figure > svg, .dash-chart-wrap > figure > div > svg { display: block; }
.dash-chart-caption {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.01em;
}
.dash-chart-empty {
  padding: 24px 0;
  text-align: center;
}
.dash-chart-inner { width: 100%; }
.dash-chart-legend {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 11px !important;
  color: var(--fg-dim) !important;
  padding: 0 0 6px;
  background: transparent !important;
}

/* Plot color legend (rendered as a <figure> wrapping the SVG) */
.dash-chart-wrap figure[class^="plot-"] > div,
.dash-chart-wrap figure[class*=" plot-"] > div {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 11px !important;
  color: var(--fg-dim) !important;
  margin-bottom: 4px !important;
}

/* Tooltip styling — Plot.tip uses a g.tip with a white background by default */
.dash-chart-wrap g[aria-label="tip"] path {
  fill: var(--bg-3) !important;
  stroke: var(--border) !important;
  stroke-opacity: 1 !important;
  filter: drop-shadow(0 4px 16px var(--shadow));
}
.dash-chart-wrap g[aria-label="tip"] text {
  fill: var(--fg) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 11px !important;
}

/* dashboard-breakdown body padding when it hosts a Plot chart */
.dashboard-breakdown .dash-section-body .dash-chart-fig {
  background: transparent;
  border: 0;
  padding: 0;
}
.dashboard-breakdown .dash-section-body .dash-chart-fig::before { display: none; }
.dashboard-breakdown .dash-section-body .dash-chart-cap { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dash-chart-actions { transition: none !important; }
}

/* ---- graph drawer (slide-out ticket panel) ---- */
.graph-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: clamp(300px, 30vw, 80vw);
  min-width: 320px;
  max-width: 85vw;
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 16px var(--shadow);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.18s ease-out;
  z-index: 5;
}
.graph-drawer.hidden {
  display: flex !important;
  transform: translateX(100%);
  pointer-events: none;
}
.drawer-resize {
  position: absolute;
  left: -3px; top: 0; bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 1;
}
.drawer-resize:hover { background: rgba(0,122,204,0.3); }
.drawer-header {
  padding: 10px 12px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.drawer-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
.drawer-title {
  flex: 1;
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  word-wrap: break-word;
}
.drawer-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.drawer-title-actions .ghost.small {
  font-size: 11px;
  padding: 4px 8px;
}
.drawer-close {
   background: transparent;
   color: var(--fg-dim);
   font-size: 11px;
   line-height: 1.2;
   padding: 5px 8px;
   border-radius: 3px;
   cursor: pointer;
   flex-shrink: 0;
}
.drawer-close:hover { background: var(--bg-3); color: var(--fg); }
.drawer-meta {
  font-size: 11px;
  margin-bottom: 8px;
  word-wrap: break-word;
}
.drawer-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 -12px;
  padding: 0 6px;
  border-top: 1px solid var(--border);
}
.drawer-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--fg-dim);
  cursor: pointer;
}
.drawer-tab:hover { color: var(--fg); background: var(--bg-3); }
.drawer-tab.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.drawer-body {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.drawer-section {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 12px;
}
.drawer-section.active { display: flex; }
.drawer-section.drawer-notes { padding: 0; overflow: hidden; }
.drawer-notes .notes-header {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  flex-shrink: 0;
}
.drawer-notes-text {
  flex: 1;
  border: none;
  border-radius: 0;
  resize: none;
  padding: 12px;
  font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  background: var(--bg);
}
.drawer-notes-text:focus { outline: 1px solid var(--accent); outline-offset: -1px; }
.drawer-section dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0 0 12px;
}
.drawer-section dt { color: var(--fg-dim); }
.drawer-section h3 {
  margin: 14px 0 6px;
  font-size: 11px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.drawer-section .block {
  white-space: pre-wrap;
  background: var(--bg);
  padding: 8px 10px;
  border-radius: 3px;
  border: 1px solid var(--border);
  word-wrap: break-word;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.45;
}
.drawer-ai-notes {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.drawer-ai-notes h1,
.drawer-ai-notes h2,
.drawer-ai-notes h3 {
  font-size: 12px;
  margin: 12px 0 5px;
  color: var(--accent-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.drawer-ai-notes h3:first-child { margin-top: 0; }
.drawer-ai-notes code {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 11px;
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
}
.drawer-ai-notes pre {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  overflow-x: auto;
}
.drawer-ai-notes pre code { background: transparent; padding: 0; }
.drawer-ai-notes ul,
.drawer-ai-notes ol { padding-left: 22px; margin: 4px 0; }
.drawer-ai-notes li { margin: 2px 0; }
.drawer-ai-notes blockquote {
  border-left: 3px solid var(--accent);
  margin: 6px 0;
  padding-left: 10px;
  color: var(--fg-dim);
}
.drawer-inline-actions { margin-top: 14px; }
.drawer-section .empty-msg { color: var(--fg-dim); font-style: italic; padding: 12px 0; }

.related-section {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--bg);
}
.related-empty {
  color: var(--fg-dim);
  font-size: 11px;
}
.similar-section { margin-bottom: 6px; }
.similar-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 9px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.similar-item:hover, .similar-item:focus-visible {
  border-color: var(--accent);
  background: var(--bg-3);
  outline: none;
}
.similar-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.similar-id {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
}
.similar-id:hover { text-decoration: underline; }
.similar-summary { flex: 1; min-width: 0; font-size: 12px; }
.similar-meta { font-size: 10.5px; line-height: 1.3; margin-top: 2px; }
.similar-rank {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.similar-rank.match-strong {
  color: var(--accent);
  background: var(--active-bg);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.similar-rank.match-mid {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-2) 25%, transparent);
}
.similar-rank.match-weak {
  color: var(--fg-dim);
  background: var(--bg-3);
  border-color: var(--border);
}
.similar-preview {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding: 8px 9px;
  margin-top: 4px;
  margin-bottom: 4px;
  border-radius: 2px;
  font-size: 11px;
}
.similar-preview.hidden { display: none; }
.similar-preview-content { display: flex; flex-direction: column; gap: 6px; }
.similar-preview-summary {
  font-weight: 600;
  font-size: 12px;
  color: var(--fg);
}
.similar-preview-body {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}
.similar-preview-footer {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.similar-open-link {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.similar-open-link:hover { text-decoration: underline; }
.similar-preview-skeleton {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bg-3), var(--bg-4), var(--bg-3));
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}
.similar-preview-skeleton.short { width: 62%; }
@keyframes shimmer {
  from { background-position: 0% 0; }
  to { background-position: -200% 0; }
}
.related-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 8px;
  transition: border-color 0.15s ease;
}
.related-item:hover { border-color: var(--accent); }
.related-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.related-head code {
  font-size: 12px;
  cursor: pointer;
  color: var(--accent);
}
.related-head code:hover { text-decoration: underline; }
.related-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.related-link {
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--fg-dim);
}
.related-link:hover { color: var(--fg); border-color: var(--accent); text-decoration: none; }
.related-copy { padding: 2px 6px; font-size: 10px; }
.related-snippet {
  margin: 4px 0;
  font-style: italic;
  cursor: pointer;
  padding: 4px 0;
}
.related-snippet:hover { color: var(--fg); }
.related-preview {
  margin-top: 6px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.related-pre {
  background: var(--bg);
  padding: 8px 10px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 400px;
  overflow-y: auto;
  margin: 0;
}
.related-pre-wrap { position: relative; }
.related-pre-copy {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--bg-2);
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
}
.related-pre-wrap:hover .related-pre-copy { opacity: 1; }
.related-pre-copy:hover { color: var(--fg); border-color: var(--accent); }
.related-pre-copy.copied { color: var(--good); border-color: var(--good); opacity: 1; }
.search-hint {
  padding: 4px 10px;
  font-size: 11px;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--border);
  background: var(--bg-3);
}

/* Slim 8px scrollbar — applied to every overflow region in the app so
 * Tile, List, Dashboard and Graph all use the same look. Without the
 * graph-side selectors here the drawer + sidebar got the OS-default
 * chunky scrollbar, which looked out of place against the slim ones in
 * the Tile pane. */
#ticket-list::-webkit-scrollbar,
.ticket-detail::-webkit-scrollbar,
.onboard-card::-webkit-scrollbar,
.related-section::-webkit-scrollbar,
.similar-section::-webkit-scrollbar,
.audit-section::-webkit-scrollbar,
.ai-notes-rendered::-webkit-scrollbar,
.ai-response-rendered::-webkit-scrollbar,
.notes::-webkit-scrollbar,
.ai-notes::-webkit-scrollbar,
.ai-response::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,
.drawer-section::-webkit-scrollbar,
.drawer-ai-notes::-webkit-scrollbar,
.drawer-ai-response-mount::-webkit-scrollbar,
.drawer-similar-list::-webkit-scrollbar,
.drawer-notes-text::-webkit-scrollbar,
.graph-sidebar::-webkit-scrollbar,
.list-table-wrap::-webkit-scrollbar,
.dashboard-cards::-webkit-scrollbar,
.color-filter::-webkit-scrollbar,
.tag-filter::-webkit-scrollbar,
.tag-pop-list::-webkit-scrollbar,
.team-filter::-webkit-scrollbar,
.category-filter::-webkit-scrollbar,
.status-filter::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.filter-pop-panel::-webkit-scrollbar { width: 6px; height: 6px; }
#ticket-list::-webkit-scrollbar-thumb,
.ticket-detail::-webkit-scrollbar-thumb,
.onboard-card::-webkit-scrollbar-thumb,
.related-section::-webkit-scrollbar-thumb,
.similar-section::-webkit-scrollbar-thumb,
.audit-section::-webkit-scrollbar-thumb,
.ai-notes-rendered::-webkit-scrollbar-thumb,
.ai-response-rendered::-webkit-scrollbar-thumb,
.notes::-webkit-scrollbar-thumb,
.ai-notes::-webkit-scrollbar-thumb,
.ai-response::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb,
.drawer-section::-webkit-scrollbar-thumb,
.drawer-ai-notes::-webkit-scrollbar-thumb,
.drawer-ai-response-mount::-webkit-scrollbar-thumb,
.drawer-similar-list::-webkit-scrollbar-thumb,
.drawer-notes-text::-webkit-scrollbar-thumb,
.graph-sidebar::-webkit-scrollbar-thumb,
.list-table-wrap::-webkit-scrollbar-thumb,
.dashboard-cards::-webkit-scrollbar-thumb,
.color-filter::-webkit-scrollbar-thumb,
.tag-filter::-webkit-scrollbar-thumb,
.tag-pop-list::-webkit-scrollbar-thumb,
.team-filter::-webkit-scrollbar-thumb,
.category-filter::-webkit-scrollbar-thumb,
.status-filter::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.filter-pop-panel::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 4px; }
#ticket-list::-webkit-scrollbar-thumb:hover,
.ticket-detail::-webkit-scrollbar-thumb:hover,
.ai-notes-rendered::-webkit-scrollbar-thumb:hover,
.ai-response-rendered::-webkit-scrollbar-thumb:hover,
.drawer-body::-webkit-scrollbar-thumb:hover,
.drawer-ai-notes::-webkit-scrollbar-thumb:hover,
.drawer-ai-response-mount::-webkit-scrollbar-thumb:hover,
.graph-sidebar::-webkit-scrollbar-thumb:hover { background: var(--accent); }
/* Firefox — there's only one knob: scrollbar-color. Apply it broadly to
 * every scroll surface. Pair with the webkit rules above for Chromium. */
#ticket-list, .ticket-detail, .onboard-card, .related-section, .similar-section,
.audit-section, .ai-notes-rendered, .ai-response-rendered, .notes, .ai-notes, .ai-response,
.drawer-body, .drawer-section, .drawer-ai-notes, .drawer-ai-response-mount,
.drawer-similar-list, .drawer-notes-text, .graph-sidebar, .list-table-wrap, .dashboard-cards,
.color-filter, .tag-filter, .tag-pop-list, .team-filter, .category-filter, .status-filter, .sidebar, .filter-pop-panel {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-4) transparent;
}

/* ---- right-click ticket context menu ---- */
.ticket-ctx-menu {
  position: fixed;
  /* Tag/open-link menu must float above every other floating surface
   * (inflow popover at 220, ticket modal at 300) so right-click over
   * any of them shows it on top. */
  z-index: 400;
  min-width: 180px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.ticket-ctx-menu .tcm-row { display: flex; gap: 4px; padding: 4px; }
.ticket-ctx-menu .tcm-swatch {
  width: 20px; height: 20px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  cursor: pointer;
  background-clip: padding-box;
}
.ticket-ctx-menu .tcm-swatch:hover { transform: scale(1.1); }
.ticket-ctx-menu .tcm-swatch.active { outline: 2px solid var(--fg); outline-offset: 1px; }
.ticket-ctx-menu .tcm-clear {
  background: var(--bg-3);
  color: var(--fg-dim);
  font-size: 14px; line-height: 18px;
}
.ticket-ctx-menu .tcm-item {
  display: block;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
}
.ticket-ctx-menu .tcm-item:hover { background: var(--bg-3); }

/* ---- ticket modal (overlay viewer) ---- */
.ticket-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: ticketModalFade 0.12s ease-out;
}
@keyframes ticketModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ticket-modal {
  position: relative;
  width: min(96vw, 1600px);
  height: min(94vh, 1040px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.ticket-modal .pane.ticket-modal-pane {
  position: absolute;
  inset: 0;
  display: flex;
}
/* Back / Forward / Close get injected into `.pane-open-actions` (next
 * to Open Atlas / VS Code) so they don't overlap the existing pane
 * header buttons. */
.ticket-modal-nav,
.ticket-modal-close {
  font-size: 14px;
  line-height: 1;
  padding: 2px 8px;
}
.ticket-modal-close { font-size: 16px; }
.ticket-modal-nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* ---- inflow-day popover (dashboard click-through) ---- */
.inflow-day-popover {
  position: fixed;
  z-index: 220;
  min-width: 260px;
  max-width: 380px;
  max-height: 60vh;
  overflow: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 6px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inflow-day-popover .idp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
}
.inflow-day-popover .idp-close {
  background: transparent;
  border: none;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.inflow-day-popover .idp-close:hover { color: var(--fg); }
.inflow-day-popover .idp-section { display: flex; flex-direction: column; gap: 2px; }
.inflow-day-popover .idp-empty { padding: 2px 4px; color: var(--fg-dim); }
.inflow-day-popover .idp-section-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 4px;
}
.inflow-day-popover .idp-rows { display: flex; flex-direction: column; gap: 1px; }
.inflow-day-popover .idp-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 6px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--fg);
  cursor: pointer;
  width: 100%;
  font-size: 12px;
}
.inflow-day-popover .idp-row:hover { background: var(--bg-3); }
.inflow-day-popover .idp-id { color: var(--fg-dim); font-family: ui-monospace, monospace; flex: 0 0 auto; }
.inflow-day-popover .idp-summary {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.inflow-day-popover .idp-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.inflow-day-popover .idp-color-dot.idp-color-dot-empty {
  border: 1px solid var(--border);
  background: transparent;
}

/* Hover-preview card for popover ticket rows. Sits beside the popover
   showing the requestor's first message. Position: fixed; JS clamps
   to the viewport. Above the popover (220) and ctx-menu (400) but
   below the modal (300)? — preview is purely peek, no interaction
   required, so 320 keeps it above the popover and ctx-menu can layer
   correctly on the row underneath if right-clicked. */
.popover-row-preview {
  position: fixed;
  z-index: 320;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  padding: 10px 12px;
  font-size: 12px;
  pointer-events: none;
  line-height: 1.45;
  color: var(--fg);
}
.popover-row-preview.hidden { display: none; }
.popover-row-preview .prp-summary {
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.3;
}
.popover-row-preview .prp-meta {
  color: var(--fg-dim);
  font-size: 11px;
  margin-bottom: 6px;
}
.popover-row-preview .prp-body {
  border-top: 1px solid var(--border);
  padding-top: 6px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.popover-row-preview .prp-body img {
  max-width: 100%;
  height: auto;
}
.popover-row-preview .prp-body * {
  max-width: 100%;
}
/* Graph-supplied metadata header inside the rich preview — colorful pills
   for priority, freshness, tag dot, plus team/age and shared projects.
   Replaces the plain `#graph-tooltip` that used to hover separately. */
.popover-row-preview .prp-extra {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.popover-row-preview .graph-meta .gm-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: var(--fg-dim);
}
.popover-row-preview .graph-meta .gm-id {
  color: var(--accent);
  font-weight: 600;
}
.popover-row-preview .graph-meta .gm-pri {
  --pill: var(--fg-dim);
  border: 1px solid var(--pill);
  color: var(--pill);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 10px;
  letter-spacing: 0.02em;
}
.popover-row-preview .graph-meta .gm-pri.pri-1 { --pill: #f14c4c; }
.popover-row-preview .graph-meta .gm-pri.pri-2 { --pill: #ff9d4f; }
.popover-row-preview .graph-meta .gm-pri.pri-3 { --pill: #f0c674; }
.popover-row-preview .graph-meta .gm-pri.pri-4 { --pill: #6cc4d6; }
.popover-row-preview .graph-meta .gm-pri.pri-5 { --pill: #6f7681; }
.popover-row-preview .graph-meta .gm-fresh {
  color: var(--accent-2);
}
.popover-row-preview .graph-meta .gm-color {
  display: inline-flex;
  align-items: center;
}
.popover-row-preview .graph-meta .gm-meta {
  margin-top: 4px;
  color: var(--fg-dim);
  font-size: 11px;
}
.popover-row-preview .graph-meta .gm-projs {
  margin-top: 4px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--accent-2);
}

/* ---- skeletons ---- */
.skel-bar {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bg-3), var(--bg-4), var(--bg-3));
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}
.skel-bar + .skel-bar { margin-top: 6px; }
.skel-bar.w-30 { width: 30%; }
.skel-bar.w-40 { width: 40%; }
.skel-bar.w-50 { width: 50%; }
.skel-bar.w-60 { width: 60%; }
.skel-bar.w-70 { width: 70%; }
.skel-bar.w-80 { width: 80%; }
.skel-bar.w-90 { width: 90%; }
.skel-bar.h-14 { height: 14px; }
.skel-bar.h-18 { height: 18px; }

#ticket-list li.ticket-skel {
  cursor: default;
  pointer-events: none;
  border-left-color: transparent;
}
#ticket-list li.ticket-skel:hover { background: transparent; }

.detail-skeleton {
  padding: 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.detail-skeleton .skel-block {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  background: var(--bg-2);
}
.notes-skeleton { padding: 12px; }

/* ---- shared filter panel (List + Dashboard mounts) ---- */
.shared-filter-mount {
  margin: 0;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
}
.shared-filter { background: transparent; }
.shared-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.shared-filter-input {
  flex: 0 1 200px;
  min-width: 120px;
  max-width: 240px;
}
.shared-filter-scope { flex: 0 0 auto; }
.shared-filter .archive-pill.shared-archive-pill {
  display: inline-flex;
  width: auto;
  flex: 0 0 auto;
}
.shared-filter .archive-pill.shared-archive-pill .archive-pill-btn { flex: 0 0 auto; }

.filter-pop { position: relative; flex: 0 0 auto; }
.filter-pop-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--fg-dim);
  cursor: pointer;
  user-select: none;
}
.filter-pop-btn:hover { background: var(--bg-4); color: var(--fg); }
.filter-pop.has-active .filter-pop-btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Control chips (Agent / Date) show the selection as the label — cap it
   so a long agent name doesn't blow the chip out. */
.filter-pop-label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-pop-count {
  display: inline-flex;
  min-width: 16px;
  justify-content: center;
  font-size: 10px;
  background: rgba(255,255,255,0.16);
  padding: 1px 5px;
  border-radius: 8px;
}
/* `display: inline-flex` above overrides the bare [hidden] attribute, so
   hide the count explicitly when it's not in use (count 0, or an Agent/
   Date control chip that shows a label instead). */
.filter-pop-count[hidden] { display: none; }
.filter-pop.has-active .filter-pop-count { background: rgba(0,0,0,0.25); }
.filter-pop-caret {
  font-size: 9px;
  transition: transform 120ms ease;
}
.filter-pop.open .filter-pop-caret { transform: rotate(180deg); }
.filter-pop-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  max-width: min(420px, 80vw);
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
}
.filter-pop-panel.align-right {
  left: auto;
  right: 0;
}
.filter-pop-panel .color-filter,
.filter-pop-panel .team-filter,
.filter-pop-panel .category-filter,
.filter-pop-panel .status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  border: 0;
  max-height: none;
  overflow: visible;
}

/* ---- list toolbar + pagination ---- */
/* Holds only the pager now (Group / Per page moved into the filter bar).
   Zero vertical padding so when there's a single page — pager empty —
   the strip collapses to nothing instead of nudging the table down. */
.list-toolbar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  flex-wrap: wrap;
}
.list-pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.list-pagination:not(:empty) { padding: 8px 0; }
/* Group / Per page selects, relocated into the shared filter row. */
.shared-list-ctl { display: inline-flex; align-items: center; gap: 4px; }
.shared-list-ctl select { padding: 3px 6px; }
.list-pagination .list-page-input {
  width: 56px;
  text-align: center;
  padding: 3px 4px;
}
.list-pagination button[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* ---- list groups (collapsible) ---- */
.list-group {
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.list-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
}
.list-group-head:hover { background: var(--bg-4); }
.list-group .caret {
  font-family: ui-monospace, monospace;
  color: var(--fg-dim);
  width: 14px;
  text-align: center;
}
.list-group-label { font-weight: 600; }
.list-group.collapsed .list-group-head { border-bottom: none; }
.list-group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s ease;
}
.list-group.collapsed .list-group-body { grid-template-rows: 0fr; }
.list-group-body-inner { overflow: hidden; overflow-x: auto; }
.list-group-body-inner table { width: 100%; }

/* ---- dashboard collapsible sections ---- */
.dash-section-head,
.dash-cards-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 6px;
}
.dash-section-head h3,
.dash-cards-head h3 {
  margin: 0;
  font-size: 13px;
}
.dash-section-head .caret,
.dash-cards-head .caret {
  font-family: ui-monospace, monospace;
  color: var(--fg-dim);
  width: 14px;
  text-align: center;
}
.dashboard-breakdown.collapsed .dash-section-body { display: none; }
.dashboard-cards.collapsed .dash-cards-body { display: none; }
.dash-cards-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.action-reactions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
  margin-right: 8px;
}
.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.reaction-pill .reaction-emoji { font-size: 13px; line-height: 1; }
.reaction-pill .reaction-count { font-variant-numeric: tabular-nums; }

.reaction-picker { position: relative; display: inline-flex; }
.reaction-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  padding: 0;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: var(--fg-dim);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.65;
}
.reaction-add:hover {
  opacity: 1;
  color: var(--fg);
  border-style: solid;
  background: var(--bg-2);
}
.reaction-add.mine {
  opacity: 1;
  border-style: solid;
  border-color: var(--accent);
  background: rgba(86, 156, 214, 0.18);
  color: var(--fg);
}
.reaction-popover {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  /* Belt + suspenders: right:0 anchors the popover's right edge to the
     picker's right edge so it never spills off the right side of the pane.
     The width:max-content lets it grow leftward only as far as its content
     needs, and max-width clamps it to the action card so a narrow notes
     pane doesn't get overrun. flex-wrap kicks in if the clamp bites. */
  width: max-content;
  max-width: min(240px, calc(100vw - 40px));
  z-index: 30;
  padding: 4px;
  gap: 2px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  flex-wrap: wrap;
}
.reaction-picker.open .reaction-popover { display: inline-flex; }
.reaction-choice,
.reaction-clear {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--fg);
}
.reaction-choice:hover,
.reaction-clear:hover { background: var(--bg-3); }
.reaction-choice.selected {
  background: rgba(86, 156, 214, 0.18);
  border-color: var(--accent);
}
.reaction-clear {
  font-size: 14px;
  color: var(--fg-dim);
  border-left: 1px solid var(--border);
  margin-left: 2px;
}
/* ---------- In-conversation image lightbox ------------------------------ */
.action-body img.zoomable-img { cursor: zoom-in; }
.image-lightbox {
  position: fixed;
  inset: 0;
  /* Above the ticket modal (.ticket-modal-overlay z-index 300) and the
     attachment preview overlay (.preview-overlay z-index 320) so a
     zoomed conversation image always lands in front, even when the
     ticket is open as a modal. */
  z-index: 340;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}
.image-lightbox img {
  max-width: 96vw;
  max-height: 96vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.image-lightbox-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Audit log -------------------------------------------------- */
.audit-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
}
.audit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 3px;
}
.audit-row.audit-status { border-left-color: var(--accent); }
.audit-row.audit-system { border-left-color: var(--fg-dim); }
.audit-row.audit-workflow { border-left-color: #c586c0; }
.audit-row.audit-internal { border-left-color: var(--warn, #e2c541); }
.audit-when { white-space: nowrap; min-width: 88px; }
.audit-who { font-weight: 600; }
.audit-arrow {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg-dim);
}
.audit-arrow b { color: var(--fg); }
.audit-outcome {
  display: inline-flex;
  padding: 1px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-dim);
}

/* ---- Outcome-driven form (composer) ----------------------------------- */
.composer-outcome-form { display: contents; }
.composer-outcome-form:empty { display: none; }
.oa-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 12px;
  padding: 8px 0 4px;
  border-top: 1px dashed var(--border);
}
.oa-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
}
.oa-label {
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
}
.oa-input,
.oa-select {
  padding: 5px 7px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.oa-input:focus,
.oa-select:focus {
  outline: none;
  border-color: var(--accent);
}
.oa-preview {
  margin-top: 8px;
  padding: 12px;
  max-height: 60vh;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.oa-preview img { max-width: 100%; height: auto; }

/* ---- Privacy flip button -------------------------------------------- */
/* Sits next to the INTERNAL/IMPORTANT pills, not inside them. Renders as
   a quiet hover-link rather than a competing pill so the action header
   doesn't show a pill-in-a-pill stack. */
.action-pill-flip {
  padding: 0;
  font: inherit;
  font-size: 11px;
  color: var(--fg-dim);
  background: transparent;
  border: 0;
  border-bottom: 1px dashed transparent;
  cursor: pointer;
  line-height: 1;
}
.action-pill-flip:hover { color: var(--fg); border-bottom-color: var(--fg-dim); }
.action-pill-flip:disabled { opacity: 0.5; cursor: progress; }

/* In-app attachment preview overlay (preview.js). One overlay at a time —
   sits ABOVE the ticket modal (z 300) so opening a preview from inside
   the modal pops in front of it instead of disappearing behind. Card
   sizes deliberately smaller than the ticket modal underneath
   (modal is min(96vw, 1600px) × min(94vh, 1040px)) so the modal
   peeks around the edges and the user can tell what's stacked. The
   backdrop is also lighter than the modal's so the modal stays
   readable through the dim. */
.preview-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 320;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: previewFadeIn 0.18s ease-out;
}
.preview-card {
  background: var(--bg-elev, var(--bg, #1e1e1e));
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(1280px, 88vw);
  height: min(820px, 84vh);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  animation: previewCardIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.preview-overlay.closing { animation: previewFadeOut 0.16s ease-in forwards; }
.preview-overlay.closing .preview-card {
  animation: previewCardOut 0.18s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes previewFadeIn   { from { opacity: 0; }                                  to { opacity: 1; } }
@keyframes previewFadeOut  { from { opacity: 1; }                                  to { opacity: 0; } }
@keyframes previewCardIn   { from { transform: translateY(20px);  opacity: 0; }    to { transform: translateY(0); opacity: 1; } }
@keyframes previewCardOut  { from { transform: translateY(0);     opacity: 1; }    to { transform: translateY(-24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .preview-overlay, .preview-overlay.closing,
  .preview-card, .preview-overlay.closing .preview-card { animation: none; }
}
.preview-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.preview-name { font-weight: 600; font-size: 13px; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-size { font-size: 11px; color: var(--fg-dim); }
.preview-btn {
  font-size: 12px; padding: 4px 10px;
  background: transparent; color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.preview-btn:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.preview-close {
  font-size: 18px; line-height: 1; width: 28px; height: 28px;
  background: transparent; color: var(--fg-dim);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.preview-close:hover { color: var(--fg); }
.preview-body { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }
.preview-loading, .preview-error { padding: 20px; }
.preview-error { color: var(--warn, #f14c4c); }
.preview-image, .preview-video { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; }
.preview-audio { width: 100%; padding: 20px; }
.preview-pdf { width: 100%; height: 100%; border: 0; }
.preview-sheet { width: 100%; height: 100%; }
.preview-doc {
  padding: 24px 32px;
  max-width: 920px; margin: 0 auto;
  font-family: var(--font-doc, system-ui, -apple-system, "Segoe UI", sans-serif);
  line-height: 1.5;
}
.preview-doc img { max-width: 100%; height: auto; }
.preview-doc table { border-collapse: collapse; }
.preview-doc td, .preview-doc th { border: 1px solid var(--border); padding: 4px 8px; }
/* Code/text preview — language pill, line/byte meta, Copy + Wrap, then
   a themed body. The hljs CSS (atom-one-dark/light) supplies the .hljs
   bg + token colors; this wrapper provides chrome and spacing only. */
.preview-code {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--bg, #1e1e1e);
}
.preview-code-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  font-size: 11px;
}
.preview-code-lang {
  font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 4px;
  background: var(--accent, #569cd6); color: #fff;
  text-transform: uppercase;
}
.preview-code-meta { color: var(--fg-dim); }
.preview-code-actions { margin-left: auto; display: flex; gap: 6px; }
.preview-code-actions button {
  font-size: 11px; padding: 3px 8px;
  background: transparent; color: var(--fg);
  border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
}
.preview-code-actions button:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.preview-code-actions button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent, #569cd6) 18%, transparent);
  border-color: var(--accent, #569cd6);
}
.preview-code-pre {
  flex: 1 1 auto; min-height: 0; margin: 0;
  overflow: auto;
  font-size: 12.5px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", "Cascadia Code", monospace);
}
.preview-code-pre code.hljs { padding: 12px 16px; display: block; }
.preview-code-pre.code-wrap code.hljs { white-space: pre-wrap; word-break: break-word; }

/* Multi-view preview: switcher strip ([Rendered][Source][Tree]) + the
   per-view content area below it. Used by both the full-screen overlay
   and the inline Files-tab preview. */
.preview-views {
  display: flex; gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}
.preview-view-btn {
  font-size: 11px; padding: 3px 10px;
  background: transparent; color: var(--fg-dim);
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; font-weight: 600;
  letter-spacing: 0.02em;
}
.preview-view-btn:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.preview-view-btn[aria-pressed="true"] {
  color: #fff;
  background: var(--accent, #569cd6);
  border-color: var(--accent, #569cd6);
}
.preview-view-content {
  flex: 1 1 auto; min-height: 0;
  position: relative;
  overflow: auto;
}
/* Overlay variant — body itself uses a column flex so strip + content stack. */
.preview-body { display: flex; flex-direction: column; }
.preview-body > .preview-views { flex: 0 0 auto; }
.preview-body > .preview-view-content { flex: 1 1 auto; }
/* Renderers that need to fill their container (sheet, pdf, html, code
   panel) already say height: 100% on their root. Image/audio/video sit
   in flow and use max-* sizing. */

/* Inline variant for the Files-tab — shorter, with a top border to
   set it off from the file row above. */
.preview-inline {
  display: flex; flex-direction: column;
  margin-top: 6px;
  border: 1px solid var(--border); border-radius: 4px;
  overflow: hidden;
  max-height: 420px;
}
/* Renderers (.preview-code-pre, .preview-json, etc.) own their own scroll;
   the content area just bounds them. Avoid an outer scrollbar on top of
   the inner one — that produced the double-scrollbar the user reported. */
.preview-inline .preview-view-content { overflow: hidden; }
.preview-inline .preview-doc { padding: 12px 16px; }

/* HTML iframe (sandbox) view. */
.preview-html { width: 100%; height: 100%; border: 0; background: #fff; }
.preview-inline .preview-html { min-height: 320px; }

/* JSON tree view — small recursive collapsible. */
.preview-json {
  padding: 12px 16px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", "Cascadia Code", monospace);
  font-size: 12.5px;
  overflow: auto; height: 100%;
  background: var(--bg, #1e1e1e); color: var(--fg);
}
.preview-json .jt-row { padding-left: 12px; line-height: 1.5; }
.preview-json > .jt-row { padding-left: 0; }
.preview-json details { padding-left: 0; }
.preview-json summary { cursor: pointer; user-select: none; list-style: revert; }
.preview-json summary:hover { color: var(--accent, #569cd6); }
.preview-json .jt-children { padding-left: 14px; border-left: 1px dashed color-mix(in srgb, var(--fg) 12%, transparent); margin-left: 4px; }
.preview-json .jt-key { color: var(--fg-dim); }
.preview-json .jt-meta { color: color-mix(in srgb, var(--fg-dim) 60%, transparent); font-style: italic; }
.preview-json .jt-str { color: #98c379; }      /* string — green */
.preview-json .jt-num { color: #d19a66; }      /* number — orange */
.preview-json .jt-bool { color: #c678dd; }     /* boolean — purple */
.preview-json .jt-null { color: var(--fg-dim); font-style: italic; }

/* Markdown rendered view — borrow the .preview-doc typography. */
.preview-doc-md h1, .preview-doc-md h2, .preview-doc-md h3 { margin-top: 1.2em; }
.preview-doc-md pre {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  padding: 10px 12px; border-radius: 4px;
  overflow: auto;
}
.preview-doc-md code {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  padding: 1px 5px; border-radius: 3px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.9em;
}
.preview-doc-md pre code { background: transparent; padding: 0; }
.preview-doc-md blockquote {
  border-left: 3px solid var(--border);
  padding-left: 12px; margin-left: 0; color: var(--fg-dim);
}

/* Outlook .msg rendered view — header card on top, body below, attachments
   list at the bottom. Padding/spacing matches .preview-doc so the inline
   and overlay hosts both look right. */
.preview-doc-msg { padding: 12px 16px; }
.preview-msg-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.preview-msg-subject {
  font-size: 1.15em;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--fg);
}
.preview-msg-row {
  display: flex;
  gap: 8px;
  font-size: 0.9em;
  line-height: 1.6;
}
.preview-msg-label {
  flex: 0 0 56px;
  color: var(--fg-dim);
  text-align: right;
}
.preview-msg-value { color: var(--fg); word-break: break-word; }
.preview-msg-body { margin-top: 4px; }
.preview-msg-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
  background: transparent;
  padding: 0;
  margin: 0;
}
.preview-msg-attachments {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.preview-msg-attachments-title { font-size: 0.85em; margin-bottom: 6px; }
.preview-msg-attachments ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9em;
}


/* ============================================================
   Named multi-value tags (registry + chips + picker popover)
   Distinct from the single color dot above — a ticket can carry
   any number of these.
   ============================================================ */

/* --- inline chip strip on ticket rows + pane --- */
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px 1px 6px;
  font-size: 10px;
  line-height: 16px;
  border-radius: 10px;
  white-space: nowrap;
  color: var(--fg);
  background: color-mix(in srgb, var(--tag-color, #8b94a6) 16%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--tag-color, #8b94a6) 45%, transparent);
}
.tag-chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tag-color, #8b94a6);
  flex: none;
}

/* --- filter strip --- */
.tag-filter {
  padding: 8px 8px 10px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 132px;
  overflow-y: auto;
  overflow-x: hidden;
  border-bottom: 1px solid var(--border);
}

/* Inline tag-registry manager mounted in the Settings panel. Reuses the
 * .tag-pop-* row markup but without the floating-popover chrome. */
.tag-manager-inline {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  padding: 4px 6px 6px;
}
.tag-manager-inline .tag-pop-head { display: none; }
.tag-fchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  color: var(--fg-dim);
}
/* "✕ clear" button — prepended to the tag strip only while a filter is
   active (see syncTagFilterClear). */
.tag-fclear {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  color: var(--fg-dim);
}
.tag-fclear:hover { color: #f14c4c; border-color: #f14c4c; }
.tag-fchip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tag-color, #8b94a6);
  flex: none;
}
.tag-fchip-untagged::before {
  background: transparent;
  border: 1px dashed var(--fg-dim);
}
.tag-fchip:hover { background: var(--bg-4); color: var(--fg); }
.tag-fchip.active {
  background: color-mix(in srgb, var(--tag-color, var(--accent)) 30%, var(--bg-3));
  border-color: color-mix(in srgb, var(--tag-color, var(--accent)) 60%, var(--border));
  color: var(--fg);
}
.tag-fchip-untagged.active {
  background: var(--bg-4);
  border-color: var(--fg-dim);
}
.tag-fchip .count {
  font-size: 10px;
  background: rgba(255,255,255,0.12);
  padding: 1px 5px;
  border-radius: 8px;
}
.tag-fchip.is-ghost { opacity: 0.4; }
.filter-pop-panel .tag-filter { max-height: 240px; border: none; padding: 6px; }

/* --- pane tags row --- */
.pane-actions-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 2px;
}
.pane-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.pane-tags-add {
  font-size: 13px;
  line-height: 1;
  padding: 2px 7px;
  color: var(--fg-dim);
}
.pane-tags-add:hover { color: var(--fg); }

/* --- context-menu additions --- */
.ticket-ctx-menu .tcm-label { padding: 2px 6px 0; }
.ticket-ctx-menu .tcm-badge {
  font-size: 10px;
  background: var(--accent);
  color: #fff;
  padding: 0 5px;
  border-radius: 8px;
}

/* --- tag picker / manager popover --- */
.tag-pop {
  position: fixed;
  z-index: 420;
  width: 260px;
  max-width: calc(100vw - 16px);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5);
  padding: 6px;
  font-size: 13px;
  box-sizing: border-box;
}
.tag-pop-head {
  padding: 4px 6px 6px;
  font-weight: 600;
  color: var(--fg-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tag-pop-list {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tag-pop-empty { padding: 8px 6px; }
.tag-pop-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 5px;
  cursor: pointer;
}
.tag-pop-row:hover { background: var(--bg-3); }
.tag-pop-row.assigned { background: color-mix(in srgb, var(--accent) 16%, var(--bg-2)); }
.tag-pop-row.assigned:hover { background: color-mix(in srgb, var(--accent) 24%, var(--bg-2)); }
.tag-pop-swatch {
  width: 15px; height: 15px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  cursor: pointer;
  background-clip: padding-box;
}
.tag-pop-swatch:hover { transform: scale(1.12); }
.tag-pop-name {
  flex: 1;
  min-width: 0;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag-pop-row.assigned .tag-pop-name::after {
  content: " ✓";
  color: var(--accent-2);
}
.tag-pop-count {
  font-size: 10px;
  color: var(--fg-dim);
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 8px;
  flex: none;
}
.tag-pop-icon {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--fg-dim);
  cursor: pointer;
  /* Always visible (was opacity:0 — undiscoverable); brightens on hover. */
  opacity: 0.6;
}
.tag-pop-row:hover .tag-pop-icon { opacity: 1; }
.tag-pop-icon:hover { color: var(--fg); background: var(--bg-4); border-color: var(--border); }
.tag-pop-del:hover { color: #f14c4c; border-color: #f14c4c; }
.tag-pop-rename-input {
  flex: 1;
  min-width: 0;
  width: 0;
  font-size: 13px;
  padding: 1px 4px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--fg);
  box-sizing: border-box;
}
.tag-pop-new {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.tag-pop-input {
  flex: 1;
  font-size: 12px;
  padding: 4px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  min-width: 0;
}
.tag-pop-input:focus { border-color: var(--accent); outline: none; }
.tag-pop-add { font-size: 11px; flex: none; }

/* --- Snooze ----------------------------------------------------------- */

/* Inline badge on ticket rows / list cells. Two states: an active snooze
   (muted, with the wake date) and a freshly-woken ticket (amber, attention). */
.snooze-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
}
.snooze-badge:hover { filter: brightness(1.15); }
.snooze-badge.snoozed {
  color: var(--fg-dim);
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.snooze-badge.woke {
  color: #261900;
  background: #ffc777;
}
/* Woke early because the ticket got new activity — distinct from a plain
   timer expiry, and more urgent: the requester is waiting. */
.snooze-badge.woke-update {
  color: #04261d;
  background: #4ec9b0;
}

/* A snoozed ticket shown via the peek toggle is dimmed so it reads as
   "parked" rather than active queue work. */
#ticket-list li.row-snoozed,
.list-view-table tr.row-snoozed { opacity: 0.55; }

/* The "💤 Snoozed (N)" filter toggle — appears next to the sidebar counts
   and inline in the shared filter panel (List / Dashboard). */
.snooze-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-dim);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.snooze-toggle:hover { color: var(--fg); background: var(--bg-3); }
.snooze-toggle.active {
  color: var(--fg);
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-2));
  border-color: var(--accent);
}
.snooze-toggle.hidden { display: none; }
/* Dimmed when there's nothing snoozed — still visible/discoverable, but
   it reads as "inactive" rather than broken. */
.snooze-toggle.is-empty { opacity: 0.5; }
.snooze-toggle.is-empty:hover { opacity: 0.8; }
/* Sidebar instance flows inline next to the archive pill in the
   wrapping flex summary row. */
.sidebar-filter-summary .snooze-toggle { margin: 0; }

/* Pane snooze button state colours (the button itself reuses .ghost). */
.pane-snooze.is-snoozed { color: var(--accent-2); border-color: var(--accent-2); }
.pane-snooze.is-woke { color: #ffc777; border-color: #ffc777; }

/* Context-menu snooze entry, when the ticket is already snoozed. */
.ticket-ctx-menu .tcm-item.tcm-snooze.is-snoozed { color: var(--accent-2); }

/* --- Snooze picker popover ------------------------------------------- */
.snooze-pop {
  position: fixed;
  z-index: 420;
  width: 240px;
  max-width: calc(100vw - 16px);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5);
  padding: 6px;
  font-size: 13px;
  box-sizing: border-box;
}
.snooze-pop-head {
  padding: 4px 6px 6px;
  font-weight: 600;
  color: var(--fg-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.snooze-pop-status {
  padding: 0 6px 6px;
  font-size: 11px;
  color: var(--fg-dim);
}
.snooze-pop-status b { color: var(--accent-2); }
.snooze-pop-hint { color: var(--fg-dim); font-weight: 400; }
.snooze-pop-list { display: flex; flex-direction: column; gap: 1px; }
.snooze-pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.snooze-pop-row:hover { background: var(--bg-3); }
.snooze-pop-when { color: var(--fg-dim); font-size: 11px; flex: none; }
.snooze-pop-clear {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  border-radius: 0;
  color: #f14c4c;
}
.snooze-pop-clear:hover { background: color-mix(in srgb, #f14c4c 14%, var(--bg-2)); }
.snooze-pop-custom {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.snooze-pop-input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 4px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
}
.snooze-pop-input:focus { border-color: var(--accent); outline: none; }
.snooze-pop-input.snooze-pop-input-bad { border-color: #f14c4c; }
.snooze-pop-set { font-size: 11px; flex: none; }

/* --- Snooze toast (with Undo) ---------------------------------------- */
.snooze-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  z-index: 480;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 9px 10px 9px 15px;
  background: var(--bg-4, var(--bg-3));
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  font-size: 13px;
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.snooze-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.snooze-toast-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snooze-toast-undo {
  flex: none;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-2);
  background: transparent;
  border: 1px solid var(--accent-2);
  border-radius: 6px;
  cursor: pointer;
}
.snooze-toast-undo:hover { background: color-mix(in srgb, var(--accent-2) 18%, transparent); }