markdown.css

/* Base table styling (borders, padding, header, zebra stripe, cell wrapping)
   comes from @copse/streaming-markdown's default.css. The rules below are
   agent-pane refinements layered on top of that base. */
/* Tables with 3+ columns: pin only the first column (PR/number) to 1%
   so the last (content) column expands to fill remaining space. */
.message-text:has(th:nth-child(3)) th:first-child,
.message-text:has(th:nth-child(3)) td:first-child {
  width: 1%;
  white-space: nowrap;
}
/* A lone code span (e.g. a long branch slug) wraps inside its cell instead of
   widening the table. Excluded: the pinned first column of a 3+ col table, which
   is held to width:1% — breaking "anywhere" there shatters a short id (PR number,
   test name) one character per line. That cell falls back to the base td rule, so
   it inherits the column's `nowrap` and the id hugs its content on one line. */
.message-text:not(:has(th:nth-child(3))) :is(td, th) > code:only-child,
.message-text:has(th:nth-child(3)) :is(td, th):not(:first-child) > code:only-child {
  display: block;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
}
.message-text .mermaid-diagram {
  /* Cap the thumbnail; untrusted frame size reports are bounded in the host. */
  max-height: min(280px, 42vh);
  overflow: auto;
  margin: var(--spacing-sm) 0;
}
.message-text .mermaid-diagram.mermaid-diagram--folded {
  cursor: zoom-in;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-xs);
  background: var(--bg-elevated);
}
.message-text .mermaid-diagram.mermaid-diagram--folded:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.message-text .mermaid-diagram.mermaid-diagram--folded::after {
  content: 'Click to expand';
  display: block;
  margin-top: var(--spacing-xs);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  pointer-events: none;
}
.mermaid-expand-dialog {
  width: min(96vw, 1200px);
  max-width: 96vw;
  height: min(92vh, 860px);
  max-height: 92vh;
  padding: var(--spacing-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-sizing: border-box;
}
/* Flex only while open — an unconditional `display: flex` overrides the UA
   closed-dialog `display: none` (see `dialog:not([open])` in forms.css). */
.mermaid-expand-dialog[open] {
  display: flex;
  flex-direction: column;
}
.mermaid-expand-dialog-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mermaid-expand-viewport {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: min(50vh, 320px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-base);
  cursor: grab;
  touch-action: none;
}
.mermaid-expand-viewport.is-panning {
  cursor: grabbing;
}
.mermaid-expand-stage {
  transform-origin: 0 0;
  display: inline-block;
  padding: var(--spacing-md);
}
.mermaid-expand-stage .mermaid-frame {
  display: block;
  max-width: none;
  height: auto;
}
.mermaid-expand-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  flex-wrap: wrap;
}
.mermaid-expand-tool {
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-base);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.mermaid-expand-tool:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.mermaid-expand-zoom-label {
  min-width: 3.5em;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
}
.mermaid-expand-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}
.mermaid-expand-close {
  margin-top: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm);
  border-radius: var(--radius);
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.mermaid-expand-close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.mermaid-fallback-title {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}
.mermaid-fallback-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}
.mermaid-fallback-source {
  font-size: var(--font-size-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-elevated);
}
.mermaid-fallback-source summary {
  cursor: pointer;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}
.mermaid-fallback-source pre {
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: pre-wrap;
  color: var(--text-muted);
  max-height: 240px;
  overflow: auto;
}

/* Lucide "external-link" glyph as an alpha mask so it inherits the link colour
   via `background-color: currentColor`. Matches externalLinkIcon() in
   dom/icons.ts. */
:root {
  --external-link-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%203h6v6'/%3E%3Cpath%20d='M10%2014%2021%203'/%3E%3Cpath%20d='M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* When "Open links in built-in browser" is off, http(s) links inside a
   browser-links scope (chat, PR body, file preview) open in the system browser,
   so badge them with an external-link glyph — the same affordance the PR pane's
   "View on GitHub" link uses. Pure CSS so streamed/late-rendered links pick it up
   without a re-decoration pass. File-reference and workspace links are in-app
   navigations and stay unmarked. */
html.mark-external-links
  .browser-links-scope
  a[href^='http']:not([data-file-reference-path]):not([data-workspace-link])::after {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-inline-start: 0.2em;
  vertical-align: -0.08em;
  background-color: currentColor;
  -webkit-mask: var(--external-link-mask);
  mask: var(--external-link-mask);
  /* Purely decorative — the link text already announces the destination. */
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Callouts and quotes: a flat plate, not a rail.

   `@copse/streaming-markdown` draws blockquotes and GitHub alerts with a 3px
   `border-left` in the severity hue. Copse retires that rail wherever it was
   decoration rather than structure (see `prototypes/side-highlight` — "M, the
   mix"): prose the agent wrote is part of the answer, so it gets a plain tinted
   surface and the hue moves into the title and its glyph. A plate has no
   leading edge, so nothing can bow around a corner and the block reads the same
   whether it is two lines or twenty.

   Overridden here rather than upstream because the package is a dependency.
   Each selector matches the package's own specificity and wins on source order:
   `renderer/main.ts` imports default.css before global.css.

   Copse's commentary on a turn — thinking, review, comparison — takes the same
   plate in a different material; those live with their own components
   (conversation.css, todo.css) and share the hatch tuning from base.css.
   --------------------------------------------------------------------------- */
.streaming-markdown blockquote {
  /* A quote is not severity-coded; the quote itself is the whole marker. */
  --sev: var(--text-muted);
  border: 0;
  border-radius: var(--radius);
  margin: var(--spacing-sm) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: color-mix(in srgb, var(--sev) var(--callout-plate-fill), var(--bg-elevated));
  color: var(--text-secondary);
}
.streaming-markdown blockquote.markdown-alert {
  background: color-mix(in srgb, var(--sev) var(--callout-plate-fill), var(--bg-elevated));
  border-radius: var(--radius);
  color: inherit;
}
.streaming-markdown blockquote.markdown-alert-note {
  --sev: var(--info);
}
.streaming-markdown blockquote.markdown-alert-tip {
  --sev: var(--success);
}
.streaming-markdown blockquote.markdown-alert-important {
  --sev: var(--important);
}
.streaming-markdown blockquote.markdown-alert-warning {
  --sev: var(--warning);
}
.streaming-markdown blockquote.markdown-alert-caution {
  --sev: var(--danger);
}
/* The hue the rail used to carry now sits on the title line and nowhere else. */
.streaming-markdown blockquote.markdown-alert .markdown-alert-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  color: var(--sev);
}

/* Solid callout glyphs, as alpha masks so each takes its title's `--sev` via
   `background-color: currentColor`. Solid rather than the app's outline stroke
   on purpose: at 16px a 1.4-weight wire drawing cannot balance a 600-weight
   title, and thin strokes lose disproportionately on a dark surface. Each
   silhouette is distinct — circle / bulb / bubble / triangle / octagon — so the
   kind reads before the hue does, which matters now that the rail is gone.

   The `viewBox` min-y on tip, important and warning is the optical-centring
   nudge: ink sits high in a bulb and a bubble and low in a triangle, so
   box-centring reads wrong. `prototypes/side-highlight/proto.js` measured each
   glyph's alpha-weighted centroid once; those constants are baked in here
   rather than shipped as a runtime pass. Vertical only — horizontal alignment
   is the flex row's job. */
:root {
  --callout-icon-note: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill-rule='evenodd'%20d='M8%201.35a6.65%206.65%200%201%200%200%2013.3%206.65%206.65%200%200%200%200-13.3ZM7.25%206.85h1.5v5h-1.5v-5Zm0-2.9h1.5v1.6h-1.5v-1.6Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  --callout-icon-tip: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-0.78%2016%2016'%3E%3Cpath%20d='M8%20.9a5.1%205.1%200%200%200-3.05%209.19c.38.29.6.72.66%201.19h4.78c.06-.47.28-.9.66-1.19A5.1%205.1%200%200%200%208%20.9ZM5.55%2011.9h4.9v1.15h-4.9zM6.4%2013.65h3.2v1.05H6.4z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  --callout-icon-important: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-0.84%2016%2016'%3E%3Cpath%20fill-rule='evenodd'%20d='M2.6%201.8h10.8a1.3%201.3%200%200%201%201.3%201.3v6.6a1.3%201.3%200%200%201-1.3%201.3H8.2l-3.3%203v-3H2.6a1.3%201.3%200%200%201-1.3-1.3V3.1a1.3%201.3%200%200%201%201.3-1.3ZM7.25%203.6h1.5v3.5h-1.5V3.6Zm0%204.5h1.5v1.5h-1.5V8.1Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  --callout-icon-warning: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%201%2016%2016'%3E%3Cpath%20fill-rule='evenodd'%20d='M8.62%201.9a.72.72%200%200%200-1.24%200L1.4%2012.9a.72.72%200%200%200%20.62%201.08h11.96a.72.72%200%200%200%20.62-1.08L8.62%201.9ZM7.25%206h1.5v4h-1.5V6Zm0%205.1h1.5v1.45h-1.5V11.1Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  --callout-icon-caution: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill-rule='evenodd'%20d='M5.75%201.3h4.5L14.7%205.75v4.5L10.25%2014.7h-4.5L1.3%2010.25v-4.5L5.75%201.3ZM7.25%204.6h1.5v4.6h-1.5V4.6Zm0%205.8h1.5v1.6h-1.5v-1.6Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.streaming-markdown blockquote.markdown-alert .markdown-alert-title::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  /* Decorative: the title word beside it already names the kind. */
  pointer-events: none;
}
@media (forced-colors: active) {
  .streaming-markdown blockquote.markdown-alert .markdown-alert-title::before {
    /* A mask is painted with a background, which forced colors otherwise
       replaces with Canvas and makes invisible against the callout. Preserve
       only this glyph's system foreground; the plate and text still adapt. */
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
.streaming-markdown blockquote.markdown-alert-note .markdown-alert-title::before {
  -webkit-mask: var(--callout-icon-note);
  mask: var(--callout-icon-note);
}
.streaming-markdown blockquote.markdown-alert-tip .markdown-alert-title::before {
  -webkit-mask: var(--callout-icon-tip);
  mask: var(--callout-icon-tip);
}
.streaming-markdown blockquote.markdown-alert-important .markdown-alert-title::before {
  -webkit-mask: var(--callout-icon-important);
  mask: var(--callout-icon-important);
}
.streaming-markdown blockquote.markdown-alert-warning .markdown-alert-title::before {
  -webkit-mask: var(--callout-icon-warning);
  mask: var(--callout-icon-warning);
}
.streaming-markdown blockquote.markdown-alert-caution .markdown-alert-title::before {
  -webkit-mask: var(--callout-icon-caution);
  mask: var(--callout-icon-caution);
}

/* Light-theme syntax highlighting (issue #2486).
 *
 * `@copse/streaming-markdown/styles/default.css` ships a VS Code **Dark+**
 * `.hljs-*` palette and says so in its own header: "the .hljs-* rules below are a
 * VS Code Dark+ palette; override by redeclaring those selectors after this
 * import." Nothing here ever did. `conversation.css` maps `--sm-code-bg` to
 * `--bg-elevated`, which in the light theme is near-white, so Dark+ token colours
 * were being painted onto a light ground: JSON keys (`.hljs-attr`, #9cdcfe) came
 * out at 1.19:1 against it and strings (#ce9178) at 2.10:1. The whole palette
 * measured between 1.12:1 and 2.65:1 — unreadable, which is what the issue
 * reported.
 *
 * These are VS Code **Light+** hues, with comment, number and type darkened from
 * their upstream values (#008000/#098658/#267f99) because Copse's light code
 * surface is the tinted #e3e6e3 rather than pure white, where the originals land
 * at 3.65-4.08:1. As written every token clears WCAG AA (4.5:1) for body text on
 * that surface; the pinned floor is asserted in `light-contrast.test.ts`.
 *
 * Specificity (0,3,0) beats the package's own (0,2,0) nesting, so this wins on
 * merit rather than on import order.
 */
[data-theme='light'] .streaming-markdown .hljs-comment,
[data-theme='light'] .streaming-markdown .hljs-quote {
  color: #007000;
}
[data-theme='light'] .streaming-markdown .hljs-keyword,
[data-theme='light'] .streaming-markdown .hljs-selector-tag,
[data-theme='light'] .streaming-markdown .hljs-built_in {
  color: #0000ff;
}
[data-theme='light'] .streaming-markdown .hljs-string,
[data-theme='light'] .streaming-markdown .hljs-regexp {
  color: #a31515;
}
[data-theme='light'] .streaming-markdown .hljs-number,
[data-theme='light'] .streaming-markdown .hljs-literal {
  color: #07734b;
}
[data-theme='light'] .streaming-markdown .hljs-title,
[data-theme='light'] .streaming-markdown .hljs-title.function_,
[data-theme='light'] .streaming-markdown .hljs-function .hljs-title {
  color: #795e26;
}
[data-theme='light'] .streaming-markdown .hljs-type,
[data-theme='light'] .streaming-markdown .hljs-class .hljs-title {
  color: #1f6b80;
}
[data-theme='light'] .streaming-markdown .hljs-attr,
[data-theme='light'] .streaming-markdown .hljs-attribute,
[data-theme='light'] .streaming-markdown .hljs-variable,
[data-theme='light'] .streaming-markdown .hljs-template-variable {
  color: #0451a5;
}
[data-theme='light'] .streaming-markdown .hljs-meta,
[data-theme='light'] .streaming-markdown .hljs-symbol {
  color: #1f1f1f;
}

/* The parent owns geometry and interaction; diagram markup stays in the frame. */
.mermaid-frame {
  display: block;
  border: 0;
  pointer-events: none;
}
.message-text .mermaid-frame {
  max-width: 100%;
}