@djangocfg/widget-chat 0.1.1

package/src/styles/index.css

@@ -0,0 +1,47 @@
+/**
+ * `@djangocfg/widget-chat` — the CSS the package's own markup needs to work.
+ *
+ * Import once, anywhere in a host's stylesheet:
+ *
+ *     @import "@djangocfg/widget-chat/styles";
+ *
+ * ## What belongs here, and what does not
+ *
+ * This file carries rules that are part of the COMPONENTS' contract — layout
+ * that the markup would be broken without, and that no host would ever want
+ * differently. It carries no product VALUES: not the type scale, not the
+ * reading width, not a colour. Those stay the host's, declared as `--chat-*`
+ * tokens; a host defines them alongside its own theme.
+ *
+ * The dividing question is "would a second consumer want this changed?" — and
+ * it is about the VALUE, not about the rule. Which class consumes which token
+ * is not a decision anyone would take differently; it is wiring, and it belongs
+ * beside the markup it wires, or it breaks the next time that markup moves.
+ * Every `var()` here therefore carries a fallback, so a host that declares no
+ * tokens still gets a readable surface rather than a collapsed one.
+ *
+ * ## Why CSS at all, in a package that ships none
+ *
+ * Because `:has()` is the only mechanism that expresses some of these rules,
+ * and it has no JavaScript equivalent that is not a resize observer writing a
+ * class —
+ * a measure-and-render cycle for a question the browser has already answered.
+ * Everything else the package needs is a Tailwind class on its own markup.
+ *
+ * The package is consumed as SOURCE (`"main": "./src/index.ts"`), so a host's
+ * Tailwind entry can import this directly; there is no build step to teach.
+ */
+
+/**
+ * Split by SUBSYSTEM, one file each, because they answer to different owners:
+ * the composer's rules are layout the markup breaks without, the markdown
+ * surface styles what the renderer emits, and the block rhythm belongs to the
+ * transcript. A single file made "is this rule still used?" a question about
+ * 513 lines.
+ */
+@import "./surface.css";
+@import "./turn-mark.css";
+@import "./composer.css";
+@import "./markdown.css";
+@import "./block.css";
+@import "./tool.css";

package/src/styles/markdown.css

@@ -0,0 +1,368 @@
+/**
+ * The MARKDOWN surface — how a rendered message reads.
+ *
+ * These style markup the PACKAGE renders (`streamdown` output inside a
+ * message), so they ship with it: a second consumer that mounted the transcript
+ * and got un-gutter'd lists, a doubled code background and document-scale
+ * headings would be inheriting a bug, not exercising a choice.
+ *
+ * What stays with the HOST is what a product decides — the type SCALE, the
+ * reading COLUMN, and the `.chat-surface`/`.chat-column` classes it puts on its
+ * own elements. Consumed here as variables WITH FALLBACKS, so this degrades to
+ * sensible relative sizing when a host declares none.
+ */
+
+/**
+ * Zero-specificity by design.
+ *
+ * Everything below is `:where()`, so every rule has ZERO specificity: a
+ * component that sets its own value always wins, and these are defaults rather
+ * than overrides. That matters because the agent's markdown is rendered by
+ * `streamdown`, and fighting a library with specificity is how a stylesheet
+ * becomes unmaintainable.
+ *
+ * The through-line is that a message is not a DOCUMENT. Document defaults —
+ * heavy code chips, big headings, generous block margins — are calibrated for a
+ * page the reader arrives at, not for a paragraph inside a conversation.
+ */
+
+/* Monospace, INSIDE a sentence.
+ *
+ * The default here is a chip: background, padding, radius. At prose weight that
+ * reads heavier than the words around it, so a sentence with three identifiers
+ * in it turns into a row of buttons. Keeping the tint but cutting the padding
+ * and softening the ground keeps it identifiable as code without letting it
+ * outrank the sentence carrying it. */
+.chat-surface :where(code, kbd, samp) {
+  font-size: var(--chat-text-code, 0.92em);
+  border-radius: 0.25rem;
+  padding: 0.05em 0.3em;
+  background: color-mix(in oklab, currentColor 8%, transparent);
+}
+
+/* A fenced block is the opposite case: it IS the content, so it keeps its own
+ * ground and padding. Reset the inline rule rather than restate it — a `code`
+ * inside a `pre` matched the selector above and got a second background. */
+/* A fenced block scrolls rather than spilling out of the column, for the same
+ * reason a table does. The guards that hold prose do not reach it:
+ * `break-words` is scoped to the user bubble and code arrives from the model,
+ * and nothing wraps a long line inside a `pre`.
+ *
+ * What spills is not the block's own width — the `pre` measures at the column
+ * either way. Its CONTENT overflows it, and with `overflow-x: visible` that
+ * paints past the edge and grows the transcript's scroll area instead: measured
+ * live, one 400-character line took the scroller from 1218 to 3434 while every
+ * element in the row still reported 768. So the whole transcript scrolls
+ * sideways with no element admitting it did. */
+.chat-surface :where(pre) {
+  font-size: var(--chat-text-code, 0.92em);
+  border-radius: 0.5rem;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+.chat-surface :where(pre code, pre kbd, pre samp) {
+  padding: 0;
+  background: transparent;
+  font-size: inherit;
+}
+
+/* Headings stay close to the body. An `h1` at document scale inside a bubble
+ * reads as a shout, and the agent emits them freely. The steps are deliberately
+ * small — the job is to mark structure, not to build a title page. */
+.chat-surface :where(h1, h2, h3, h4, h5, h6) {
+  font-size: calc(var(--chat-text, 1em) * 1.08);
+  line-height: 1.35;
+  font-weight: 600;
+  margin-block: 1.2em 0.5em;
+}
+.chat-surface :where(h1:first-child, h2:first-child, h3:first-child) {
+  margin-block-start: 0;
+}
+
+/* Lists need their marker gutter back.
+ *
+ * Measured on a live app: `padding-left: 0`, so the bullets rendered
+ * OUTSIDE the text column and the items did not line up with the paragraphs
+ * above them. `1.4em` is a marker plus a space at the current size, and it
+ * scales with the type because it is an em. */
+.chat-surface :where(ul, ol) {
+  padding-inline-start: 1.4em;
+}
+.chat-surface :where(li) {
+  margin-block: 0.15em;
+}
+.chat-surface :where(li > ul, li > ol) {
+  margin-block: 0.15em;
+}
+
+/* Block rhythm. One value, so paragraphs, lists, quotes and code blocks are
+ * separated by the same distance and the message reads as one column rather
+ * than as stacked cards. */
+.chat-surface :where(p, ul, ol, pre, blockquote, table) {
+  margin-block: 0.7em;
+}
+
+/* A notice is a UI row that happens to be a <p>, so the prose rhythm above
+ * spaces it against a sibling whose parent already sets a gap. Keyed on the
+ * element's own `data-slot` rather than a class, so it cannot be lost by a
+ * caller passing `className`, and in `:where()` so it only REMOVES. */
+.chat-surface :where(p[data-slot="notice"]) {
+  margin-block: 0;
+}
+
+/* The opt-out for UI rendered INSIDE the surface that is not prose.
+ *
+ * A popover, a tooltip or a menu portalled into `.chat-surface` inherits the
+ * block rhythm above, which spaces its rows like paragraphs — three equal gaps
+ * where the design has a heading, a subtitle and a detail line. A consumer
+ * cannot win that with a utility class: `:where()` scores zero, so the two tie
+ * on specificity and this sheet loads later.
+ *
+ * `.chat-plain` states the exemption where the rhythm is defined, so a reader
+ * of either sees both. It also resets the type scale, because the same surface
+ * sets a prose line-height that a dense card must not inherit.
+ *
+ * Wrapped in `:where()` for the same reason everything else here is: this must
+ * REMOVE the prose rhythm, not impose a rhythm of its own. Written as a plain
+ * class it scored (0,2,0) and beat the card's own `mt-*` utilities — the rows
+ * collapsed against each other and no spacing set on them had any effect. */
+.chat-surface :where(.chat-plain) :where(p, ul, ol, pre, blockquote, table) {
+  margin-block: 0;
+}
+.chat-surface :where(.chat-plain) {
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+/* No leading gap at the top of a message, and none trailing at the bottom —
+ * the bubble's own padding owns those edges. Scoped to a first/last child of
+ * ANY container rather than of the surface, because each message renders inside
+ * its own wrapper; but `> *` on that wrapper only, so a nested list's first item
+ * keeps its rhythm. */
+.chat-surface :where(* > p:first-child, * > ul:first-child, * > ol:first-child, * > pre:first-child) {
+  margin-block-start: 0;
+}
+.chat-surface :where(* > p:last-child, * > ul:last-child, * > ol:last-child, * > pre:last-child) {
+  margin-block-end: 0;
+}
+
+/* A quote is marked by a RULE, not by a filled box: it is an aside inside a
+ * message that already sits in a bubble, and a second surface inside the first
+ * reads as a nested card. */
+.chat-surface :where(blockquote) {
+  padding-inline-start: 0.9em;
+  border-inline-start: 2px solid color-mix(in oklab, currentColor 20%, transparent);
+  color: color-mix(in oklab, currentColor 75%, transparent);
+}
+
+/* Tables scroll rather than widen the column. A wide table is the one markdown
+ * element that can break the reading column outright, and a horizontal scrollbar
+ * on the table beats one on the page. */
+.chat-surface :where(table) {
+  display: block;
+  overflow-x: auto;
+  border-collapse: collapse;
+  font-size: var(--chat-text-small, 0.8em);
+}
+.chat-surface :where(th, td) {
+  padding: 0.35em 0.6em;
+  border: 1px solid color-mix(in oklab, currentColor 15%, transparent);
+  text-align: start;
+}
+
+/* A separator between thoughts, not a page break. */
+.chat-surface :where(hr) {
+  margin-block: 1.2em;
+  border: 0;
+  border-block-start: 1px solid color-mix(in oklab, currentColor 15%, transparent);
+}
+
+/* An inline chip — a file the agent named, or a bare url it wrote. Both are the
+ * sibling of inline code above, and both follow the same three rules for the
+ * same reasons, so the rules live on ONE class and each kind adds only what is
+ * genuinely its own.
+ *
+ * Sized in `em` so it tracks the bubble's text instead of pinning itself to a
+ * rem the surface knows nothing about. Coloured by INHERITANCE, never by a
+ * named token: the user's bubble has no primary fill in dark theme, so a
+ * `--primary-foreground` resolved to near-black against light prose and the
+ * reference all but vanished. And the ground is mixed FROM that inherited
+ * colour, so it tints toward whichever direction the theme runs — a fixed white
+ * wash shows on a dark bubble and disappears on a light one.
+ *
+ * The class exists so the component carries none of this in a class list: the
+ * rule belongs with the prose it sits in, beside the code chip it matches. */
+.chat-surface .chat-chip {
+  /* Neither a bare `button` nor an `a` inherits type and colour from its
+   * context, so the three lines a UA stylesheet would otherwise decide are
+   * stated here. For the file chip this is the whole reason it is a plain
+   * button: the shared `Button` gives these AND four other things a word
+   * inside a sentence must not have. For the link chip it is what strips the
+   * default underline and link colour. */
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: var(--chat-text-code, 0.92em);
+  /* An inline-flex box exports its FIRST item's baseline, and the first item
+   * here is the icon — an SVG, which has no text baseline to give. That is why
+   * the label rode visibly higher than the words on either side, and why no
+   * amount of padding or line-height fixes it: none of them change WHICH child
+   * the baseline comes from.
+   *
+   * `align-items: baseline` makes the label the donor instead, and
+   * `align-self: center` on the icon (below) re-centres the icon against it.
+   * Measured against the neighbouring prose, chip bottom minus text bottom:
+   *
+   *   line-height 1.4, align center   → -3.50   (the reported defect)
+   *   line-height inherit             → -3.50, and 24.29px tall: `inherit`
+   *                                     takes the multiplier, not the height
+   *   line-height 1, align center     → -3.50   height changed, drift did not
+   *   align-items: baseline           →  0.00
+   *
+   * `baseline-source: last` reaches the same result and is not used: it is the
+   * newer property, unsupported in Safari, and buys nothing here.
+   *
+   * `normal` rather than a number: the font's own line box is what the label
+   * needs to sit in, and every value tried moved the box relative to the text
+   * around it (`1` → -1.28, `1.29` → +0.98, `inherit` → +3.28, `normal` →
+   * -0.50). The residue is the difference between two DIFFERENT type sizes'
+   * bottom edges, not a baseline offset, so it cannot reach zero and does not
+   * need to. */
+  line-height: normal;
+  align-items: baseline;
+  border-radius: 0.25rem;
+  /* Horizontal padding only, and the vertical breathing room comes from the
+   * shadow below instead.
+   *
+   * Vertical padding cannot be used here: on a flex container the baseline is
+   * measured from the padding box, so every form of it drags the label off the
+   * line. Measured, drift against the neighbouring text:
+   *
+   *   padding-block: 2px                        → +2.00
+   *   padding-block + matching negative margin  → +2.00 (margin is not counted)
+   *   padding-block + vertical-align offset     → +4.00 (they ADD, not cancel)
+   *   padding-block on the label instead        → +0.72
+   *   box-shadow spread                         →  0.00
+   */
+  padding: 0 0.3em;
+  /* Horizontal only, and exactly the shadow's spread: the ground below paints
+   * OUTSIDE the box, so without this it laps over the words on either side and
+   * the chip reads as touching them. Inline margin does not affect the
+   * baseline (measured: drift stays 0.00), which is why the axis that could not
+   * take padding can take this. */
+  margin-inline: 0.18em;
+  background: color-mix(in oklab, currentColor 10%, transparent);
+  /* The ground, grown evenly on all four sides. A shadow paints outside the
+   * border box without joining layout, so the chip reads as having padding
+   * while its baseline, its height and the paragraph's line box are all
+   * untouched. Same colour as the background, so the two are one shape. */
+  box-shadow: 0 0 0 0.18em color-mix(in oklab, currentColor 10%, transparent);
+}
+/* The icon must NOT sit on the baseline it just handed to the label — a glyph
+ * aligned that way hangs its whole body above the line. Centring it against the
+ * label is the counterpart to `align-items: baseline` above.
+ *
+ * The size is an em for the same reason the type is: a fixed 16px leaves the
+ * icon behind the moment a surface raises its text. */
+.chat-surface .chat-chip > svg {
+  align-self: center;
+  width: 1em;
+  height: 1em;
+}
+/* A host-supplied typed icon arrives as a SPAN wrapping the svg, sized in
+ * pixels inline. Both have to be overridden here: the pixel size does not track
+ * the surface's type, and the span would donate the baseline the label owns. */
+.chat-surface .chat-chip > span:where([aria-hidden="true"], [role="img"]) {
+  align-self: center;
+  width: 1em !important;
+  height: 1em !important;
+}
+.chat-surface .chat-chip > span:where([aria-hidden="true"], [role="img"]) > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+/* Both surfaces move together, and INSTANTLY. A hover lighting only the
+ * background shows the shadow as a separate unlit ring; a transition covering
+ * only `background-color` eases one half while the ring snaps, which separates
+ * the two halves of one shape. Do not add a transition without covering both. */
+.chat-surface .chat-chip:where(:hover) {
+  background: color-mix(in oklab, currentColor 18%, transparent);
+  box-shadow: 0 0 0 0.18em color-mix(in oklab, currentColor 18%, transparent);
+}
+/* An ordinary link the agent wrote, where the author chose the label.
+ *
+ * A host overriding the renderer's `a` component opts out of the library's
+ * default anchor, which is where the class, `target` and `rel` came from. With
+ * none of them a link is indistinguishable from the prose around it, so this
+ * states them rather than leaving the host's fallback bare.
+ *
+ * `overflow-wrap` because a url too long for the column otherwise widens the
+ * bubble instead of wrapping. */
+.chat-surface .chat-link {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  overflow-wrap: anywhere;
+}
+
+/* WHICH SIDE a link sits on is read from the DOM, not passed down.
+ *
+ * The accent is right against assistant prose and wrong inside a user bubble,
+ * whose saturated ground already spends the accent — so the link needs the
+ * bubble's own foreground there instead.
+ *
+ * That decision cannot travel as a prop. `components` is memoized ONCE per
+ * screen (`Response` re-parses every message when the object's identity
+ * changes), so a per-message value threaded through it would either be stale or
+ * cost a full re-parse per render. The message wrapper already publishes
+ * `data-role`, which is a fact about the DOM the link is standing in and needs
+ * no plumbing at all.
+ *
+ * Assistant is the default rather than a mirrored rule: an unknown or absent
+ * role reads as prose, which is the safe direction — an accent that fails to
+ * apply is a dull link, while a foreground that fails to apply is invisible
+ * text on a saturated ground. */
+.chat-surface .chat-link,
+.chat-surface .chat-link-chip {
+  color: var(--primary);
+}
+
+.chat-surface [data-role="user"] .chat-link,
+.chat-surface [data-role="user"] .chat-link-chip {
+  color: inherit;
+}
+
+/* A url label carries a domain AND a path, so the ceiling is generous; the
+ * component still elides the middle, and this is only the backstop. */
+.chat-surface .chat-link-chip {
+  max-width: 20rem;
+}
+
+/* A rendered diagram, and the source shown when one cannot be drawn.
+ *
+ * The SVG carries no dimensions of its own worth honouring — the renderer sizes
+ * it to the graph, which is routinely wider than the column. Constraining the
+ * element and letting the child scale is what keeps a wide diagram from
+ * widening the bubble, the same rule every other wide block here follows. */
+.chat-surface .chat-diagram {
+  display: flex;
+  justify-content: center;
+  overflow-x: auto;
+}
+
+.chat-surface .chat-diagram > svg {
+  max-width: 100%;
+  height: auto;
+}
+
+/* The fallback is the agent's own source, so it reads as a listing rather than
+ * as an error: the same ground and rhythm as a code block, because that is what
+ * it is. Colour comes from `currentColor` and cannot be wrong in either theme. */
+.chat-surface .chat-diagram-source {
+  overflow-x: auto;
+  padding: 0.75rem;
+  border-radius: var(--radius, 0.5rem);
+  background: color-mix(in oklab, currentColor 6%, transparent);
+  font-size: 0.8125em;
+  white-space: pre;
+}

package/src/styles/surface.css

@@ -0,0 +1,102 @@
+/**
+ * `.chat-surface` and `.chat-column` — the two classes `ChatTranscript` puts on
+ * its own root, and so the two this package must make work.
+ *
+ * They were the host's for as long as the VALUES were the argument. They are
+ * not: what a transcript reads at and how wide it is allowed to get are still
+ * the product's answers, and they still arrive as `--chat-*` tokens the host
+ * declares. What lives here is only the WIRING — which class consumes which
+ * token — which is not a decision at all, and which broke as soon as the
+ * markup moved into this package while the rules stayed behind.
+ *
+ * Every token carries a fallback, so the components work in a host that
+ * declares none: a workbench, a test, a second consumer. A missing token must
+ * degrade to a readable default, never to zero.
+ */
+
+/**
+ * The type. Chat is the one surface in an app that is sustained READING
+ * rather than scanning a control, so it does not inherit the control scale.
+ */
+.chat-surface {
+  font-size: var(--chat-text, 1rem);
+  line-height: var(--chat-leading, 1.65);
+  /* NORMAL, and that is the whole decision. A design system's negative tracking
+   * is tuned for LABELS — a chip, a menu row, something taken in at a glance,
+   * where tightening buys density. Prose is the opposite job: the reader needs
+   * the word shapes open. Measured against the two surfaces this one is judged
+   * beside, both set prose at `normal` and neither tightens it.
+   *
+   * Declared rather than left alone, because a token like
+   * `--letter-spacing-base` is set once high in the tree on a control-sized
+   * element — so it resolves THERE and would arrive here as fixed pixels
+   * computed for a size this surface does not use. */
+  letter-spacing: normal;
+}
+
+/**
+ * A fling that lands on the bottom edge must not hand its leftover momentum to
+ * the page behind, which then bounces back into this box.
+ */
+.chat-surface {
+  overscroll-behavior: contain;
+}
+
+/**
+ * The reading column, applied to the CONTENTS of a full-width surface.
+ *
+ * Every direct child is centred and capped, so the scroller keeps its scrollbar
+ * at the pane's edge while the transcript stays readable on a wide display. A
+ * host puts the same class on its composer wrapper — one rule for both, because
+ * a transcript and a composer at different widths disagree visibly about where
+ * the conversation is.
+ *
+ * A CSS rule rather than a wrapper element per row: the transcript renders its
+ * rows as direct children, and threading a container through it would make the
+ * primitive responsible for page layout it has no business knowing about.
+ */
+/*
+ * The scrollbar-side inset, shared by the transcript and the composer so the
+ * two never disagree about where the column ends.
+ *
+ * A token because the right answer differs by device: a desktop needs only
+ * enough to clear a real scrollbar, while a phone overlays its own and wants
+ * the inset to match the screen's other margins — reply text sat against the
+ * bare edge at 0px while the header beside it kept 20.
+ */
+.chat-inset-r {
+  padding-right: var(--chat-edge-r, 1rem);
+}
+
+.chat-column > * {
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--chat-column, 48rem);
+}
+
+/**
+ * The row a jump landed on, marked just long enough to be found.
+ *
+ * An animation rather than a persistent state: the mark answers "which row did
+ * I mean", and a highlight that stayed would become a selection nobody chose.
+ * Removed and re-added by `ChatSurfaces.revealMessage`, so a second jump to the
+ * same row flashes again.
+ */
+.chat-revealed {
+  animation: chat-reveal 1.2s ease-out;
+}
+
+@keyframes chat-reveal {
+  from {
+    background: color-mix(in oklab, var(--primary) 18%, transparent);
+  }
+  to {
+    background: transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-revealed {
+    animation-duration: 0.01ms;
+  }
+}

package/src/styles/tool.css

@@ -0,0 +1,128 @@
+/**
+ * Tool calls — a summary that opens.
+ *
+ * Form adapted from vercel/ai-elements `packages/elements/src/tool.tsx`
+ * (Apache-2.0, submodule @ 6a9d5b1): card shell, header-as-trigger, rotating
+ * chevron. The disclosure RULE is ours — they collapse unconditionally, which
+ * renders a running call as a stalled row.
+ *
+ * Here rather than in the class list because every rule below is appearance.
+ */
+
+/* Spacing is not here: `block.css` owns the rhythm for every block-level part,
+ * because a tool call and a card sitting next to each other need one rule, not
+ * two that agree until someone edits one of them. */
+
+/**
+ * The running marker TUMBLES, reusing `turn-mark-tumble` — one motion for every
+ * place this app says "still going".
+ *
+ * A square, never a circle, and that is the reference's measured point: the
+ * corners are what make rotation visible, and at this size a turning circle is
+ * indistinguishable from a still one. A ring would be worse still — it promises
+ * progress, and no tool here knows its own duration.
+ */
+.chat-tool-dot {
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: 999px;
+}
+
+/* Bigger while it turns: at 8px the corners travel too few pixels for the
+ * rotation to register, which is the whole reason this is a square. */
+.chat-tool-dot[data-running] {
+  inline-size: 0.625rem;
+  block-size: 0.625rem;
+  border-radius: 0.1rem;
+  animation: turn-mark-tumble 1.6s linear infinite;
+}
+
+/**
+ * A running call is legible as a BLOCK, not as an 8px glyph.
+ *
+ * The marker alone put the entire signal in the smallest element on the row —
+ * at a glance a running call and a finished one were the same card. The border
+ * carries it at the size of the thing it describes; the marker then confirms
+ * what the border already said.
+ *
+ * Border colour only: no ground, no shadow, nothing that shifts layout when a
+ * call completes.
+ */
+.chat-tool[data-state="input-streaming"],
+.chat-tool[data-state="input-available"] {
+  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
+}
+
+/* The status word earns the accent for the same reason — "Running" printed in
+ * the same grey as "Done" states the fact and hides it. */
+.chat-tool[data-state="input-streaming"] .chat-tool-status,
+.chat-tool[data-state="input-available"] .chat-tool-status {
+  color: var(--primary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Still, but not invisible — the accent colour alone carries "running". */
+  .chat-tool-dot[data-running] {
+    animation: none;
+  }
+}
+
+/* The header is the trigger, so it must read as pressable across its width. */
+.chat-tool-header {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  cursor: pointer;
+  text-align: start;
+}
+
+/* Transform only: rotation costs no layout, so the header cannot shift. */
+.chat-tool-chevron {
+  flex-shrink: 0;
+  transition: transform 150ms ease;
+}
+
+.chat-tool[data-open] .chat-tool-chevron {
+  transform: rotate(180deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-tool-chevron {
+    transition: none;
+  }
+}
+
+/**
+ * Tool output is the one surface here guaranteed to carry machine-generated strings —
+ * paths, hashes, base64, a datamarked transcript whose words are joined by a
+ * marker rune. None carry a break opportunity, so the box grows until the text
+ * leaves it.
+ *
+ * `anywhere`, not `break-all`: `break-all` chops ordinary prose too, and a
+ * result is usually both. Same property as the long-url rule in `markdown.css`.
+ *
+ * `min-width: 0` is load-bearing: a grid item's automatic minimum size is its
+ * content, so an unbreakable token widens the track before wrapping applies.
+ */
+.chat-tool-input,
+.chat-tool-output {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+/* Collapsing solves the common case, not the reader who OPENS a call that
+ * returned five tool descriptions. Capped so no result buries the answer, tall
+ * enough that an ordinary one needs no scrolling. */
+.chat-tool-output {
+  max-height: 18rem;
+  overflow-y: auto;
+}
+
+/* Never capped: an error is short, and it is why the turn went as it did. */
+.chat-tool-output[data-error] {
+  max-height: none;
+  color: var(--destructive, hsl(0 67% 60%));
+}