prreviewbuddy 0.44.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prreviewbuddy",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "description": "Review a branch or pull request in an isolated checkout, from your terminal, with the coding agent you already have installed.",
   "license": "UNLICENSED",
   "homepage": "https://prreviewbuddy.com",

package/static/shell.css

@@ -1529,6 +1529,9 @@ a.prb-rail-item { text-decoration: none; }
 }
 .prb-bank-add:hover { border-color: var(--border-strong); color: var(--text-primary); }
 .prb-bank-list { display: flex; flex-wrap: wrap; gap: 6px; }
+/* Folded. The `display` above outranks the browser's own rule for `hidden`, so without this the
+   fold flips the attribute and the chips stay on screen. */
+.prb-bank-list[hidden] { display: none; }
 /* The pair reads as one chip: the label inserts, the pencil edits. They share a border so the
    edit affordance is visibly part of the prompt it edits rather than a control floating beside it. */
 .prb-bank-item {
@@ -3252,6 +3255,12 @@ a.prb-rail-item { text-decoration: none; }
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+.prb-card-summary code {
+  padding: 0 4px;
+  border-radius: 4px;
+  background: var(--surface-2);
+  font-size: var(--t-code);
+}
 .prb-card-where,
 .prb-card-meta {
   display: flex;
@@ -3698,6 +3707,320 @@ a.prb-rail-item { text-decoration: none; }
 .prb-diagram-source > summary::before { content: '\25B8  '; }
 .prb-diagram-source[open] > summary::before { content: '\25BE  '; }
 
+/* ── The two diagram tabs ──
+   Each says what question it answers, so the reviewer never has to open both to learn they differ.
+   A segmented strip rather than the rail's style: these are two views of one place, not two places. */
+.prb-diagram-modes {
+  display: inline-flex;
+  gap: 2px;
+  margin: 0 0 18px;
+  padding: 4px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 10px;
+  background: #f6f8fa;
+}
+.prb-diagram-mode {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  min-width: 190px;
+  padding: 8px 18px 9px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #57606a;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.prb-diagram-mode:hover { color: #1f2328; }
+.prb-diagram-mode[aria-selected='true'] {
+  background: #fff;
+  color: #1f2328;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
+}
+.prb-diagram-mode:focus-visible { outline: 2px solid #9333ea; outline-offset: 1px; }
+.prb-diagram-mode-title { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-body); font-weight: 600; }
+/* The picture on this tab already exists: switching to it costs nothing. Passive, and a word for
+   assistive technology rather than colour alone. */
+.prb-diagram-mode-ready {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: rgba(26, 127, 55, 0.12);
+  color: #1a7f37;
+  font-size: 10px;
+  font-weight: 700;
+}
+.prb-diagram-mode-ready[hidden] { display: none; }
+.prb-diagram-mode-subtitle { font-size: var(--t-micro); color: #8c959f; }
+
+/* ── Before anything is drawn ──
+   Says what the view is for and offers the one action that spends a run. Not a dead end, and not a
+   button that pretends to be free. */
+.prb-map-empty {
+  max-width: 560px;
+  margin: 8px 0 20px;
+  padding: 18px 20px;
+  border: 1px dashed rgba(15, 23, 42, 0.2);
+  border-radius: 10px;
+  background: #fff;
+  font-size: var(--t-body);
+  line-height: var(--lh-body);
+  color: #57606a;
+}
+.prb-map-empty p { margin: 0 0 10px; }
+.prb-map-empty-title { margin: 0 0 6px; font-size: var(--t-section); font-weight: 600; color: #1f2328; }
+.prb-map-empty-note { font-size: var(--t-meta); color: #8c959f; }
+.prb-map-stale {
+  padding: 7px 10px;
+  border-radius: 7px;
+  background: rgba(251, 191, 36, 0.12);
+  font-size: var(--t-meta);
+  color: #6b5514;
+}
+.prb-map-generate {
+  margin-top: 4px;
+  padding: 7px 14px;
+  border: 1px solid #9333ea;
+  border-radius: 6px;
+  background: #9333ea;
+  color: #fff;
+  font: inherit;
+  font-size: var(--t-meta);
+  font-weight: 600;
+  cursor: pointer;
+}
+.prb-map-generate:hover { background: #7e22ce; }
+.prb-map-generate[disabled] { opacity: 0.55; cursor: default; }
+/* While a map is being made there is one state on screen, the work and its Stop: the button that
+   would start it again goes, whether this page asked or came back to a run already going. */
+.prb-view[data-map-running] .prb-map-generate { display: none; }
+/* The implementation tab's own empty state goes the moment its first card is in the pane. */
+.prb-view[data-diagram-pane]:has([data-diagram-card]) [data-diagram-empty] { display: none; }
+
+/* ── The change map ── */
+.prb-map-body { container-type: inline-size; }
+.prb-map {
+  margin: 0 0 20px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 10px;
+  background: #fff;
+}
+.prb-map-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+.prb-map-heading { flex: 1 1 280px; min-width: 0; }
+.prb-map-title { margin: 0; font-size: var(--t-section); font-weight: 600; color: #1f2328; }
+.prb-map-intent { margin: 4px 0 0; font-size: var(--t-body); line-height: var(--lh-body); color: #57606a; }
+.prb-map-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
+.prb-map-registers {
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid rgba(15, 23, 42, 0.15);
+  border-radius: 7px;
+  background: #f6f8fa;
+}
+.prb-map-register {
+  padding: 3px 10px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #57606a;
+  font: inherit;
+  font-size: var(--t-micro);
+  cursor: pointer;
+}
+.prb-map-register[aria-pressed='true'] { background: #fff; color: #1f2328; font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
+.prb-map-register:focus-visible { outline: 2px solid #9333ea; outline-offset: 1px; }
+.prb-map-hint { margin: 10px 16px 0; font-size: var(--t-micro); color: #8c959f; }
+
+/* One graph in the page, two sets of words; the board says which to show. */
+.prb-map[data-register='simple'] [data-reg='technical'],
+.prb-map[data-register='technical'] [data-reg='simple'] { display: none; }
+
+/* Stages as columns, read left to right. The gaps are wide on purpose: the relationship labels sit
+   in them, and a label is the point of a line. */
+.prb-map-board {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--prb-map-stages, 5), minmax(180px, 1fr));
+  column-gap: 112px;
+  padding: 14px 16px 22px;
+  overflow-x: auto;
+}
+.prb-map-stage {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+.prb-map-stage-title {
+  align-self: flex-start;
+  margin: 0 0 -8px;
+  font-size: var(--t-micro);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #8c959f;
+}
+
+.prb-map-node {
+  --role: #8250df;
+  position: relative;
+  padding: 9px 11px 10px;
+  border: 1px solid rgba(15, 23, 42, 0.14);
+  border-left: 4px solid var(--role);
+  border-radius: 8px;
+  background: #fff;
+  font-size: var(--t-meta);
+  line-height: 1.45;
+  color: #424a53;
+  transition: opacity 0.15s ease, box-shadow 0.15s ease;
+  cursor: pointer;
+}
+.prb-map-node:focus-visible { outline: 2px solid #9333ea; outline-offset: 2px; }
+.prb-map-node[data-role='intent'] { --role: #0969da; }
+.prb-map-node[data-role='actor'] { --role: #6e7781; }
+.prb-map-node[data-role='concept'] { --role: #8250df; }
+.prb-map-node[data-role='state'] { --role: #0f766e; }
+.prb-map-node[data-role='constraint'] { --role: #9a6700; }
+.prb-map-node[data-role='risk'] { --role: #cf222e; }
+.prb-map-node[data-role='outcome'] { --role: #1a7f37; }
+/* Importance is prominence: a heavier frame and a larger name, never a score. */
+.prb-map-node[data-weight='primary'] {
+  border-width: 2px 2px 2px 5px;
+  border-color: var(--role);
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+}
+.prb-map-node[data-weight='primary'] .prb-map-node-title { font-size: calc(var(--t-body) + 1px); }
+.prb-map-role {
+  margin: 0 0 3px;
+  font-size: var(--t-micro);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--role);
+}
+.prb-map-core { color: #57606a; font-weight: 500; }
+.prb-map-node-title { margin: 0 0 4px; font-size: var(--t-body); font-weight: 600; line-height: 1.3; color: #1f2328; }
+.prb-map-node-body { margin: 0; }
+.prb-map code:not(.prb-map-anchor) {
+  padding: 0 3px;
+  border-radius: 3px;
+  background: #f6f8fa;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--t-code);
+}
+.prb-map-why { margin: 6px 0 0; color: #57606a; }
+.prb-map-why-lead { font-weight: 600; color: #1f2328; }
+.prb-map-anchor {
+  display: inline-block;
+  max-width: 100%;
+  margin-top: 6px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: #f6f8fa;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--t-code);
+  color: #57606a;
+  overflow-wrap: anywhere;
+}
+/* Relationships the board could not draw cleanly, said in the idea they leave from. */
+.prb-map-inline {
+  margin: 7px 0 0;
+  padding: 6px 0 0;
+  border-top: 1px dashed rgba(15, 23, 42, 0.14);
+  list-style: none;
+  font-size: var(--t-micro);
+  color: #57606a;
+}
+.prb-map-inline:not(:has(li:not([hidden]))) { display: none; }
+.prb-map-inline li + li { margin-top: 2px; }
+.prb-map-inline em { color: #1f2328; }
+.prb-map-goto {
+  display: block;
+  margin-top: 8px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #8250df;
+  font: inherit;
+  font-size: var(--t-micro);
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+.prb-map-goto:hover { text-decoration: underline; }
+
+.prb-map-edges {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+.prb-map-edge { fill: none; stroke: #8c959f; stroke-width: 1.5; transition: opacity 0.15s ease; }
+.prb-map-arrow { fill: #8c959f; }
+.prb-map-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
+.prb-map-board:not([data-laid-out]) .prb-map-labels { visibility: hidden; }
+.prb-map-label {
+  position: absolute;
+  max-width: 100px;
+  padding: 1px 6px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 10px;
+  background: #fff;
+  font-size: var(--t-micro);
+  font-style: italic;
+  line-height: 1.35;
+  text-align: center;
+  color: #424a53;
+  transition: opacity 0.15s ease;
+}
+.prb-map-label[hidden] { display: none; }
+
+/* Selecting an idea keeps it, its neighbours and the lines between them, and quiets the rest. */
+.prb-map-board[data-selecting] .prb-map-node:not([data-active]):not([data-near]) { opacity: 0.35; }
+.prb-map-board[data-selecting] .prb-map-edge:not([data-active]) { opacity: 0.15; }
+.prb-map-board[data-selecting] .prb-map-label:not([data-active]) { opacity: 0.2; }
+.prb-map-board .prb-map-edge[data-active] { stroke: #1f2328; stroke-width: 2; }
+.prb-map-board .prb-map-label[data-active] { border-color: #1f2328; color: #1f2328; }
+.prb-map-node[data-active] { box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.25); }
+
+.prb-map-list { margin: 0 16px 14px; font-size: var(--t-meta); color: #57606a; }
+.prb-map-list > summary { cursor: pointer; }
+.prb-map-list ol { margin: 8px 0 0; padding-left: 20px; line-height: var(--lh-body); }
+.prb-map-list li { margin-bottom: 4px; }
+.prb-map-list strong { color: #1f2328; font-weight: 600; }
+.prb-map-note { color: #57606a; }
+
+/* Five stages side by side, with room between them for the words on the lines, need about 1360px:
+   the expanded pane, not the one between the rail and Buddy AI. Narrower than that the stages stack, top to bottom, in the same reading order,
+   and the lines follow them down. A board that scrolled sideways would hide the half of every line
+   that explains it. */
+@container (max-width: 1360px) {
+  .prb-map-board { grid-template-columns: minmax(0, 1fr); row-gap: 58px; overflow-x: visible; }
+  .prb-map-stage { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 28px 36px; }
+  .prb-map-stage-title { flex-basis: 100%; margin: 0; }
+  .prb-map-node { flex: 1 1 210px; max-width: 300px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .prb-map-node, .prb-map-edge, .prb-map-label { transition: none; }
+}
+
 /* ── The Overview's stat cards ──
    The drawer stacks each card as a centred column: number, then label, then an optional note. At
    460px that is the only thing that fits. Here it produced two faults at once. Every card is as
@@ -3791,6 +4114,21 @@ a.prb-rail-item { text-decoration: none; }
 }
 .pr-helper-diagram-button:hover { background: rgba(147, 51, 234, 0.08); }
 .pr-helper-diagram-button[disabled] { opacity: 0.55; cursor: default; }
+/* The Overview's way to the diagrams: the main visual path through the change, so a step above its
+   neighbour with a tinted ground, yet no run behind it, so not the filled treatment Generate has. */
+.pr-helper-map-button {
+  margin: 0 0 14px;
+  padding: 7px 16px;
+  border: 1px solid #9333ea;
+  border-radius: 6px;
+  background: rgba(147, 51, 234, 0.1);
+  color: #7e22ce;
+  font-family: inherit;
+  font-size: var(--t-meta);
+  font-weight: 600;
+  cursor: pointer;
+}
+.pr-helper-map-button:hover { background: rgba(147, 51, 234, 0.16); }
 /* In a theme card the button stands alone in the actions row, whose other occupant — the guided
    review CTA — is hidden in this client. That CTA carried the gap below the review checklist, so
    with it gone the row has to carry it, or the button sits flush against the checklist box: the
@@ -3863,8 +4201,15 @@ a.prb-rail-item { text-decoration: none; }
   line-height: var(--lh-tight);
 }
 
-.prb-guide-progress {
+.prb-guide-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   margin: 0 0 20px;
+}
+.prb-guide-head .prb-focus-toggle { margin-left: auto; }
+.prb-guide-progress {
+  margin: 0;
   color: var(--pane-ink-faint);
   font-size: var(--t-meta);
 }
@@ -4517,3 +4862,206 @@ a.prb-notification-open:focus-visible { outline: 2px solid var(--brand-hover); o
 .prb-toast-close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
 .prb-toast-open:focus-visible,
 .prb-toast-close:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 2px; }
+
+/* ── Focus mode ──
+   One surface as the whole workspace, beneath the same header, which is outside `.prb-body` and so
+   never changes. The client sets `data-focus` and nothing else: every pane stays in the DOM,
+   hidden rather than removed, which is why a conversation, an open code panel and a scroll position
+   are all still there on the way back.
+
+   `body` in front of every selector, deliberately. The responsive blocks above set the grid with
+   (0,2,0) selectors inside media queries that come later in the cascade than anything this could
+   be placed beside. One element of extra specificity wins at every width without `!important`,
+   and without depending on this block staying last. */
+body .prb-body[data-focus] { grid-template-columns: minmax(0, 1fr); }
+body .prb-body[data-focus] .prb-rail { display: none; }
+
+/* A document surface, which is every view but the assistant: the review pane takes the width, and
+   gets more room to use it. Prose stays a readable measure; a diff and a drawing are the things here
+   that genuinely want the width. */
+body .prb-body[data-focus]:not([data-focus='buddy']) .prb-ask { display: none; }
+body .prb-body[data-focus]:not([data-focus='buddy']) .pr-helper-sidebar.prb-pane { max-width: 1080px; }
+body .prb-body:is([data-focus='files'], [data-focus='diagram']) .pr-helper-sidebar.prb-pane { max-width: 1600px; }
+/* The rail is where the themes are listed, and it is hidden here, so the picker it stands in for
+   below 860px stands in for it now. */
+body .prb-body[data-focus='guide'] .prb-guide-picker { display: flex; }
+/* An expanded map has room for every stage side by side, which is the point of expanding it. */
+body .prb-body[data-focus='map']:not([data-focus='buddy']) .pr-helper-sidebar.prb-pane { max-width: 1560px; }
+
+/* The assistant: the review pane goes, and the assistant is a column in the grid again at every
+   width. Below 860px it is otherwise a fixed overlay, and an overlay as the whole workspace would
+   sit over the header this mode promises to keep. */
+body .prb-body[data-focus='buddy'] .prb-doc { display: none; }
+body .prb-body[data-focus='buddy'] .prb-ask {
+  display: flex;
+  position: relative;
+  inset: auto;
+  width: auto;
+  border-left: 0;
+}
+body .prb-body[data-focus='buddy'] .prb-ask-resize { display: none; }
+
+/* Prose at a reading measure, centred, with the column itself wider so a code block or a table in
+   an answer can use the room the mode exists to give it. The padding does the centring rather than
+   a max-width on the log, so the log's scrollbar stays at the window's edge. */
+body .prb-body[data-focus='buddy'] :is(.prb-ask-header, .prb-bank, .prb-ask-log, .prb-ask-form, .prb-ask-paused) {
+  padding-inline: max(18px, calc((100% - 1040px) / 2));
+}
+body .prb-body[data-focus='buddy'] .prb-msg-assistant :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) { max-width: 78ch; }
+body .prb-body[data-focus='buddy'] .prb-msg-user { max-width: min(90%, 78ch); }
+
+/* The expand control. Icon-only, like Copy on a card, so it does not compete with a title. Both
+   icons are in the markup and `aria-pressed` picks one, which is the state the client sets. */
+.prb-focus-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.prb-focus-toggle:hover { color: var(--text-primary); background: var(--surface-2); }
+.prb-focus-toggle:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: -2px; }
+.prb-focus-toggle .prb-focus-collapse,
+.prb-focus-toggle[aria-pressed='true'] .prb-focus-expand { display: none; }
+.prb-focus-toggle[aria-pressed='true'] .prb-focus-collapse { display: block; }
+/* In the assistant's header it follows the scope label, which takes the free space with
+   `margin-left: auto`, so the control stays at the right edge beside it. */
+.prb-ask-header .prb-focus-toggle { align-self: center; }
+
+/* The same control in the light document pane, in the pane's palette. */
+.prb-doc .prb-focus-toggle { color: var(--pane-ink-faint); }
+.prb-doc .prb-focus-toggle:hover { color: var(--pane-ink); background: var(--pane-bg); border-color: var(--pane-line); }
+/* The title row is baseline-aligned for the disclosure's text; an icon has no baseline worth
+   aligning, so it centres on the title instead. */
+.prb-doc .prb-doc-head .prb-focus-toggle { align-self: center; margin-left: auto; }
+/* Beside Analysis details the pair sits together at the right: the disclosure takes the free space,
+   and the toggle follows it rather than splitting the row in two. */
+.prb-doc .prb-doc-head .prb-doc-provenance { margin-left: auto; }
+.prb-doc .prb-doc-head .prb-doc-provenance + .prb-focus-toggle { margin-left: -8px; }
+
+/* ── Your prompts, folded ──
+   The heading is the toggle. Folded, it keeps a count, so a reviewer knows what is behind it
+   without opening it, and Add stays beside it. */
+.prb-bank-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 4px 2px 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+.prb-bank-toggle:hover { color: var(--text-primary); }
+.prb-bank-toggle:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 2px; border-radius: 4px; }
+.prb-bank-chevron { transition: transform 120ms ease; transform: rotate(90deg); }
+.prb-bank-toggle[aria-expanded='false'] .prb-bank-chevron { transform: none; }
+.prb-bank-count {
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--surface-2);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: normal;
+}
+.prb-bank-toggle[aria-expanded='true'] .prb-bank-count { display: none; }
+.prb-bank[data-collapsed] { padding-bottom: 8px; }
+.prb-bank[data-collapsed] .prb-bank-head { margin-bottom: 0; }
+
+/* ── Ask Buddy on a finding card ──
+   The page's `[data-menu]` menu, as the header's `...` is, dropped into a card's title row beside
+   Copy. Positioned as the flex child it is, the way `.prb-header .prb-menu` is, so the panel hangs
+   off the trigger rather than off a corner of the card. The panel is in the card's flow inside the
+   scrolling pane, so near the bottom it extends the scroll rather than being cut off. */
+.prb-doc .pr-helper-issue-title-row .prb-menu {
+  position: relative;
+  top: auto;
+  right: auto;
+  display: inline-flex;
+  flex-shrink: 0;
+  /* Not the base rule's `z-index: 2`. That makes every card's wrapper a stacking context of its
+     own at the same level, and the next card's sparkle, later in the document, then paints over
+     this card's open panel. With no context here the panel's own z-index is measured against the
+     whole pane. */
+  z-index: auto;
+}
+.prb-doc .prb-ask-buddy-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-top: -3px;
+  color: var(--pane-accent);
+}
+.prb-doc .prb-ask-buddy-trigger:hover,
+.prb-doc .prb-ask-buddy-trigger[aria-expanded='true'] { background: var(--pane-bg); color: var(--pane-accent-ink); }
+.prb-doc .prb-ask-buddy-trigger:focus-visible { outline: 2px solid var(--pane-accent); outline-offset: -2px; }
+
+/* The tooltip Copy uses beside it, so the two icons explain themselves the same way. */
+.prb-doc .prb-ask-buddy-trigger::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 3;
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: #24292f;
+  color: #ffffff;
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s;
+}
+.prb-doc .prb-ask-buddy-trigger:hover::after,
+.prb-doc .prb-ask-buddy-trigger:focus-visible::after { opacity: 1; transition-delay: 0.35s; }
+.prb-doc .prb-ask-buddy-trigger[aria-expanded='true']::after { display: none; }
+
+/* The panel in the pane's palette: the header's is dark on the dark shell, and a dark box in the
+   middle of a light card is the mistake pane_palette.test.ts exists to catch. */
+.prb-doc .prb-ask-buddy-panel {
+  top: 28px;
+  width: 280px;
+  max-width: min(280px, calc(100vw - 48px));
+  border-color: var(--pane-line);
+  background: var(--pane-surface);
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
+  color: var(--pane-ink);
+}
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-item {
+  display: block;
+  width: 100%;
+  padding: 7px 9px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--pane-ink);
+  font: inherit;
+  font-size: var(--t-meta);
+  text-align: left;
+  cursor: pointer;
+}
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-item:hover,
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-item:focus-visible { background: var(--pane-bg); outline: none; }
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--pane-accent); }
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-item:disabled { opacity: 0.5; cursor: default; }
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--pane-line); }
+.prb-doc .prb-ask-buddy-panel .pr-helper-selection-menu-heading {
+  padding: 4px 9px 2px;
+  color: var(--pane-ink-faint);
+  font-size: var(--t-micro);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}