/* Code Review Panel */
#codereview-panel {
  display: none; flex-direction: column; height: 100%; overflow: hidden;
}
#codereview-panel.active { display: flex; }

/* Header bar */
.cr-header {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px;
  border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
}
.cr-header-title {
  font-size: 14px; font-weight: 700; color: var(--fg); white-space: nowrap;
}
.cr-header-actions {
  display: flex; gap: 6px; margin-left: auto; align-items: center;
  flex-wrap: wrap; min-width: 0; row-gap: 6px;
}
.cr-review-target {
  display: grid; grid-template-columns: auto minmax(80px, max-content) minmax(0, 1fr);
  align-items: center; gap: 6px; min-width: 220px; max-width: 520px;
  padding: 4px 8px; border: 1px solid rgba(122,162,247,0.24);
  border-radius: 6px; background: rgba(122,162,247,0.08);
}
.cr-review-target-kicker,
.cr-compare-label {
  font-size: 10px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0;
  font-weight: 700;
}
.cr-review-target-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg); font-size: 12px; font-weight: 700;
}
.cr-review-target-meta {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg-dim); font-size: 11px;
}
.cr-review-mode-tabs,
.cr-doc-view-tabs {
  display: inline-flex; align-items: center;
  padding: 2px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg);
  gap: 0;
}
.cr-review-mode-btn,
.cr-doc-view-btn {
  border: 0; background: transparent;
  color: var(--fg-dim); cursor: pointer;
  font-size: 11px; font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.cr-review-mode-btn:hover,
.cr-doc-view-btn:hover { color: var(--fg); background: var(--bg-hover, rgba(255,255,255,0.06)); }
/* Tinted active state — subtle accent fill, not solid blue. Reads as
   "selected" without dominating the header. */
.cr-review-mode-btn.active,
.cr-doc-view-btn.active {
  background: var(--accent-soft, rgba(122,162,247,0.18));
  color: var(--fg);
  font-weight: 600;
}
.cr-crumb.cr-doc-header-name {
  min-width: 0; max-width: none; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--fg); font-size: 12px; font-weight: 650;
}
.cr-doc-header-dir {
  min-width: 0; flex: 0 1000 auto; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; direction: rtl; text-align: left; color: var(--fg-dim); font-size: 12px;
  margin-right: -6px; /* read as one path with the file name (breadcrumb gap is 6px) */
}
a.cr-doc-open-link { color: var(--accent); border-color: var(--accent); }
.cr-base-select {
  background: var(--bg-lighter); color: var(--fg); border: 1px solid var(--border);
  padding: 4px 8px; border-radius: 5px; font-size: 11px; max-width: 420px;
}
.cr-btn {
  padding: 5px 12px; border-radius: 5px; font-size: 11px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-lighter); color: var(--fg);
  transition: all 0.15s; white-space: nowrap;
}
.cr-btn:hover { background: var(--bg-hover, rgba(255,255,255,0.08)); }
a.cr-btn { text-decoration: none; }
.cr-btn.primary { background: var(--accent, #7aa2f7); color: #fff; border-color: var(--accent); }
.cr-btn.primary:hover { opacity: 0.9; }
.cr-btn.success { background: var(--green, #9ece6a); color: #1a1b26; border-color: var(--green); }
.cr-btn.danger { background: var(--red, #f7768e); color: #fff; border-color: var(--red); }
.cr-btn:disabled { opacity: 0.4; cursor: default; }
.ctm-doc-review-link {
  color: var(--accent, #7aa2f7);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ctm-doc-review-link:hover {
  color: var(--fg, #c0caf5);
}
.ctm-commit-link {
  color: var(--accent, #7aa2f7);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ctm-commit-link:hover {
  color: var(--fg, #c0caf5);
}

/* Commit summary card (shown at top of diff area when a commit is selected) */
.cr-file-item.summary {
  border-bottom: 1px solid var(--border); font-weight: 600; color: var(--fg);
}
.cr-commit-summary {
  padding: 12px 16px; background: var(--bg-light); border-bottom: 1px solid var(--border);
  font-size: 12px; line-height: 1.6;
}
.cr-commit-summary-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 1px 12px;
}
.cr-commit-summary-label { color: var(--fg-dim); font-weight: 600; white-space: nowrap; }
.cr-commit-summary-value { color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
.cr-commit-summary-value.mono { font-family: monospace; font-size: 11px; color: var(--accent, #7aa2f7); }
.cr-commit-summary-body {
  margin-top: 8px; padding: 8px 10px; background: var(--bg-card, #24283b);
  border-radius: 4px; white-space: pre-wrap; line-height: 1.5;
  font-size: 12px; color: var(--fg); max-height: 80px; overflow-y: auto;
}

/* Main layout: file tree + diff view */
.cr-body {
  display: flex; flex: 1; overflow: hidden;
}

/* File tree sidebar */
.cr-file-tree {
  width: 240px; min-width: 180px; border-right: 1px solid var(--border);
  overflow-y: auto; flex-shrink: 0; padding: 6px 0;
  display: flex; flex-direction: column;
}
/* Project chooser has no file tree — reclaim the empty left rail */
#codereview-panel.cr-choosing .cr-file-tree,
#codereview-panel.cr-choosing .cr-resize-handle { display: none; }
#codereview-panel.cr-choosing .cr-comments-rail,
#codereview-panel.cr-choosing .cr-comments-resize-handle { display: none; }
.cr-file-item {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  cursor: pointer; font-size: 11px; transition: background 0.1s;
  border-left: 2px solid transparent;
}
.cr-file-item:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); }
.cr-file-item.active { background: var(--bg-lighter); border-left-color: var(--accent); }
.cr-file-item.has-comments { font-weight: 600; }
.cr-file-item.viewed .cr-file-name { color: var(--fg-dim); text-decoration: line-through; text-decoration-color: var(--fg-muted, rgba(255,255,255,0.25)); }
.cr-file-item.viewed .cr-file-icon { opacity: 0.45; }
/* Per-file "Viewed" checkbox in the tree */
.cr-file-viewed {
  flex-shrink: 0; width: 14px; height: 14px; line-height: 12px; text-align: center;
  border: 1px solid var(--border); border-radius: 3px; font-size: 9px; color: var(--green, #9ece6a);
  background: var(--bg); cursor: pointer; transition: border-color 0.1s, background 0.1s;
}
.cr-file-viewed:hover { border-color: var(--green, #9ece6a); }
.cr-file-viewed.on { background: rgba(158,206,106,0.15); border-color: var(--green, #9ece6a); }
.cr-file-icon { font-size: 13px; flex-shrink: 0; }
.cr-file-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--fg);
}
.cr-file-stats {
  display: flex; gap: 4px; font-size: 10px; flex-shrink: 0;
}
.cr-file-add { color: var(--green, #9ece6a); }
.cr-file-del { color: var(--red, #f7768e); }
.cr-file-badge {
  background: var(--accent); color: #fff; font-size: 9px; padding: 1px 5px;
  border-radius: 8px; font-weight: 700;
}
/* WP-1 (D-12): "new" pill for an untracked row in the diff header. */
.cr-file-badge.new { background: var(--green, #9ece6a); color: #1a1b26; margin-left: 6px; }

/* Whole-repo tree rail (Task 5, WP-4, D-12) — public/js/review-tree.js */
.cr-tree-toolbar {
  display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border);
}
.cr-tree-filter {
  width: 100%; box-sizing: border-box; font-size: 11px; padding: 4px 6px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 4px;
}
.cr-tree-changed-only {
  display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--fg-dim); cursor: pointer;
}
.cr-tree-body-wrap { overflow-y: auto; flex: 1; }
.cr-tree-truncated {
  padding: 4px 10px; font-size: 10px; color: var(--fg-dim); border-bottom: 1px solid var(--border);
}
.cr-tree-empty { padding: 12px 10px; font-size: 11px; color: var(--fg-dim); }
.cr-tree-row {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px;
  cursor: pointer; font-size: 11px; transition: background 0.1s;
  border-left: 2px solid transparent; white-space: nowrap;
}
.cr-tree-row:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); }
.cr-tree-row.cr-tree-file.active { background: var(--bg-lighter); border-left-color: var(--accent); }
.cr-tree-chevron { flex-shrink: 0; width: 10px; font-size: 9px; color: var(--fg-dim); }
.cr-tree-dir .cr-tree-name { color: var(--fg-dim); font-weight: 600; }
.cr-tree-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--fg);
}
.cr-tree-dot, .cr-tree-dot-spacer { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.cr-tree-dot.changed { background: var(--green, #9ece6a); }
.cr-tree-dot.untracked { background: transparent; border: 1px solid var(--green, #9ece6a); box-sizing: border-box; }

/* Diff | File pane toggle (D-13) */
.cr-pane-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; flex-shrink: 0;
}
.cr-pane-toggle-btn {
  font-size: 10px; padding: 2px 8px; background: var(--bg); color: var(--fg-dim);
  border: none; cursor: pointer;
}
.cr-pane-toggle-btn.active { background: var(--bg-lighter); color: var(--fg); font-weight: 600; }
.cr-pane-toggle-btn:hover:not(.active) { background: var(--bg-hover, rgba(255,255,255,0.04)); }

/* Resize handle between file tree and diff */
.cr-resize-handle {
  width: 4px; cursor: col-resize; flex-shrink: 0;
  background: var(--border); transition: background 0.15s;
  position: relative; z-index: 2;
}
.cr-resize-handle:hover, .cr-resize-handle.dragging {
  background: var(--accent);
}

/* Commit context banner */
.cr-commit-banner {
  margin: 12px 16px; padding: 12px 16px;
  background: var(--bg-lighter, rgba(255,255,255,0.04));
  border: 1px solid var(--border); border-radius: 8px;
  border-left: 3px solid var(--accent, #7aa2f7);
}
.cr-commit-banner-title {
  font-size: 12px; font-weight: 600; color: var(--fg-dim);
  margin-bottom: 8px;
}
.cr-commit-banner-title code {
  font-family: var(--font-mono, monospace); font-size: 11px;
  background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 3px;
  color: var(--accent, #7aa2f7);
}
.cr-commit-list {
  display: flex; flex-direction: column; gap: 4px;
}
.cr-commit-item {
  display: flex; align-items: baseline; gap: 8px; font-size: 12px;
  padding: 3px 0; line-height: 1.4;
}
.cr-commit-sha {
  font-family: var(--font-mono, monospace); font-size: 11px;
  color: var(--accent, #7aa2f7); flex-shrink: 0; opacity: 0.8;
}
.cr-commit-msg {
  color: var(--fg); word-break: break-word;
}
.cr-commit-meta {
  color: var(--fg-dim); font-size: 11px; margin-left: auto; white-space: nowrap; flex-shrink: 0;
}

/* Diff view */
.cr-diff-area {
  flex: 1; overflow-y: auto; overflow-x: auto;
}
.cr-diff-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--fg-dim); font-size: 13px;
}
.cr-diff-file-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: var(--bg-lighter); border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--fg); position: sticky; top: 0; z-index: 5;
}
.cr-diff-file-path { flex: 1; font-family: var(--mono, 'SF Mono', Menlo, monospace); }
/* Header "Viewed" toggle pill + collapse of viewed file sections */
.cr-diff-file-viewed {
  flex-shrink: 0; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--border); color: var(--fg-dim); background: var(--bg); cursor: pointer;
  transition: all 0.12s;
}
.cr-diff-file-viewed:hover { border-color: var(--green, #9ece6a); color: var(--fg); }
.cr-diff-file-viewed.on { background: rgba(158,206,106,0.15); border-color: var(--green, #9ece6a); color: var(--green, #9ece6a); }
.cr-diff-file-section.viewed .cr-diff-table,
.cr-diff-file-section.viewed > .cr-diff-empty { display: none; }
.cr-diff-file-section.viewed .cr-diff-file-path { color: var(--fg-dim); }
/* Review progress (footer) */
.cr-progress { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 0 12px; }
.cr-progress-label { font-size: 11px; color: var(--fg-dim); white-space: nowrap; }
.cr-progress-bar {
  width: 90px; height: 5px; border-radius: 3px; background: var(--bg-lighter);
  overflow: hidden; display: inline-block;
}
.cr-progress-fill { display: block; height: 100%; background: var(--green, #9ece6a); transition: width 0.2s; }
.cr-resolve-all { font-size: 11px; padding: 3px 10px; }
.cr-diff-mode-toggle {
  display: flex; border: 1px solid var(--border); border-radius: 5px; overflow: hidden;
}
.cr-diff-mode-btn {
  padding: 2px 10px; font-size: 10px; cursor: pointer; background: transparent;
  color: var(--fg-dim); border: none; transition: all 0.15s;
}
.cr-diff-mode-btn.active { background: var(--accent); color: #fff; }

/* Document Review */
.cr-empty-stack { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.cr-empty-title { color: var(--fg); font-weight: 650; }
.cr-empty-note { color: var(--fg-dim); font-size: 12px; }
.cr-empty-note code {
  font-family: var(--mono, 'SF Mono', Menlo, monospace);
  background: var(--bg-lighter); padding: 1px 4px; border-radius: 4px;
}
.cr-doc-candidate-shell {
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
}
.cr-doc-candidate-panel {
  width: min(760px, 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-light);
  box-shadow: 0 18px 54px rgba(0,0,0,0.18);
  padding: 22px;
}
.cr-doc-candidate-eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cr-doc-candidate-panel h2 {
  margin: 0 0 8px;
  color: var(--fg);
  font-size: 20px;
  line-height: 1.25;
}
.cr-doc-candidate-panel p {
  margin: 0 0 18px;
  color: var(--fg-dim);
  font-size: 13px;
  line-height: 1.5;
}
.cr-doc-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cr-doc-candidate {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--fg);
  padding: 11px 12px;
  cursor: pointer;
}
.cr-doc-candidate:hover,
.cr-doc-candidate:focus-visible {
  border-color: var(--accent);
  background: var(--bg-hover, var(--bg-lighter));
  outline: none;
}
.cr-doc-candidate-name {
  font-family: var(--mono, 'SF Mono', Menlo, monospace);
  font-size: 13px;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.cr-doc-candidate-path {
  font-size: 11px;
  color: var(--fg-dim);
  overflow-wrap: anywhere;
}
/* ── Document Review — Markdown Pane (May 2026 redesign) ──────────────────
   Design tokens documented in docs/design/markdown-review-pane.md.
   Goals: prose-first rendering, no code-editor leakage in Docs mode,
   5-level type scale, theme-aware contrast, accessible AAA on body text.
   ───────────────────────────────────────────────────────────────────── */

/* Workspace surfaces — soft elevated bg so the article surface lifts. */
.cr-doc-workspace {
  min-height: 100%;
  background: var(--bg);
}
.cr-doc-canvas {
  display: flex; align-items: stretch; min-height: 100%; width: 100%;
}
.cr-doc-canvas.split .cr-doc-pane { width: 50%; min-width: 0; }
.cr-doc-canvas.split .cr-doc-rendered-pane { border-right: 1px solid var(--border); }
.cr-doc-pane { flex: 1; min-width: 0; overflow-x: auto; }

/* HTML doc rendering (Task 7, WP-6) — the sandboxed preview iframe + a comment strip
   OUTSIDE it (the iframe's sandbox means it can't be scripted from the parent). */
.cr-doc-html-pane { display: flex; flex-direction: column; min-height: 0; width: 100%; }
/* An HTML doc scrolls inside its frame: give the height chain (area > workspace > canvas > pane > frame)
   a definite height so the frame fills the area. Markdown docs (.cr-doc-rendered-pane) are untouched. */
.cr-doc-workspace:has(.cr-doc-html-pane) { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cr-doc-workspace:has(.cr-doc-html-pane) .cr-doc-canvas { flex: 1; min-height: 0; }
.cr-doc-html-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
.cr-doc-html-pane { position: relative; }
.cr-doc-outline { display: none; position: absolute; top: 8px; right: 16px; width: 320px; max-height: 60vh; overflow: auto; padding: 6px 0; background: var(--bg-lighter); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.35); font-size: 12px; z-index: 6; }
.cr-doc-outline.open { display: block; }
.cr-doc-outline-row { padding: 5px 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.cr-doc-outline-row:hover { color: var(--fg); background: var(--bg-hover, rgba(255,255,255,.04)); }
.cr-doc-outline-row[data-cr-level="1"] { padding-left: 12px; font-weight: 600; }
.cr-doc-outline-row[data-cr-level="2"] { padding-left: 24px; opacity: .9; }
.cr-doc-outline-row[data-cr-level="3"] { padding-left: 36px; opacity: .85; }
.cr-doc-outline-row[data-cr-level="4"], .cr-doc-outline-row[data-cr-level="5"], .cr-doc-outline-row[data-cr-level="6"] { padding-left: 48px; opacity: .8; }
.cr-doc-compose { position: absolute; top: 44px; right: 16px; width: 360px; max-width: calc(100% - 32px); z-index: 5; background: var(--bg-card, #1f2029); border: 1px solid var(--border); border-radius: 8px; padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.cr-doc-select-btn { position: fixed; z-index: 1000; font: 12px -apple-system, sans-serif; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card, #1f2029); color: var(--fg); cursor: pointer; }
.cr-rail-comment.hover { outline: 1px solid rgba(224,175,104,.9); }

/* Stale doc block comments (same visual language as review-file-comments.js's blob-stale
   badge — the block/blob the comment was made against no longer exists, never hidden). */
.cr-comment-item.cr-comment-stale { border-left: 2px solid var(--yellow, #d9a441); }
.cr-comment-stale-badge {
  font-size: 10px; color: var(--yellow, #d9a441); border: 1px solid currentColor;
  border-radius: 3px; padding: 0 4px; margin-left: 6px;
}

/* Reading container — capped width for line-length readability (~75ch).
   Aligns with research on prose typography: lines beyond 80 chars become
   harder to scan. Reduced from 920px → 800px. */
.cr-doc-article {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 32px 96px;
}

/* Block — generous left padding for the line-number gutter, which is now
   hidden by default and only revealed on hover. */
.cr-doc-block {
  position: relative;
  border-left: 2px solid transparent;
  padding: 4px 12px 8px 16px;
  margin: 0 0 6px;
  border-radius: 6px;
}
.cr-doc-block:hover,
.cr-doc-block.active {
  background: var(--accent-soft, rgba(122,162,247,0.06));
  border-left-color: var(--accent);
}

/* Line-range gutter — hidden in rendered/split rendered pane, since line
   numbers belong with source code. They reappear on hover as a quiet
   anchor hint for review reference. */
.cr-doc-block-lines {
  position: absolute;
  left: -44px; top: 10px;
  width: 36px;
  color: var(--fg-muted);
  opacity: 0;
  font-size: 10px;
  text-align: right;
  font-family: var(--mono, 'SF Mono', Menlo, monospace);
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.cr-doc-block:hover .cr-doc-block-lines { opacity: 0.55; }
/* Source/split panes — line numbers ARE the source code's. Keep visible
   there as a left-side gutter. */
.cr-doc-mode-source .cr-doc-block-lines,
.cr-doc-source-pane .cr-doc-block-lines {
  position: static; opacity: 0.55; display: inline-block; margin-right: 8px;
}

/* Comment "+" trigger — invisible by default, surfaces on hover. */
.cr-doc-comment-btn {
  position: absolute; right: 8px; top: 8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-lighter, var(--bg-light));
  color: var(--accent); cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  font-size: 13px; line-height: 1;
}
.cr-doc-block:hover .cr-doc-comment-btn,
.cr-doc-block.active .cr-doc-comment-btn,
.cr-doc-comment-btn:focus-visible { opacity: 1; }
.cr-doc-comment-btn:hover {
  background: var(--accent-soft, rgba(122,162,247,0.16));
  border-color: var(--accent);
}

/* Body type — slate-tinted body color (not pure --fg) for prose comfort.
   Line-height 1.7 hits the prose-reading sweet spot. Matches GitHub/Stripe
   docs body-text balance. */
.cr-doc-markdown {
  color: var(--fg);
  line-height: 1.7;
  font-size: 15px;
  overflow-wrap: anywhere;
}

/* 5-level type scale ────────────────────────────────────────────────────
   H1   28 / 700 / line-height 1.20
   H2   22 / 650 / line-height 1.25 + top spacing + bottom hairline
   H3   17 / 600 / line-height 1.30
   H4   15 / 600 / muted color
   H5   13 / 700 / uppercase letterspace (used as eyebrow / kicker)
   ───────────────────────────────────────────────────────────────────── */
.cr-doc-markdown h1,
.cr-doc-markdown h2,
.cr-doc-markdown h3,
.cr-doc-markdown h4,
.cr-doc-markdown h5,
.cr-doc-markdown h6 {
  color: var(--fg); line-height: 1.25; font-weight: 650;
  scroll-margin-top: 16px;
}
.cr-doc-markdown h1 {
  font-size: 28px; font-weight: 700; line-height: 1.2;
  margin: 4px 0 16px; letter-spacing: -0.01em;
}
.cr-doc-markdown h2 {
  font-size: 22px; font-weight: 650; line-height: 1.25;
  margin: 28px 0 12px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cr-doc-markdown h3 {
  font-size: 17px; font-weight: 600; line-height: 1.3;
  margin: 22px 0 8px;
}
.cr-doc-markdown h4 {
  font-size: 15px; font-weight: 600; color: var(--fg-dim);
  margin: 16px 0 6px;
}
.cr-doc-markdown h5,
.cr-doc-markdown h6 {
  font-size: 12px; font-weight: 700; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 14px 0 4px;
}

/* Paragraphs and list spacing — looser to breathe like a doc, not a panel. */
.cr-doc-markdown p { margin: 8px 0 12px; }
.cr-doc-markdown ul,
.cr-doc-markdown ol { margin: 8px 0 14px; padding-left: 22px; }
.cr-doc-markdown li { margin: 4px 0; }
.cr-doc-markdown li > p { margin: 2px 0 6px; }
.cr-doc-markdown blockquote {
  margin: 12px 0; padding: 4px 14px;
  border-left: 3px solid var(--border);
  color: var(--fg-dim);
}

/* Inline code — body-colored on a faint accent-tinted pill (NOT amber).
   Reserves color emphasis for prose accents / heading colors instead. */
.cr-doc-markdown code {
  font-family: var(--mono, 'SF Mono', Menlo, monospace);
  font-size: 0.9em;
  background: var(--accent-soft, rgba(122,162,247,0.10));
  color: var(--fg);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: pre-wrap;
}

/* Block code — distinct surface, thin border for "this is a contained block". */
.cr-doc-markdown pre {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 0 14px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
}
.cr-doc-markdown pre code {
  background: transparent;
  padding: 0;
  color: var(--fg);
  font-size: inherit;
}

/* Tables — readable on dark + light. */
.cr-doc-markdown table {
  border-collapse: collapse; margin: 12px 0; font-size: 13px; width: auto; max-width: 100%;
}
.cr-doc-markdown th,
.cr-doc-markdown td {
  border: 1px solid var(--border); padding: 6px 12px; text-align: left;
}
.cr-doc-markdown th { background: var(--bg-lighter, var(--bg-light)); font-weight: 600; }

/* Links — accent color with subtle underline. */
.cr-doc-markdown a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--accent-soft, rgba(122,162,247,0.4));
}
.cr-doc-markdown a:hover { text-decoration-color: var(--accent); }

/* HR — thin neutral rule. */
.cr-doc-markdown hr {
  border: 0; height: 1px; background: var(--border); margin: 24px 0;
}
.cr-doc-source-table {
  width: 100%; border-collapse: collapse; font-family: var(--mono, 'SF Mono', Menlo, monospace);
  font-size: 12px; line-height: 1.55;
}
.cr-doc-source-line:hover { background: rgba(255,255,255,0.03); }
.cr-doc-line-num {
  width: 58px; min-width: 58px; padding: 0 10px; text-align: right;
  color: var(--fg-dim); opacity: 0.65; user-select: none; cursor: pointer;
  border-right: 1px solid var(--border);
}
.cr-doc-line-num:hover { color: var(--accent); opacity: 1; }
.cr-doc-line-text {
  white-space: pre; padding: 0 14px; color: var(--fg); min-width: 620px;
}
.cr-doc-comment-row td { padding: 0; }
.cr-doc-comment-row .cr-comment-thread,
.cr-doc-block .cr-comment-thread {
  margin-left: 0; margin-right: 34px;
}

/* Diff table */
.cr-diff-table {
  width: 100%; border-collapse: collapse; font-family: var(--mono, 'SF Mono', Menlo, monospace);
  font-size: 12px; line-height: 1.5;
}
.cr-diff-hunk-header {
  background: rgba(122, 162, 247, 0.08); color: var(--fg-dim); font-size: 11px;
  padding: 4px 12px;
}
.cr-diff-hunk-header td { padding: 4px 12px; font-style: italic; }
/* Expand-context row between/around hunks */
.cr-diff-expand-row td { padding: 0; background: rgba(122,162,247,0.05); }
.cr-expand-btn {
  width: 100%; text-align: left; padding: 3px 12px; background: transparent; border: none;
  color: var(--fg-dim); font-size: 11px; cursor: pointer; font-family: var(--mono, monospace);
}
.cr-expand-btn:hover { background: rgba(122,162,247,0.12); color: var(--accent, #7aa2f7); }

/* Line rows */
.cr-diff-line { position: relative; }
.cr-diff-line:hover { background: rgba(255,255,255,0.02); }
.cr-diff-line.add { background: rgba(158, 206, 106, 0.08); }
.cr-diff-line.del { background: rgba(247, 118, 142, 0.08); }
.cr-diff-line.add:hover { background: rgba(158, 206, 106, 0.15); }
.cr-diff-line.del:hover { background: rgba(247, 118, 142, 0.15); }

.cr-line-num {
  width: 50px; min-width: 50px; padding: 0 8px; text-align: right;
  color: var(--fg-dim); opacity: 0.5; user-select: none; vertical-align: top;
  cursor: pointer; position: relative;
}
.cr-line-num:hover { opacity: 1; color: var(--accent); }
.cr-line-num::before {
  content: '+'; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  font-size: 10px; opacity: 0; color: var(--accent); font-weight: 700;
  width: 14px; height: 14px; border-radius: 50%; background: rgba(122,162,247,0.15);
  display: flex; align-items: center; justify-content: center;
}
.cr-line-num:hover::before { opacity: 1; }
/* Surface the "+" add-comment affordance on whole-line hover (more discoverable than
   hovering the narrow gutter cell); full opacity when pointing right at the gutter. */
.cr-diff-line:hover .cr-line-num::before,
.cr-diff-line-split:hover .cr-line-num::before { opacity: 0.55; }
.cr-diff-line .cr-line-num:hover::before,
.cr-diff-line-split .cr-line-num:hover::before { opacity: 1; }

.cr-line-prefix {
  width: 14px; min-width: 14px; text-align: center; user-select: none;
  color: var(--fg-dim);
}
.cr-diff-line.add .cr-line-prefix { color: var(--green, #9ece6a); }
.cr-diff-line.del .cr-line-prefix { color: var(--red, #f7768e); }

.cr-line-content {
  padding: 0 12px 0 4px; white-space: pre; tab-size: 4;
}
.cr-line-content .cr-highlight-add {
  background: rgba(158, 206, 106, 0.25); border-radius: 2px;
}
.cr-line-content .cr-highlight-del {
  background: rgba(247, 118, 142, 0.25); border-radius: 2px;
}

/* Side-by-side (split) diff layout */
.cr-diff-table.split { table-layout: fixed; width: 100%; }
/* Column widths come from the colgroup (see _renderFileDiffSplit): narrow gutters,
   two equal code columns. Without this the colspan=4 hunk header would force four
   equal 25% columns and leave a dead channel between the panes. */
.cr-diff-table.split col.cr-col-num { width: 46px; }
.cr-diff-table.split .cr-line-num { width: 46px; min-width: 46px; }
.cr-diff-table.split .cr-line-content {
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; padding: 0 10px;
}
.cr-diff-line-split td:nth-child(3) { border-left: 2px solid var(--border); }
.cr-diff-line-split:hover { background: rgba(255,255,255,0.02); }
.cr-diff-line-split .cr-line-content.del { background: rgba(247, 118, 142, 0.10); }
.cr-diff-line-split .cr-line-content.add { background: rgba(158, 206, 106, 0.10); }
.cr-diff-line-split .cr-split-empty {
  background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255,255,255,0.02) 6px, rgba(255,255,255,0.02) 12px);
}

/* Line selection for range comments */
.cr-diff-line.selected { background: rgba(122, 162, 247, 0.12) !important; }
.cr-diff-line.selected .cr-line-num { color: var(--accent); opacity: 1; }
.cr-diff-line.selected:first-of-type { border-top: 1px solid rgba(122, 162, 247, 0.3); }
.cr-diff-line.selected:last-of-type { border-bottom: 1px solid rgba(122, 162, 247, 0.3); }

/* Inline comment thread */
.cr-comment-row td { padding: 0; }
.cr-comment-thread {
  margin: 4px 12px 8px 60px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); overflow: hidden;
}
.cr-comment-item {
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.cr-comment-item:last-child { border-bottom: none; }
.cr-comment-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.cr-comment-author {
  font-size: 11px; font-weight: 600; color: var(--fg);
}
.cr-comment-severity {
  font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 600;
}
.cr-comment-severity.issue { background: var(--red, #f7768e); color: #fff; }
.cr-comment-severity.suggestion { background: var(--yellow, #e0af68); color: #1a1b26; }
.cr-comment-severity.nit { background: var(--fg-dim); color: var(--bg); }
.cr-comment-severity.comment { background: var(--bg-lighter); color: var(--fg-dim); }
.cr-comment-severity.question { background: var(--purple, #bb9af7); color: #fff; }
.cr-comment-ai { font-size: 9px; color: var(--purple, #bb9af7); font-style: italic; }
.cr-comment-body {
  font-size: 12px; color: var(--fg); line-height: 1.5;
}
.cr-comment-actions {
  display: flex; gap: 6px; margin-top: 6px;
}
.cr-comment-actions button {
  font-size: 10px; padding: 2px 8px; border-radius: 4px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--fg-dim);
}
.cr-comment-actions button:hover { background: var(--bg-lighter); }
.cr-comment-actions button.resolve { color: var(--green); border-color: var(--green); }

/* New comment form (inline) */
.cr-new-comment {
  padding: 8px 12px; background: var(--bg-lighter);
}
.cr-new-comment textarea {
  width: 100%; min-height: 60px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-size: 12px;
  font-family: inherit; resize: vertical;
}
.cr-new-comment textarea:focus { border-color: var(--accent); outline: none; }
.cr-new-comment-bar {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
}
.cr-severity-select {
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  padding: 3px 6px; border-radius: 4px; font-size: 11px;
}

/* Footer / submit bar */
.cr-footer {
  display: flex; align-items: center; gap: 10px; padding: 4px 12px;
  border-top: 1px solid var(--border); flex-shrink: 0; background: var(--bg);
}
.cr-footer-summary {
  flex: 1; font-size: 12px; color: var(--fg-dim);
}
.cr-footer-summary strong { color: var(--fg); }

/* Session change bar (shown in terminal tab) */
.cr-session-bar {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px;
  background: linear-gradient(90deg, rgba(122,162,247,0.08), rgba(122,162,247,0.02));
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.cr-session-bar-icon { font-size: 14px; }
.cr-session-bar-text { flex: 1; color: var(--fg-dim); }
.cr-session-bar-text strong { color: var(--fg); }
.cr-session-bar .cr-btn { padding: 3px 10px; }

/* Badge on nav pill */
.cr-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent, #7aa2f7); color: #fff; font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  margin-left: 4px; vertical-align: middle; line-height: 1;
}
.cr-badge.pulse {
  animation: cr-pulse 1.5s ease-in-out infinite;
}
@keyframes cr-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Loading state */
.cr-loading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 100%; color: var(--fg-dim); font-size: 13px;
}
.cr-loading .spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: cr-spin 0.6s linear infinite;
}
@keyframes cr-spin { to { transform: rotate(360deg); } }

/* Back to session link */
.cr-back-link {
  font-size: 11px; color: var(--accent); cursor: pointer;
  text-decoration: none; display: flex; align-items: center; gap: 4px;
}
.cr-back-link:hover { text-decoration: underline; }

/* Review history dropdown */
.cr-history-list {
  max-height: 300px; overflow-y: auto; padding: 4px 0;
}
.cr-history-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  cursor: pointer; font-size: 11px; transition: background 0.1s;
}
.cr-history-item:hover { background: var(--bg-lighter); }
.cr-history-status {
  width: 8px; height: 8px; border-radius: 50%;
}
.cr-history-status.draft { background: var(--yellow); }
.cr-history-status.submitted { background: var(--green); }
.cr-history-status.resolved { background: var(--fg-dim); }

/* Project list view */
.cr-project-picker {
  padding: 20px 18px 28px; max-width: 980px; margin: 0 auto; width: 100%;
}
.cr-project-chooser-header {
  display: flex; justify-content: space-between; gap: 18px; align-items: flex-end;
  padding: 4px 2px 16px;
}
.cr-project-chooser-copy {
  min-width: 0;
}
.cr-picker-eyebrow {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0;
  color: var(--accent, #7aa2f7); margin-bottom: 5px;
}
.cr-project-chooser-copy h2 {
  margin: 0; color: var(--fg); font-size: 20px; line-height: 1.2;
}
.cr-project-chooser-copy p {
  margin: 7px 0 0; color: var(--fg-dim); font-size: 12px; line-height: 1.45;
  max-width: 620px;
}
.cr-project-chooser-stats {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0;
}
.cr-project-chooser-stats span {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--fg-dim); font-size: 11px;
}
.cr-project-chooser-stats strong { color: var(--fg); }
.cr-project-scan-status {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px;
  padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, var(--bg-lighter) 18%);
  color: var(--fg-dim); font-size: 11px; font-weight: 650; white-space: nowrap;
}
.cr-project-scan-status.active {
  color: var(--accent); border-color: rgba(122,162,247,0.45);
}
.cr-project-scan-status.error {
  color: var(--red); border-color: rgba(247,118,142,0.45);
}
.cr-project-scan-status .spinner {
  width: 12px; height: 12px; border-width: 2px;
}
.cr-project-refresh-btn {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--accent); font-size: 11px; font-weight: 650;
}
.cr-project-refresh-btn:hover { text-decoration: underline; }

/* Manage sources (Task 4, D-4): sources are user-visible and editable in place */
.cr-sources-line {
  padding: 2px 2px 12px; color: var(--fg-dim); font-size: 11.5px; line-height: 1.5;
}
.cr-manage-sources-btn {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--accent); font-size: 11.5px; font-weight: 650;
}
.cr-manage-sources-btn:hover { text-decoration: underline; }
.cr-sources-panel {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
  margin: 0 2px 14px; overflow: hidden;
}
.cr-sources-panel-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cr-sources-auto { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg); }
.cr-sources-section-label { font-size: 11px; font-weight: 650; color: var(--fg-dim); margin-bottom: 6px; }
.cr-sources-root-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 0; font-size: 12px; color: var(--fg);
}
.cr-sources-root-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-sources-root-count { color: var(--fg-dim); font-size: 11px; }
.cr-sources-root-row button, .cr-sources-hidden-list button {
  background: none; border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
  color: var(--fg-dim); font-size: 11px; padding: 2px 7px;
}
.cr-sources-root-row button:hover, .cr-sources-hidden-list button:hover { color: var(--red); border-color: rgba(247,118,142,0.45); }
.cr-sources-empty { font-size: 12px; color: var(--fg-dim); padding: 4px 0; }
.cr-sources-add-root { display: flex; gap: 8px; margin-top: 6px; }
.cr-sources-add-root input {
  flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--fg); font-size: 12px;
}
.cr-sources-add-root button {
  height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-lighter); color: var(--fg); font-size: 12px; cursor: pointer;
}
.cr-sources-hidden-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cr-sources-hidden-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--fg);
}
.cr-sources-hidden-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-sources-excluded-note { font-size: 11px; color: var(--fg-dim); }
.cr-sources-rejected { font-size: 11px; color: var(--fg-dim); }
.cr-sources-error { font-size: 11.5px; color: var(--red); }

.cr-project-toolbar {
  display: grid; grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center; gap: 10px; margin-bottom: 14px;
}
.cr-project-search {
  min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--bg);
}
.cr-project-search:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 2px rgba(122,162,247,0.18);
}
.cr-project-search-icon {
  color: var(--fg-dim); font-size: 13px; flex-shrink: 0;
}
.cr-project-search input {
  width: 100%; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--fg); font-size: 12px; font-family: inherit;
}
.cr-project-search input::placeholder { color: var(--fg-dim); opacity: 0.75; }
.cr-project-filters {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg);
}
.cr-project-filter {
  min-height: 30px; border: 0; border-radius: 5px; padding: 4px 9px;
  background: transparent; color: var(--fg-dim); cursor: pointer;
  font-size: 11px; font-weight: 650; white-space: nowrap;
}
.cr-project-filter span {
  color: var(--fg-dim); font-weight: 600; margin-left: 3px;
}
.cr-project-filter:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
.cr-project-filter.active {
  color: var(--fg); background: rgba(122,162,247,0.22);
}
.cr-project-result-count {
  color: var(--fg-dim); font-size: 11px; white-space: nowrap;
}
.cr-project-results {
  min-height: 120px;
}
.cr-project-list {
  display: flex; flex-direction: column; gap: 12px; width: 100%;
}
.cr-project-card {
  border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px 13px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  background: color-mix(in srgb, var(--bg) 86%, var(--bg-lighter) 14%);
}
.cr-project-card:hover {
  background: var(--bg-lighter); border-color: rgba(122,162,247,0.75);
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}
.cr-project-card:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.cr-project-card.has-changes { border-left: 3px solid var(--accent); }
.cr-project-card.pinned { border-color: var(--yellow, #e0af68); }
.cr-project-card.pinned.has-changes { border-left-color: var(--yellow, #e0af68); }
.cr-project-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.cr-project-card-left {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.cr-project-title-group {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap;
}
.cr-project-status-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  min-width: 200px;
}
/* Pin button */
/* Drag handle for pinned cards */
.cr-drag-handle {
  cursor: grab; font-size: 14px; opacity: 0.2; transition: opacity 0.15s;
  user-select: none; flex-shrink: 0; letter-spacing: -2px; padding: 0 2px;
}
.cr-project-card:hover .cr-drag-handle { opacity: 0.5; }
.cr-drag-handle:hover { opacity: 0.8 !important; }
.cr-project-card.drag-over { border-top: 2px solid var(--accent); }
.cr-project-card[draggable="true"] { cursor: grab; }
.cr-project-card[draggable="true"]:active { cursor: grabbing; }
.cr-pin-btn {
  background: none; border: none; cursor: pointer; font-size: 13px;
  opacity: 0.25; transition: opacity 0.15s; padding: 0; line-height: 1;
  flex-shrink: 0;
}
.cr-project-card:hover .cr-pin-btn { opacity: 0.5; }
.cr-pin-btn:hover { opacity: 0.8 !important; }
.cr-pin-btn.pinned { opacity: 1; }

.cr-project-name {
  font-size: 15px; font-weight: 760; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}
.cr-worktree-name {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; color: var(--accent); background: rgba(122,162,247,0.14);
  border: 1px solid rgba(122,162,247,0.22); padding: 2px 7px; border-radius: 999px;
}
.cr-target-type {
  font-size: 10px; font-weight: 760; color: var(--fg);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.cr-target-type.claude-worktree,
.cr-target-type.walle-worktree,
.cr-target-type.worktree {
  color: var(--accent); border-color: rgba(122,162,247,0.28);
  background: rgba(122,162,247,0.12);
}
.cr-target-type.main-checkout {
  color: var(--green, #9ece6a); border-color: rgba(158,206,106,0.25);
  background: rgba(158,206,106,0.10);
}
.cr-project-badge {
  font-size: 10px; font-weight: 600; background: var(--accent); color: #fff;
  padding: 2px 8px; border-radius: 10px;
}
.cr-project-clean {
  font-size: 10px; color: var(--green, #9ece6a); opacity: 0.7;
}
.cr-project-path-grid {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px;
  margin: 0 0 10px; align-items: center;
}
.cr-path-label {
  color: var(--fg-dim); font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0;
}
.cr-project-path {
  font-size: 11px; color: var(--fg-dim); font-family: var(--mono, 'SF Mono', Menlo, monospace);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cr-project-card-actions {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 10px;
}
.cr-review-target-btn {
  min-height: 32px; font-weight: 750;
}
.cr-project-action-hint {
  color: var(--fg-dim); font-size: 11px;
}
.cr-project-files {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.cr-project-file {
  font-size: 10px; font-family: var(--mono, 'SF Mono', Menlo, monospace);
  color: var(--fg-dim); background: var(--bg-lighter); padding: 2px 6px;
  border-radius: 4px; white-space: nowrap;
}
.cr-project-empty-state {
  display: grid; place-items: center; min-height: 180px; text-align: center;
  border: 1px dashed var(--border); border-radius: 8px; color: var(--fg-dim);
  background: rgba(255,255,255,0.02);
}
.cr-project-empty-title {
  color: var(--fg); font-size: 14px; font-weight: 700; margin-bottom: 4px;
}
.cr-project-empty-copy {
  font-size: 12px;
}
.cr-project-skeleton-group {
  display: flex; flex-direction: column; gap: 8px;
}
.cr-project-skeleton {
  height: 52px; border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-lighter) 0%, rgba(255,255,255,0.06) 50%, var(--bg-lighter) 100%);
  background-size: 200% 100%;
  animation: cr-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes cr-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 900px) {
  .cr-project-chooser-header { align-items: stretch; flex-direction: column; }
  .cr-project-chooser-stats { justify-content: flex-start; }
  .cr-project-toolbar { grid-template-columns: 1fr; }
  .cr-project-filters { overflow-x: auto; justify-content: flex-start; }
  .cr-project-result-count { display: none; }
  .cr-project-card-header { flex-direction: column; align-items: stretch; }
  .cr-project-status-row { justify-content: flex-start; min-width: 0; }
  .cr-project-card-actions { flex-direction: column; align-items: flex-start; }
  .cr-review-target { grid-template-columns: auto minmax(0, 1fr); max-width: 100%; }
  .cr-review-target-meta { grid-column: 2; }
}

/* No changes state */
.cr-no-changes {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 12px; color: var(--fg-dim);
}
.cr-no-changes-icon { font-size: 48px; opacity: 0.3; }
.cr-no-changes-text { font-size: 14px; }

/* Continuous diff: file sections */
.cr-diff-file-section {
  margin-bottom: 24px;
}
.cr-diff-file-section:last-child {
  margin-bottom: 0;
}
.cr-diff-file-header.sticky {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  backdrop-filter: blur(8px);
}

/* Review body (transcript panel wrapper) */
.review-body {
  display: flex; flex: 1; overflow: hidden;
}
.review-content {
  flex: 1; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}

/* Messages area */
.rc-messages {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.rc-empty {
  color: var(--fg-dim); font-size: 12px; text-align: center;
  padding: 24px 12px; line-height: 1.5;
}

/* Message bubbles */
.rc-msg { font-size: 12px; line-height: 1.5; }
.rc-msg-user {
  background: rgba(122, 162, 247, 0.12); border-radius: 10px 10px 4px 10px;
  padding: 8px 12px; align-self: flex-end; max-width: 90%;
}
.rc-msg-assistant {
  background: var(--bg-lighter, rgba(255,255,255,0.04));
  border-radius: 10px 10px 10px 4px; padding: 8px 12px; max-width: 95%;
}
.rc-msg-text {
  word-break: break-word;
}
.rc-msg-text pre { margin: 6px 0; }
.rc-msg-text code {
  font-family: var(--mono, 'SF Mono', Menlo, monospace); font-size: 11px;
  background: rgba(255,255,255,0.06); padding: 1px 4px; border-radius: 3px;
}
.rc-msg-text pre code { padding: 0; background: none; }
.rc-code-block {
  background: var(--bg-card, #24283b); border-radius: 6px;
  padding: 10px 12px; overflow-x: auto; font-size: 11px;
}
.rc-inline-code {
  font-family: var(--mono, 'SF Mono', Menlo, monospace); font-size: 11px;
  background: rgba(255,255,255,0.06); padding: 1px 4px; border-radius: 3px;
}

/* Message actions (hover) */
.rc-msg-actions {
  display: flex; gap: 4px; margin-top: 4px; opacity: 0;
  transition: opacity 0.15s;
}
.rc-msg:hover .rc-msg-actions { opacity: 1; }
.rc-action-btn {
  font-size: 10px; padding: 2px 8px; border-radius: 4px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--fg-dim);
}
.rc-action-btn:hover { background: var(--bg-lighter); }
.rc-action-btn.pinned { color: var(--accent); border-color: var(--accent); }

/* Thinking state */
.rc-thinking { opacity: 0.8; }
.rc-thinking-dots {
  display: flex; gap: 3px; padding: 4px 0;
}
.rc-thinking-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-dim);
  animation: rc-dot-pulse 1.2s ease-in-out infinite;
}
.rc-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.rc-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes rc-dot-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}
.rc-thinking-log {
  font-size: 11px; color: var(--fg-dim); padding: 2px 0;
}

/* Quick action pills */
.rc-quick-actions {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.rc-quick-btn {
  font-size: 10px; padding: 4px 10px; border-radius: 12px;
  background: var(--bg-lighter); border: 1px solid var(--border);
  color: var(--fg-dim); cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.rc-quick-btn:hover {
  background: rgba(122, 162, 247, 0.12); color: var(--fg);
  border-color: var(--accent);
}

/* Findings list */
.rc-findings {
  border-top: 1px solid var(--border); padding: 8px 12px; flex-shrink: 0;
}
.rc-findings-header {
  font-size: 11px; font-weight: 600; color: var(--fg-dim);
  margin-bottom: 6px;
}
.rc-finding-item {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px;
  font-size: 11px; border-radius: 4px;
  background: rgba(122,162,247,0.06); margin-bottom: 4px;
}
.rc-finding-summary {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--fg);
}
.rc-finding-file {
  font-size: 10px; color: var(--accent); font-family: var(--mono, monospace);
  flex-shrink: 0;
}
.rc-finding-remove {
  background: none; border: none; color: var(--fg-dim); cursor: pointer;
  font-size: 14px; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.rc-finding-remove:hover { color: var(--red); }
.rc-send-findings-btn {
  width: 100%; margin-top: 6px; padding: 6px; font-size: 11px;
  font-weight: 600; border-radius: 6px; cursor: pointer;
  background: var(--accent, #7aa2f7); color: #fff; border: none;
  transition: opacity 0.15s;
}
.rc-send-findings-btn:hover { opacity: 0.85; }

/* Input row */
.rc-input-row {
  display: flex; gap: 6px; padding: 8px 12px;
  border-top: 1px solid var(--border); flex-shrink: 0;
  align-items: flex-end;
}
.rc-input {
  flex: 1; min-height: 36px; max-height: 100px; padding: 8px 10px;
  background: var(--bg-lighter); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; font-family: inherit; resize: none;
  line-height: 1.4;
}
.rc-input:focus { border-color: var(--accent); outline: none; }
.rc-input:disabled { opacity: 0.5; }
.rc-send-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent, #7aa2f7); color: #fff; border: none;
  font-size: 16px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  transition: opacity 0.15s;
}
.rc-send-btn:hover { opacity: 0.85; }
.rc-cancel-btn { background: var(--red, #f7768e); }

/* Chat toggle button in cr-header */
.cr-chat-toggle {
  padding: 3px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--fg-dim);
}
.cr-chat-toggle:hover { background: var(--bg-lighter); color: var(--fg); }
.cr-chat-toggle.active { color: var(--accent); border-color: var(--accent); }

/* ===== Phase A: shared shell — nav history + breadcrumb ===== */
.cr-navcluster {
  display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1;
}
.cr-header:has(.cr-doc-header-name) { flex-wrap: nowrap; } /* the path shrinks (dir first) instead of the header wrapping */
.cr-header:has(.cr-doc-header-name) .cr-navcluster { flex: 0 1 auto; min-width: 160px; }
.cr-header:has(.cr-doc-header-name) .cr-header-actions { flex-shrink: 0; flex-wrap: nowrap; }
/* The doc header never wraps and its actions never shrink, so the R-5 chat label
   (wider than the old "Chat") pushed Send past the panel at 1024 and starved the
   path at 1440: the doc header shows the chat icon alone (title/aria-label keep the words). */
.cr-header:has(.cr-doc-header-name) .cr-chat-toggle-label { display: none; }
.cr-nav-history { display: inline-flex; gap: 2px; flex-shrink: 0; }
.cr-nav-btn {
  width: 26px; height: 26px; display: inline-grid; place-items: center;
  font-size: 14px; line-height: 1; cursor: pointer; color: var(--fg-dim);
  background: var(--bg-light); border: 1px solid var(--border); border-radius: 7px;
  transition: color .12s, border-color .12s, background .12s;
}
.cr-nav-btn:hover:not(:disabled) { color: var(--fg); border-color: var(--accent); }
.cr-nav-btn:disabled { opacity: 0.34; cursor: default; }
.cr-breadcrumb {
  display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; flex-wrap: nowrap; overflow: hidden;
}
.cr-crumb {
  color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
  border-radius: 5px; padding: 2px 4px;
}
.cr-crumb[role="link"] { cursor: pointer; }
.cr-crumb[role="link"]:hover { color: var(--fg); background: var(--bg-hover); }
.cr-crumb.active { color: var(--fg); font-weight: 600; }
.cr-crumb-sep { color: var(--fg-dim); flex-shrink: 0; }
.cr-hub-tagline { font-size: 12px; color: var(--fg-dim); margin-left: 4px; }

/* ===== Phase A: project groups (worktrees nested under their repo) ===== */
.cr-project-groups { display: flex; flex-direction: column; gap: 16px; }
.cr-project-group {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-panel, var(--bg-light));
}
.cr-project-group.solo { border: 0; border-radius: 0; background: none; overflow: visible; }
.cr-project-group-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg-lighter); border-bottom: 1px solid var(--border);
}
.cr-project-group-icon { font-size: 14px; opacity: 0.85; }
.cr-project-group-name { font-size: 14px; font-weight: 700; color: var(--fg); }
.cr-project-group-meta { font-size: 11.5px; color: var(--fg-dim); }
.cr-project-group-changes {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border-radius: 20px; padding: 2px 10px;
}
.cr-project-group-members { display: flex; flex-direction: column; gap: 1px; padding: 8px; }
.cr-project-group-members .cr-project-card {
  border-radius: 9px;
}
.cr-project-group-members .cr-project-card.is-worktree {
  margin-left: 14px; border-left: 2px solid var(--border);
}
.cr-project-group-members .cr-project-card.is-worktree.has-changes { border-left-color: var(--accent); }
.cr-worktree-name {
  font-size: 11px; color: var(--purple); font-family: var(--font-mono, 'SF Mono', Menlo, monospace);
  background: color-mix(in srgb, var(--purple) 12%, transparent); border-radius: 6px; padding: 1px 7px;
}

/* ===== Phase B: viewer quality — highlight.js + stronger diff/inline-code ===== */
#codereview-panel { --cr-teal: #2ac3de; }
html[data-theme="light"] #codereview-panel { --cr-teal: #0e7490; }

/* Inline code: accent text + hairline border = unmistakably "code" */
.cr-doc-markdown code {
  color: var(--accent); font-size: 0.88em;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 5px;
}
.cr-doc-markdown pre code { color: var(--fg); border: 0; }

/* Diff lines: stronger fill + a left accent bar so add/del read at a glance */
.cr-diff-line.add { background: var(--success-soft, rgba(158,206,106,0.14)); }
.cr-diff-line.del { background: var(--danger-soft, rgba(247,118,142,0.14)); }
.cr-diff-line.add:hover { background: rgba(158,206,106,0.22); }
.cr-diff-line.del:hover { background: rgba(247,118,142,0.22); }
.cr-diff-line.add .cr-line-content { box-shadow: inset 2px 0 0 var(--green, #9ece6a); }
.cr-diff-line.del .cr-line-content { box-shadow: inset 2px 0 0 var(--red, #f7768e); }
.cr-diff-line-split .cr-line-content.add { background: var(--success-soft, rgba(158,206,106,0.14)); box-shadow: inset 2px 0 0 var(--green, #9ece6a); }
.cr-diff-line-split .cr-line-content.del { background: var(--danger-soft, rgba(247,118,142,0.14)); box-shadow: inset 2px 0 0 var(--red, #f7768e); }

/* highlight.js token theme — semantic CTM vars, flips with the app theme,
   scoped to the review panel so it never leaks into other code surfaces. */
#codereview-panel .hljs { color: var(--fg); background: transparent; }
#codereview-panel .hljs-comment, #codereview-panel .hljs-quote { color: var(--fg-dim); font-style: italic; }
#codereview-panel .hljs-keyword, #codereview-panel .hljs-selector-tag, #codereview-panel .hljs-literal, #codereview-panel .hljs-meta-keyword { color: var(--purple); }
#codereview-panel .hljs-string, #codereview-panel .hljs-regexp, #codereview-panel .hljs-char.escape_, #codereview-panel .hljs-symbol { color: var(--green); }
#codereview-panel .hljs-number { color: var(--yellow); }
#codereview-panel .hljs-title, #codereview-panel .hljs-title.function_, #codereview-panel .hljs-section { color: var(--accent); }
#codereview-panel .hljs-attr, #codereview-panel .hljs-attribute, #codereview-panel .hljs-property, #codereview-panel .hljs-variable, #codereview-panel .hljs-template-variable, #codereview-panel .hljs-built_in, #codereview-panel .hljs-type, #codereview-panel .hljs-title.class_ { color: var(--cr-teal); }
#codereview-panel .hljs-tag, #codereview-panel .hljs-name, #codereview-panel .hljs-selector-id, #codereview-panel .hljs-selector-class { color: var(--red); }
#codereview-panel .hljs-meta { color: var(--fg-dim); }
#codereview-panel .hljs-emphasis { font-style: italic; }
#codereview-panel .hljs-strong { font-weight: 700; }
#codereview-panel .hljs-deletion { color: var(--red); }
#codereview-panel .hljs-addition { color: var(--green); }

/* ===== Phase C: file-router context menu + typed file links ===== */
.ctm-file-menu {
  position: fixed; z-index: 100050; min-width: 210px; padding: 6px;
  background: var(--bg-elevated, var(--bg-light)); border: 1px solid var(--border);
  border-radius: 11px; box-shadow: 0 18px 46px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.03) inset;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
html[data-theme="light"] .ctm-file-menu { box-shadow: 0 24px 60px rgba(15,23,42,0.18), 0 8px 20px rgba(15,23,42,0.08); }
.ctm-file-menu-head {
  font-size: 10.5px; color: var(--fg-dim); font-family: var(--mono, 'SF Mono', Menlo, monospace);
  padding: 7px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
  direction: rtl; text-align: left;
}
.ctm-file-menu-item {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 13px;
  color: var(--fg); background: none; border: 0; padding: 8px 10px; border-radius: 7px; cursor: pointer;
}
.ctm-file-menu-item:hover { background: var(--accent); color: var(--accent-fg); }
.ctm-file-menu-item.primary { color: var(--accent); font-weight: 600; }
.ctm-file-menu-item.primary:hover { color: var(--accent-fg); }
.ctm-file-menu-sep { height: 1px; background: var(--border); margin: 5px 6px; }

/* Typed file links in session output / summaries — a subtle per-type tint */
.ctm-file-link { cursor: pointer; text-underline-offset: 2px; }
.ctm-file-link.type-source { text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ctm-file-link.type-html { text-decoration-color: color-mix(in srgb, var(--purple) 50%, transparent); }
.ctm-file-link.type-html { color: var(--purple); }
.ctm-file-link.type-source { color: var(--accent); }

/* ===== Redesign fixes: compact cards · collapsible groups · docs · empty-state ===== */

/* Compact project card — a single clickable row (matches the design proposal) */
.cr-project-card.compact {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 0;
  border-radius: 9px; cursor: pointer; position: relative;
}
.cr-project-card.compact:hover { border-color: var(--accent); background: var(--bg-hover); }
.cr-pc-icon {
  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 8px; background: var(--bg-lighter); font-size: 14px;
}
.cr-pc-icon.worktree { color: var(--purple); }
.cr-pc-icon.folder { color: var(--accent); }
.cr-pc-body { flex: 1; min-width: 0; }
.cr-pc-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cr-pc-star { color: var(--yellow); flex-shrink: 0; font-size: 11px; }
.cr-pc-title { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 40px; }
.cr-pc-branch {
  font-family: var(--mono, 'SF Mono', Menlo, monospace); font-size: 10.5px; color: var(--purple);
  background: color-mix(in srgb, var(--purple) 12%, transparent); border-radius: 6px; padding: 1px 7px;
  flex-shrink: 0; max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-pc-branch.main { color: var(--fg-dim); background: var(--bg-lighter); }
.cr-pc-type { font-size: 10px; color: var(--fg-dim); flex-shrink: 0; white-space: nowrap; }
.cr-pc-sub {
  font-size: 11px; color: var(--fg-dim); font-family: var(--mono, 'SF Mono', Menlo, monospace);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.cr-pc-stat { flex-shrink: 0; font-family: var(--mono, 'SF Mono', Menlo, monospace); font-size: 12px; }
.cr-pc-files { color: var(--accent); font-weight: 600; }
.cr-pc-clean { color: var(--fg-dim); font-size: 11px; }
.cr-pc-pin {
  flex-shrink: 0; background: none; border: 0; cursor: pointer; font-size: 12px; padding: 4px;
  opacity: 0; transition: opacity .12s; line-height: 1;
}
.cr-project-card.compact:hover .cr-pc-pin { opacity: 0.55; }
.cr-pc-pin.pinned { opacity: 0.85; }
.cr-pc-pin:hover { opacity: 1 !important; }
.cr-pc-hide {
  flex-shrink: 0; background: none; border: 0; cursor: pointer; font-size: 11px; padding: 4px;
  opacity: 0; transition: opacity .12s; line-height: 1; color: var(--fg-dim);
}
.cr-project-card.compact:hover .cr-pc-hide { opacity: 0.55; }
.cr-pc-hide:hover { opacity: 1 !important; color: var(--red); }

/* Collapsible groups — default collapsed; chevron rotates when open */
.cr-project-group-header {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--bg-lighter); border: 0; cursor: pointer; font: inherit; padding: 11px 14px;
}
.cr-project-group.expanded .cr-project-group-header { border-bottom: 1px solid var(--border); }
.cr-project-group:not(.expanded) .cr-project-group-members { display: none; }
.cr-group-chevron { color: var(--fg-dim); font-size: 11px; transition: transform .15s; flex-shrink: 0; }
.cr-project-group.expanded .cr-group-chevron { transform: rotate(90deg); }
.cr-project-group-header:hover { background: var(--bg-elevated, var(--bg-lighter)); }
.cr-project-group-header:hover .cr-project-group-name { color: var(--accent); }
.cr-project-group-clean { margin-left: auto; font-size: 11px; color: var(--fg-dim); }
.cr-project-group-members { padding: 6px; gap: 2px; }
.cr-project-group-members .cr-project-card.is-worktree { margin-left: 18px; }

/* Empty-review state — actionable, suggests a base that has changes */
.cr-no-changes {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 56px 20px; text-align: center;
}
.cr-no-changes-icon { font-size: 30px; color: var(--green); opacity: 0.55; }
.cr-no-changes-text { font-size: 15px; font-weight: 600; color: var(--fg); }
.cr-no-changes-sub { font-size: 12px; color: var(--fg-dim); }
.cr-no-changes-suggest { margin-top: 10px; }
.cr-no-changes-suggest-label { font-size: 10.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 9px; }
.cr-no-changes-suggest-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cr-no-changes-base .cr-suggest-count { color: var(--accent); font-family: var(--mono, 'SF Mono', Menlo, monospace); margin-left: 5px; font-weight: 600; }
.cr-no-changes-back { margin-top: 12px; background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 12.5px; }
.cr-no-changes-back:hover { text-decoration: underline; }

/* ===== Read-only source viewer (design/source-file-link-ux WP-2) ===== */
.cr-src-revision-badge {
  font-size: 10.5px; color: var(--fg-dim); font-family: var(--mono, 'SF Mono', Menlo, monospace);
  background: var(--bg-lighter); border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}
/* Single scroll container (#cr-diff-area, unchanged) holds gutter + code as one flex
   row so they always scroll in lockstep — no separate scroll state to keep in sync. */
.cr-src-view { position: relative; display: flex; align-items: flex-start; padding: 12px 0; min-height: 100%; }
.cr-src-gutter {
  flex: 0 0 auto; box-sizing: border-box; width: 56px; min-width: 56px; padding: 0 10px 0 0;
  text-align: right; white-space: pre; user-select: none; color: var(--fg-dim); opacity: 0.6;
  font-family: var(--mono, 'SF Mono', Menlo, monospace); font-size: 12px; line-height: 18px;
  border-right: 1px solid var(--border);
}
.cr-src-code-wrap { position: relative; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.cr-src-pre {
  margin: 0; padding: 0 14px; white-space: pre; font-family: var(--mono, 'SF Mono', Menlo, monospace);
  font-size: 12px; line-height: 18px; color: var(--fg);
}
/* Target-line indicator (AC-2b): one absolutely-positioned overlay spanning the full
   row, positioned in JS from the pane's real line-height/padding (see
   positionSourceHighlight in reviews.js) — not a per-line DOM node. */
.cr-src-highlight {
  position: absolute; left: 0; right: 0; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--accent, #7aa2f7);
}
.cr-src-detail { margin-top: 10px; text-align: left; }
.cr-src-detail-label {
  font-size: 10.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px;
}
.cr-src-detail ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--fg-dim); }
.cr-src-detail li { font-family: var(--mono, 'SF Mono', Menlo, monospace); font-size: 11.5px; word-break: break-all; }
.cr-src-detail-degraded li { color: var(--yellow, #e0af68); }
.cr-src-near-matches { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-src-near-match { font-family: var(--mono, 'SF Mono', Menlo, monospace); font-size: 11.5px; }

/* ===== Task 8 (WP-7): inline Edit mode — textarea + gutter mirror .cr-src-* exactly
   (same font/size/line-height) so switching Edit on/off doesn't reflow the file. ===== */
.cr-edit-view { height: 100%; align-items: stretch; }
.cr-edit-gutter { overflow: hidden; padding-top: 12px; }
.cr-edit-code-wrap { display: flex; }
.cr-edit-textarea {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 12px 14px; border: none; resize: none;
  background: transparent; color: var(--fg); outline: none; white-space: pre; overflow-wrap: normal;
  font-family: var(--mono, 'SF Mono', Menlo, monospace); font-size: 12px; line-height: 18px;
}
.cr-edit-actions { display: flex; align-items: center; gap: 8px; }
.cr-edit-dirty-flag { font-size: 10.5px; color: var(--fg-dim); white-space: nowrap; }
.cr-edit-bar {
  position: sticky; bottom: 0; z-index: 3;
}
.cr-edit-conflict-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 0 12px 12px;
  border-radius: 8px; border: 1px solid var(--yellow, #e0af68);
  background: color-mix(in srgb, var(--yellow, #e0af68) 12%, var(--bg-card, #1f2029));
  font-size: 12px; color: var(--fg);
}
.cr-edit-error-bar { border-color: var(--red, #f7768e); }
.cr-edit-conflict-bar span { flex: 1 1 auto; }

/* Terminal link hover preview (design/source-file-link-ux WP-4, D-11).
   The `xterm-hover` class is xterm's documented contract: it stops mouse events falling
   through and activating other links. Keep it on this element. */
.xterm .ctm-link-hover {
  position: absolute;
  z-index: 20;
  max-width: min(70ch, 90%);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, #3b3d52);
  background: var(--bg-card, #1f2029);
  color: var(--fg, #c8cdf5);
  font: 12px/1.45 "SF Mono", Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

/* A menu item we know leads nowhere is shown, disabled, with its reason (D-11) —
   never hidden, and never live. */
.ctm-file-menu-item.disabled,
.ctm-file-menu-item[disabled] {
  opacity: .5;
  cursor: default;
  font-style: italic;
}

/* ===== Task 6 (WP-5, D-14): File-pane line comments, comments rail, shortcuts ===== */

/* Right-hand comments rail — an index of every comment, not a replacement for the inline
   cards in the diff/File pane (both stay visible). Closed by default; the header's
   #cr-rail-toggle-btn and the `C` key toggle it, and the choice persists
   (public/js/review-comments-rail.js, ctm.review.railOpen). */
.cr-comments-rail {
  width: 300px; min-width: 220px; max-width: 560px; flex-shrink: 0;
  border-left: 1px solid var(--border); overflow-y: auto; padding: 6px 0;
  display: flex; flex-direction: column; gap: 0;
}
.cr-comments-rail.cr-rail-collapsed { display: none; }
.cr-comments-resize-handle.cr-rail-collapsed { display: none; }
#cr-rail-toggle-btn.active { color: var(--accent); border-color: var(--accent); }
#cr-rail-toggle-btn.has-stale { color: var(--yellow); border-color: var(--yellow); }
.cr-comments-resize-handle {
  width: 4px; cursor: col-resize; flex-shrink: 0;
  background: var(--border); transition: background 0.15s; position: relative; z-index: 2;
}
.cr-comments-resize-handle:hover, .cr-comments-resize-handle.dragging { background: var(--accent); }
.cr-rail-empty { padding: 16px 12px; font-size: 11px; color: var(--fg-dim); text-align: center; }
.cr-rail-comment {
  padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 11px;
}
.cr-rail-comment:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); }
.cr-rail-comment.resolved { opacity: 0.55; }
.cr-rail-comment-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.cr-rail-comment-loc {
  font-family: var(--mono, 'SF Mono', Menlo, monospace); font-size: 10.5px; color: var(--fg-dim);
}
.cr-rail-comment-body {
  color: var(--fg); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cr-rail-comment-actions { display: flex; gap: 6px; margin-top: 5px; }
.cr-rail-comment-actions button {
  font-size: 9.5px; padding: 1px 7px; border-radius: 4px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--fg-dim);
}
.cr-rail-comment-actions button:hover { background: var(--bg-lighter); }
.cr-rail-comment-actions .cr-rail-resolve { color: var(--green); border-color: var(--green); }

/* Tree rail hidden via the `F` shortcut (reuses the collapsed-rail idiom). */
.cr-file-tree.cr-rail-collapsed, .cr-resize-handle.cr-rail-collapsed { display: none; }

/* File-pane gutter comment marks (D-14): appended INSIDE .cr-src-gutter so each mark's
   `top` lines up with the code's rows without re-deriving the pane's own padding-top. */
.cr-src-gutter { position: relative; }
.cr-src-comment-marks { position: absolute; top: 0; left: 2px; right: 2px; pointer-events: none; }
.cr-src-comment-mark {
  position: absolute; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, #7aa2f7); margin-top: 6px;
}
.cr-src-comment-mark.cr-comment-stale { background: var(--yellow, #e0af68); }

/* Comment cards column — a normal flex sibling of the gutter/code (not absolute), so the
   code column narrows to make room rather than overlapping it. */
.cr-src-comment-cards {
  flex: 0 0 280px; min-width: 220px; border-left: 1px solid var(--border);
  padding: 0 10px; box-sizing: border-box; align-self: stretch;
}
.cr-src-comment-cards .cr-comment-thread { margin: 0 0 8px; }

/* New File-pane comment form — absolutely positioned within .cr-src-view under the
   clicked/selected line (D-14: reuses .cr-new-comment-bar/.cr-severity-select styling). */
.cr-src-comment-form {
  position: absolute; left: 66px; right: 12px; z-index: 3;
  background: var(--bg-lighter); border: 1px solid var(--accent); border-radius: 6px; padding: 8px 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.cr-src-comment-form-label { font-size: 10px; color: var(--fg-dim); margin-bottom: 4px; }
.cr-src-comment-input {
  width: 100%; min-height: 56px; background: var(--bg); color: var(--fg); box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-size: 12px;
  font-family: inherit; resize: vertical;
}
.cr-src-comment-input:focus { border-color: var(--accent); outline: none; }

/* Stale badge (D-14, AC-5b): never hides or re-anchors a comment whose blob no longer
   matches the file's current content — just labels it. */
.cr-comment-stale-badge {
  font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 600; margin-left: auto;
  background: var(--yellow, #e0af68); color: #1a1b26;
}
.cr-comment-item.cr-comment-stale, .cr-rail-comment.cr-comment-stale { border-left: 2px solid var(--yellow, #e0af68); }

/* Rail-click flash on a diff line target */
tr.cr-diff-line.cr-flash td { animation: cr-flash-fade 0.9s ease-out; }
@keyframes cr-flash-fade {
  0% { background: color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { background: transparent; }
}

/* ===== Task 9 (WP-8): queue-first hub sections (Awaiting review / Active / Clean / Stale) ===== */
.cr-section { margin-bottom: 20px; }
.cr-section-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.cr-section-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg-dim); }
.cr-section-count {
  font-size: 11px; font-weight: 600; color: var(--fg-dim); background: var(--bg-lighter);
  border-radius: 20px; padding: 1px 8px;
}
.cr-section-chevron { color: var(--fg-dim); font-size: 11px; transition: transform .15s; flex-shrink: 0; }
.cr-section:not(.collapsed) .cr-section-chevron { transform: rotate(90deg); }
.cr-section:not(.collapsed) .cr-section-head:hover .cr-section-title { color: var(--accent); }
.cr-section.collapsed .cr-section-body { display: none; }
.cr-section-body { margin-top: 8px; display: flex; flex-direction: column; gap: 16px; }
.cr-rail-comment.active { outline: 1px solid rgba(158,206,106,.9); }
.cr-rail-comment.reattaching { outline: 1px dashed var(--yellow, #e0af68); }