mergie-cli 0.1.0

package/src/web/styles.css

@@ -0,0 +1,1020 @@
+:root {
+  /* Neutral gray scale (light theme) — surfaces, text, borders. */
+  --gray-50: #f8f9fb;
+  --gray-100: #f1f3f5;
+  --gray-200: #e6e8eb;
+  --gray-300: #d4d8dd;
+  --gray-400: #b0b6bd;
+  --gray-500: #868e96;
+  --gray-600: #656d76;
+  --gray-700: #464c53;
+  --gray-800: #2b3036;
+  --gray-900: #1a1d21;
+
+  /* Single accent (indigo-leaning blue). */
+  --accent: #4361ee;
+  --accent-hover: #3b55d9;
+  --accent-tint: #eaeeff;
+  --accent-border: #c7d0fb;
+
+  /* Semantic tokens. */
+  --success: #1a7f37;
+  --success-tint: #e7f5ec;
+  --success-tint-hover: #d8eede;
+  --success-border: #b7e0c4;
+  --danger: #cf222e;
+  --danger-hover: #b91c26;
+  --danger-tint: #fdecec;
+  --danger-tint-hover: #fbdcdd;
+  --danger-border: #f3c0c2;
+  --warning: #9a6700;
+  --warning-tint: #fdf3e0;
+  --warning-border: #ecd4a3;
+
+  /* Surfaces. */
+  --surface: #ffffff;
+  --surface-raised: #ffffff;
+  --surface-sunken: var(--gray-50);
+  --bg: var(--surface);
+  --bg-muted: var(--gray-50);
+
+  /* Text. */
+  --text: var(--gray-900);
+  --text-secondary: var(--gray-700);
+  --muted: var(--gray-600);
+
+  /* Diff line tints (softer/desaturated) + accent stripes. */
+  --add-bg: #eaf6ee;
+  --add-stripe: #4caf6e;
+  --del-bg: #fdecec;
+  --del-stripe: #e0707a;
+  /* Deeper tints for the exact changed words within an add/del line. */
+  --add-word-bg: #b8e8c5;
+  --del-word-bg: #f7c2c8;
+  --select-bg: #fff6d6;
+
+  /* Dividers + borders (subtler than a hard 1px gray). */
+  --border: rgba(0, 0, 0, 0.09);
+  --border-strong: rgba(0, 0, 0, 0.14);
+
+  /* Radii. */
+  --radius-control: 6px;
+  --radius-card: 10px;
+  --radius-modal: 14px;
+  --radius-pill: 999px;
+
+  /* Spacing (4px grid). */
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-6: 24px;
+  --sp-8: 32px;
+
+  /* Shadows. */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.18);
+
+  /* Focus ring. */
+  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
+
+  /* Monospace stack. */
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* Type scale. */
+  --fs-caption: 12px;
+  --fs-secondary: 13px;
+  --fs-body: 14px;
+  --fs-subhead: 16px;
+  --fs-title: 20px;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: var(--fs-body);
+  line-height: 1.5;
+  color: var(--text);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+}
+
+code, .diff-lines, .file-name, .hunk-header code {
+  font-family: var(--mono);
+}
+
+/* Shared visible focus ring on every interactive element. */
+:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-control); }
+
+/* ── Icons ─────────────────────────────────────────────────────────── */
+.icon { display: inline-block; vertical-align: -0.125em; flex: none; }
+
+/* ── Unified button system ─────────────────────────────────────────── */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  font: inherit; font-size: var(--fs-secondary); font-weight: 500; line-height: 1;
+  padding: 6px 12px; border-radius: var(--radius-control); cursor: pointer;
+  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
+  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
+  white-space: nowrap;
+}
+.btn:hover:not(:disabled) { background: var(--gray-100); }
+.btn:active:not(:disabled) { background: var(--gray-200); }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
+.btn-primary:active:not(:disabled) { background: var(--accent-hover); }
+
+.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
+.btn-ghost:hover:not(:disabled) { background: var(--gray-100); color: var(--text); }
+
+.btn-danger { background: var(--surface); border-color: var(--danger-border); color: var(--danger); }
+.btn-danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }
+
+.btn-sm { padding: 3px 8px; font-size: var(--fs-caption); gap: 4px; }
+.btn-accent { border-color: var(--accent-border); color: var(--accent); }
+.btn-accent:hover:not(:disabled) { background: var(--accent-tint); }
+
+/* Toggle/pressed state for any button acting as a toggle. */
+.btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
+.btn[aria-pressed="true"]:hover:not(:disabled) { background: var(--accent-hover); }
+
+/* ── Form controls ─────────────────────────────────────────────────── */
+.input, .select, .textarea, input[type="text"], input[type="search"], select, textarea {
+  font: inherit; font-size: var(--fs-secondary); color: var(--text);
+  background: var(--surface); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-control); padding: 6px 10px;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+}
+input::placeholder, textarea::placeholder { color: var(--gray-500); }
+.input:focus, .select:focus, .textarea:focus,
+input[type="text"]:focus, input[type="search"]:focus, select:focus, textarea:focus {
+  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
+}
+textarea { resize: vertical; }
+
+/* Custom select chevron. */
+select {
+  appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23656d76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: right 8px center;
+}
+
+/* Custom checkboxes via accent-color + sizing. */
+input[type="checkbox"] {
+  accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; margin: 0;
+}
+
+/* Layout */
+.review { display: flex; flex-direction: column; height: 100vh; }
+.review-header {
+  display: flex; flex-direction: column; gap: var(--sp-3);
+  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
+/* Top row: PR identity + nav links on the left, actions pinned to the right. */
+.review-header-bar {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: var(--sp-4); flex-wrap: wrap;
+}
+.review-title { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
+.review-title-row { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
+.review-title-row strong { font-size: var(--fs-subhead); }
+.pr-subtitle { color: var(--muted); font-size: var(--fs-secondary); }
+.review-nav-link {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: var(--fs-caption); color: var(--accent); text-decoration: none; font-weight: 500;
+}
+.review-nav-link:hover { text-decoration: underline; }
+/* Base ← head branch line beneath the PR title, each name with a copy icon. */
+.pr-branches { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: var(--fs-caption); }
+.branch-name {
+  font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-caption);
+  color: var(--text); background: var(--gray-100); border: 1px solid var(--border);
+  border-radius: var(--radius-control); padding: 1px 6px;
+}
+.branch-arrow { color: var(--muted); padding: 0 2px; }
+/* Small ghost icon button used for inline copy-to-clipboard controls. */
+.icon-copy-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid transparent; border-radius: var(--radius-control);
+  background: transparent; color: var(--muted); cursor: pointer; padding: 3px;
+  transition: background 0.12s ease, color 0.12s ease; flex: none;
+}
+.icon-copy-btn:hover, .icon-copy-btn:focus-visible { background: var(--gray-100); color: var(--text); }
+/* Keep the "Open on GitHub" link and its copy button as a vertically-centered
+   unit, so the icon-only button lines up with the link text rather than the
+   (much taller) title line the row is baseline-aligned to. */
+.pr-link-group { display: inline-flex; align-items: center; gap: 4px; }
+.review-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+.review-action-group { display: flex; align-items: center; gap: var(--sp-2); }
+.review-action-divider { width: 1px; height: 22px; background: var(--border); }
+
+/* PR description body — rendered inside the right-rail description panel. */
+.pr-description-body { padding: var(--sp-3) var(--sp-4); }
+.pr-description-body h1 { font-size: var(--fs-subhead); margin: var(--sp-3) 0 var(--sp-2); }
+.pr-description-body h2 { font-size: var(--fs-body); margin: var(--sp-3) 0 var(--sp-2); }
+.pr-description-body h3, .pr-description-body h4 { font-size: var(--fs-secondary); margin: var(--sp-2) 0; }
+.review-body { display: flex; flex: 1; min-height: 0; }
+.sidebar {
+  width: 320px; flex: none; border-right: 1px solid var(--border);
+  display: flex; flex-direction: column; overflow: hidden;
+  background: var(--surface-sunken);
+  transition: width 0.15s ease;
+}
+/* Collapsed: a slim strip pinned at the left edge holding only the expand
+   button; the diff area widens to fill the reclaimed space. */
+.sidebar.collapsed { width: 30px; }
+/* Top row: the "View" heading and the collapse/expand chevron share one line,
+   so there is no empty band above the switches. */
+.sidebar-header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: var(--sp-3) var(--sp-3) var(--sp-2);
+}
+.sidebar-heading {
+  margin: 0; padding: 0 var(--sp-1);
+  font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--muted);
+}
+/* Collapsed strip: hide the heading, centre the (expand) chevron. */
+.sidebar.collapsed .sidebar-header { justify-content: center; padding: var(--sp-2) 0 0; }
+.sidebar.collapsed .sidebar-heading,
+.sidebar.collapsed .review-ring-group { display: none; }
+.sidebar-toggle {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px; padding: 0; border: none; border-radius: var(--radius-control);
+  background: transparent; color: var(--muted); cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.sidebar-toggle:hover, .sidebar-toggle:focus-visible { background: var(--gray-200); color: var(--text); }
+/* Hide the switches/filter/file-tree when collapsed without unmounting them
+   (so their state — filter text, switch positions — is preserved). */
+.sidebar-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
+.sidebar.collapsed .sidebar-content { display: none; }
+.diff-area { flex: 1; overflow: auto; padding: 0 var(--sp-4) var(--sp-4); }
+
+/* Toolbar — the "View" group of visibility toggle switches. Sits directly under
+   the sidebar header row, so it carries no top padding of its own. */
+.toolbar {
+  display: flex; flex-direction: column; gap: var(--sp-1);
+  padding: 0 var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); font-size: var(--fs-secondary);
+}
+
+/* Switch: a label on the left + an iOS-style on/off pill on the right. */
+.switch-row {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
+  cursor: pointer; padding: 4px var(--sp-1); border-radius: var(--radius-control);
+  color: var(--text-secondary);
+}
+.switch-row:hover { background: var(--gray-100); color: var(--text); }
+.switch-label { user-select: none; }
+/* The native checkbox is visually hidden but stays in the layout/focus order. */
+.switch-input {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
+  border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
+}
+.switch-track {
+  flex: none; position: relative; width: 34px; height: 20px; border-radius: var(--radius-pill);
+  background: var(--gray-300); transition: background 0.12s ease;
+}
+.switch-knob {
+  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
+  background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 0.12s ease;
+}
+.switch-input:checked + .switch-track { background: var(--accent); }
+.switch-input:checked + .switch-track .switch-knob { transform: translateX(14px); }
+/* Project the shared focus ring onto the track when the input is keyboard-focused. */
+.switch-input:focus-visible + .switch-track { box-shadow: var(--ring); }
+
+/* The whitespace switch is wrapped in a hover tooltip; make that wrapper a
+   full-width block so the switch row's label + pill still justify across the
+   sidebar (an inline wrapper would collapse to content width and mis-align it). */
+.tooltip-wrap.tooltip-block { display: block; }
+
+/* "More filters" — the two less-used View filters live in a popover so the
+   group stays compact. The button carries a count badge when any are active. */
+.more-filters { position: relative; }
+.more-filters-btn {
+  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
+  padding: 4px var(--sp-1); border: none; background: transparent; cursor: pointer;
+  color: var(--text-secondary); font: inherit; font-size: var(--fs-secondary);
+  border-radius: var(--radius-control);
+}
+.more-filters-btn:hover { background: var(--gray-100); color: var(--text); }
+.more-filters-btn > span:first-child { flex: 1; text-align: left; }
+.more-filters-btn svg { color: var(--muted); }
+.more-filters-badge {
+  background: var(--accent); color: #fff; font-size: 11px; font-weight: 600;
+  min-width: 16px; text-align: center; padding: 0 5px; border-radius: var(--radius-pill);
+}
+.more-filters-pop {
+  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0;
+  background: var(--surface); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-card); box-shadow: var(--shadow-raised); padding: var(--sp-1);
+}
+
+/* Review progress — replaces the "View" section heading with a ring gauge whose
+   fill grows as hunks are reviewed, wrapping the count of hunks still *left*.
+   Counts viewed hunks against all hunks in the on-screen range; at 100% it turns
+   green with a check. */
+.review-ring-group { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
+.review-ring { position: relative; width: 34px; height: 34px; flex: none; }
+.review-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
+.review-ring-track { fill: none; stroke: var(--gray-200); }
+.review-ring-fill {
+  fill: none; stroke: var(--accent); stroke-linecap: round;
+  transition: stroke-dashoffset 0.25s ease, stroke 0.2s ease;
+}
+.review-ring.done .review-ring-fill { stroke: var(--success); }
+.review-ring-num {
+  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+  font-size: var(--fs-secondary); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
+}
+.review-ring.done .review-ring-num { color: var(--success); }
+.review-ring-caption { font-size: var(--fs-caption); color: var(--muted); line-height: 1.2; }
+
+/* Range selector — summary chip + popover panel with commit rail */
+.range-selector { position: relative; font-size: var(--fs-secondary); }
+.range-chip {
+  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; max-width: 420px;
+  border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-pill);
+  padding: 5px 12px; font-size: var(--fs-caption); color: var(--text);
+}
+.range-chip:hover { background: var(--gray-100); }
+.range-chip-coverage { font-weight: 600; white-space: nowrap; flex: none; }
+.range-chip-sep { color: var(--muted); flex: none; }
+.range-chip-subject { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chip-caret { color: var(--muted); display: inline-flex; flex: none; }
+
+.range-panel {
+  position: absolute; right: 0; top: 38px; z-index: 20; width: 480px; max-width: 84vw;
+  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-card);
+  box-shadow: var(--shadow-modal); padding: var(--sp-3);
+}
+.range-panel-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
+.range-caption { margin: var(--sp-3) 0 0; font-size: var(--fs-caption); color: var(--muted); line-height: 1.5; }
+.range-caption code { background: var(--gray-100); padding: 1px 4px; border-radius: 4px; }
+/* Truncate long commit subjects in the caption so the panel keeps its width. */
+.range-caption-subject {
+  color: var(--text-secondary); font-style: italic;
+  display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
+  white-space: nowrap; vertical-align: bottom;
+}
+.reviewed-count { color: var(--muted); font-size: var(--fs-caption); }
+.range-reviewed-badge {
+  display: inline-flex; align-items: center; gap: 5px;
+  color: var(--success); font-weight: 600; font-size: var(--fs-secondary);
+  background: var(--success-tint); border: 1px solid var(--success-border);
+  border-radius: var(--radius-control); padding: 5px 10px; cursor: pointer;
+}
+.range-reviewed-badge:hover { background: var(--success-tint-hover); }
+
+/* Commit rail */
+.rail-hint { margin: 0 0 var(--sp-2); font-size: var(--fs-caption); color: var(--muted); }
+.rail-base { font-size: var(--fs-caption); color: var(--muted); padding: 2px 8px; }
+.rail-list {
+  list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto;
+  border-left: 2px solid var(--border);
+}
+.rail-row {
+  display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
+  border: none; background: none; cursor: pointer; padding: 6px 8px; font-size: var(--fs-caption);
+  border-left: 3px solid transparent; margin-left: -2px; border-radius: 0 var(--radius-control) var(--radius-control) 0;
+}
+.rail-row:hover { background: var(--gray-100); }
+.rail-row.in-range { background: var(--accent-tint); border-left-color: var(--accent); }
+.rail-row.range-start, .rail-row.range-end { font-weight: 600; }
+.rail-sha { color: var(--accent); }
+.rail-subject { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rail-time { color: var(--muted); font-variant-numeric: tabular-nums; }
+
+/* File tree */
+.file-tree { overflow: auto; flex: 1; }
+.file-search-wrap { position: relative; margin: var(--sp-3); }
+.file-search-wrap .icon {
+  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
+  color: var(--gray-500); pointer-events: none;
+}
+/* Higher-specificity selector so the icon-clearing left padding wins over the
+   base input padding shorthand (input[type="search"], 0,1,1). */
+.file-search-wrap .file-search { width: 100%; padding: 6px 10px 6px 30px; }
+.file-tree ul { list-style: none; margin: 0; padding: 0 var(--sp-2) var(--sp-2); }
+.file-item a {
+  display: flex; align-items: center; gap: var(--sp-2); padding: 6px 8px; border-radius: var(--radius-control);
+  text-decoration: none; color: var(--text); font-size: var(--fs-caption);
+}
+.file-item a:hover { background: var(--gray-100); }
+.file-item.viewed a { color: var(--muted); }
+.file-flag { width: 14px; display: inline-flex; color: var(--success); flex: none; }
+.file-status-icon { display: inline-flex; flex: none; }
+.file-status-icon.added { color: var(--success); }
+.file-status-icon.modified { color: var(--warning); }
+.file-status-icon.deleted { color: var(--danger); }
+.file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file-hunkcount {
+  color: var(--muted); font-size: 11px; background: var(--gray-100);
+  border-radius: var(--radius-pill); padding: 1px 7px; min-width: 20px; text-align: center;
+}
+
+/* File sections + hunks */
+.file-section { margin-bottom: var(--sp-8); }
+/* Height is coupled to `.hunk-header { top: … }` below — the hunk header pins
+   directly beneath the file heading, so the two values must stay equal. */
+.file-heading {
+  font-size: var(--fs-body); font-weight: 600; height: 32px; box-sizing: border-box; margin: 0; padding: 0 var(--sp-2);
+  display: flex; align-items: center; gap: var(--sp-2);
+  border-bottom: 1px solid var(--border); background: var(--surface);
+  position: sticky; top: 0; z-index: 3;
+}
+.file-heading small { color: var(--muted); font-weight: normal; font-size: var(--fs-caption); }
+/* Group the file-heading actions so only their button padding separates them —
+   the flex gap would otherwise double the space between two ghost buttons. */
+.file-heading-actions { display: inline-flex; align-items: center; gap: 0; }
+/* Clip the card to its rounded shape with `clip-path` rather than
+   `overflow: hidden`. An overflow clip on a sticky element's scroll-ancestor
+   breaks `position: sticky` (the hunk header would stop pinning), but
+   `clip-path` only clips painting — it leaves sticky positioning intact. This
+   clips every descendant (change tint + the left accent stripe, both of which
+   have square corners) to the card's radius, so no change-color leaks at any
+   corner. The header keeps SQUARE corners so that, while pinned mid-scroll, it
+   fully occludes the diff rows behind it (a rounded header corner would be
+   transparent and reveal a sliver of the row's tint underneath). */
+.hunk-card {
+  border: 1px solid var(--border); border-radius: var(--radius-card); margin: var(--sp-3) 0;
+  background: var(--surface); box-shadow: var(--shadow-card);
+  clip-path: inset(0 round var(--radius-card));
+}
+.hunk-card.viewed { background: var(--surface-sunken); }
+.hunk-card.viewed .hunk-header { background: var(--surface-sunken); }
+.hunk-header {
+  display: flex; align-items: center; gap: var(--sp-2);
+  background: var(--surface-sunken); padding: 6px 10px; font-size: var(--fs-caption);
+  border-bottom: 1px solid var(--border);
+  /* `top` must equal `.file-heading` height so this pins flush beneath it. */
+  position: sticky; top: 32px; z-index: 2;
+}
+.hunk-collapse {
+  border: none; background: none; cursor: pointer; color: var(--muted); padding: 2px;
+  display: inline-flex; align-items: center; border-radius: 4px;
+}
+.hunk-collapse:hover { background: var(--gray-200); color: var(--text); }
+.hunk-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-family: var(--mono); }
+
+/* Hunk-header actions: icon-only. Labels are shown as a near-instant tooltip
+   (see .tooltip below), not an expanding pill. */
+.hunk-actions { display: inline-flex; align-items: center; gap: 2px; flex: none; }
+.hunk-action {
+  position: relative; display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid transparent; border-radius: var(--radius-control);
+  background: transparent; color: var(--text-secondary); cursor: pointer;
+  padding: 4px; font-size: var(--fs-caption);
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.hunk-action:hover, .hunk-action:focus-visible { background: var(--gray-100); color: var(--text); }
+.hunk-viewed {
+  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap;
+  font-size: var(--fs-caption); color: var(--text-secondary);
+}
+.hunk-card.viewed .hunk-viewed { color: var(--success); font-weight: 500; }
+
+/* Diff lines */
+.diff-lines { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 1.55; }
+.diff-lines td { padding: 1px 8px; vertical-align: top; white-space: pre-wrap; }
+.diff-lines .gutter { color: var(--gray-500); text-align: right; user-select: none; width: 1%; padding: 1px 6px; }
+.diff-lines .marker { user-select: none; width: 1ch; padding-left: 4px; padding-right: 0; color: var(--gray-500); }
+.line-add { background: var(--add-bg); box-shadow: inset 3px 0 0 var(--add-stripe); }
+.line-add .marker { color: var(--success); }
+.line-del { background: var(--del-bg); box-shadow: inset 3px 0 0 var(--del-stripe); }
+.line-del .marker { color: var(--danger); }
+.line.selected { background: var(--select-bg); }
+.diff-lines.dragging { user-select: none; cursor: crosshair; }
+
+/* Word-level (intra-line) change highlight, layered over the line background. */
+mark.diff-word { background: none; color: inherit; border-radius: 2px; }
+.line-add mark.diff-word, .split-add mark.diff-word { background: var(--add-word-bg); }
+.line-del mark.diff-word, .split-del mark.diff-word { background: var(--del-word-bg); }
+
+/* Comments */
+.line-act { width: 22px; padding: 0; text-align: center; }
+.add-comment {
+  opacity: 0; border: none; background: var(--accent); color: #fff; cursor: pointer;
+  border-radius: 5px; width: 17px; height: 17px; line-height: 1; font-size: 13px; padding: 0;
+  transition: opacity 0.1s ease, transform 0.1s ease;
+}
+.add-comment:hover { transform: scale(1.1); }
+.line:hover .add-comment { opacity: 1; }
+/* Comment rows / hunk-level comments sit ABOVE the sticky hunk header
+   (z-index 2) so an open composer, edit field, post popover, or an existing
+   comment's meta row is never painted over when scrolled mid-hunk. */
+.comment-row { position: relative; z-index: 3; scroll-margin-top: 88px; }
+.comment-row td { background: var(--surface-sunken); padding: var(--sp-2) var(--sp-3) !important; }
+.comment-item {
+  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface);
+  padding: var(--sp-2) var(--sp-3); margin: var(--sp-1) 0; box-shadow: var(--shadow-sm);
+}
+.hunk-level-comment { position: relative; z-index: 3; padding: var(--sp-2) var(--sp-3); background: var(--surface); }
+.comment-meta { display: flex; align-items: center; gap: var(--sp-2); font-size: 11px; color: var(--muted); margin-bottom: var(--sp-1); flex-wrap: wrap; }
+.comment-tools { margin-left: auto; display: flex; gap: 4px; align-items: center; }
+.comment-body { font-size: var(--fs-secondary); }
+.comment-body p { margin: var(--sp-1) 0; }
+.comment-body pre {
+  background: var(--surface-sunken); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-control);
+  overflow-x: auto; border: 1px solid var(--border); font-size: var(--fs-caption);
+}
+.comment-body pre code { white-space: pre; }
+.comment-body code:not(pre code) { background: var(--gray-100); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
+.comment-composer { display: flex; flex-direction: column; gap: var(--sp-2); }
+.comment-textarea { width: 100%; min-height: 72px; font-family: inherit; }
+.comment-actions { display: flex; gap: var(--sp-2); }
+
+.notice { color: var(--muted); font-style: italic; font-size: var(--fs-secondary); }
+
+.file-heading-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+
+/* Modal + full-file split view */
+.modal-overlay {
+  position: fixed; inset: 0; background: rgba(23, 25, 28, 0.45); backdrop-filter: blur(1px);
+  display: flex; align-items: center; justify-content: center; z-index: 100;
+}
+.modal {
+  background: var(--surface); border-radius: var(--radius-modal); box-shadow: var(--shadow-modal);
+  display: flex; flex-direction: column; overflow: hidden;
+}
+.modal.full-file { width: 94vw; height: 90vh; }
+.modal-header {
+  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
+  border-bottom: 1px solid var(--border); background: var(--surface);
+}
+.modal-header strong { font-size: var(--fs-subhead); }
+.modal-title-strong { display: inline-flex; align-items: center; gap: 6px; }
+.modal-header-spacer { flex: 1; }
+.modal-title {
+  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2);
+  font-family: var(--mono); font-size: var(--fs-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.modal-title .icon { color: var(--muted); }
+.modal-close {
+  border: none; background: none; cursor: pointer; color: var(--muted);
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 30px; height: 30px; border-radius: var(--radius-control); flex: none;
+}
+.modal-close:hover { background: var(--gray-100); color: var(--text); }
+.split-base-head {
+  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption);
+  color: var(--muted); font-family: var(--mono);
+}
+.split-base-head code { background: var(--gray-100); padding: 1px 5px; border-radius: 4px; }
+.split-labels { display: flex; gap: 0; color: var(--muted); font-size: var(--fs-caption); border-bottom: 1px solid var(--border); background: var(--surface-sunken); }
+.split-labels span { flex: 1; text-align: center; padding: 5px 0; font-weight: 500; }
+.split-labels span:first-child { border-right: 1px solid var(--border); }
+/* The navigator's code-frame wrapper must be a constrained flex child so the
+   file/diff body inside it scrolls instead of overflowing the fixed-height
+   modal (which clips via overflow:hidden). */
+.nav-code { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+/* Non-current navigator frames stay mounted (so their scroll survives
+   Back/Forward) but are hidden. */
+.nav-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.nav-code.hidden, .nav-slot.hidden { display: none; }
+.full-file-body { overflow: auto; flex: 1; }
+.split-table { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 1.55; table-layout: fixed; }
+.split-table td { padding: 1px 8px; vertical-align: top; white-space: pre-wrap; word-break: break-all; }
+.split-table td.split-code:first-of-type, .split-no:first-child { border-right: 1px solid var(--border); }
+.split-no { width: 48px; text-align: right; color: var(--gray-500); user-select: none; }
+.split-code { font-family: var(--mono); }
+.split-del { background: var(--del-bg); box-shadow: inset 3px 0 0 var(--del-stripe); }
+.split-add { background: var(--add-bg); box-shadow: inset 3px 0 0 var(--add-stripe); }
+.split-empty { background: var(--surface-sunken); }
+/* One-shot highlight of the anchored change on open, then fade out (mirrors
+   the in-diff comment-flash). Leaves no persistent box once faded. */
+@keyframes split-anchor-fade {
+  from { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-tint); }
+  to { box-shadow: inset 0 0 0 2px transparent; background: transparent; }
+}
+.split-anchor td { animation: split-anchor-fade 1.1s ease-out; }
+/* Centered placeholder for an empty base/head (added/deleted file). */
+.modal-empty-side {
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
+  min-height: 240px; color: var(--muted); text-align: center; padding: var(--sp-8);
+}
+.modal-empty-side .icon { color: var(--gray-400); }
+
+/* All-comments view */
+.all-comments {
+  padding: var(--sp-6); max-width: 900px; margin: 0 auto;
+  display: flex; flex-direction: column; gap: var(--sp-4);
+}
+.all-comments-header { display: flex; flex-direction: column; gap: var(--sp-2); }
+.all-comments-header h1 { font-size: var(--fs-title); margin: 0; }
+.all-comments-header a { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); color: var(--accent); text-decoration: none; align-self: flex-start; }
+.all-comments-header a:hover { text-decoration: underline; }
+.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
+.comment-list-item {
+  border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--sp-3) var(--sp-4);
+  background: var(--surface); box-shadow: var(--shadow-card);
+}
+.comment-list-meta { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--muted); flex-wrap: wrap; }
+.comment-list-body { margin: var(--sp-2) 0; font-size: var(--fs-secondary); }
+.comment-list-actions { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-caption); }
+.comment-edit { margin: var(--sp-2) 0; }
+.comment-edit .comment-textarea { width: 100%; min-height: 64px; }
+.comment-edit-actions { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-caption); margin-top: var(--sp-1); }
+.badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 1px 9px;
+  font-size: 11px; font-weight: 500; white-space: nowrap;
+}
+.badge.posted, .badge.origin-posted { background: var(--success-tint); border-color: var(--success-border); color: var(--success); }
+.badge.origin-local { background: var(--gray-100); border-color: var(--border); color: var(--muted); }
+.badge.origin-github { background: var(--accent-tint); border-color: var(--accent-border); color: var(--accent); }
+.comment-author { font-weight: 600; color: var(--text); }
+.reply-count { color: var(--muted); font-style: italic; }
+
+/* Disclosure (<details>) with an SVG chevron instead of the native marker. */
+.disclosure > summary {
+  list-style: none; cursor: pointer;
+  display: flex; align-items: flex-start; gap: 6px;
+}
+.disclosure > summary::-webkit-details-marker { display: none; }
+.disclosure-chevron {
+  flex: none; margin-top: 2px; color: var(--muted);
+  transition: transform 0.12s ease;
+}
+.disclosure[open] > summary > .disclosure-chevron { transform: rotate(90deg); }
+
+/* Right icon rail (always visible, pinned to the right edge of the review). */
+.right-rail {
+  flex: none; width: 48px; display: flex; flex-direction: column; gap: var(--sp-1);
+  align-items: center; padding: var(--sp-2) 0; border-left: 1px solid var(--border);
+  background: var(--surface);
+}
+/* Icon-only rail buttons (fixed 34x34 slot). Labels are shown as a near-instant
+   tooltip (see .tooltip below), not an expanding pill. */
+.rail-item { position: relative; }
+.rail-btn {
+  position: relative; width: 34px; height: 34px; display: inline-flex;
+  align-items: center; justify-content: center; box-sizing: border-box;
+  border: 1px solid transparent; border-radius: var(--radius-control);
+  background: none; color: var(--text-secondary); cursor: pointer;
+  padding: 0; transition: background 0.12s ease, color 0.12s ease;
+}
+.rail-btn:hover, .rail-btn:focus-visible { background: var(--gray-100); color: var(--text); }
+.rail-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
+.rail-btn.active:hover, .rail-btn.active:focus-visible {
+  background: var(--accent); border-color: var(--accent); color: #fff;
+}
+
+/* Shared near-instant tooltip (portaled to <body>, so no ancestor clip-path or
+   overflow can clip it). Dark pill, white text; appears on hover/focus with no
+   show-delay and only a tiny fade; hidden immediately on mouse-out/blur (the
+   element is unmounted, so hide is instant). Positioned via inline left/top from
+   JS; `transform` places the bubble relative to that anchor point per side. */
+.tooltip-wrap { display: inline-flex; }
+.tooltip {
+  position: fixed; z-index: 100; pointer-events: none;
+  background: var(--gray-900); color: #fff; border-radius: var(--radius-control);
+  padding: 4px 8px; font-size: var(--fs-caption); font-weight: 500; line-height: 1.3;
+  white-space: nowrap; box-shadow: var(--shadow-raised);
+  animation: tooltip-fade-in 0.04s ease-out;
+}
+/* Placed to the LEFT of the trigger: bubble's right edge sits at the anchor x,
+   vertically centered on the anchor y. */
+.tooltip-left { transform: translate(-100%, -50%); }
+/* Placed BELOW the trigger: horizontally centered on the anchor x, top at y. */
+.tooltip-bottom { transform: translateX(-50%); }
+@keyframes tooltip-fade-in { from { opacity: 0; } to { opacity: 1; } }
+/* Miniature notification-style count bubble, anchored to the icon square so it
+   stays pinned to the icon's top-right in both rest and expanded states. */
+.rail-badge {
+  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px;
+  padding: 0 4px; box-sizing: border-box; border-radius: var(--radius-pill);
+  background: var(--accent); color: #fff; border: 1.5px solid var(--surface);
+  font-size: 10px; font-weight: 600; line-height: 13px; text-align: center; z-index: 1;
+}
+.rail-btn.active .rail-badge { background: #fff; color: var(--accent); border-color: var(--accent); }
+
+/* The rail's expandable sidebar (pushes the diff aside, no overlay). */
+.rail-sidebar {
+  width: 440px; flex: none; border-left: 1px solid var(--border);
+  display: flex; flex-direction: column; overflow: hidden;
+  background: var(--surface-sunken); position: relative;
+}
+.rail-sidebar[hidden] { display: none; }
+.rail-sidebar-header {
+  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
+  border-bottom: 1px solid var(--border); background: var(--surface);
+}
+.rail-sidebar-header strong { flex: 1; font-size: var(--fs-subhead); }
+.rail-sidebar-body { flex: 1; min-height: 0; display: flex; }
+/* Each surface fills the body; inactive ones are display:none (hidden attr) but
+   stay mounted so their scroll position and internal state survive tab switches
+   and collapse→reopen. */
+.rail-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; }
+.rail-panel[hidden] { display: none; }
+
+/* Comments surface, hosted inside a rail panel. */
+.comments-panel-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.comments-panel-count { padding: var(--sp-2) var(--sp-3) 0; }
+.comments-panel-filters {
+  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
+  padding: var(--sp-3); border-bottom: 1px solid var(--border); background: var(--surface); font-size: var(--fs-caption);
+}
+.comments-panel-filters label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
+.comments-panel-filters select { max-width: 150px; }
+
+/* AI-reviews list, hosted inside a rail panel. */
+.ai-reviews-list { padding: var(--sp-3); }
+
+/* Segmented control (a row of mutually-exclusive choices). */
+.segmented {
+  display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-control);
+  overflow: hidden; background: var(--surface);
+}
+.segmented-item {
+  font: inherit; font-size: var(--fs-caption); color: var(--text-secondary);
+  border: none; background: none; padding: 4px 10px; cursor: pointer;
+  border-left: 1px solid var(--border); transition: background 0.12s ease, color 0.12s ease;
+}
+.segmented-item:first-child { border-left: none; }
+.segmented-item:hover:not(.active) { background: var(--gray-100); }
+.segmented-item.active { background: var(--accent); color: #fff; }
+/* When pills are wrapped in the hover Tooltip (`.tooltip-wrap`), the wrapper —
+   not the button — is the flex child, so carry the divider seam on it. */
+.segmented > .tooltip-wrap { border-left: 1px solid var(--border); }
+.segmented > .tooltip-wrap:first-child { border-left: none; }
+.comments-panel-content .comment-list { overflow: auto; flex: 1; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
+.comments-panel-content .comment-list-item { background: var(--surface); }
+.comments-panel-content .comment-list-meta code {
+  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  background: var(--gray-100); padding: 1px 5px; border-radius: 4px;
+}
+.comment-jump {
+  display: block; width: 100%; text-align: left; border: none; background: none;
+  padding: 0; margin: 0; cursor: pointer; font: inherit;
+}
+.comment-jump:hover .comment-list-meta code { text-decoration: underline; }
+
+/* Transient highlight when scrolling to a comment from the panel */
+@keyframes comment-flash-fade {
+  from { background: #fff3bf; box-shadow: 0 0 0 3px #ffe066; }
+  to { background: transparent; box-shadow: 0 0 0 3px transparent; }
+}
+.comment-flash { animation: comment-flash-fade 1.8s ease-out; border-radius: var(--radius-card); }
+
+/* Out-of-range confirmation popover inside the comments panel */
+.oor-prompt {
+  position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); z-index: 5;
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
+  box-shadow: var(--shadow-raised); padding: var(--sp-3) var(--sp-4);
+}
+.oor-text { margin: 0 0 var(--sp-3); font-size: var(--fs-caption); line-height: 1.5; }
+.oor-text code { background: var(--gray-100); padding: 1px 4px; border-radius: 4px; }
+.oor-actions { display: flex; align-items: center; gap: var(--sp-3); }
+.oor-open { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); color: var(--accent); text-decoration: none; }
+.oor-open:hover { text-decoration: underline; }
+
+/* GitHub threads */
+.post-menu { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+.post-menu-hint { font-size: 11px; color: var(--muted); }
+.post-busy { font-size: 11px; color: var(--muted); font-style: italic; }
+.post-warning { color: var(--warning); font-size: 11px; }
+
+.gh-thread {
+  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-card);
+  background: var(--surface); padding: var(--sp-2) var(--sp-3); margin: var(--sp-1) 0; box-shadow: var(--shadow-sm);
+}
+.gh-thread-tag {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); margin-bottom: var(--sp-1); font-weight: 600;
+}
+.gh-comment { border-top: 1px solid var(--border); padding-top: var(--sp-2); margin-top: var(--sp-2); }
+.gh-comment:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
+.gh-comment .comment-meta strong { color: var(--text); }
+
+/* Symbol lookup menu + panel */
+.symbol-menu {
+  position: fixed; z-index: 120; display: inline-flex; align-items: center; gap: var(--sp-2);
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
+  box-shadow: var(--shadow-raised); padding: 5px 8px; font-size: var(--fs-caption);
+}
+.symbol-menu-term { background: var(--gray-100); padding: 2px 6px; border-radius: 4px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
+.symbol-menu-side { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; }
+.symbol-menu-side button { border: none; background: var(--surface); font: inherit; font-size: var(--fs-caption); padding: 3px 9px; cursor: pointer; color: var(--text-secondary); }
+.symbol-menu-side button:hover { background: var(--gray-100); }
+.symbol-menu-side button.active { background: var(--accent); color: #fff; }
+
+.symbol-side-tag { font-size: 10px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 1px 8px; }
+.symbol-panel-close {
+  border: none; background: none; cursor: pointer; color: var(--muted);
+  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-control); flex: none;
+}
+.symbol-panel-close:hover { background: var(--gray-100); color: var(--text); }
+
+/* Search rail tab: controls + shared results list. */
+.search-rail-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.search-rail-controls {
+  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3);
+  border-bottom: 1px solid var(--border); background: var(--surface);
+}
+.search-rail-query { width: 100%; }
+.search-rail-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: var(--fs-caption); }
+.search-rail-run { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+.search-rail-stale { font-size: var(--fs-caption); color: var(--accent); }
+
+.results-list { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.results-list:focus { outline: none; }
+.results-header {
+  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
+  font-size: var(--fs-caption); border-bottom: 1px solid var(--border); background: var(--surface);
+}
+.results-header strong { font-size: var(--fs-subhead); }
+.results-header code { overflow: hidden; text-overflow: ellipsis; background: var(--gray-100); padding: 1px 5px; border-radius: 4px; }
+.results-count { margin-left: auto; color: var(--muted); }
+.results-scope { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
+.results-scope code { background: var(--gray-100); padding: 1px 5px; border-radius: 4px; }
+/* Always-on usages caveat under the results header. */
+.results-note {
+  display: flex; align-items: center; gap: 6px; margin: 0;
+  padding: var(--sp-1) var(--sp-3); font-size: var(--fs-caption); color: var(--muted);
+  background: var(--surface-sunken); border-bottom: 1px solid var(--border);
+}
+.results-note-info {
+  display: inline-flex; align-items: center; padding: 0; border: 0; background: none;
+  color: var(--muted); cursor: help;
+}
+.results-note-info:hover { color: var(--accent); }
+.results-filters {
+  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
+  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); font-size: var(--fs-caption);
+}
+.results-filters input[type="text"] { flex: 1; min-width: 90px; }
+.results-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
+.results-error { color: var(--danger); }
+.results-items { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
+.results-item { border-bottom: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); }
+.results-item.focused { background: var(--accent-tint); }
+.results-item-loc { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); margin-bottom: var(--sp-1); }
+.results-item-loc code { overflow: hidden; text-overflow: ellipsis; }
+.results-item-scope {
+  font-size: 10px; color: var(--muted); border: 1px solid var(--border);
+  border-radius: var(--radius-pill); padding: 1px 7px; white-space: nowrap; margin-left: auto;
+}
+
+/* Compact code preview (definition body or before/matched/after context). */
+.code-preview {
+  border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 11px;
+  line-height: 1.5; table-layout: fixed; background: var(--surface);
+  border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden;
+}
+.code-preview td { padding: 0 8px; vertical-align: top; white-space: pre-wrap; word-break: break-all; }
+.code-preview-no { width: 44px; text-align: right; color: var(--muted); user-select: none; border-right: 1px solid var(--border); }
+.code-preview-line.matched { background: var(--accent-tint); }
+.code-preview-line.matched .code-preview-no { color: var(--accent); font-weight: 600; }
+
+/* AI chat panel */
+.chat-panel { width: 420px; border-left: 1px solid var(--border); display: flex; flex-direction: column; background: var(--surface-sunken); }
+.chat-panel-header { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--border); background: var(--surface); }
+.chat-panel-header strong { display: inline-flex; align-items: center; gap: 5px; }
+.chat-scope { flex: 1; font-size: var(--fs-caption); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-controls { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--border); }
+.chat-controls select { flex: 1; }
+.chat-transcript { flex: 1; overflow: auto; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); scroll-behavior: smooth; }
+.chat-msg { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--sp-2) var(--sp-3); background: var(--surface); box-shadow: var(--shadow-sm); }
+.chat-user { background: var(--accent-tint); border-color: var(--accent-border); align-self: flex-end; max-width: 92%; }
+.chat-assistant { align-self: flex-start; max-width: 98%; }
+.chat-msg-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
+.chat-role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
+.chat-time { font-size: 10px; color: var(--muted); }
+.chat-copy { margin-left: auto; opacity: 0; transition: opacity 0.12s; }
+.chat-msg:hover .chat-copy { opacity: 1; }
+.chat-error { color: var(--danger); }
+.chat-msg .comment-body pre { overflow-x: auto; }
+
+/* "Agent is working" indicator */
+.chat-working { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--muted); margin-top: var(--sp-2); }
+.chat-working-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-elapsed { font-variant-numeric: tabular-nums; font-size: 11px; opacity: 0.8; }
+.chat-spinner { width: 12px; height: 12px; border: 2px solid var(--gray-300); border-top-color: var(--accent); border-radius: 50%; animation: chat-spin 0.7s linear infinite; flex: none; }
+@keyframes chat-spin { to { transform: rotate(360deg); } }
+.chat-input { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--border); background: var(--surface); }
+.chat-input button { align-self: flex-end; }
+.chat-artifacts { border-top: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); background: var(--surface); font-size: var(--fs-caption); }
+.chat-artifacts ul { list-style: none; margin: var(--sp-1) 0 0; padding: 0; }
+.chat-artifacts a { color: var(--accent); text-decoration: none; }
+
+/* AI review modal */
+.ai-review-modal { width: 820px; max-width: 92vw; max-height: 88vh; }
+.ai-review-body { overflow: auto; padding: var(--sp-4) var(--sp-6); }
+.ai-review-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
+.ai-review-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-caption); color: var(--muted); }
+.ai-review-form select { align-self: flex-start; min-width: 240px; }
+.ai-review-form button { align-self: flex-start; }
+.ai-review-past { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
+.ai-review-item { margin: var(--sp-2) 0; }
+.ai-review-item summary { cursor: pointer; font-size: var(--fs-caption); color: var(--muted); }
+.ai-review-running { display: flex; align-items: center; gap: var(--sp-2); font-style: normal; }
+
+/* App-level AI-review progress indicator in the header. */
+.ai-indicator {
+  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: var(--fs-caption);
+  font-weight: 500; padding: 5px 10px; border-radius: var(--radius-pill); white-space: nowrap;
+  border: 1px solid transparent;
+}
+button.ai-indicator { cursor: pointer; }
+.ai-indicator-running { background: var(--accent-tint); border-color: var(--accent-border); color: var(--accent); }
+.ai-indicator-done { background: var(--success-tint); border-color: var(--success-border); color: var(--success); }
+.ai-indicator-done:hover { background: var(--success-tint-hover); }
+.ai-indicator-failed { background: var(--danger-tint); border-color: var(--danger-border); color: var(--danger); }
+.ai-indicator-failed:hover { background: var(--danger-tint-hover); }
+.ai-indicator .chat-spinner { width: 12px; height: 12px; }
+
+/* Inline confirm (destructive actions) */
+.confirm-inline { display: inline-flex; align-items: center; gap: var(--sp-2); }
+.confirm-warn { color: var(--warning); font-size: 11px; }
+
+/* Stale (force-push) indication */
+.badge.stale { background: var(--warning-tint); border-color: var(--warning-border); color: var(--warning); }
+.reviewed-list { list-style: none; margin: var(--sp-3) 0 0; padding: var(--sp-2) 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-1); }
+.reviewed-list li { display: flex; align-items: center; gap: var(--sp-2); }
+.reviewed-range { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-control); padding: 3px 9px; cursor: pointer; font-size: var(--fs-caption); }
+.reviewed-range:hover:not(:disabled) { background: var(--gray-100); }
+.reviewed-range:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: line-through; }
+
+/* ── Landing / PR list ─────────────────────────────────────────────── */
+.landing { max-width: 760px; margin: 0 auto; padding: 56px var(--sp-6) var(--sp-8); }
+.landing-brand { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
+.landing-wordmark { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
+.landing-mark {
+  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
+  border-radius: 9px; background: var(--accent); color: #fff;
+}
+.landing-tagline { color: var(--muted); margin: 0 0 var(--sp-6); font-size: var(--fs-subhead); }
+.pr-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
+.pr-card {
+  display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4);
+  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface);
+  box-shadow: var(--shadow-card); text-decoration: none; color: var(--text);
+  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
+}
+.pr-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-raised); }
+.pr-card:active { transform: translateY(1px); }
+.pr-card-meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); color: var(--muted); }
+.pr-card-repo { font-family: var(--mono); }
+.pr-card-num { color: var(--accent); font-weight: 600; }
+.pr-card-title { font-size: var(--fs-subhead); font-weight: 600; }
+.pr-card-author { font-size: var(--fs-caption); color: var(--muted); }
+
+/* ── PR picker (home + Switch-PR modal) ────────────────────────────── */
+.picker { display: flex; flex-direction: column; gap: var(--sp-4); }
+.picker-url { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
+.picker-url-input { flex: 1; min-width: 240px; }
+.picker-url-error { flex-basis: 100%; margin: 0; font-size: var(--fs-caption); color: var(--danger); }
+.picker-filter { position: relative; display: flex; align-items: center; }
+.picker-filter .icon { position: absolute; left: 9px; color: var(--gray-500); pointer-events: none; }
+.picker-filter .picker-filter-input { width: 100%; padding: 6px 10px 6px 30px; }
+.picker-section { display: flex; flex-direction: column; gap: var(--sp-2); }
+.picker-section-head { display: flex; align-items: center; justify-content: space-between; }
+.picker-section-title {
+  margin: 0; font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: var(--muted);
+}
+.pr-chip {
+  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px;
+  font-size: 11px; font-weight: 600; background: var(--gray-100); color: var(--text-secondary);
+  border: 1px solid var(--border);
+}
+.pr-chip-draft { background: var(--gray-200); color: var(--muted); }
+.pr-chip-current { background: var(--accent-soft, var(--gray-100)); color: var(--accent); border-color: var(--accent-border); }
+.pr-card-current { opacity: 0.75; cursor: default; box-shadow: none; }
+.pr-card-current:hover { border-color: var(--border); box-shadow: none; }
+.picker-status { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4); color: var(--muted); font-size: var(--fs-secondary); }
+.picker-error { color: var(--danger); }
+
+/* Loading gate shown after picking a not-yet-loaded PR. */
+.pr-loading, .pr-loading-fail {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: var(--sp-2); text-align: center; padding: 72px var(--sp-6); color: var(--muted);
+}
+.pr-loading .chat-spinner { width: 22px; height: 22px; }
+.pr-loading-fail .btn { margin-top: var(--sp-3); }
+
+/* The Switch-PR modal reuses the generic modal shell at a comfortable width. */
+.picker-modal { width: min(680px, 92vw); max-height: 86vh; }
+.picker-modal-body { padding: var(--sp-4); overflow-y: auto; }
+
+/* ── Shared empty state ────────────────────────────────────────────── */
+.empty-state {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: var(--sp-2); text-align: center; padding: 64px var(--sp-6); color: var(--muted);
+}
+.empty-state .icon { color: var(--gray-400); }
+.empty-state-title { font-size: var(--fs-subhead); font-weight: 600; color: var(--text-secondary); font-style: normal; margin: var(--sp-1) 0 0; }
+.empty-state-hint { font-size: var(--fs-secondary); max-width: 360px; }
+
+/* Diff loading spinner block. */
+.diff-loading { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4); color: var(--muted); }
+.diff-loading .chat-spinner { width: 16px; height: 16px; }