prreviewbuddy 0.12.0

package/static/sidebar.css

@@ -0,0 +1,4802 @@
+/* The review's own styles, dressing the markup in domain/ui/components/review_tabs.ts. It lives
+   here rather than in the extension because the markup does: both surfaces render the same review,
+   and a sheet that only one of them owned would drift the moment the other changed a class name.
+   Both ship a copy, and the two builds copy it out of this directory.
+
+   Everything below is written for the harder of the two surfaces. This sheet is injected into
+   github.com through the extension's manifest.json content_scripts.css, so it is
+   extension-origin CSS and url() below resolves against the extension root, not GitHub's.
+   Remote @import is not an option here: GitHub sends `style-src 'unsafe-inline'
+   github.githubassets.com` and `font-src github.githubassets.com`, so a Google Fonts @import is
+   dropped and even a data: URI font would be refused. The font has to ship with us.
+
+   (A Space Mono @import used to sit here and was blocked for exactly that reason. Nothing was
+   depending on it: the only rule that named Space Mono was the wordmark, now Comfortaa, and every
+   mono rule below asks for the ui-monospace stack outright. There is no font left to bundle.)
+
+   There is deliberately no @font-face here. A relative url() would resolve against github.com and
+   be refused by `font-src`, so content/brand_font.ts registers the family from the isolated world
+   instead, where the fetch is ours rather than the page's. */
+
+/* ── Severity pill palette ──
+   The single source for every graded pill in the sidebar: Issues' severity badges and the
+   Questions tab's importance badges. Both scales express "how much should this worry me", so
+   a MEDIUM question and a MAJOR issue must be the same amber — when these were two hand-copied
+   sets of hex values they had already drifted apart by an alpha step or two, which is exactly
+   the kind of difference that reads as "these tabs are from different products". Questions map
+   onto three of the four: high→danger, medium→warning, low→neutral (info is Issues-only, for
+   the extra "minor" rung a three-level scale doesn't have). */
+.pr-helper-sidebar {
+  --pr-helper-pill-danger-bg: rgba(255, 80, 80, 0.15);
+  --pr-helper-pill-danger-fg: #cf222e;
+  --pr-helper-pill-warning-bg: rgba(240, 178, 50, 0.18);
+  --pr-helper-pill-warning-fg: #9a6700;
+  --pr-helper-pill-info-bg: rgba(84, 174, 255, 0.15);
+  --pr-helper-pill-info-fg: #0969da;
+  --pr-helper-pill-neutral-bg: rgba(175, 184, 193, 0.2);
+  --pr-helper-pill-neutral-fg: #57606a;
+}
+
+/* ── Sidebar shell ── */
+.pr-helper-sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 460px;
+  min-width: 380px;
+  max-width: 650px;
+  height: 100vh;
+  background: #f8fafc;
+  /* The inset purple edge is the rail, carried into the panel: it is the LEADING edge as the
+     sidebar slides out, so the panel reads as being drawn from the button rather than arriving
+     over the top of it. An inset shadow rather than a wider border-left on purpose — this box is
+     content-box with an explicit pixel width, so thickening the border would shift every column
+     inside it by 3px. */
+  box-shadow: inset 4px 0 0 #9333ea, -3px 0 16px rgba(0, 0, 0, 0.18);
+  border-left: 1px solid rgba(0, 0, 0, 0.08);
+  z-index: 999999;
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+.pr-helper-sidebar.open { transform: translateX(0); }
+
+/* ── Resize handle ── */
+.pr-helper-resize-handle {
+  position: absolute;
+  left: -3px;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: ew-resize;
+  z-index: 10;
+  background: transparent;
+}
+
+.pr-helper-resize-handle:hover { background: rgba(147, 51, 234, 0.25); }
+
+/* ── Generating checklist (rendered inside the Overview tab) ── */
+/* Deliberately not a card: a bordered panel floating in an otherwise empty tab makes the
+   whitespace around it the loudest thing on screen. Instead this claims the whole content
+   area — same full-bleed treatment as the "No review yet" intro it replaces — so the tab
+   itself reads as working. The body cluster centres in the free space via `margin: auto 0`
+   (not justify-content, which would fight the footer) and the footer settles at the
+   bottom, keeping Cancel in one predictable place through every generating phase. */
+.pr-helper-generating {
+  min-height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 8px 8px;
+}
+
+/* Block flow inside, not a nested flex column — the children (checklist, phrase stack,
+   progress bar) already rely on normal block sizing and auto margins to centre. */
+.pr-helper-generating-body {
+  margin: auto 0;
+}
+
+.pr-helper-generating-footer {
+  flex-shrink: 0;
+  padding-top: 16px;
+}
+
+.pr-helper-generating-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: #9333ea;
+  margin: 0 0 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+@keyframes pr-helper-pulse {
+  0%, 100% { opacity: 0.35; transform: scale(0.8); }
+  50% { opacity: 1; transform: scale(1.15); }
+}
+
+/* Thin and treated as a decorative divider, not a primary UI element — in the waiting
+   phase it has no real percentage to show (see the shimmer variant below), so giving it
+   heavy visual weight would overstate how much it's actually communicating. */
+.pr-helper-progress-bar {
+  position: relative;
+  height: 3px;
+  margin-bottom: 20px;
+  background: rgba(147, 51, 234, 0.12);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.pr-helper-progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #9333ea, #c084fc);
+  width: 0%;
+  transition: width 0.4s ease;
+  animation: pr-helper-bar-pulse 1.8s ease-in-out infinite;
+}
+
+@keyframes pr-helper-bar-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+
+/* Waiting-phase progress bar: no meaningful percentage to show once the LLM call is
+   in flight, so a highlight sweeps across the full track on a loop instead of implying
+   real completion — reads as "data is moving" without a fabricated number behind it. */
+.pr-helper-progress-bar-shimmer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 40%;
+  background: linear-gradient(90deg, transparent, #c084fc, transparent);
+  animation: pr-helper-shimmer-sweep 1.6s ease-in-out infinite;
+}
+
+@keyframes pr-helper-shimmer-sweep {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(250%); }
+}
+
+/* Spacing between this footer cluster (elapsed → hint → powered-by) is carried entirely
+   by each element's own margin-bottom, deliberately never margin-top on the element
+   after — adjacent margins collapse to their max rather than summing, so relying on the
+   "next" element's top margin instead of the "previous" element's bottom margin was
+   quietly shrinking these gaps down to whichever was smaller (that's what made "Powered
+   by" read as glued to the bar above it). */
+.pr-helper-generating-elapsed {
+  margin: 0 0 4px;
+  font-size: 11px;
+  color: #9333ea;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+}
+
+.pr-helper-generating-elapsed.visible {
+  opacity: 1;
+}
+
+.pr-helper-generating-powered-by {
+  margin: 0;
+  font-size: 10px;
+  color: var(--color-fg-muted, #57606a);
+  opacity: 0.7;
+  text-align: center;
+}
+
+/* A hint line reserved for the same "past 2 minutes" moment as the direct headline —
+   hidden until content.ts's timer reveals it, never a separate banner of its own. */
+.pr-helper-escalation-hint {
+  font-size: 11px;
+  color: var(--color-fg-muted, #57606a);
+  margin: 0 0 4px;
+  text-align: center;
+}
+
+/* Cancel is deliberately understated — a plain text button, not a bordered/filled
+   action — and identically placed across every generating state (see CANCEL_BUTTON in
+   review_tabs.ts) so it never reads as a new control appearing mid-wait. Centered via
+   auto margins on a block button so it's consistent whether the parent card is
+   left-aligned (the connecting checklist) or centered (the focused waiting view). */
+.pr-helper-cancel-button {
+  display: block;
+  margin: 10px auto 0;
+  font-size: 11px;
+  font-weight: 600;
+  font-family: inherit;
+  padding: 2px 4px;
+  border: none;
+  background: transparent;
+  color: var(--color-fg-muted, #57606a);
+  cursor: pointer;
+}
+
+.pr-helper-cancel-button:hover { color: #cf222e; text-decoration: underline; }
+
+/* ── Brand mark + thinking dots (waiting/finalizing phase) ── */
+.pr-helper-brand-mark {
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: 0 auto 20px;
+  border-radius: 7px;
+  animation: pr-helper-pulse 2s ease-in-out infinite;
+}
+
+.pr-helper-generating-focused {
+  text-align: center;
+}
+
+/* Scaled up from the old card-sized type: at full-bleed the mark and headline are the
+   only things in the viewport, so 12px uppercase micro-copy read as a widget label
+   stranded in whitespace. Sentence case at 15px reads as the page speaking. */
+.pr-helper-generating-focused .pr-helper-brand-mark {
+  width: 40px;
+  height: 40px;
+  border-radius: 11px;
+  margin-bottom: 22px;
+}
+
+.pr-helper-generating-focused .pr-helper-generating-title {
+  font-size: 15px;
+  font-weight: 700;
+  text-transform: none;
+  letter-spacing: -0.01em;
+  margin-bottom: 14px;
+}
+
+/* Held well short of the panel edge so the eye stays on the centred cluster rather than
+   tracking a full-width rule across the sidebar. */
+.pr-helper-generating-focused .pr-helper-progress-bar {
+  max-width: 220px;
+  margin: 0 auto 20px;
+}
+
+/* Ambient rotating phrases: all six are stacked in the same box and cross-fade on a
+   loop via animation-delay offsets, rather than any JS timer swapping text — keeps the
+   whole thing driven by the same one-off render as everything else in this card. */
+.pr-helper-thinking-phrases {
+  position: relative;
+  height: 22px;
+  margin: 0 0 14px;
+}
+
+.pr-helper-thinking-phrase {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  font-size: 15px;
+  letter-spacing: -0.01em;
+  font-weight: 700;
+  color: #9333ea;
+  opacity: 0;
+  animation: pr-helper-thinking-phrase-cycle 15s ease-in-out infinite;
+}
+
+/* Windows are cut to the phrase count: 4 phrases share a 15s cycle, so each owns 25% of
+   the timeline and stays visible for ~its whole slot (3%–23%) with a short cross-fade at
+   each edge. Adding or removing a phrase in THINKING_PHRASES means re-cutting these
+   percentages, or the stack develops dead gaps where nothing is on screen. */
+@keyframes pr-helper-thinking-phrase-cycle {
+  0% { opacity: 0; }
+  3% { opacity: 1; }
+  23% { opacity: 1; }
+  27% { opacity: 0; }
+  100% { opacity: 0; }
+}
+
+.pr-helper-thinking-dots {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  margin: 0 0 22px;
+}
+
+.pr-helper-thinking-dots span {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #9333ea;
+  animation: pr-helper-thinking-bounce 1.1s ease-in-out infinite;
+}
+
+.pr-helper-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
+.pr-helper-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes pr-helper-thinking-bounce {
+  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
+  30% { opacity: 1; transform: translateY(-4px); }
+}
+
+/* ── Generation error (rendered inside the Overview tab) ── */
+.pr-helper-generating-error {
+  flex-shrink: 0;
+  padding: 18px 20px;
+  background: rgba(255, 80, 80, 0.05);
+  border: 1px solid rgba(255, 80, 80, 0.2);
+  border-radius: 10px;
+}
+
+.pr-helper-generating-error-text {
+  font-size: 13px;
+  color: #cf222e;
+  margin: 0 0 14px;
+  line-height: 1.5;
+}
+
+.pr-helper-retry-button {
+  font-size: 11px;
+  font-weight: 600;
+  font-family: inherit;
+  padding: 6px 14px;
+  border-radius: 6px;
+  border: 1px solid #cf222e;
+  background: transparent;
+  color: #cf222e;
+  cursor: pointer;
+}
+
+.pr-helper-retry-button:hover { background: rgba(255, 80, 80, 0.08); }
+
+/* ── Review tabs ── */
+.pr-helper-review-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 10px 10px 0;
+  border-bottom: 1px solid var(--color-border-default, #d0d7de);
+  background: #f8fafc;
+  flex-shrink: 0;
+}
+
+/* Sized and weighted to read as navigation, not content — one step down from the section
+   titles/body text below it so the tab strip doesn't out-compete the thing it's routing to. */
+.pr-helper-review-tab {
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  padding: 9px 12px;
+  border: none;
+  background: transparent;
+  border-radius: 6px 6px 0 0;
+  cursor: pointer;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-review-tab.active {
+  background: #ffffff;
+  color: #9333ea;
+  font-weight: 600;
+  box-shadow: inset 0 -2px 0 #9333ea;
+}
+
+/* Locked until a review exists. Faded rather than hidden so the reviewer can see what
+   they're about to unlock, and not-allowed on hover pairs with the title tooltip that
+   says why. Kept clickable at the DOM level (aria-disabled, not disabled) — see
+   renderReviewTabsNav — so that tooltip actually fires. */
+.pr-helper-review-tab-locked {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pr-helper-review-tab-locked:hover {
+  background: transparent;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-tab-divider {
+  width: 1px;
+  align-self: stretch;
+  margin: 4px 4px;
+  background: var(--color-border-default, #d0d7de);
+}
+
+/*
+ * The content canvas.
+ *
+ * Everything in the sidebar used to sit on the same white, so a card with a hairline border was
+ * the only thing separating content from chrome — and on the Assistant tab, where there is one
+ * message and no cards at all, nothing separated them. Recessing the scroll area half a step gives
+ * every tab the same figure/ground relationship without enclosing anything in a box.
+ *
+ * #f8fafc rather than a new value: it is what the footer already uses, so the two recessed
+ * surfaces at the top and bottom of the sidebar are the same colour rather than two near-identical
+ * greys. Cards, inputs and the toolbar stay white and now read as raised against it.
+ */
+.pr-helper-review-panel {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 14px 16px;
+  background: #f8fafc;
+}
+
+/*
+ * The strip between the tab bar and the canvas: which analysis is on screen, and whether it is
+ * still current. White, so it belongs to the chrome above rather than the content below, and
+ * closed with a divider so the canvas visibly starts underneath it.
+ *
+ * Collapses entirely when empty — on History, and before any analysis exists — so no divider or
+ * padding is left floating with nothing above it.
+ */
+.pr-helper-analysis-toolbar {
+  flex-shrink: 0;
+  padding: 10px 16px;
+  background: #ffffff;
+  border-bottom: 1px solid var(--color-border-default, #d0d7de);
+}
+
+.pr-helper-analysis-toolbar:empty {
+  display: none;
+}
+
+/* The toolbar owns the spacing now, so the block inside it sheds the margin it needed as content. */
+.pr-helper-analysis-toolbar .pr-helper-analysis-provenance {
+  margin: 0;
+  padding: 0;
+}
+
+/* The banner keeps its box but sits inside the toolbar's padding rather than the panel's. */
+.pr-helper-analysis-toolbar .pr-helper-update-notice {
+  margin: 10px 0 0;
+}
+
+.pr-helper-review-empty {
+  font-size: 13px;
+  color: var(--color-fg-muted, #57606a);
+  padding: 12px 0;
+  margin: 0;
+}
+
+/* ── No-review empty state ── */
+/* Centred in the panel's full height rather than sitting at the top like a stray
+   paragraph — the vertical centring is what makes this read as an intentional screen
+   instead of an unfinished one. min-height (not height) so it still scrolls rather than
+   clipping in a short window. */
+.pr-helper-review-intro {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 24px 8px;
+  box-sizing: border-box;
+}
+
+.pr-helper-intro-mark {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  margin-bottom: 12px;
+}
+
+.pr-helper-intro-brand {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #9333ea;
+  margin: 0 0 10px;
+}
+
+.pr-helper-intro-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--color-fg-default, #1f2328);
+  margin: 0 0 8px;
+}
+
+.pr-helper-intro-body {
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--color-fg-muted, #57606a);
+  margin: 0 0 18px;
+  max-width: 280px;
+}
+
+.pr-helper-generate-review-button {
+  font-size: 13px;
+  font-weight: 600;
+  font-family: inherit;
+  padding: 9px 20px;
+  border: none;
+  border-radius: 7px;
+  background: #9333ea;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+.pr-helper-generate-review-button:hover { background: #7c3aed; }
+
+/* ── Overview tab ── */
+.pr-helper-risk-low { background: rgba(63, 185, 80, 0.12); color: #1a7f37; }
+.pr-helper-risk-medium { background: rgba(240, 178, 50, 0.15); color: #9a6700; }
+.pr-helper-risk-high { background: rgba(255, 80, 80, 0.12); color: #cf222e; }
+
+.pr-helper-risk-text {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 8px;
+  border-radius: 100px;
+  white-space: nowrap;
+}
+
+.pr-helper-risk-headline {
+  padding: 16px 18px;
+  border-radius: 10px;
+  /* Was #f8fafc, which is now the canvas colour itself. */
+  background: #ffffff;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  margin-bottom: 14px;
+}
+
+.pr-helper-risk-headline-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pr-helper-risk-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.pr-helper-risk-dot-low { background: #1a7f37; }
+.pr-helper-risk-dot-medium { background: #9a6700; }
+.pr-helper-risk-dot-high { background: #cf222e; }
+
+.pr-helper-risk-headline-label {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--color-fg-default, #24292f);
+}
+
+.pr-helper-risk-headline-takeaway {
+  font-size: 13px;
+  color: var(--color-fg-muted, #57606a);
+  margin: 8px 0 0;
+  line-height: 1.5;
+}
+
+.pr-helper-overview-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+/* A <button>, so the browser's default control styling has to be unwound before the card
+   reads as a card again — font is the one that bites: buttons don't inherit it, so without
+   this the value and label drop to the UA's 13.333px system font. */
+.pr-helper-overview-stat {
+  position: relative; /* anchors the coverage tooltip */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 8px 4px;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  border-radius: 8px;
+  background: #ffffff;
+  font: inherit;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+}
+
+/* Matches the history/file rows rather than the filled buttons: these are shortcuts, and a
+   row of four solid purple blocks would read as the primary action of the Overview. */
+.pr-helper-overview-stat:hover {
+  background: rgba(147, 51, 234, 0.06);
+  border-color: #9333ea;
+}
+
+.pr-helper-overview-stat:focus-visible {
+  outline: 2px solid #9333ea;
+  outline-offset: 1px;
+}
+
+.pr-helper-overview-stat-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-fg-default, #24292f);
+}
+
+/* "50 / 482" is eight glyphs where the other three cards show one or two, and the grid gives
+   each card a quarter of a narrow sidebar. Dropping two points and holding the digits to a
+   fixed advance keeps it on one line without shrinking the cards that don't need it. */
+.pr-helper-overview-stat-value-wide {
+  font-size: 16px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+/* position: relative anchors the two decorations that flank it. Both are taken out of flow on
+   purpose: they used to sit inside this box, so the card centred "Files →" as a unit and the
+   word itself landed ~6px left of the number above it. With the info icon present the two
+   roughly cancelled, which is why only the cards without one looked wrong. */
+.pr-helper-overview-stat-label {
+  position: relative;
+  font-size: 11px;
+  color: var(--color-fg-muted, #57606a);
+  margin-top: 3px;
+}
+
+/* Explains a capped review, and only ever appears on one. Sits ahead of the 11px label rather
+   than beside the value, so it's sized to that row — against the bold number it read as a
+   glyph belonging to the count. */
+.pr-helper-overview-stat-info {
+  position: absolute;
+  right: calc(100% + 3px);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  /* The glyph draws its own ring, so there is no border or font styling here — only the box it
+     sits in. It inherits the label's muted colour through the SVG's fill="currentColor", which
+     is also why it firms up with the label on hover instead of needing its own rule. */
+  margin-right: 3px;
+  line-height: 0;
+  vertical-align: -2px;
+  cursor: default;
+}
+
+.pr-helper-overview-stat-info::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: calc(100% + 4px);
+  /* Anchored to the card's right edge and allowed to overflow it leftward. Constrained to the
+     card's own width this would render as a one-word-per-line column — the cards are a quarter
+     of a narrow sidebar. Coverage is the rightmost card, so growing leftward stays in bounds. */
+  right: 0;
+  left: auto;
+  width: 180px;
+  z-index: 2;
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: #24292f;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.4;
+  text-align: left;
+  white-space: normal;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+}
+
+.pr-helper-overview-stat-info:hover::after,
+.pr-helper-overview-stat:focus-visible .pr-helper-overview-stat-info::after {
+  opacity: 1;
+}
+
+/* Deliberately faint: the arrow is a hint that the card goes somewhere, not a second label.
+   It firms up on hover, where the reviewer is already about to click. */
+/* Hangs off the label's right edge rather than extending it, so the label text stays centred
+   under the value. No gap: at the sidebar's 380px minimum each card is ~81px wide and the
+   longest label ("Questions") leaves comfortable margin — this used to read "Guide topics",
+   which was the tightest case and is why the arrow is positioned absolutely rather than inline. */
+.pr-helper-overview-stat-arrow {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  opacity: 0.45;
+  transition: opacity 0.12s;
+}
+
+.pr-helper-overview-stat:hover .pr-helper-overview-stat-arrow { opacity: 1; }
+
+.pr-helper-overview-stat:hover .pr-helper-overview-stat-label { color: #9333ea; }
+
+.pr-helper-review-summary {
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--color-fg-default, #24292f);
+  margin: 0 0 14px;
+}
+
+.pr-helper-sidebar code {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 0.9em;
+  background: var(--color-neutral-muted, rgba(175, 184, 193, 0.2));
+  border-radius: 4px;
+  padding: 0.1em 0.4em;
+}
+
+.pr-helper-explain-simply-button {
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  padding: 7px 14px;
+  border-radius: 6px;
+  border: 1px solid #9333ea;
+  background: transparent;
+  color: #9333ea;
+  cursor: pointer;
+  margin: 0 0 14px;
+}
+
+.pr-helper-explain-simply-button:hover { background: rgba(147, 51, 234, 0.08); }
+
+.pr-helper-explain-simply-done {
+  font-size: 13px;
+  color: var(--color-fg-muted, #57606a);
+  margin: 0 0 14px;
+}
+
+.pr-helper-review-panel h4 {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #94a3b8;
+  margin: 16px 0 8px;
+}
+
+.pr-helper-review-panel ul {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* ── Pill tooltips ──
+   Every pill in the sidebar is one uppercase word standing in for a whole axis of judgement, and
+   MAJOR sitting next to "medium confidence" gives no hint that they answer different questions.
+   Hovering explains them; see ui/components/pill_tooltips.ts for the copy and why it is worded
+   the way it is.
+
+   Deliberately not the native `title` attribute. That fires after roughly a second of stillness,
+   renders in the OS font at the cursor rather than against the card, and cannot be seen at all
+   while the pointer is moving — which is exactly the moment a reviewer scanning a list of
+   findings wants the answer. This is the same `content: attr(data-tip)` mechanism the Overview's
+   coverage note already uses, generalised so any pill can opt in.
+
+   The pill itself is NOT positioned, on purpose: the ::after resolves against the badge row
+   instead, so a 220px card hanging off a pill near the right edge of a 380px sidebar cannot
+   overflow and get clipped by the panel's overflow-y. Anchoring to the row also lands every
+   tooltip in the same place, so moving along a row of pills swaps the text rather than making
+   the box jump. Each anchor is a flex row of pills, listed here rather than given a shared
+   class because they already exist and their layout is unrelated. */
+.pr-helper-issue-badges,
+.pr-helper-history-item-top,
+.pr-helper-history-followup-top {
+  position: relative;
+}
+
+.pr-helper-tip::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: calc(100% + 6px);
+  /* Both edges pinned, so the tooltip is exactly as wide as the row it explains. */
+  left: 0;
+  right: 0;
+  z-index: 3;
+  padding: 7px 9px;
+  border-radius: 6px;
+  background: #24292f;
+  color: #ffffff;
+  /* The pills set uppercase, letter-spacing and 700 weight on themselves, all of which the
+     ::after would otherwise inherit and turn a sentence into a ransom note. */
+  font-size: 11px;
+  font-weight: 400;
+  font-family: inherit;
+  text-transform: none;
+  letter-spacing: normal;
+  line-height: 1.45;
+  text-align: left;
+  white-space: normal;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s;
+}
+
+/* Delay on the way in, none on the way out: a reviewer dragging the pointer across a card
+   should not trip four tooltips in sequence, but one they've finished reading should vanish the
+   instant they leave. Two rules rather than one because a transition-delay applies to both
+   directions. */
+.pr-helper-tip:hover::after,
+.pr-helper-tip:focus-visible::after {
+  opacity: 1;
+  transition: opacity 0.1s 0.35s;
+}
+
+/* ── Issues tab ── */
+.pr-helper-issue-card {
+  border: 1px solid var(--color-border-default, #d0d7de);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 12px;
+  /* Stated rather than inherited: the surface behind this is now the grey canvas. */
+  background: #ffffff;
+}
+
+.pr-helper-issue-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 8px;
+  text-align: left;
+}
+
+.pr-helper-issue-badges {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: 6px;
+  width: 100%;
+}
+
+.pr-helper-severity-badge {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 3px 9px;
+  border-radius: 100px;
+  white-space: nowrap;
+}
+
+.pr-helper-severity-critical .pr-helper-severity-badge { background: var(--pr-helper-pill-danger-bg); color: var(--pr-helper-pill-danger-fg); }
+.pr-helper-severity-major .pr-helper-severity-badge { background: var(--pr-helper-pill-warning-bg); color: var(--pr-helper-pill-warning-fg); }
+.pr-helper-severity-minor .pr-helper-severity-badge { background: var(--pr-helper-pill-info-bg); color: var(--pr-helper-pill-info-fg); }
+.pr-helper-severity-nit .pr-helper-severity-badge { background: var(--pr-helper-pill-neutral-bg); color: var(--pr-helper-pill-neutral-fg); }
+
+.pr-helper-issue-title { font-size: 14px; font-weight: 600; margin: 0; text-align: left; width: 100%; }
+
+.pr-helper-issue-desc {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--color-fg-muted, #57606a);
+  margin: 0 0 8px;
+  text-align: left;
+}
+
+/* "Reviewed with N existing discussion threads" — a provenance note under the Overview summary,
+   sized to be findable but not to compete with the summary itself. */
+.pr-helper-discussion-awareness {
+  font-size: 12px;
+  line-height: 1.4;
+  margin: -4px 0 12px;
+  color: var(--color-fg-muted, #57606a);
+  text-align: left;
+}
+
+/* "This PR changes 482 files..." — the same provenance register as discussion awareness above,
+   deliberately so: both tell the reviewer what the review was actually given. */
+.pr-helper-coverage-caveat {
+  font-size: 12px;
+  line-height: 1.4;
+  margin: -4px 0 12px;
+  color: var(--color-fg-muted, #57606a);
+  text-align: left;
+}
+
+/* "Already raised by @x" — deliberately quiet. It qualifies the finding above it rather than
+   competing with the severity badge, so it reads as a footnote, not a second headline. */
+/* The one line on a finding that can tell a reviewer to stop reading, so it is set as a status
+   rather than as a note. It was a muted 12px line with a 2px rule beside it, sitting between the
+   description and the file path; a reader looking straight at two of them asked where the feature
+   had got to. Weight and a tint, not a colour shout — it still must not outrank the severity. */
+.pr-helper-issue-discussion {
+  font-size: 12px;
+  line-height: 1.45;
+  margin: 0 0 8px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border-left: 3px solid var(--pr-helper-pill-neutral-bg, #d0d7de);
+  background: var(--pr-helper-discussion-bg, rgba(15, 23, 42, 0.04));
+  color: var(--color-fg-muted, #57606a);
+  text-align: left;
+}
+
+.pr-helper-issue-discussion-lead {
+  font-weight: 600;
+  color: var(--color-fg-default, #1f2328);
+}
+
+.pr-helper-issue-discussion-unresolved {
+  border-left-color: var(--pr-helper-pill-warning-bg, #d4a72c);
+  background: var(--pr-helper-discussion-unresolved-bg, rgba(212, 167, 44, 0.1));
+}
+
+.pr-helper-issue-discussion-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.pr-helper-issue-discussion-link:hover { text-decoration: underline; }
+
+.pr-helper-issue-loc {
+  display: block;
+  cursor: pointer;
+  margin-top: 6px;
+}
+
+.pr-helper-issue-loc:hover .pr-helper-path-name { text-decoration: underline; }
+
+/* ── Questions tab ── */
+/* Deliberately reuses .pr-helper-issue-header/-title/-badges/-desc/-loc from the Issues tab
+   (see renderQuestionCard) rather than defining a parallel set: a question and an issue are
+   the same shape of thing — a bordered card with a title, a severity-style badge and a short
+   explanation — so they share the ruleset and only the card shell and its own bits below are
+   Questions-specific. */
+.pr-helper-question-card {
+  border: 1px solid var(--color-border-default, #d0d7de);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 12px;
+  /* Stated rather than inherited: the surface behind this is now the grey canvas. */
+  background: #ffffff;
+}
+
+/* Answered is additive, same principle as a completed Guide section: dimming or collapsing the
+   card would throw away the reviewer's own record that they resolved it. The check mark is the
+   whole "done" signal; nothing else about the card recedes. */
+.pr-helper-question-card-answered { box-shadow: inset 3px 0 0 #1a7f37; }
+
+.pr-helper-question-card h5 {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #94a3b8;
+  margin: 10px 0 4px;
+}
+
+.pr-helper-question-importance-badge {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 3px 9px;
+  border-radius: 100px;
+  white-space: nowrap;
+}
+
+.pr-helper-question-importance-high { background: var(--pr-helper-pill-danger-bg); color: var(--pr-helper-pill-danger-fg); }
+.pr-helper-question-importance-medium { background: var(--pr-helper-pill-warning-bg); color: var(--pr-helper-pill-warning-fg); }
+.pr-helper-question-importance-low { background: var(--pr-helper-pill-neutral-bg); color: var(--pr-helper-pill-neutral-fg); }
+
+/* ── Questions progress header ──
+   Deliberately lighter than the Guide's progress box (no bar, no "next up" line): the Guide is
+   a workflow you walk in order, so it earns a full dashboard, whereas this is a flat list where
+   the only useful fact is how many are still open. */
+.pr-helper-questions-progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--color-fg-muted, #57606a);
+  padding-bottom: 12px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid var(--color-border-default, #d0d7de);
+}
+
+.pr-helper-questions-progress-count { font-weight: 600; }
+
+.pr-helper-questions-progress-check { color: #1a7f37; font-weight: 700; }
+
+.pr-helper-question-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+/* Deliberately not a filled button, matching .pr-helper-guide-start-cta: this is "here's the
+   next step", not a demand for a click. */
+.pr-helper-question-jump {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #9333ea;
+  font-size: 13px;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.pr-helper-question-jump { text-decoration: none; }
+.pr-helper-question-jump:hover { color: #7c3aed; text-decoration: underline; }
+
+/* Same button geometry as .pr-helper-explain-simply-button (the sidebar's existing outlined
+   secondary), but neutral rather than purple: purple is spoken for by the primary action
+   sitting next to it, and an outlined *neutral* button is the standard way to say "real
+   control, lower emphasis". It was plain text before, which made a state-changing action look
+   like a caption. */
+.pr-helper-question-answer-toggle {
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  padding: 5px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  background: transparent;
+  color: var(--color-fg-muted, #57606a);
+  cursor: pointer;
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.pr-helper-question-answer-toggle:hover {
+  background: rgba(175, 184, 193, 0.12);
+  color: var(--color-fg-default, #24292f);
+}
+
+/* Answered: the button becomes the card's "undo", so it picks up the same green the card's
+   edge uses — the control and the state it produced read as one thing. */
+.pr-helper-question-answer-toggle[data-answered="true"] {
+  border-color: rgba(26, 127, 55, 0.4);
+  color: #1a7f37;
+}
+
+.pr-helper-question-answer-toggle[data-answered="true"]:hover { background: rgba(26, 127, 55, 0.08); }
+
+/* ── File path display, shared by every tab ──
+   One construct wherever a file is named: the Guide's section files, the Issues and Questions
+   location refs, and the Files tab's browser rows. They were three near-identical pairs of
+   rules with drifting sizes and colours; a reviewer moving between tabs was seeing the same
+   file rendered three different ways.
+
+   The split exists because a deep monorepo path is mostly shared prefix — at full weight it
+   wraps to three lines and buries the filename, which is the only part that identifies it.
+   It's also what stops the overflow: a path is a single unbroken token with no break
+   opportunity, so rendered whole it pushes past the fixed-width sidebar and drags a horizontal
+   scrollbar onto the panel. The directory truncates; only the short filename has to fit. Every
+   call site puts the full path on a title attribute, so nothing is unrecoverable. */
+.pr-helper-path-dir {
+  display: block;
+  /* Declared, never inherited. Without this the directory picked up whatever font its ancestor
+     chain happened to supply — and the three call sites have different chains, so the same class
+     rendered monospace under one tab and the sidebar's sans-serif under another, with the
+     filename below it always monospace. Half a path in each font. It's a path either way, so it
+     matches the filename. */
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 11px;
+  color: var(--color-fg-muted, #57606a);
+  opacity: 0.85;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The trailing slash marks the line as a directory rather than a truncated filename. Generated
+   here rather than baked into the markup so it stays out of the title attribute and the
+   data-file path, which must remain the exact path GitHub's diff anchor is hashed from. */
+.pr-helper-path-dir::after {
+  content: "/";
+}
+
+/* Wrapped rather than truncated, unlike the directory above: a prefix is disposable context,
+   but clipping the filename would cost the reviewer the identifier itself. */
+.pr-helper-path-name {
+  display: block;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 13px;
+  font-weight: 600;
+  color: #9333ea;
+  overflow-wrap: anywhere;
+}
+
+/* No Files-tab size override here on purpose. A filename means the same thing in every tab,
+   so it should look the same in every tab — the Files rows earn their prominence from the
+   row's own padding and layout, not from larger type than the identical reference in Issues,
+   Questions or the Guide. */
+
+.pr-helper-question-group { margin-bottom: 4px; }
+
+.pr-helper-question-group-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #9333ea;
+  margin: 14px 0 6px;
+}
+
+.pr-helper-question-group:first-child .pr-helper-question-group-title { margin-top: 0; }
+
+/* ── Files tab ── */
+.pr-helper-file-stat {
+  font-size: 12px;
+  color: var(--color-fg-muted, #57606a);
+  white-space: nowrap;
+}
+
+.pr-helper-file-stat-issues { color: #9a6700; }
+
+/* ── Guide tab ── */
+.pr-helper-guide {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pr-helper-suggested-path {
+  padding: 14px 16px;
+  border-radius: 8px;
+  background: rgba(147, 51, 234, 0.06);
+  border: 1px solid rgba(147, 51, 234, 0.2);
+  margin-bottom: 12px;
+}
+
+.pr-helper-suggested-path-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #9333ea;
+  margin: 0 0 6px;
+}
+
+.pr-helper-suggested-path-list {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--color-fg-default, #24292f);
+}
+
+.pr-helper-suggested-path-list li { margin-bottom: 3px; }
+
+.pr-helper-suggested-path-time {
+  font-size: 12px;
+  color: var(--color-fg-muted, #57606a);
+  margin: 8px 0 0;
+}
+
+/* Every section done — the box swaps its purple "here's where to go" identity for a green
+   "you're finished" one. Same geometry, so the Guide doesn't reflow underneath it. */
+.pr-helper-suggested-path-complete {
+  background: rgba(26, 127, 55, 0.07);
+  border-color: rgba(26, 127, 55, 0.25);
+}
+
+.pr-helper-suggested-path-complete .pr-helper-suggested-path-title { color: #1a7f37; }
+
+.pr-helper-progress-counter {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-fg-default, #24292f);
+  margin: 0 0 8px;
+}
+
+.pr-helper-progress-check {
+  color: #1a7f37;
+  font-weight: 700;
+}
+
+.pr-helper-progress-bar {
+  height: 4px;
+  border-radius: 100px;
+  background: rgba(140, 149, 159, 0.25);
+  overflow: hidden;
+}
+
+.pr-helper-progress-bar-fill {
+  height: 100%;
+  border-radius: 100px;
+  background: #9333ea;
+  transition: width 0.35s ease;
+}
+
+.pr-helper-suggested-path-complete .pr-helper-progress-bar-fill { background: #1a7f37; }
+
+.pr-helper-progress-next {
+  font-size: 13px;
+  color: var(--color-fg-default, #24292f);
+  margin: 10px 0 0;
+}
+
+.pr-helper-progress-next-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-fg-muted, #57606a);
+  margin-right: 4px;
+}
+
+.pr-helper-guide-section {
+  /* The disclosure arrow is the only thing that lives left of the card's text column;
+     everything else — badges, title, meta row, body — is indented by this gutter so the
+     card reads as a single left edge instead of three competing ones. Width of the arrow
+     (10px) + the header row's gap (8px). */
+  --pr-helper-guide-gutter: 18px;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 12px;
+  /* Drives the just-completed wash below: the class add fades in, the class removal fades
+     back out, so no keyframe or animationend bookkeeping is involved. */
+  transition: background-color 0.6s ease, border-color 0.6s ease;
+  /* Stated rather than inherited: the surface behind this is now the grey canvas. */
+  background: #ffffff;
+}
+
+/* Additive only — a completed section keeps full contrast on its title, meta row and badges.
+   See the comment in renderGuideSectionCard: these cards are the reviewer's record of what
+   they've covered, not spent items to be dimmed out of the way. */
+/* The green edge is an inset shadow rather than a thicker border-left: widening the border
+   would pull the card's content in by 2px at the exact moment the section flips to completed,
+   so the whole card would visibly jog sideways during the transition. */
+.pr-helper-guide-section-completed {
+  box-shadow: inset 3px 0 0 #1a7f37;
+  background: rgba(26, 127, 55, 0.04);
+}
+
+.pr-helper-guide-section-highlight {
+  background: rgba(26, 127, 55, 0.16);
+  border-color: rgba(26, 127, 55, 0.45);
+}
+
+/* The auto margin is the split point of the badge row — everything after it goes right. */
+.pr-helper-guide-section-badges .pr-helper-start-here-badge,
+.pr-helper-guide-section-badges .pr-helper-completed-badge {
+  margin-right: auto;
+}
+
+.pr-helper-guide-check {
+  color: #1a7f37;
+  font-size: 13px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.pr-helper-guide-section-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+}
+
+/* Split row: the status badge (Start here / Continue / Completed, plus its check) sits on the
+   left at the title's gutter — it's about the reviewer's position and belongs with the title
+   it labels — while the attention badge is pushed to the right edge as a standing property of
+   the section. flex-end rather than space-between is what makes the attention badge hold the
+   right edge even when there is no status badge to space against. */
+.pr-helper-guide-section-badges {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-left: var(--pr-helper-guide-gutter);
+}
+
+.pr-helper-guide-section-header-top {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  width: 100%;
+}
+
+/* Fixed width rather than glyph width: the gutter every other row is indented by has to be
+   predictable, and ▼ measures differently across the fonts GitHub hands us. */
+.pr-helper-guide-disclosure {
+  width: 10px;
+  font-size: 10px;
+  color: var(--color-fg-muted, #57606a);
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+}
+
+.pr-helper-guide-section-collapsed .pr-helper-guide-disclosure { transform: rotate(-90deg); }
+.pr-helper-guide-section-collapsed .pr-helper-guide-section-body { display: none; }
+
+.pr-helper-guide-section-title {
+  font-size: 14px;
+  font-weight: 700;
+  flex: 1;
+}
+
+.pr-helper-guide-badge {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 3px 9px;
+  border-radius: 100px;
+  white-space: nowrap;
+}
+
+/* Start Here is metadata (which section the model recommends first), same role as the
+   attention badge next to it — not a control. The action to launch guided navigation lives
+   in .pr-helper-guide-start-cta at the bottom of the card instead; see UX principle in
+   renderGuideSectionCard's comment: badges communicate state, buttons perform actions. */
+.pr-helper-start-here-badge {
+  background: #9333ea;
+  color: #ffffff;
+}
+
+/* Filled, not tinted — it's the direct counterpart to Start here, and a completed section
+   should read as an equally definite state rather than a faded one. */
+.pr-helper-completed-badge {
+  background: #1a7f37;
+  color: #ffffff;
+}
+
+.pr-helper-attention-badge.pr-helper-attention-high { background: rgba(255, 80, 80, 0.12); color: #cf222e; }
+.pr-helper-attention-badge.pr-helper-attention-medium { background: rgba(240, 178, 50, 0.15); color: #9a6700; }
+.pr-helper-attention-badge.pr-helper-attention-low { background: rgba(175, 184, 193, 0.2); color: #57606a; }
+
+.pr-helper-guide-section-body {
+  margin-top: 8px;
+  padding-left: var(--pr-helper-guide-gutter);
+}
+
+/* Deliberately not a filled button — the Guide is calm and information-focused, and a
+   full-width primary button here competed with the summary/checklist for attention. This
+   reads as "you're ready, here's the next step" rather than a CTA demanding a click. */
+.pr-helper-guide-start-cta {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #9333ea;
+  font-size: 13px;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.pr-helper-guide-start-cta:hover { color: #7c3aed; text-decoration: underline; }
+
+.pr-helper-guide-section-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+/* Quieter than the CTA beside it on purpose: undo is a recovery path for a stray "Finish
+   section", not something to invite. */
+.pr-helper-guide-uncomplete {
+  margin-top: 12px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-fg-muted, #57606a);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.pr-helper-guide-uncomplete:hover { color: var(--color-fg-default, #24292f); text-decoration: underline; }
+
+.pr-helper-guide-summary {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0 0 8px;
+}
+
+.pr-helper-guide-purpose,
+.pr-helper-guide-why {
+  font-size: 13px;
+  color: var(--color-fg-muted, #57606a);
+  line-height: 1.55;
+  margin: 0 0 10px;
+}
+
+.pr-helper-guide-meta-row {
+  font-size: 12px;
+  color: var(--color-fg-muted, #57606a);
+  padding-left: var(--pr-helper-guide-gutter);
+}
+
+.pr-helper-guide-section-body h5 {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #94a3b8;
+  margin: 10px 0 4px;
+}
+
+.pr-helper-guide-files {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+/* The row is a block, not a text line, so the directory, filename and focus note can each
+   take their own line and carry their own weight. */
+/* Padded on every side, then pulled back out by the same amount horizontally: the row's text
+   stays aligned with the rest of the card's text column, while the current-target highlight
+   gets room to sit around the content instead of hugging it. */
+.pr-helper-guide-file {
+  display: block;
+  cursor: pointer;
+  padding: 8px;
+  margin: 0 -8px;
+}
+
+/* Underline only the filename on hover — dragging an underline through the directory and focus
+   prose would make the whole three-line row look like one long link. */
+.pr-helper-guide-file:hover .pr-helper-path-name { text-decoration: underline; }
+
+.pr-helper-guide-file-focus {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--color-fg-muted, #57606a);
+  margin-top: 2px;
+  padding-left: 2px;
+}
+
+.pr-helper-guide-checklist {
+  margin: 0;
+  padding: 10px 12px 10px 26px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--color-fg-default, #24292f);
+  background: #f8fafc;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  border-radius: 6px;
+  list-style: none;
+}
+
+.pr-helper-guide-checklist li {
+  position: relative;
+  margin-bottom: 5px;
+  line-height: 1.5;
+}
+
+.pr-helper-guide-checklist li:last-child { margin-bottom: 0; }
+
+.pr-helper-guide-checklist li::before {
+  content: '•';
+  position: absolute;
+  left: -14px;
+  color: #9333ea;
+  font-weight: 700;
+}
+
+/* Section tags shown on Issues/Questions items, and section badges on Files rows —
+   both point back to the Guide, reusing the same visual language as file locations. */
+.pr-helper-section-tag {
+  font-size: 11px;
+  font-weight: 600;
+  color: #9333ea;
+  background: rgba(147, 51, 234, 0.08);
+  border: none;
+  border-radius: 100px;
+  padding: 3px 9px;
+  cursor: pointer;
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.pr-helper-section-tag:hover { background: rgba(147, 51, 234, 0.15); }
+
+.pr-helper-file-section-badge {
+  display: inline-block;
+  width: fit-content;
+  font-size: 11px;
+  color: #9333ea;
+  background: rgba(147, 51, 234, 0.08);
+  border-radius: 100px;
+  padding: 2px 9px;
+}
+
+/* ── History tab ── */
+.pr-helper-history-group-label {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #94a3b8;
+  margin: 14px 0 6px;
+}
+
+.pr-helper-history-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  margin-bottom: 8px;
+  /* Stated rather than inherited: the surface behind this is now the grey canvas. */
+  background: #ffffff;
+}
+
+.pr-helper-history-item:hover { background: rgba(147, 51, 234, 0.06); }
+
+/* Follow-ups hang off the review they were added to. Indented and left-ruled so the parent
+   relationship reads structurally, and with no hover or cursor affordance — a follow-up carries no
+   summary, risk or verdict, so a row that looked clickable would promise a view that cannot exist. */
+.pr-helper-history-followup {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: -4px 0 8px 16px;
+  padding: 8px 12px;
+  border-left: 2px solid var(--color-border-default, #d0d7de);
+  font-size: 12px;
+}
+
+.pr-helper-history-followup-top,
+.pr-helper-history-followup-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.pr-helper-history-followup-tag {
+  padding: 1px 6px;
+  border-radius: 10px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--color-fg-muted, #57606a);
+  background: var(--color-neutral-subtle, rgba(175, 184, 193, 0.2));
+}
+
+.pr-helper-history-followup-scope {
+  color: var(--color-fg-default, #1f2328);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pr-helper-history-followup-added {
+  flex-shrink: 0;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* An investigation arriving borrows the follow-up row wholesale — same indent, same rule, same
+   two-line geometry, same lack of any clickable affordance — because it is the same kind of thing:
+   something added to the review above it, not a review of its own. Only the left edge and the agent
+   name are purple, which is what investigations are coloured everywhere else, so the two kinds of
+   event stay distinguishable at a glance without a second layout to keep in step. */
+.pr-helper-history-investigation-event {
+  border-left-color: #9333ea;
+}
+
+.pr-helper-history-investigation-event-agent {
+  flex-shrink: 0;
+  font-weight: 600;
+  color: #7e22ce;
+}
+
+.pr-helper-history-item-selected {
+  border-color: #9333ea;
+  background: rgba(147, 51, 234, 0.06);
+  box-shadow: inset 0 0 0 1px #9333ea;
+}
+
+.pr-helper-history-item-top,
+.pr-helper-history-item-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.pr-helper-history-model {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-history-risk {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 3px 9px;
+  border-radius: 100px;
+  flex-shrink: 0;
+}
+
+.pr-helper-history-issues,
+.pr-helper-history-options {
+  font-size: 12px;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-history-time {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-fg-muted, #57606a);
+  flex-shrink: 0;
+}
+
+.pr-helper-history-status {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+}
+
+.pr-helper-history-status-generating .pr-helper-history-status { color: #9333ea; }
+.pr-helper-history-status-failed .pr-helper-history-status { color: #cf222e; }
+
+/* ── Assistant tab ── */
+/* The panel is the scroll container for every other tab; the Assistant instead owns the full
+   height and scrolls internally, so the composer can sit outside the scrolled region. Scoped
+   with :has() so this only applies while the Assistant tab is mounted — no class to toggle
+   in content.ts and nothing to unset when another tab renders over it. */
+.pr-helper-review-panel:has(> .pr-helper-chat) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+}
+
+.pr-helper-chat {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Only the conversation scrolls; the chips live in the pinned composer below it. */
+.pr-helper-chat-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 14px 16px;
+  /* The Assistant's canvas. Its panel drops padding to zero and delegates scrolling here, so the
+     recess has to be applied to this element rather than to the panel. */
+  background: #f8fafc;
+}
+
+.pr-helper-chat-composer {
+  flex-shrink: 0;
+  padding: 10px 16px 12px;
+  background: #ffffff;
+  border-top: 1px solid var(--color-border-default, #d0d7de);
+}
+
+.pr-helper-chat-log {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.pr-helper-chat-msg {
+  font-size: 13px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  max-width: 90%;
+  line-height: 1.5;
+}
+
+/* Full width, unlike the user bubble: a reply now carries headings, lists and code blocks,
+   and holding it to 90% only buys an indent that costs a wrapped line on every list item. */
+.pr-helper-chat-msg.role-assistant {
+  background: rgba(147, 51, 234, 0.08);
+  align-self: flex-start;
+  max-width: 100%;
+}
+
+.pr-helper-chat-msg.role-user {
+  background: #0b0f17;
+  color: #f8fafc;
+  align-self: flex-end;
+}
+
+/* Markdown lands on assistant bubbles only (see renderAssistantTab), so everything below is
+   styled for the light bubble above and never has to survive the dark user one. Scoped to
+   the bubble class so none of it leaks into the other tabs' prose. */
+.pr-helper-markdown > *:first-child { margin-top: 0; }
+.pr-helper-markdown > *:last-child { margin-bottom: 0; }
+
+.pr-helper-markdown p { margin: 0 0 10px; }
+
+/* h4-h6 in the markup — sized as section labels rather than document headings, because the
+   bubble they sit in is 13px and the panel already owns the real heading hierarchy. */
+.pr-helper-markdown h4,
+.pr-helper-markdown h5,
+.pr-helper-markdown h6 {
+  margin: 14px 0 6px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--color-fg-default, #24292f);
+}
+
+.pr-helper-markdown h4 { font-size: 13px; }
+.pr-helper-markdown h5 { font-size: 12.5px; }
+.pr-helper-markdown h6 { font-size: 12px; }
+
+.pr-helper-markdown ul,
+.pr-helper-markdown ol {
+  margin: 0 0 10px;
+  padding-left: 18px;
+}
+
+.pr-helper-markdown li + li { margin-top: 4px; }
+
+/* The sidebar is narrow and a code block must never widen it — the block scrolls, the panel
+   doesn't. min-width:0 lets the pre actually shrink inside the flex column above it. */
+.pr-helper-markdown pre {
+  margin: 0 0 10px;
+  padding: 10px 12px;
+  min-width: 0;
+  overflow-x: auto;
+  background: var(--color-neutral-muted, rgba(175, 184, 193, 0.2));
+  border-radius: 6px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+/* ── The copy control on a fenced block ──
+   The wrapper carries the block's bottom margin so the <pre> can sit flush against the button's
+   corner, and so the surrounding stylesheets keep addressing one element per block.
+
+   Shown, not revealed on hover: the reason the button exists is that a snippet in a box that
+   scrolls sideways is awkward to select, and a control you have to find by moving the pointer over
+   the thing is barely better than the selection it replaces. */
+.pr-helper-code-block {
+  position: relative;
+  margin: 0 0 10px;
+}
+
+.pr-helper-code-block > pre { margin: 0; }
+
+.pr-helper-code-copy {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  padding: 2px 8px;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  border-radius: 100px;
+  background: var(--color-canvas-default, #fff);
+  color: var(--color-fg-muted, #57606a);
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+  cursor: pointer;
+  /* The block scrolls under it, so it needs to sit on its own ground rather than let code slide
+     through it. */
+  opacity: 0.9;
+}
+
+.pr-helper-code-copy:hover {
+  opacity: 1;
+  border-color: #9333ea;
+  color: #9333ea;
+}
+
+.pr-helper-code-copy.copied {
+  border-color: #1a7f37;
+  color: #1a7f37;
+  opacity: 1;
+}
+
+/* Inline code is a chip; inside a block that background and padding would double up. */
+.pr-helper-markdown pre code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
+
+.pr-helper-markdown blockquote {
+  margin: 0 0 10px;
+  padding-left: 10px;
+  border-left: 3px solid var(--color-border-default, #d0d7de);
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-markdown hr {
+  margin: 12px 0;
+  border: none;
+  border-top: 1px solid var(--color-border-default, #d0d7de);
+}
+
+.pr-helper-markdown a {
+  color: #0969da;
+  text-decoration: none;
+}
+
+.pr-helper-markdown a:hover { text-decoration: underline; }
+
+.pr-helper-chat-input-row {
+  display: flex;
+  gap: 6px;
+  align-items: flex-end;
+}
+
+.pr-helper-chat-input {
+  flex: 1;
+  padding: 8px 10px;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  resize: none;
+  max-height: 96px;
+  line-height: 1.5;
+}
+
+.pr-helper-chat-input:focus {
+  border-color: #9333ea;
+  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.15);
+}
+
+/* Takes the textarea's place while a reply is in flight. Mirrors its box model exactly —
+   same padding, a transparent border standing in for the real one, and a 1.5-line content
+   box — so the swap never changes the composer's height and the Cancel button beside it
+   doesn't shift. */
+.pr-helper-chat-thinking {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  font-size: 13px;
+  line-height: 1.5;
+  min-height: 1.5em;
+}
+
+/* An author display:flex would otherwise beat the UA stylesheet's [hidden] { display: none }. */
+.pr-helper-chat-thinking[hidden] { display: none; }
+
+/* The dots are shared with the Overview's generating state, where they sit in a centred
+   column with the status copy below them — that bottom margin has no place in a composer row. */
+.pr-helper-chat-thinking .pr-helper-thinking-dots { margin: 0; }
+
+.pr-helper-chat-send {
+  padding: 8px 14px;
+  border: none;
+  border-radius: 8px;
+  background: #9333ea;
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.pr-helper-chat-send:hover { background: #7c3aed; }
+
+/* Same button, destructive colour while a request is in flight — clicking it aborts the
+   reply rather than sending anything. */
+.pr-helper-chat-send-cancel { background: #cf222e; }
+.pr-helper-chat-send-cancel:hover { background: #a40e26; }
+
+/* The chips sit in the composer, above the input row. Capped and independently scrollable so
+   a session with many section prompts can never push the input off the bottom of the panel. */
+.pr-helper-chat-suggestions { margin-bottom: 8px; }
+
+.pr-helper-chat-suggestions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 30vh;
+  overflow-y: auto;
+}
+
+.pr-helper-chat-suggestions-list[hidden] { display: none; }
+
+/* Deliberately quieter than the chips it reveals: once the reviewer is typing their own
+   questions, this is a door they may never open again, not a call to action. */
+.pr-helper-suggestions-toggle {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: 11px;
+  font-weight: 700;
+  font-family: inherit;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #94a3b8;
+  cursor: pointer;
+}
+
+.pr-helper-suggestions-toggle:hover { color: #9333ea; }
+
+.pr-helper-suggestions-toggle::before {
+  content: '';
+  width: 0;
+  height: 0;
+  border-left: 4px solid currentColor;
+  border-top: 3.5px solid transparent;
+  border-bottom: 3.5px solid transparent;
+  transition: transform 0.15s ease;
+}
+
+.pr-helper-suggestions-toggle[aria-expanded='true']::before { transform: rotate(90deg); }
+
+/* Open, the toggle is a label for the list right beneath it rather than a lone control. */
+.pr-helper-suggestions-toggle[aria-expanded='true'] { margin-bottom: 8px; }
+
+.pr-helper-quick-prompts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.pr-helper-quick-prompt-button {
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  padding: 6px 12px;
+  border-radius: 100px;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  background: transparent;
+  color: var(--color-fg-default, #24292f);
+  cursor: pointer;
+}
+
+.pr-helper-quick-prompt-button:hover { border-color: #9333ea; color: #9333ea; }
+
+.pr-helper-quick-prompts-section-group,
+.pr-helper-quick-prompts-saved-group { display: contents; }
+
+/* ── The reviewer's own prompts ──
+   The chip and its edit control read as one object, so the border and the hover colour belong to
+   the chip and not to either half. When each half carried its own, they drew themselves in
+   different greys and only the side under the pointer lit up, which split one prompt into two
+   controls that happened to be touching. */
+.pr-helper-saved-prompt-chip {
+  display: inline-flex;
+  align-items: stretch;
+  /* The same pill as every other prompt button. It was 6px, so a saved prompt was round on the
+     left where the button's own radius showed through and square on the right where this one did,
+     which reads as an unfinished chip rather than as a different kind of one. */
+  border-radius: 100px;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  color: var(--color-fg-default, #24292f);
+  overflow: hidden;
+}
+
+.pr-helper-saved-prompt-chip:hover { border-color: #9333ea; color: #9333ea; }
+
+/* Both halves are surfaces on the chip: no border of their own, no radius of their own, and the
+   colour they draw in is whatever the chip is currently showing. */
+.pr-helper-saved-prompt-chip .pr-helper-saved-prompt-use,
+.pr-helper-saved-prompt-chip .pr-helper-saved-prompt-edit {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+}
+
+.pr-helper-saved-prompt-chip .pr-helper-saved-prompt-use:hover { color: inherit; }
+
+.pr-helper-saved-prompt-edit {
+  /* Wider on the right than the left: the pencil sits inside a curve now, and even padding would
+     crowd it against the arc. */
+  padding: 0 11px 0 7px;
+  font: inherit;
+  font-size: 11px;
+  opacity: 0.55;
+  cursor: pointer;
+}
+.pr-helper-saved-prompt-edit:hover { opacity: 1; }
+
+/* ── The prompt editor ──
+   A name above a paragraph. The two fields were bare boxes with a hairline around them, which
+   read as a form someone had not finished rather than as the place a prompt is written. */
+.pr-helper-saved-prompt-label {
+  display: block;
+  margin: 0 0 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* One rule for both, because a name and a prompt are the same kind of thing to type into and two
+   sets of numbers is how they drift apart. Filled rather than outlined: on a white card an inset
+   field says "type here" without needing a heavier border to do it. */
+.pr-helper-saved-prompt-name,
+.pr-helper-saved-prompt-text {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 9px 11px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  background: #f6f8fa;
+  color: #1f2328;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
+}
+
+.pr-helper-saved-prompt-name::placeholder,
+.pr-helper-saved-prompt-text::placeholder { color: #8c959f; }
+
+.pr-helper-saved-prompt-name:hover,
+.pr-helper-saved-prompt-text:hover { border-color: rgba(0, 0, 0, 0.22); }
+
+/* The field lifts to white on focus and takes the product's purple, so the one being typed into
+   is obvious without moving anything. outline: none is safe here only because the ring below
+   replaces it; it is a visible focus indicator, not the absence of one. */
+.pr-helper-saved-prompt-name:focus,
+.pr-helper-saved-prompt-text:focus {
+  outline: none;
+  background: #ffffff;
+  border-color: #9333ea;
+  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.16);
+}
+
+.pr-helper-saved-prompt-name { margin-bottom: 16px; }
+
+.pr-helper-saved-prompt-text {
+  min-height: 132px;
+  resize: vertical;
+}
+
+/* The field that was rejected says so itself. An error message under a form with three controls
+   leaves the reviewer to work out which one it is about. */
+.pr-helper-saved-prompt-name[aria-invalid='true'],
+.pr-helper-saved-prompt-text[aria-invalid='true'] {
+  border-color: #cf222e;
+  background: rgba(207, 34, 46, 0.04);
+}
+
+.pr-helper-saved-prompt-name[aria-invalid='true']:focus,
+.pr-helper-saved-prompt-text[aria-invalid='true']:focus {
+  border-color: #cf222e;
+  box-shadow: 0 0 0 3px rgba(207, 34, 46, 0.14);
+}
+
+.pr-helper-saved-prompt-error {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin: 10px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #cf222e;
+}
+
+.pr-helper-saved-prompt-error::before {
+  content: '!';
+  flex: none;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: #cf222e;
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 15px;
+  text-align: center;
+}
+
+.pr-helper-quick-prompts-divider {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #94a3b8;
+  margin-bottom: 6px;
+}
+
+/* display:contents above, so the divider and its chip row become items of the suggestions
+   stack directly — one gap governs the whole footer instead of a margin per group. */
+
+/* ── Header — dark brand strip ── */
+.pr-helper-sidebar-header {
+  background: #0b0f17;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 12px 16px 14px 20px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.pr-helper-sidebar-header::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: #9333ea;
+  border-radius: 0 2px 2px 0;
+}
+
+.pr-helper-header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+/* The wordmark, two-tone: "pr" and "buddy" in the accent purple, "review" in the neutral ink.
+   This header is dark (#0b0f17 above), so the ink is near-white. Values are literal rather than
+   tokens because this sheet is injected into GitHub, where our :root never applies. */
+.pr-helper-brand-text {
+  font-family: 'Comfortaa', ui-rounded, 'SF Pro Rounded', 'Segoe UI Rounded', system-ui, sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+  color: #f8fafc;
+}
+
+.pr-helper-brand-text .pr-helper-wordmark-accent { color: #a855f7; }
+
+/* Anchors the bookmark so it is a sibling of the title rather than something the title has to
+   flow around. Matches .pr-meta in popup.css, which solves the identical problem. */
+.pr-helper-pr-headline {
+  position: relative;
+  margin-bottom: 6px;
+}
+
+/* Two lines, clamped — not one line ellipsised as before. A PR title carrying a ticket prefix
+   ("PR #38921 · [INF-3765] …") spends most of its first line before reaching any words that
+   distinguish it, so a single line truncated at the sidebar's width told the reviewer almost
+   nothing. The right padding reserves the bookmark's column so the second line clamps beside it. */
+.pr-helper-pr-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #f8fafc;
+  line-height: 1.35;
+  padding-right: 32px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+/* The popup's .pr-meta-stats: byline, then size, as plain coloured text rather than pills. The
+   pills these used to be competed with the severity badges further down the sidebar, which are the
+   ones that actually mean something. */
+.pr-helper-header-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.pr-helper-additions-stat { color: #4ade80; }
+.pr-helper-deletions-stat { color: #f87171; }
+
+/* ── Save for later (header bookmark) ──
+   The popup's .pr-meta-save, positioned against the headline for the same reason: it acts on the
+   PR the title names. Saved state is the filled/outline path swap plus the brand colour, never
+   colour alone — see the aria-pressed written alongside it in paintSavedForLaterButton. */
+.pr-helper-pr-save {
+  position: absolute;
+  top: -2px;
+  right: 0;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #94a3b8;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, color 0.15s;
+}
+
+.pr-helper-pr-save svg { fill: currentColor; }
+.pr-helper-pr-save:hover { background: rgba(255, 255, 255, 0.08); color: #f8fafc; }
+
+.pr-helper-bookmark-filled { display: none; }
+.pr-helper-pr-save.saved { color: #a855f7; }
+.pr-helper-pr-save.saved .pr-helper-bookmark-outline { display: none; }
+.pr-helper-pr-save.saved .pr-helper-bookmark-filled { display: inline; }
+.pr-helper-pr-save.saved:hover { background: rgba(168, 85, 247, 0.16); color: #a855f7; }
+
+/* The byline leads the meta row. Tighter gap than the row's own 6px so the avatar and login read
+   as one unit rather than as two more badges, and no pill treatment: it names a person, while the
+   badges beside it measure the diff. */
+.pr-helper-pr-author {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  max-width: 45%;
+  flex: 0 1 auto;
+}
+
+/* Scoped rather than a bare `.hidden`: this sheet is injected into github.com, where an
+   unprefixed class would collide with GitHub's own. Same precedent as the footer's rule above. */
+.pr-helper-pr-author.hidden { display: none; }
+
+/* Sized to the 11px meta line, not to the 28px Saved Reviews row: here the avatar is an accent on
+   a line of text, not the leading element of a list row. Colours are literal because this sheet
+   is injected into GitHub, where our :root tokens never apply. */
+.pr-helper-pr-author-avatar {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 600;
+  line-height: 1;
+  color: #94a3b8;
+  text-transform: uppercase;
+  overflow: hidden;
+}
+
+/* Covers the initial underneath, so a failed load needs no more than removing this element. */
+.pr-helper-pr-author-avatar img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.pr-helper-pr-author-name {
+  font-size: 11px;
+  color: #cbd5e1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pr-helper-pr-branch {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 11px;
+  color: #64748b;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 4px;
+  padding: 2px 7px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* Was a flat 160px cap, which clipped branch names well short of the header's actual
+     width. flex-grow:0 keeps the pill hugging its own text like the FILES badge next to
+     it, rather than stretching to fill the row's leftover space — it only shrinks (and
+     then ellipsizes) once the row genuinely runs out of room. min-width:0 is required for
+     a flex item's text-overflow to ever kick in — without it the row would just overflow
+     instead of truncating. */
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* Workspace controls, grouped: Back/Forward belong with Hide rather than with the branding,
+   which is also what says they act on the sidebar and not on the page under it. */
+.pr-helper-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+/* Separates navigation from Hide so three icons in a row don't read as one control group. */
+.pr-helper-header-actions-divider {
+  width: 1px;
+  height: 14px;
+  background: rgba(255, 255, 255, 0.12);
+  margin: 0 4px;
+}
+
+.pr-helper-collapse-button,
+.pr-helper-nav-button {
+  padding: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #64748b;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  font-family: inherit;
+  transition: color 0.15s;
+  flex-shrink: 0;
+}
+
+.pr-helper-collapse-button:hover,
+.pr-helper-nav-button:not(:disabled):hover { color: #f8fafc; }
+
+.pr-helper-collapse-button svg,
+.pr-helper-nav-button svg { width: 16px; height: 16px; }
+
+/* The real disabled attribute here, unlike the review tabs, which use aria-disabled
+   specifically to keep their explanatory tooltip alive through pointer events. A Back button
+   with nowhere to go has nothing to explain, so swallowing the events is the better trade and
+   comes with the right semantics for assistive tech for free. */
+.pr-helper-nav-button:disabled {
+  color: #334155;
+  cursor: default;
+}
+
+/* The Files tab (search + list) owns the panel's full height and scrolls internally, the
+   same way the Assistant tab does — see the :has() rule above it — so the search bar can
+   stay pinned above a scrolling list instead of scrolling away with it. Scoped with
+   :has() rather than a class so nothing needs unsetting when another tab renders over it. */
+.pr-helper-review-panel:has(> .pr-helper-search-container) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+}
+
+/* ── Search ── */
+.pr-helper-search-container {
+  flex-shrink: 0;
+  padding: 16px 16px 14px;
+  border-bottom: 1px solid var(--color-border-default, #d0d7de);
+  background: #ffffff;
+}
+
+/* The count's positioning anchor, and the reason it exists: .pr-helper-search-container has
+   asymmetric padding, so an absolute count anchored to it centres on the container's box rather
+   than the input's and lands on the input's right border. This box *is* the input's box. */
+.pr-helper-search-field {
+  position: relative;
+}
+
+.pr-helper-search-input {
+  width: 100%;
+  padding: 10px 36px 10px 12px;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--color-fg-default, #24292f);
+  background: #ffffff;
+  box-sizing: border-box;
+  font-family: inherit;
+  outline: none;
+}
+
+.pr-helper-search-input:focus {
+  border-color: #9333ea;
+  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.15);
+}
+
+.pr-helper-search-count {
+  position: absolute;
+  /* Inside the 36px right gutter the input reserves for it (padding-right), clear of the border
+     rather than sitting on it. */
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 11px;
+  color: var(--color-fg-muted, #57606a);
+  display: none;
+}
+
+.pr-helper-no-results {
+  padding: 24px 16px;
+  text-align: center;
+  color: var(--color-fg-muted, #57606a);
+  font-size: 14px;
+}
+
+/* ── File list ── */
+.pr-helper-file-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px 0;
+  /* Same canvas as the other two scroll areas. The rows below stay white, so the grey shows
+     through at the group headers and separates the groups without adding a rule between them. */
+  background: #f8fafc;
+}
+
+.pr-helper-file-item {
+  position: relative;
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  color: var(--color-fg-default, #24292f);
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  background: #ffffff;
+  transition: background 0.12s, border-left-color 0.12s;
+  box-sizing: border-box;
+}
+
+.pr-helper-file-item:hover {
+  background: rgba(147, 51, 234, 0.04);
+  border-left-color: #9333ea;
+}
+
+.pr-helper-file-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  /* The gap between filename, badges and description — a single flex gap since all three
+     are direct children of this box, rather than separate margins on each that could
+     drift out of step with one another. */
+  gap: 6px;
+}
+
+/* Review context layered onto the raw file rows. The Files tab used to render either GitHub's
+   file browser or a list of AI file summaries, never both; now it's one list carrying GitHub's
+   facts (path, +/- counts, search) and the review's meaning together. These two rules are
+   additive — a file the review didn't cover simply omits them and the row looks as it always
+   did, which is also what every row looks like before a review has been generated. */
+.pr-helper-file-review-badges {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+/* Borrows the History tab's group-label treatment (.pr-helper-history-group-label) — both
+   partition a flat list into labelled runs, so they should read the same way. */
+.pr-helper-file-group-header {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  color: var(--color-fg-muted, #57606a);
+  /* Left inset matches a row's text, not the panel edge: .pr-helper-file-item is 16px of padding
+     inside a 2px left border, so its filename starts 18px in. A header at 2px reads as belonging
+     to the panel rather than to the rows it labels. */
+  padding: 12px 16px 4px 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+/* Quieter than .pr-helper-action-btn — this acts on a whole group, so it must not out-shout the
+   per-row actions or read as the primary thing to do on the tab. */
+.pr-helper-file-group-action {
+  font-family: inherit;
+  font-size: 11px;
+  letter-spacing: 0;
+  text-transform: none;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: #ffffff;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  color: #9333ea;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.pr-helper-file-group-action:hover:not(:disabled) {
+  border-color: #9333ea;
+  background: #faf5ff;
+}
+
+.pr-helper-file-group-action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.pr-helper-file-group-header:first-child { padding-top: 2px; }
+
+/* Amber rather than the section badge's purple: purple means "the review has something to say
+   about this file", and this badge means the exact opposite — nothing could read it. Shares the
+   hue with .pr-helper-file-stat-issues, the row's other "needs your attention" signal. */
+.pr-helper-file-badge-unavailable {
+  display: inline-block;
+  width: fit-content;
+  font-size: 11px;
+  color: #9a6700;
+  background: rgba(154, 103, 0, 0.1);
+  border-radius: 100px;
+  padding: 2px 9px;
+}
+
+.pr-helper-file-review-focus {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* ── The findings themselves, under the file row ──
+   Indented behind a hairline rather than boxed: these are pointers into the Issues and Questions
+   tabs, and giving each one a card would make the row look like the place the finding lives. The
+   rule reads as "belonging to the file above" without competing with the real cards. */
+.pr-helper-file-findings {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 6px;
+  padding-left: 8px;
+  border-left: 2px solid var(--color-border-muted, #d8dee4);
+}
+
+.pr-helper-file-finding-heading {
+  margin: 0 0 3px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-file-finding-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.pr-helper-file-finding {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: 0;
+  border-radius: 5px;
+  padding: 3px 4px;
+  margin: 0;
+  font: inherit;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--color-fg-default, #1f2328);
+  cursor: pointer;
+}
+
+.pr-helper-file-finding:hover { background: rgba(175, 184, 193, 0.18); }
+
+.pr-helper-file-finding:focus-visible {
+  outline: 2px solid var(--color-accent-fg, #0969da);
+  outline-offset: -1px;
+}
+
+/* Clamped in CSS, never in the markup: the full title stays in the DOM for find-in-page and in
+   the title attribute for hover. Two lines is enough for the long, specific finding titles that
+   are worth reading and short enough that five findings still fit on a screen. */
+.pr-helper-file-finding-label {
+  flex: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Severity as a dot, not a pill. The Issues tab spells the word out on a card the reviewer has
+   arrived at to read; here the finding is one line in a list under a filename, and four uppercase
+   pills down the left edge would out-shout the titles they are grading. Colour carries the rank,
+   the tooltip carries the meaning, and the word itself is one click away. */
+.pr-helper-file-finding-dot {
+  flex-shrink: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  align-self: center;
+  background: var(--pr-helper-pill-neutral-fg);
+}
+
+.pr-helper-file-finding-dot.pr-helper-severity-critical { background: var(--pr-helper-pill-danger-fg); }
+.pr-helper-file-finding-dot.pr-helper-severity-major { background: var(--pr-helper-pill-warning-fg); }
+.pr-helper-file-finding-dot.pr-helper-severity-minor { background: var(--pr-helper-pill-info-fg); }
+.pr-helper-file-finding-dot.pr-helper-severity-nit { background: var(--pr-helper-pill-neutral-fg); }
+
+/* Struck through, not hidden: a refuted finding is retired but stays on the record, and the
+   reviewer may well want to open it to read why. The strike is on the label alone so the pill
+   stays readable. */
+.pr-helper-file-finding-is-refuted .pr-helper-file-finding-label {
+  text-decoration: line-through;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-file-finding-is-refuted .pr-helper-file-finding-dot { opacity: 0.4; }
+
+.pr-helper-file-finding-refuted {
+  flex-shrink: 0;
+  align-self: center;
+  font-size: 10px;
+  color: var(--color-fg-muted, #57606a);
+  background: rgba(175, 184, 193, 0.22);
+  border-radius: 100px;
+  padding: 1px 7px;
+}
+
+.pr-helper-file-finding-followup {
+  flex-shrink: 0;
+  align-self: center;
+  font-size: 10px;
+  color: var(--color-fg-muted, #57606a);
+  background: rgba(175, 184, 193, 0.22);
+  border-radius: 100px;
+  padding: 1px 7px;
+}
+
+/* Same treatment and duration as .pr-helper-guide-section-highlight, which is the other "you asked
+   to be taken here, this is the one" flash in the sidebar. Blue rather than that one's green: green
+   there means completed, and a finding you have just jumped to is not. */
+.pr-helper-finding-highlight {
+  background: rgba(9, 105, 218, 0.14);
+  border-color: rgba(9, 105, 218, 0.45);
+}
+
+
+.pr-helper-file-stats {
+  font-size: 12px;
+  color: var(--color-fg-muted, #57606a);
+  white-space: nowrap;
+  padding: 2px 8px;
+  background: rgba(175, 184, 193, 0.15);
+  border-radius: 10px;
+  flex-shrink: 0;
+  align-self: flex-start;
+  transition: opacity 0.12s;
+}
+
+.pr-helper-file-item:hover .pr-helper-file-stats { opacity: 0; }
+
+/* ── Hover-reveal action buttons ── */
+.pr-helper-file-actions {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+}
+
+/* Opaque too, and for the same reason as the buttons: making only the buttons solid still lets
+   text show through the gaps between them. The tray occludes as one block.
+
+   The colour tracks the row's own state rather than being a flat white, because the row tints on
+   hover — #fbf7fe is that 4% purple composited over white, precomputed because a translucent
+   overlay on a translucent row would double the tint.
+
+   Bordered and shadowed, because the tray is not part of the row: it is absolutely positioned over
+   the top of it, occluding whatever text is underneath. Without an edge, three buttons simply
+   appeared mid-sentence with no account of where the words went — the outline plus the shadow say
+   "this is one panel, floating above", which is exactly what it is.
+
+   Radius 8 against the buttons' 4: an outer corner has to be looser than the corners it contains,
+   or the nesting reads as a mistake. Padding is symmetric now for the same reason — the old
+   `0 … 14px` let the buttons sit flush against the right edge, which is invisible without a border
+   and lopsided with one. */
+.pr-helper-file-actions {
+  background: #ffffff;
+  padding: 4px 6px;
+  border: 1px solid rgba(147, 51, 234, 0.25);
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(31, 35, 40, 0.10);
+  /* The tray's default `stretch` left the "Analysing…" label top-aligned in a box the taller
+     Cancel button had grown, so the two read as being on different lines. */
+  align-items: center;
+}
+
+.pr-helper-file-item:hover .pr-helper-file-actions {
+  opacity: 1;
+  pointer-events: auto;
+  background: #fbf7fe;
+}
+
+/* Opts out of the hover gate above, and must: this is the only indication that a follow-up is
+   running and the only way to stop it, so a version of it you have to hover to find would leave
+   the run as invisible as it was before the Cancel existed. */
+.pr-helper-file-actions-running {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Matches .pr-helper-suggested-area-busy — the two say the same thing about the same operation. */
+.pr-helper-file-action-busy {
+  font-size: 11px;
+  color: var(--color-fg-muted, #57606a);
+  white-space: nowrap;
+}
+
+@keyframes pr-helper-spin { to { transform: rotate(360deg); } }
+
+/* A spinner rather than a progress bar, on every in-flight LLM call the sidebar shows.
+
+   Deliberately indeterminate: each of these is a single LLM call, so there is no percentage to
+   report and no intermediate step to name. A bar that filled at a made-up rate would be a
+   progress claim we cannot support — the same objection as any other number the product states
+   without being able to back it. What the reviewer actually needs to know is "still running,
+   not stuck", which motion conveys and static text does not.
+
+   One rule for all three selectors on purpose. "Applying…" on an investigation and "Analysing…" on
+   a file are the same promise to the reviewer — one request is out, wait for it — and two
+   different-looking spinners would imply a difference that does not exist. Adding a fourth waiting
+   state means adding it to this list, not inventing another animation. */
+.pr-helper-file-action-busy::before,
+.pr-helper-suggested-area-busy::before,
+.pr-helper-investigate-applying::before {
+  content: '';
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px;
+  vertical-align: -1px;
+  border: 1.5px solid rgba(147, 51, 234, 0.25);
+  border-top-color: #9333ea;
+  border-radius: 50%;
+  animation: pr-helper-spin 0.7s linear infinite;
+}
+
+/* Explain and Copy — the row itself scrolls to the diff, so both stay explicit buttons.
+   One shared outlined-secondary style: the actions are peers and shouldn't rank each other. */
+.pr-helper-action-btn {
+  font-size: 12px;
+  font-family: inherit;
+  padding: 4px 10px;
+  border-radius: 4px;
+  /* Opaque, not transparent. The tray these sit in is absolutely positioned over the row, so a
+     see-through button lets the description and badges read straight through its label. Harmless
+     while the row only had Explain and Copy over mostly-empty space; immediately visible once a
+     third button widened the tray far enough to reach the text. */
+  background: #ffffff;
+  border: 1px solid #9333ea;
+  color: #9333ea;
+  cursor: pointer;
+  line-height: 18px;
+  white-space: nowrap;
+  transition: background 0.1s;
+}
+
+.pr-helper-action-btn:hover:not(:disabled) { background: #f4e8fd; }
+
+/* Reads as "not right now" rather than broken — the row is still hovering, so the button has
+   to stay visible while it waits out an in-flight assistant request. */
+.pr-helper-action-btn:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+/* ── Scrollbar ── */
+.pr-helper-file-list::-webkit-scrollbar { width: 6px; }
+.pr-helper-file-list::-webkit-scrollbar-track { background: transparent; }
+.pr-helper-file-list::-webkit-scrollbar-thumb {
+  background: rgba(175, 184, 193, 0.4);
+  border-radius: 3px;
+}
+.pr-helper-file-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(175, 184, 193, 0.6);
+}
+
+/* ── Toast ── */
+.pr-helper-toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  padding: 8px 16px;
+  background: #2da44e;
+  color: #ffffff;
+  border-radius: 6px;
+  font-size: 13px;
+  z-index: 1000000;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+.pr-helper-toast svg { width: 16px; height: 16px; flex-shrink: 0; }
+.pr-helper-toast.show { opacity: 1; transform: translateY(0); }
+.pr-helper-toast.error { background: #cf222e; }
+
+/* ── Rating prompt ── */
+.pr-helper-rating-prompt {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 300px;
+  padding: 16px;
+  background: #ffffff;
+  color: #1f2328;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  z-index: 1000000;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: all 0.3s ease;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+.pr-helper-rating-prompt.show { opacity: 1; transform: translateY(0); }
+
+.pr-helper-rating-prompt-title {
+  margin: 0 0 6px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.pr-helper-rating-prompt-body {
+  margin: 0 0 14px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #57606a;
+}
+
+.pr-helper-rating-prompt-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.pr-helper-rating-prompt-btn {
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: #f6f8fa;
+  color: #1f2328;
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: center;
+}
+
+.pr-helper-rating-prompt-btn:hover { border-color: #9333ea; color: #9333ea; }
+
+.pr-helper-rating-prompt-btn-primary {
+  background: #9333ea;
+  border-color: #9333ea;
+  color: #ffffff;
+}
+
+.pr-helper-rating-prompt-btn-primary:hover { background: #7c3aed; border-color: #7c3aed; color: #ffffff; }
+
+.pr-helper-rating-prompt-btn-quiet {
+  background: transparent;
+  border-color: transparent;
+  color: #57606a;
+}
+
+.pr-helper-rating-prompt-btn-quiet:hover { border-color: transparent; color: #1f2328; }
+
+/* ── Guided navigation overlay ── */
+/* Bottom-LEFT: toast (above, bottom-right) and rating-prompt (above, bottom-right) both live
+   in the opposite corner, so this never collides with either. Kept intentionally small —
+   media-player-controls sized, not a second sidebar (no checklist/issues/summary here). */
+.pr-helper-nav-overlay {
+  position: fixed;
+  bottom: 24px;
+  left: 24px;
+  z-index: 999997; /* below toggle-tab's 999998 and sidebar's 999999; sidebar is docked right so no structural overlap regardless */
+  width: 280px;
+  max-width: calc(100vw - 48px);
+  padding: 12px 14px;
+  background: #ffffff;
+  color: #1f2328;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  transition: width 0.2s ease, height 0.2s ease, padding 0.2s ease, border-radius 0.2s ease, left 0.2s ease, background 0.2s ease;
+}
+
+/* The tab is a permanent sibling of the panel, only shown while collapsed — see
+   navigation_overlay.ts's showNavigationOverlay() for why (keeps expand/collapse a single
+   class toggle rather than a DOM rebuild, so restoring never re-fetches or resets anything). */
+.pr-helper-nav-overlay-tab { display: none; }
+
+/* "Hide guide" collapses to this — mirrors .pr-helper-toggle-button's own vertical-tab
+   pattern (sidebar.css, further down) but anchored to the left edge, flush like that one is
+   flush right, so it reads as the same interaction pattern reused rather than a new one. */
+.pr-helper-nav-overlay.pr-helper-nav-overlay-collapsed {
+  left: 0;
+  width: auto;
+  padding: 0;
+  background: #9333ea;
+  border: 1px solid #7c3aed;
+  border-left: none;
+  border-radius: 0 6px 6px 0;
+  box-shadow: 2px 0 8px rgba(147, 51, 234, 0.3);
+}
+
+.pr-helper-nav-overlay-collapsed .pr-helper-nav-overlay-panel { display: none; }
+
+.pr-helper-nav-overlay-collapsed .pr-helper-nav-overlay-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px 8px;
+  border: none;
+  background: transparent;
+  color: #ffffff;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  writing-mode: vertical-rl;
+  transition: padding 0.2s ease;
+}
+
+.pr-helper-nav-overlay-collapsed .pr-helper-nav-overlay-tab:hover { padding-left: 10px; }
+
+.pr-helper-nav-overlay-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.pr-helper-nav-overlay-eyebrow {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #9333ea;
+  margin-bottom: 2px;
+}
+
+.pr-helper-nav-overlay-title {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+/* A text label, not a bare "×" — a lone icon is easy to click without realizing what it does
+   (or that the sidebar's toggle tab reopens it), so it's spelled out. */
+.pr-helper-nav-overlay-close {
+  flex-shrink: 0;
+  background: transparent;
+  border: none;
+  color: #57606a;
+  font-size: 11px;
+  font-weight: 600;
+  font-family: inherit;
+  line-height: 1.3;
+  cursor: pointer;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
+
+.pr-helper-nav-overlay-close:hover { color: #1f2328; text-decoration: underline; }
+
+.pr-helper-nav-overlay-progress {
+  margin-top: 2px;
+  font-size: 11px;
+  color: #57606a;
+}
+
+/* Sits between the progress line and the scrollable item list — outside the list on purpose,
+   so it never competes for that 160px scroll region. */
+.pr-helper-nav-overlay-focus {
+  margin-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.pr-helper-nav-overlay-focus-eyebrow {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #9333ea;
+  margin-bottom: 4px;
+}
+
+/* Shown in full, never clipped — a half-sentence ("Verify cached targets, polymorphic…") is
+   worse than no note at all, since the reviewer can't act on the part that got cut. Length is
+   controlled upstream instead: the prompt caps focus at one or two sentences (~20-35 words),
+   which wraps to about four lines here. The panel is still never widened to fit this text —
+   keeping the navigator narrow matters more than saving a line of wrapping. */
+.pr-helper-nav-overlay-focus-text {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.45;
+  color: #57606a;
+}
+
+.pr-helper-nav-overlay-items {
+  list-style: none;
+  margin: 10px 0;
+  padding: 0;
+  max-height: 160px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  /* macOS defaults to overlay scrollbars that are invisible until actively scrolling, so a
+     long file list (large PRs) reads as cut off rather than scrollable — force a slim,
+     always-visible scrollbar instead of relying on the OS setting. */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+}
+
+.pr-helper-nav-overlay-items::-webkit-scrollbar { width: 6px; }
+.pr-helper-nav-overlay-items::-webkit-scrollbar-track { background: transparent; }
+.pr-helper-nav-overlay-items::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 3px;
+}
+.pr-helper-nav-overlay-items::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.4); }
+
+.pr-helper-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* Without this, the flex column parent's max-height (below) makes rows shrink to fit
+     instead of overflowing — on a long PR every row gets squeezed short rather than the
+     list scrolling, which is the actual bug this fixes (not a missing scrollbar). */
+  flex-shrink: 0;
+}
+
+.pr-helper-nav-item:hover { background: rgba(0, 0, 0, 0.04); }
+
+.pr-helper-nav-item-marker { flex-shrink: 0; width: 14px; text-align: center; color: #57606a; }
+
+.pr-helper-nav-item-label { overflow: hidden; text-overflow: ellipsis; }
+
+/* The current item is visually distinct (fill, not just a different glyph) so the active
+   target is unmissable at a glance — persistent, not a timed highlight. */
+.pr-helper-nav-item-current {
+  background: rgba(147, 51, 234, 0.12);
+  font-weight: 600;
+}
+.pr-helper-nav-item-current .pr-helper-nav-item-marker { color: #9333ea; }
+.pr-helper-nav-item-current:hover { background: rgba(147, 51, 234, 0.18); }
+
+/* Neutral, not GitHub's approval-green — "visited" means scrolled past, not reviewed or
+   approved, and the color shouldn't suggest otherwise. */
+.pr-helper-nav-item-visited .pr-helper-nav-item-marker { color: #57606a; }
+
+.pr-helper-nav-overlay-controls {
+  display: flex;
+  gap: 8px;
+}
+
+.pr-helper-nav-overlay-btn {
+  flex: 1;
+  padding: 8px 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: #f6f8fa;
+  color: #1f2328;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: center;
+}
+
+.pr-helper-nav-overlay-btn:hover { border-color: #9333ea; color: #9333ea; }
+
+.pr-helper-nav-overlay-btn-primary {
+  background: #9333ea;
+  border-color: #9333ea;
+  color: #ffffff;
+}
+
+.pr-helper-nav-overlay-btn-primary:hover { background: #7c3aed; border-color: #7c3aed; color: #ffffff; }
+
+/* Held for ~250ms between the Finish click and the overlay teardown (markOverlayFinishing)
+   so the button commits to the action before everything it lives in disappears. Wins over
+   :hover, which is necessarily still active at the moment of the click. */
+.pr-helper-nav-overlay-btn {
+  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
+}
+
+.pr-helper-nav-overlay-btn-primary.pr-helper-nav-overlay-btn-finishing,
+.pr-helper-nav-overlay-btn-primary.pr-helper-nav-overlay-btn-finishing:hover {
+  background: #1a7f37;
+  border-color: #1a7f37;
+  color: #ffffff;
+}
+
+/* Marks the currently-navigated-to file on the GitHub page — a separate fixed-position box
+   tracking the target's getBoundingClientRect(), not an outline on the container itself (see
+   github_diff_navigator.ts's applyHighlight() for why: GitHub's containment/stacking context
+   swallows a direct outline). Persistent — removed only when navigateTo() moves to a
+   different target, never timed out. pointer-events: none so it never blocks clicks/selection
+   on the diff underneath. */
+.pr-helper-nav-spotlight {
+  position: fixed;
+  border: 2px solid #9333ea;
+  border-radius: 6px;
+  pointer-events: none;
+  z-index: 999996; /* below the overlay's 999997, above ordinary page content */
+  /* No dimming wash behind this. It used to carry `box-shadow: 0 0 0 2000px rgba(147,51,234,
+     0.04)` — a full-page purple tint over everything outside the box, painted above all of
+     GitHub's own content. At 4% it read as subtle until something saturated sat under it:
+     GitHub's blue focus ring looked like it was rendering *behind* the page. The border and
+     the file-tree row tint below already say which file is current without recolouring the
+     rest of GitHub. */
+}
+
+/* Applied by GitHubDiffNavigator to the current target's container and its first child.
+   Suppresses GitHub's own styling on that one file, for as long as it's the highlighted one:
+
+   - Its rounded border, which the spotlight now sits directly on top of (the spotlight traces
+     the container's own rect exactly — see applyHighlight's rect handling).
+   - Its selected-file styling, which GitHub applies to the container when the file is reached
+     through GitHub's own file tree. Blanked as outline and box-shadow as well as border-color,
+     because only the border was ever suppressed and the rest showed through as blue edges
+     around a purple box. Note this is only half of "one highlight at a time" — it covers our
+     highlight landing on a file GitHub already marked. The other half is the reverse order, and
+     that one can't be done in CSS: see watchForGitHubFileNavigation().
+   - The focus ring GitHub puts on the file header's collapse caret when a #diff-<hash> fragment
+     targets the file. GitHubDiffNavigator.releaseStolenFocus already blurs the focus we caused;
+     this covers GitHub re-focusing it afterwards on its own. Scoped to the highlighted file
+     rather than applied globally so keyboard focus everywhere else on the page still shows a
+     ring — it's a deliberate, narrow trade of that affordance inside one file for a clean box. */
+.pr-helper-nav-target {
+  border-color: transparent !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.pr-helper-nav-target :focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* The "Collapse file" bubble GitHub pops when its caret takes focus. GitHubDiffNavigator's
+   focus guard is what actually prevents this (no focus, no tooltip); this is the backstop for
+   the moments the guard isn't holding — GitHub renders these as <tool-tip> custom elements next
+   to their trigger, so hiding the ones inside the highlighted file leaves every other tooltip
+   on the page working normally. */
+.pr-helper-nav-target tool-tip {
+  display: none !important;
+}
+
+/* Marks the current target's row in GitHub's own file-tree sidebar — a plain class toggle
+   works here (unlike the diff container, this row isn't subject to CSS containment), so no
+   spotlight-tracking is needed. !important guards against GitHub's own selected/hover-state
+   background rules on the same row winning by specificity. */
+.pr-helper-nav-tree-highlight {
+  background: rgba(147, 51, 234, 0.14) !important;
+  box-shadow: inset 3px 0 0 #9333ea;
+}
+
+/* Marks the comment behind an "Already raised by @x" link, applied by
+   github_comment_highlighter.ts after the jump. Same purple, same "border, no wash" treatment as
+   the diff spotlight above, so following a link from the Issues tab to a prior comment looks
+   like following one to a file.
+
+   Every declaration is !important because this is a fight with GitHub, not with ourselves: the
+   jump keeps the #discussion_r<id> fragment (it's what expands a collapsed or resolved thread),
+   and that fragment makes GitHub paint its own accent-blue border on the targeted comment. A
+   plain class loses to GitHub's own rules on specificity, so ours have to outrank them.
+
+   No fixed-position spotlight box here, unlike the diff container: a timeline comment is
+   ordinary flow content with no CSS containment to swallow the border. */
+.pr-helper-comment-highlight {
+  border-color: #9333ea !important;
+  border-radius: 6px !important;
+  box-shadow: 0 0 0 2px #9333ea !important;
+}
+
+/* The fragment's element is often a stub *inside* the comment box we highlighted, so GitHub's
+   blue can still be sitting on a descendant after the rule above has recoloured the box itself.
+   Scoped under our class so :target styling anywhere else on the page is left alone. */
+.pr-helper-comment-highlight :target {
+  border-color: #9333ea !important;
+  box-shadow: none !important;
+}
+
+/* Marks the current target's row inside the Guide tab's section card, kept in sync with the
+   overlay by PRHelperSidebar.syncGuidedNavUi(). */
+.pr-helper-guide-file-current {
+  background: rgba(147, 51, 234, 0.12);
+  border-radius: 6px;
+}
+
+/* ── Toggle button — vertical tab ── */
+.pr-helper-toggle-button {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  background: #9333ea;
+  border: 1px solid #7c3aed;
+  border-right: none;
+  border-radius: 6px 0 0 6px;
+  padding: 16px 8px;
+  cursor: pointer;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  font-size: 11px;
+  font-weight: 600;
+  color: #ffffff;
+  z-index: 999998;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  writing-mode: vertical-rl;
+  transition: all 0.2s ease;
+  box-shadow: -2px 0 8px rgba(147, 51, 234, 0.3);
+  letter-spacing: 0.04em;
+}
+
+.pr-helper-toggle-button:hover {
+  background: #7c3aed;
+  border-color: #6d28d9;
+  padding-right: 10px;
+}
+
+.pr-helper-toggle-button:disabled { opacity: 0.6; cursor: not-allowed; }
+
+.pr-helper-toggle-button svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  transform: rotate(90deg);
+}
+
+/* ── Floater → sidebar morph ──
+   The floater is the origin point of the sidebar, not a separate control that opens one. Two
+   phases, deliberately sequential rather than one combined move:
+
+     1. The button itself stretches along the edge it already sits on — from its own height,
+        centred, out to the full viewport — becoming a purple rail. Its label fades as it goes,
+        since a vertical word stretched over 900px is just noise.
+     2. The sidebar slides out of that rail, using the SAME translateX transition the base rule
+        has always used. Nothing about phase 2 is new, which is the point: the only new motion is
+        phase 1, along an axis the button already occupies.
+
+   Splitting them this way keeps the sidebar's own transform and transition untouched. An earlier
+   version grew a clip-path window over the panel instead, which had to override transform, fight
+   the base transition, and hand both back on teardown — where clip-path reverts to the
+   non-interpolable `none`, snapping the whole panel into view before sliding it off.
+
+   The rail is the real button, not a stand-in, so the purple, the radius and the shadow are the
+   button's own by construction. z-index 999998 keeps it one below the sidebar, so phase 2 covers
+   it and the restore afterwards is never seen. */
+/* Height AND width are deliberately absent here and driven inline from JS at both ends. The
+   button's resting size follows its label, i.e. `auto`, which cannot interpolate — so the start
+   values have to be written inline as pixels, and an inline value outranks this rule, meaning any
+   end value declared here would simply never win. Everything else is fine to own from CSS.
+
+   The rail narrows as it grows: the button thins to exactly the width of the purple edge the
+   sidebar carries (see the sidebar's inset box-shadow), so the line the button becomes is the same
+   line the panel draws out. A rail at the button's full width reads as a slab. `overflow: hidden`
+   keeps the label clipped rather than spilling as it goes. */
+.pr-helper-toggle-button--stretching {
+  top: 0;
+  transform: translateY(0);
+  border-radius: 0;
+  cursor: default;
+  padding: 0;
+  min-width: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  transition:
+    top 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
+    height 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
+    width 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
+    padding 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
+    transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
+    border-radius 0.26s ease;
+}
+
+/* The stretch reads as the button becoming an edge, so its content has to go. Faster than the
+   stretch itself — the label should be gone well before the rail reaches full height. */
+.pr-helper-toggle-button--stretching svg,
+.pr-helper-toggle-button--stretching span {
+  opacity: 0;
+  transition: opacity 0.12s ease-out;
+}
+
+/* Suppresses every transition for one frame so the rail can be handed back to its resting
+   geometry without animating there. Applied while the open sidebar covers it. */
+.pr-helper-toggle-button--instant {
+  transition: none;
+}
+
+/* Phase 2's timing. Marginally slower than the base 0.3s and eased to match phase 1, so the two
+   halves read as one movement rather than two clips spliced together. */
+.pr-helper-sidebar--from-rail {
+  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+/* Shown only while the panel has nothing in it at all — a first open, waiting on PR data. Bars,
+   deliberately: a skeleton shaped like findings and pills would be promising content the review
+   may not have. */
+.pr-helper-panel-skeleton {
+  padding: 20px;
+}
+
+.pr-helper-panel-skeleton-bar {
+  position: relative;
+  height: 12px;
+  margin-bottom: 12px;
+  border-radius: 4px;
+  background: rgba(147, 51, 234, 0.09);
+  overflow: hidden;
+}
+
+.pr-helper-panel-skeleton-bar::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 40%;
+  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.18), transparent);
+  animation: pr-helper-shimmer-sweep 1.6s ease-in-out infinite;
+}
+
+/* What the panel says when GitHub cannot be reached and nothing has ever loaded. Full-bleed and
+   quiet rather than a bordered error card: this is the entire content of the surface, not an alert
+   sitting on top of content, and a panel whose only occupant is a red box overstates a connection
+   problem the reviewer can usually fix in one click. */
+.pr-helper-panel-unreachable {
+  padding: 28px 20px;
+}
+
+.pr-helper-panel-unreachable-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #9333ea;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 10px;
+}
+
+.pr-helper-panel-unreachable-body {
+  margin: 0 0 16px;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-panel-retry {
+  padding: 7px 14px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  color: #ffffff;
+  background: #9333ea;
+  border: 1px solid #7c3aed;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.pr-helper-panel-retry:hover {
+  background: #7c3aed;
+  border-color: #6d28d9;
+}
+
+.pr-helper-panel-skeleton-bar:nth-child(1) { width: 55%; }
+.pr-helper-panel-skeleton-bar:nth-child(2) { width: 100%; }
+.pr-helper-panel-skeleton-bar:nth-child(3) { width: 85%; }
+.pr-helper-panel-skeleton-bar:nth-child(4) { width: 70%; }
+
+/* ── Save for later ──
+   Bottom-centre: the guided-nav overlay owns bottom-left, toasts and the rating prompt own
+   bottom-right, and the toggle tab owns the right edge. z-index deliberately sits one below the
+   nav overlay's 999997 — if a reviewer is mid-navigation, navigation is the thing that must stay
+   clickable. Dark and purple rather than following GitHub's theme, because sidebar.css has no
+   theme handling to inherit and a surface that guesses wrong is worse than one that commits. */
+.pr-helper-save-bar {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 999996;
+  /* A column so the optional label editor can expand underneath the action row without the two
+     competing for the same horizontal space. With the editor hidden this is still one row. */
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100vw - 48px);
+  background: #161b26;
+  border: 1px solid rgba(147, 51, 234, 0.35);
+  border-radius: 10px;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  opacity: 0;
+  /* Only opacity and the entry lift are transitioned — transform also carries the sidebar offset,
+     which must track a resize drag frame-for-frame rather than easing behind it. */
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.pr-helper-save-bar-visible { opacity: 1; pointer-events: auto; }
+
+/* GitHub's layout is dense at narrow widths, and this is a floating element on somebody else's
+   page — the right answer to "will it fit?" is not to shrink it until it does. */
+.pr-helper-save-bar-too-narrow { display: none; }
+
+.pr-helper-save-bar-action {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border: none;
+  background: transparent;
+  color: #f8fafc;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+  border-radius: 10px 0 0 10px;
+  transition: background 0.15s;
+}
+
+.pr-helper-save-bar-action:hover { background: rgba(147, 51, 234, 0.12); }
+.pr-helper-save-bar-icon { flex-shrink: 0; color: #94a3b8; transition: color 0.15s; }
+.pr-helper-save-bar-saved .pr-helper-save-bar-icon { color: #a855f7; }
+
+.pr-helper-save-bar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+
+.pr-helper-save-bar-title {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.pr-helper-save-bar-detail {
+  font-size: 12px;
+  color: #94a3b8;
+  line-height: 1.3;
+}
+
+.pr-helper-save-bar-dismiss {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  border: none;
+  border-left: 1px solid rgba(255, 255, 255, 0.08);
+  background: transparent;
+  color: #64748b;
+  cursor: pointer;
+  border-radius: 0 10px 10px 0;
+  transition: color 0.15s, background 0.15s;
+}
+
+.pr-helper-save-bar-dismiss:hover { color: #f8fafc; background: rgba(255, 255, 255, 0.05); }
+
+.pr-helper-save-bar-row { display: flex; align-items: stretch; }
+
+/* The optional follow-up to a save. Appears only once the PR is saved, so saving itself stays one
+   click — choosing labels is never a step on the way to it. */
+.pr-helper-save-bar-labels-action {
+  display: flex;
+  align-items: center;
+  padding: 0 14px;
+  border: none;
+  border-left: 1px solid rgba(255, 255, 255, 0.08);
+  background: transparent;
+  color: #a855f7;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: background 0.15s;
+}
+
+.pr-helper-save-bar-labels-action[hidden] { display: none; }
+.pr-helper-save-bar-labels-action:hover { background: rgba(147, 51, 234, 0.12); }
+
+.pr-helper-save-bar-labels {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding: 10px 16px 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.pr-helper-save-bar-labels[hidden] { display: none; }
+
+.pr-helper-save-bar-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 100px;
+  background: rgba(147, 51, 234, 0.12);
+  color: #d8b4fe;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.pr-helper-save-bar-chip-remove {
+  border: none;
+  background: transparent;
+  color: #94a3b8;
+  font-size: 13px;
+  line-height: 1;
+  padding: 0;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.pr-helper-save-bar-chip-remove:hover { color: #f87171; }
+
+.pr-helper-save-bar-label-input {
+  flex: 1 1 140px;
+  min-width: 120px;
+  padding: 5px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 6px;
+  background: #0b0f17;
+  color: #f8fafc;
+  font-family: inherit;
+  font-size: 12px;
+}
+
+.pr-helper-save-bar-label-input::placeholder { color: #64748b; }
+.pr-helper-save-bar-label-input:focus { outline: none; border-color: #9333ea; }
+.pr-helper-save-bar-label-input:disabled { cursor: not-allowed; opacity: 0.6; }
+
+.pr-helper-save-bar-label-done {
+  border: none;
+  background: transparent;
+  color: #a855f7;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 6px;
+  cursor: pointer;
+}
+
+.pr-helper-save-bar-label-done:hover { text-decoration: underline; }
+
+/* ── Selected-text → Assistant ──
+   Mounted on document.body, not inside the sidebar: the sidebar is a scrolling, clipped
+   flex column, so a popover anchored to viewport coordinates has to live outside it to sit
+   over the selected text. z-index clears the sidebar's own 999999 for the same reason.
+   See selection_action.ts. */
+.pr-helper-selection-popover {
+  position: fixed;
+  z-index: 1000000;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+/* Not clipped with overflow: hidden — the copy tooltip has to escape the popover — so the two
+   bar buttons round their own outer corners instead. */
+.pr-helper-selection-bar {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+.pr-helper-selection-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 7px 0 0 7px;
+  background: #9333ea;
+  color: #ffffff;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.pr-helper-selection-trigger:hover { background: #7c3aed; }
+
+/* Deliberately secondary to the trigger: icon-only and unfilled, so the bar still reads as one
+   primary action plus a utility rather than two competing CTAs. */
+.pr-helper-selection-copy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 0 7px 7px 0;
+  background: transparent;
+  color: var(--color-fg-muted, #656d76);
+  cursor: pointer;
+}
+
+.pr-helper-selection-copy:hover {
+  background: rgba(147, 51, 234, 0.1);
+  color: #9333ea;
+}
+
+.pr-helper-selection-copy:focus-visible {
+  outline: 2px solid #9333ea;
+  outline-offset: -2px;
+}
+
+.pr-helper-selection-check-icon { display: none; }
+.pr-helper-selection-copy-done .pr-helper-selection-copy-icon { display: none; }
+.pr-helper-selection-copy-done .pr-helper-selection-check-icon { display: block; }
+.pr-helper-selection-copy-done .pr-helper-selection-copy { color: #1a7f37; }
+
+/* Hover *and* focus, since the popover is keyboard reachable and a title attribute would only
+   cover the pointer. */
+.pr-helper-selection-tip {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 6px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: rgba(28, 30, 33, 0.92);
+  color: #ffffff;
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 90ms ease-in;
+}
+
+.pr-helper-selection-copy:hover ~ .pr-helper-selection-tip,
+.pr-helper-selection-copy:focus-visible ~ .pr-helper-selection-tip {
+  opacity: 1;
+}
+
+/* Stage 1 is the trigger bar; clicking it swaps to the action menu in place, so the
+   popover never moves out from under the cursor between the two stages. */
+.pr-helper-selection-menu { display: none; }
+.pr-helper-selection-popover-expanded .pr-helper-selection-bar { display: none; }
+
+.pr-helper-selection-popover-expanded .pr-helper-selection-menu {
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  padding: 4px;
+}
+
+.pr-helper-selection-menu-item {
+  padding: 7px 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-fg-default, #24292f);
+  font-family: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.pr-helper-selection-menu-item:hover {
+  background: rgba(147, 51, 234, 0.1);
+  color: #9333ea;
+}
+
+/* The flat layout has no trigger to expand: its two items are the popover. Used where the list is
+   short enough that a click to reveal it costs more than it saves, which is the assistant's own
+   replies. */
+.pr-helper-selection-popover-flat .pr-helper-selection-menu {
+  display: flex;
+  flex-direction: column;
+  min-width: 150px;
+  padding: 4px;
+}
+
+/* Copy is a utility rather than a question, so it sits under a rule and reads quieter. It keeps
+   the popover open, the same as the icon does in the bar above. */
+.pr-helper-selection-copy-item {
+  margin-top: 4px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  color: var(--color-fg-muted, #656d76);
+}
+
+.pr-helper-selection-copy-done .pr-helper-selection-copy-item { color: #1a7f37; }
+
+/* The last action ("Ask a question") is a different kind of thing from the four canned
+   prompts — it opens an empty question rather than pre-filling one. Not in the flat layout,
+   where the last item is Copy and has a rule of its own. */
+.pr-helper-selection-popover:not(.pr-helper-selection-popover-flat) .pr-helper-selection-menu-item:last-child {
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 0 0 6px 6px;
+  margin-top: 4px;
+  padding-top: 8px;
+  color: var(--color-fg-muted, #656d76);
+}
+
+/* The guide-progress transitions are feedback, not information — every state they animate is
+   also expressed by a check icon, a Completed pill and a counter, so honouring a reduced-motion
+   preference costs the reviewer nothing. Scoped to these rules rather than a blanket
+   `* { transition: none }` so the sidebar's existing loading/thinking indicators are untouched. */
+@media (prefers-reduced-motion: reduce) {
+  .pr-helper-guide-section,
+  .pr-helper-progress-bar-fill,
+  .pr-helper-nav-overlay-btn,
+  .pr-helper-selection-tip {
+    transition-duration: 0.01ms;
+  }
+
+  /* The morph is pure feedback — where the sidebar came from, nothing the reviewer needs to read.
+     Collapsing it to an instant open costs them nothing, and the JS still cleans up on the
+     transitionend these durations still fire. */
+  .pr-helper-toggle-button--stretching,
+  .pr-helper-toggle-button--stretching svg,
+  .pr-helper-toggle-button--stretching span,
+  .pr-helper-sidebar--from-rail {
+    transition-duration: 0.01ms;
+  }
+}
+
+/* Suggested themes — the Guide's second half.
+   Deliberately quieter than a Guide section card: these are places nobody looked, so they must
+   not compete visually with sections describing code the review actually read. Flat background,
+   no border, no status affordances, nothing clickable. The reviewer should be able to tell the
+   two apart without reading the heading. */
+.pr-helper-suggested-areas {
+  margin-top: 20px;
+  padding-top: 14px;
+  border-top: 1px solid var(--color-border-muted, #d8dee4);
+}
+
+.pr-helper-suggested-areas-heading {
+  margin: 0 0 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-fg-default, #1f2328);
+}
+
+.pr-helper-suggested-areas-intro {
+  margin: 0 0 10px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-suggested-area {
+  padding: 8px 10px;
+  margin-bottom: 6px;
+  border-radius: 6px;
+  background: var(--color-canvas-subtle, #f6f8fa);
+}
+
+.pr-helper-suggested-area-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.pr-helper-suggested-area-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-fg-default, #1f2328);
+}
+
+.pr-helper-suggested-area-count {
+  flex-shrink: 0;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-suggested-area-why,
+.pr-helper-suggested-area-risk {
+  margin: 4px 0 0;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* Amber, matching the Files tab's unavailable badge: something to watch, not something found. */
+.pr-helper-suggested-area-risk {
+  color: var(--color-attention-fg, #9a6700);
+}
+
+/* Muted, unlike the section badges beside it: "Explained" is a note about what the reviewer has
+   already asked, not a claim that the review covered this file. It should read as quieter than a
+   real review badge, because it means less. */
+.pr-helper-file-badge-explained {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 10px;
+  font-size: 10px;
+  color: var(--color-fg-muted, #57606a);
+  background: var(--color-neutral-subtle, rgba(175, 184, 193, 0.2));
+}
+
+.pr-helper-file-explained-focus {
+  font-style: italic;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* Busy state: the label sits beside a real Cancel, since a follow-up never shows the generating
+   view that normally hosts one. */
+.pr-helper-suggested-area-running {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.pr-helper-suggested-area-busy {
+  font-size: 11px;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-suggested-area-cancel {
+  padding: 4px 10px;
+  font-size: 11px;
+  font-family: inherit;
+  color: var(--color-danger-fg, #cf222e);
+  background: transparent;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.pr-helper-suggested-area-cancel:hover {
+  border-color: var(--color-danger-fg, #cf222e);
+}
+
+/* The action that turns a suggested area into a reviewed one. Deliberately quiet — an area card
+   is an offer, not an outstanding task, and a row of primary buttons would read as a to-do list
+   the reviewer is behind on. It gains weight on hover, where intent is already expressed. */
+.pr-helper-suggested-area-action {
+  margin: 10px 0 0;
+  padding: 4px 10px;
+  font-size: 11px;
+  font-family: inherit;
+  color: var(--color-accent-fg, #0969da);
+  background: transparent;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.pr-helper-suggested-area-action:hover:not(:disabled) {
+  background: var(--color-accent-subtle, #ddf4ff);
+  border-color: var(--color-accent-fg, #0969da);
+}
+
+.pr-helper-suggested-area-action:disabled {
+  color: var(--color-fg-muted, #57606a);
+  cursor: default;
+}
+
+.pr-helper-suggested-area-remainder {
+  margin: 8px 0 0;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* Issue confidence — only rendered below high, so it always means "this is qualified".
+   Quieter than the severity badge beside it: severity is the finding's weight and stays the
+   card's primary signal, while confidence modifies it. */
+.pr-helper-issue-confidence {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 10px;
+  white-space: nowrap;
+  background: var(--color-neutral-muted, rgba(175, 184, 193, 0.2));
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-issue-confidence-low {
+  color: var(--color-attention-fg, #9a6700);
+}
+
+/* Provisional risk. Sits inline with the risk label rather than replacing it — the verdict is
+   still the headline, it just stops claiming to be final. */
+.pr-helper-risk-provisional {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 6px;
+  border-radius: 10px;
+  border: 1px solid var(--color-attention-emphasis, #9a6700);
+  color: var(--color-attention-fg, #9a6700);
+}
+
+.pr-helper-risk-provisional-reason {
+  margin: 6px 0 0;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* Review details — provenance, collapsed.
+   Deliberately the quietest thing on the Overview: it answers "how was this made?", which is a
+   question the reviewer only asks when something looks off. It sits below the suggested path and
+   above Next steps, so the page still ends on what to do rather than on how it was produced. */
+.pr-helper-review-details {
+  margin: 4px 0 14px;
+  font-size: 12px;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-review-details-summary {
+  cursor: pointer;
+  list-style: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 0;
+  user-select: none;
+}
+
+.pr-helper-review-details-summary::-webkit-details-marker { display: none; }
+
+/* Own marker so it can rotate — the native one cannot be styled consistently across the themes
+   GitHub renders this sidebar inside. */
+.pr-helper-review-details-summary::before {
+  content: '▶';
+  font-size: 8px;
+  transition: transform 0.12s;
+}
+
+.pr-helper-review-details[open] .pr-helper-review-details-summary::before {
+  transform: rotate(90deg);
+}
+
+.pr-helper-review-details-summary:hover { color: #9333ea; }
+
+.pr-helper-review-details-list {
+  margin: 6px 0 0;
+  padding-left: 18px;
+  line-height: 1.5;
+}
+
+.pr-helper-review-details-list li { margin-bottom: 3px; }
+
+/* ── Repository Investigation ───────────────────────────────────────────────
+   The escalation action on issue and question cards, plus the modal that shows the generated
+   prompt. Deliberately a secondary/outlined button, not a new primary style: escalating to a
+   repository agent is one option among several on a finding, not the thing the card is asking
+   the reviewer to do. */
+
+.pr-helper-issue-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+/* margin-left:auto rather than relying on the row's space-between: the jump link beside it is
+   conditional (a question without a file has none), and space-between alone would swing this
+   group to the left edge whenever it is the row's only child. Wraps because three controls do
+   not fit a 320px sidebar on one line. */
+.pr-helper-question-actions-group {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-left: auto;
+}
+
+/* Same geometry as .pr-helper-question-answer-toggle, so the action reads identically whether it
+   sits alone on an issue card or beside Jump to file / Mark answered on a question card. */
+.pr-helper-investigate-btn {
+  padding: 5px 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  background: #ffffff;
+  color: #1f2328;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.pr-helper-investigate-btn:hover {
+  border-color: #9333ea;
+  color: #9333ea;
+}
+
+.pr-helper-prompt-modal {
+  position: fixed;
+  inset: 0;
+  /* Above the sidebar's 999999 — the modal is body-mounted and must sit over it, not behind. */
+  z-index: 1000001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+.pr-helper-prompt-modal.show { opacity: 1; }
+
+.pr-helper-prompt-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.pr-helper-prompt-modal-card {
+  position: relative;
+  width: min(680px, calc(100vw - 48px));
+  max-height: calc(100vh - 96px);
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  background: #ffffff;
+  color: #1f2328;
+  border-radius: 12px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
+  transform: translateY(8px);
+  transition: transform 0.15s ease;
+}
+
+.pr-helper-prompt-modal.show .pr-helper-prompt-modal-card { transform: translateY(0); }
+
+.pr-helper-prompt-modal-title {
+  margin: 0 0 10px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.pr-helper-prompt-modal-body {
+  margin: 0 0 8px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #57606a;
+}
+
+/* Monospace and scrollable: this is a prompt about code, and the diff inside it only reads
+   correctly with aligned columns. flex:1 lets it absorb the card's spare height so the actions
+   stay pinned at the bottom on a short viewport. */
+/* The slot that replaces the textarea when a caller supplies `content`. Duplicated in
+   popup.css with the rest of the modal — see prompt_modal.ts. */
+.pr-helper-prompt-modal-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+  margin: 8px 0 12px;
+}
+
+.pr-helper-prompt-modal-field {
+  flex: 1;
+  min-height: 220px;
+  margin: 8px 0 16px;
+  padding: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  background: #f6f8fa;
+  color: #1f2328;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  resize: none;
+  white-space: pre;
+  overflow: auto;
+}
+
+.pr-helper-prompt-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.pr-helper-prompt-modal-btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  background: #ffffff;
+  color: #1f2328;
+  font-size: 13px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.pr-helper-prompt-modal-btn:hover { border-color: rgba(0, 0, 0, 0.3); }
+
+.pr-helper-prompt-modal-btn-primary {
+  background: #9333ea;
+  border-color: #9333ea;
+  color: #ffffff;
+}
+
+.pr-helper-prompt-modal-btn-primary:hover {
+  background: #7c3aed;
+  border-color: #7c3aed;
+}
+
+.pr-helper-prompt-modal-btn-done {
+  background: #1a7f37;
+  border-color: #1a7f37;
+}
+
+.pr-helper-prompt-modal-btn-done:hover {
+  background: #1a7f37;
+  border-color: #1a7f37;
+}
+
+/* ── PR update / analysis staleness ─────────────────────────────────────── */
+
+/*
+ * (The per-tab inset workaround that used to live here is gone: the staleness block moved out of
+ * the review panel into its own toolbar, so it no longer inherits whatever padding and flex
+ * behaviour a given tab happens to impose on the panel.)
+ */
+
+/*
+ * The provenance line is not dismissible and is rendered on every tab that shows the current
+ * analysis. It is deliberately quiet when the analysis is current and picks up colour only when
+ * the pull request has moved past it — see ui/components/pr_update_notice.ts.
+ */
+.pr-helper-analysis-provenance {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin: 0 0 10px;
+  padding: 0 2px;
+  /* Body size and the UI font: this is product copy about the analysis, not a debug string. */
+  font-size: 13px;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-provenance-label {
+  font-weight: 500;
+}
+
+/*
+ * The identifier, and only the identifier, stays monospace — a commit SHA is a technical value and
+ * a proportional font makes it harder to compare against one on GitHub's own page. The pill is what
+ * makes that legible as a *reference* rather than as leaked internals: smaller and lighter than the
+ * phrase beside it, so the row reads "Analysis at «commit»" instead of one undifferentiated string.
+ */
+.pr-helper-provenance-sha {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  color: var(--color-fg-muted, #57606a);
+  background: var(--color-canvas-subtle, #f6f8fa);
+  border: 1px solid var(--color-border-muted, #d8dee4);
+}
+
+/*
+ * Purple, and deliberately not blue — that is the whole point of the colour choice.
+ *
+ * Three actions can appear in this region and they need to rank unambiguously: this one is
+ * proactive and always available, "Analyse new changes" is the real work and only exists when
+ * there is something to analyse, and "Not now" declines. Making this blue would put it in a dead
+ * heat with the primary CTA, and its previous neutral-grey-with-a-blue-hover did both wrong at
+ * once — passive at rest, then competing on hover.
+ *
+ * Purple is the product's own accent, so a tint of it reads as "ours, secondary" without borrowing
+ * the primary action's colour. Every value here already exists in this file: the .06 fill is the
+ * Suggested Review Path card's, .12 is the header chip's hover, .25 is the resize handle's, and
+ * #9333ea is the accent itself.
+ */
+.pr-helper-provenance-check {
+  margin-left: auto;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-family: inherit;
+  font-weight: 500;
+  color: #9333ea;
+  background: rgba(147, 51, 234, 0.06);
+  border: 1px solid rgba(147, 51, 234, 0.25);
+  border-radius: 999px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.pr-helper-provenance-check:hover:not(:disabled) {
+  background: rgba(147, 51, 234, 0.12);
+  border-color: #9333ea;
+}
+
+.pr-helper-provenance-check:disabled {
+  cursor: default;
+  opacity: 0.65;
+}
+
+.pr-helper-provenance-stale {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: 999px;
+  font-weight: 600;
+  color: var(--color-attention-fg, #9a6700);
+  background: var(--color-attention-subtle, #fff8c5);
+}
+
+/*
+ * Amber, but as an accent rather than as the whole component.
+ *
+ * This used GitHub's `--color-attention-subtle`, which is a *solid* pale yellow (#fff8c5) — next
+ * to the Suggested Review Path card's 6% purple tint it read as a warning rather than as one more
+ * surface in the sidebar's palette, and it competed with the amber pill directly above it saying
+ * the same thing. Both were shouting the same message.
+ *
+ * So it now follows the idiom the rest of this file already uses for soft surfaces: the hue at a
+ * low alpha over the canvas, matching `.pr-helper-suggested-path` (rgba(147,51,234,.06) / .2).
+ * The triplet is the same amber as the medium-risk pill, so this state and the risk indicator are
+ * visibly the same colour rather than two hand-picked yellows.
+ *
+ * Alpha sits slightly above the purple card's because yellow carries far less contrast against
+ * white at equal alpha — 6% amber is effectively invisible. This is the point where it still reads
+ * as deliberately tinted without becoming the loudest thing on screen.
+ */
+.pr-helper-update-notice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  border: 1px solid rgba(240, 178, 50, 0.32);
+  border-radius: 8px;
+  background: rgba(240, 178, 50, 0.1);
+}
+
+.pr-helper-update-notice-failed {
+  border-color: var(--color-border-default, #d0d7de);
+  background: var(--color-canvas-subtle, #f6f8fa);
+}
+
+.pr-helper-update-notice-running {
+  border-color: var(--color-border-default, #d0d7de);
+  background: var(--color-canvas-subtle, #f6f8fa);
+}
+
+.pr-helper-update-notice-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.pr-helper-update-notice-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-fg-default, #1f2328);
+}
+
+.pr-helper-update-notice-detail {
+  font-size: 11px;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-update-notice-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.pr-helper-update-notice-action {
+  padding: 4px 10px;
+  font-size: 11px;
+  font-family: inherit;
+  font-weight: 600;
+  color: #ffffff;
+  background: var(--color-accent-fg, #0969da);
+  border: 1px solid var(--color-accent-fg, #0969da);
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.pr-helper-update-notice-action:hover {
+  filter: brightness(0.94);
+}
+
+.pr-helper-update-notice-dismiss,
+.pr-helper-update-notice-cancel {
+  padding: 4px 10px;
+  font-size: 11px;
+  font-family: inherit;
+  color: var(--color-fg-muted, #57606a);
+  background: transparent;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.pr-helper-update-notice-dismiss:hover,
+.pr-helper-update-notice-cancel:hover {
+  background: var(--color-canvas-default, #ffffff);
+  color: var(--color-fg-default, #1f2328);
+}
+
+/* ── Reconciled finding statuses ────────────────────────────────────────── */
+
+.pr-helper-finding-status {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  padding: 1px 6px;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+.pr-helper-finding-status-resolved {
+  color: var(--color-success-fg, #1a7f37);
+  background: var(--color-success-subtle, #dafbe1);
+}
+
+.pr-helper-finding-status-still-open {
+  color: var(--color-danger-fg, #cf222e);
+  background: var(--color-danger-subtle, #ffebe9);
+}
+
+.pr-helper-finding-status-affected {
+  color: var(--color-attention-fg, #9a6700);
+  background: var(--color-attention-subtle, #fff8c5);
+}
+
+.pr-helper-finding-status-new {
+  color: var(--color-accent-fg, #0969da);
+  background: var(--color-accent-subtle, #ddf4ff);
+}
+
+/*
+ * A resolved finding is kept on screen — the reviewer needs to see that it was dealt with — but
+ * muted, so the findings still needing attention are what the eye lands on first.
+ */
+.pr-helper-issue-resolved {
+  opacity: 0.72;
+}
+
+.pr-helper-reconciliation-note {
+  margin: 6px 0 0;
+  padding-left: 8px;
+  border-left: 2px solid var(--color-border-muted, #d8dee4);
+  font-size: 11px;
+  font-style: italic;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* ── History: analyses that follow an earlier one ───────────────────────── */
+
+/*
+ * An update carries no indent or edge marker of its own.
+ *
+ * It had both, and they cost more than they bought: the indent narrowed the card so it no longer
+ * lined up with the analyses above and below it, and the coloured left edge replaced the card's own
+ * border on one side so the outline changed weight halfway round. Both were saying what the
+ * "New changes …" row below already says in words, which is the same double-signalling the update
+ * banner and the staleness pill were guilty of. Stated once, in the row, is enough.
+ */
+.pr-helper-history-delta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 6px;
+  font-size: 10px;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-history-delta-label {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.pr-helper-history-delta-range {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+}
+
+.pr-helper-history-delta-partial {
+  padding: 0 5px;
+  border-radius: 999px;
+  font-weight: 600;
+  color: var(--color-attention-fg, #9a6700);
+  background: var(--color-attention-subtle, #fff8c5);
+}
+
+/* ── Repository investigation: the inbound half ─────────────────────────── */
+
+/*
+ * The paired actions. "Investigate Repository" and "Add Investigation" are the two halves of one
+ * loop and sit together on the finding they concern, so they share .pr-helper-investigate-btn's
+ * geometry exactly — a second control with its own weight would read as an unrelated action that
+ * happened to land nearby.
+ *
+ * The add half is tinted rather than filled. It is the step the reviewer is being invited towards
+ * once a prompt exists, which deserves to be findable; a solid button would outrank the finding's
+ * own text, and the card is a finding first and a control surface second.
+ */
+.pr-helper-investigate-btn-add {
+  border-color: rgba(147, 51, 234, 0.4);
+  color: #7e22ce;
+  background: rgba(147, 51, 234, 0.06);
+}
+
+.pr-helper-investigate-btn-add:hover {
+  border-color: #9333ea;
+  background: rgba(147, 51, 234, 0.12);
+  color: #7e22ce;
+}
+
+/* Reports rather than invites — see renderInvestigationActions. Deliberately not a disabled
+   <button>: it is not an action the reviewer is being denied, it is a statement of fact. */
+.pr-helper-investigate-added {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-success-fg, #1a7f37);
+  white-space: nowrap;
+}
+
+/* Same pill geometry as .pr-helper-finding-status — the two axes sit side by side in one badge row
+   and must read as peers, since a finding can legitimately carry both. */
+.pr-helper-investigation-impact {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  padding: 1px 6px;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+/* Purple throughout, matching the Repository AI accent used on the investigate buttons: these
+   verdicts all came from outside the diff, and the colour is what says so at a glance. Weight
+   within the family tracks how much the evidence moved the finding. */
+.pr-helper-investigation-impact-confirmed {
+  color: #6b21a8;
+  background: rgba(147, 51, 234, 0.14);
+}
+
+/* Not struck through: the pill is the verdict, not the thing that was disproven. Striking a status
+   label reads as the status having been withdrawn. The strike goes on the claim instead — see
+   .pr-helper-issue-investigation-refuted below, and the Files tab, which already does this. */
+.pr-helper-investigation-impact-refuted {
+  color: var(--color-fg-muted, #57606a);
+  background: var(--color-neutral-muted, rgba(175, 184, 193, 0.2));
+}
+
+.pr-helper-investigation-impact-revised {
+  color: #7e22ce;
+  background: rgba(147, 51, 234, 0.1);
+}
+
+.pr-helper-investigation-impact-unchanged {
+  color: var(--color-fg-muted, #57606a);
+  background: var(--color-neutral-muted, rgba(175, 184, 193, 0.2));
+}
+
+/*
+ * A refuted finding stays on the list and is muted, exactly as a resolved one is: the reviewer
+ * needs to see that the concern was investigated and does not hold, and deleting it would destroy
+ * the audit trail this whole loop exists to build.
+ *
+ * Only the claim is struck — the issue title, or the question that was asked. Everything below it
+ * is why we now know better: the answer from the investigation, the note, the provenance. That is
+ * evidence the reviewer escalated for, and it is not retracted by the thing it disproved. Dimming
+ * the whole card would bury the payoff of the loop along with the claim.
+ */
+.pr-helper-issue-investigation-refuted .pr-helper-issue-title {
+  text-decoration: line-through;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* `major → minor`. Monospace so the two grades line up as values being compared rather than as
+   prose, and the old one struck through so which is current needs no explanation. */
+.pr-helper-investigation-revision {
+  margin: 4px 0 0;
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-investigation-revision-from {
+  text-decoration: line-through;
+}
+
+.pr-helper-investigation-revision-to {
+  font-weight: 700;
+  color: #7e22ce;
+}
+
+/* Matches .pr-helper-reconciliation-note, with a purple rule instead of grey — same kind of thing
+   (a one-line reason from the model), different provenance. */
+.pr-helper-investigation-note {
+  margin: 6px 0 0;
+  padding-left: 8px;
+  border-left: 2px solid rgba(147, 51, 234, 0.35);
+  font-size: 11px;
+  font-style: italic;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* The answer to an open question is not a footnote — it is what the reviewer escalated for. Set at
+   body weight with a solid rule, unlike the italic muted note above. */
+.pr-helper-investigation-answer {
+  padding-left: 8px;
+  border-left: 2px solid #9333ea;
+}
+
+.pr-helper-investigation-provenance {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin: 8px 0 0;
+  font-size: 10px;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-investigation-provenance-label {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.pr-helper-investigation-provenance-agent {
+  font-weight: 600;
+  color: #7e22ce;
+}
+
+.pr-helper-investigation-view {
+  padding: 0;
+  border: 0;
+  background: none;
+  font-family: inherit;
+  font-size: 10px;
+  color: var(--color-accent-fg, #0969da);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+/* History row. Same geometry as .pr-helper-history-delta, and for the same reason it carries no
+   indent or edge marker: the row says in words what kind of analysis this is. */
+.pr-helper-history-investigation {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 6px;
+  font-size: 10px;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-history-investigation-label {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.pr-helper-history-investigation-agent {
+  font-weight: 600;
+  color: #7e22ce;
+}
+
+/*
+ * The Add Investigation modal's content slot.
+ *
+ * Sidebar-only, unlike the .pr-helper-prompt-modal shell above which is duplicated into popup.css.
+ * The shell is shared because both surfaces open modals; this content is not, because findings only
+ * exist in the sidebar and the popup has no way to reach it. Same rule the context picker follows
+ * in reverse — its styles live only in popup.css, where that surface is reachable.
+ */
+.pr-helper-add-investigation {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 0;
+}
+
+.pr-helper-add-investigation-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-add-investigation-select {
+  padding: 6px 8px;
+  border: 1px solid var(--color-border-default, rgba(0, 0, 0, 0.15));
+  border-radius: 6px;
+  background: var(--color-canvas-default, #ffffff);
+  color: var(--color-fg-default, #1f2328);
+  font-family: inherit;
+  font-size: 13px;
+}
+
+/* Monospace and generous, because an agent's report is structured text with file paths and line
+   references in it — proportional type turns those into something the reviewer has to decode. */
+.pr-helper-add-investigation-field {
+  flex: 1;
+  min-height: 220px;
+  padding: 10px;
+  border: 1px solid var(--color-border-default, rgba(0, 0, 0, 0.15));
+  border-radius: 6px;
+  background: var(--color-canvas-default, #ffffff);
+  color: var(--color-fg-default, #1f2328);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  resize: vertical;
+}
+
+.pr-helper-add-investigation-error {
+  margin: 0;
+  font-size: 12px;
+  color: var(--color-danger-fg, #cf222e);
+}
+
+/* The reminder of which finding sent them out, so the reviewer can tell at a glance that they are
+   pasting into the right place — the one thing a paste box cannot otherwise confirm. */
+.pr-helper-add-investigation-origin {
+  margin: 0;
+  font-size: 11px;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-add-investigation-viewprompt {
+  padding: 0;
+  border: 0;
+  background: none;
+  font-family: inherit;
+  font-size: 11px;
+  color: var(--color-accent-fg, #0969da);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+/*
+ * The completed-investigation report viewer (investigation_output_modal.ts).
+ *
+ * Sidebar-only for the same reason the Add Investigation slot above is: it is reached from a
+ * finding's provenance line, and findings do not exist in the popup.
+ *
+ * The card is 680px and the content is a document, so this is the one prompt-modal surface that
+ * sets prose rather than a field: proportional type, left-aligned, scrolling inside the card so the
+ * action row stays pinned. The report is a scroll container in its own right rather than letting
+ * the slot scroll, so the header stays with the text it describes.
+ */
+.pr-helper-investigation-report {
+  /* Overrides the slot's `display:flex`. Every other content slot lays out controls, so a flex
+     column is right for them; this one is a document, and as flex items its paragraphs would
+     shrink to fit the constrained height and clip rather than scroll. */
+  display: block;
+  min-height: 0;
+  max-height: 60vh;
+  overflow-y: auto;
+  padding-right: 4px;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--color-fg-default, #1f2328);
+}
+
+/* Focus is visible because the report is keyboard-scrollable (tabIndex 0 in the module) — an
+   outline is the only thing telling a keyboard user the arrow keys now move this panel. */
+.pr-helper-investigation-report:focus-visible {
+  outline: 2px solid var(--color-accent-fg, #0969da);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.pr-helper-investigation-report-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 0;
+  font-size: 11px;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* Same purple and weight as .pr-helper-investigation-provenance-agent, so the line the reviewer
+   clicked and the line at the top of what opened read as one object rather than two labels. */
+.pr-helper-investigation-report-agent {
+  font-weight: 600;
+  color: #7e22ce;
+}
+
+.pr-helper-investigation-report-origin {
+  margin: 4px 0 0;
+  font-size: 11px;
+  color: var(--color-fg-muted, #57606a);
+}
+
+.pr-helper-investigation-report-rule {
+  margin: 12px 0;
+  border: none;
+  border-top: 1px solid var(--color-border-default, #d0d7de);
+}
+
+.pr-helper-investigation-report-empty {
+  margin: 0;
+  font-size: 13px;
+  font-style: italic;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* Inline code chips, repeated here rather than reused.
+ *
+ * The chip rule the rest of the extension uses is scoped `.pr-helper-sidebar code`, and this modal
+ * is mounted on document.body to escape the sidebar's stacking context — so it never matched, and
+ * an agent's backticked file paths arrived as bare monospace with no chip. Identical declarations
+ * on purpose: the two must look the same, since the finding's title appears in both places.
+ *
+ * `.pr-helper-markdown pre code` (one class, two types) outranks this, so code inside a fenced
+ * block still gets its background and padding stripped rather than double-chipped. */
+.pr-helper-prompt-modal-report code {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+  font-size: 0.9em;
+  background: var(--color-neutral-muted, rgba(175, 184, 193, 0.2));
+  border-radius: 4px;
+  padding: 0.1em 0.4em;
+  /* Long paths must not widen the card. Breaking mid-token is right for a chip holding
+     `ocean/deployment/templates/ocean-environment-variables-secret.yaml` and wrong for prose,
+     which is why it sits on code rather than on the report. */
+  overflow-wrap: anywhere;
+}
+
+/* .pr-helper-markdown is sized for the 13px assistant bubble in a narrow sidebar (see its block
+   above). Here it has the full card width, so headings get back the step the bubble gave up —
+   an agent's numbered answers are the report's structure and need to read as headings. Nothing
+   else is overridden: the colours, code blocks and lists were already right. */
+.pr-helper-prompt-modal-report .pr-helper-markdown h4 { font-size: 14px; }
+.pr-helper-prompt-modal-report .pr-helper-markdown h5 { font-size: 13px; }
+.pr-helper-prompt-modal-report .pr-helper-markdown h6 { font-size: 12.5px; }
+
+/* Mirrors .pr-helper-investigate-added's geometry so the inbound slot keeps its width through the
+   request → applying → added transitions, rather than the button row reflowing twice mid-run.
+   That geometry is why this keeps its own type treatment rather than adopting the smaller, muted
+   one "Analysing…" uses: the spinner is the part that had to match, and matching the font size too
+   would shrink the slot and reintroduce the reflow this was built to avoid. */
+.pr-helper-investigate-applying {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #7e22ce;
+  white-space: nowrap;
+}