@openwarelabs/ui 0.4.0 → 0.5.0

package/dist/components.css

@@ -6373,3 +6373,2527 @@
 .ow-dot-grid__content {
     position: relative;
 }
+
+/* components/Prose/Prose.css */
+/* Prose: the plain elements of rendered Markdown, a CMS body or an agent's answer, in Openware's type and colours.
+   Every element rule ends in the same :not(): it skips Openware components and everything inside them, so a CodeBlock,
+   a Table or a Code in the text keeps its own look. That :not() also gives the rules enough weight that a page's own
+   element styles (a reset, `article p`) don't leak in. */
+.ow-prose {
+    min-width: 0;
+    color: var(--ow-text);
+    overflow-wrap: break-word;
+}
+
+/* md: articles and docs, on the prose style (16.5px, 1.7), about 68 characters a line. */
+.ow-prose--md {
+    --ow-prose-flow: var(--ow-space-4xl);
+    --ow-prose-block: var(--ow-space-7xl);
+    --ow-prose-heading: 40px;
+    --ow-prose-heading-gap: var(--ow-space-xl);
+    --ow-prose-subheading: var(--ow-space-7xl);
+    --ow-prose-subheading-gap: var(--ow-space-sm);
+    --ow-prose-rule: 40px;
+    --ow-prose-item: var(--ow-space-xs);
+    --ow-prose-indent: var(--ow-space-6xl);
+    --ow-prose-marker-gap: var(--ow-space-2xs);
+    --ow-prose-quote: var(--ow-space-3xl);
+    --ow-prose-code: 14px;
+    --ow-prose-key: 13px;
+    --ow-prose-pre-y: var(--ow-space-2xl);
+    --ow-prose-pre-x: var(--ow-space-3xl);
+    --ow-prose-cell-y: var(--ow-space-md);
+    --ow-prose-cell-x: var(--ow-space-xl);
+    --ow-prose-caption: 14px;
+    --ow-prose-caption-gap: var(--ow-space-md);
+    --ow-prose-check: 16px;
+    --ow-prose-check-gap: var(--ow-space-sm);
+    --ow-prose-details-x: var(--ow-space-2xl);
+    --ow-prose-details-y: var(--ow-space-lg);
+    --ow-prose-details-end: var(--ow-space-2xl);
+    max-width: 68ch;
+    color: var(--ow-text-soft);
+}
+
+/* sm: chat answers and comments, on 14px interface text with a tight rhythm. */
+.ow-prose--sm {
+    --ow-prose-flow: var(--ow-space-lg);
+    --ow-prose-block: var(--ow-space-xl);
+    --ow-prose-heading: var(--ow-space-4xl);
+    --ow-prose-heading-gap: var(--ow-space-xs);
+    --ow-prose-subheading: var(--ow-space-2xl);
+    --ow-prose-subheading-gap: var(--ow-space-2xs);
+    --ow-prose-rule: var(--ow-space-3xl);
+    --ow-prose-item: var(--ow-space-2xs);
+    --ow-prose-indent: var(--ow-space-5xl);
+    --ow-prose-marker-gap: 2px;
+    --ow-prose-quote: var(--ow-space-lg);
+    --ow-prose-code: 13px;
+    --ow-prose-key: 12px;
+    --ow-prose-pre-y: var(--ow-space-xl);
+    --ow-prose-pre-x: var(--ow-space-lg);
+    --ow-prose-cell-y: var(--ow-space-sm);
+    --ow-prose-cell-x: var(--ow-space-lg);
+    --ow-prose-caption: 12px;
+    --ow-prose-caption-gap: var(--ow-space-sm);
+    --ow-prose-check: 14px;
+    --ow-prose-check-gap: var(--ow-space-xs);
+    --ow-prose-details-x: var(--ow-space-lg);
+    --ow-prose-details-y: var(--ow-space-md);
+    --ow-prose-details-end: var(--ow-space-lg);
+}
+
+.ow-prose--full {
+    max-width: none;
+}
+
+/* Vertical rhythm: paragraphs and lists, then the larger blocks, with more room above a heading than below it. */
+.ow-prose :where(p):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    max-width: none;
+    margin-block: var(--ow-prose-flow);
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    text-wrap: pretty;
+}
+
+.ow-prose :where(h1, h2, h3, h4, h5, h6):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    color: var(--ow-text);
+    text-wrap: balance;
+}
+
+.ow-prose :where(h1, h2):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    margin-block: var(--ow-prose-heading) var(--ow-prose-heading-gap);
+}
+
+.ow-prose :where(h3, h4, h5, h6):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    margin-block: var(--ow-prose-subheading) var(--ow-prose-subheading-gap);
+}
+
+/* md headings come from the type scale: h1 is the section title as phones set it, light and tight; h2 is heading. */
+.ow-prose--md :where(h1):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 1.12;
+    letter-spacing: -0.03em;
+}
+
+.ow-prose--md :where(h2):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    font-size: 24px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.25;
+    letter-spacing: -0.02em;
+}
+
+.ow-prose--md :where(h3):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    font-size: 18px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.4;
+    letter-spacing: -0.01em;
+}
+
+.ow-prose--md :where(h4, h5, h6):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    font-size: 1em;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.5;
+}
+
+/* sm headings stay modest, in the app's heavy weights: a dialog title, then smaller and lighter. */
+.ow-prose--sm :where(h1):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    font-size: 16px;
+    font-weight: var(--ow-weight-display);
+    line-height: 1.3;
+}
+
+.ow-prose--sm :where(h2):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    font-size: 15px;
+    font-weight: var(--ow-weight-title);
+    line-height: 1.35;
+}
+
+.ow-prose--sm :where(h3):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    font-size: 14px;
+    font-weight: var(--ow-weight-label);
+    line-height: 1.45;
+}
+
+.ow-prose--sm :where(h4, h5, h6):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.45;
+}
+
+/* Inline text. */
+.ow-prose :where(a):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    border-radius: 2px;
+    color: var(--ow-text);
+    text-decoration-line: underline;
+    text-decoration-color: var(--ow-border-strong);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+    transition-property: color, text-decoration-color;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-prose :where(a):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *):hover {
+    color: var(--ow-brass-deep);
+    text-decoration-color: var(--ow-brass-deep);
+}
+
+.ow-prose :where(a):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *):focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-prose :where(strong, b):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    color: var(--ow-text);
+    font-weight: var(--ow-weight-emphasis);
+}
+
+/* Inter ships upright only here, so emphasis lets the browser slant it. */
+.ow-prose :where(em, i, cite):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    font-style: italic;
+    font-synthesis: style;
+}
+
+.ow-prose :where(code):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    border-radius: var(--ow-radius-code);
+    background: var(--ow-code-ground);
+    padding: 2px 4px;
+    color: var(--ow-text);
+    font-family: var(--ow-font-mono);
+    font-size: 0.88em;
+    font-variant-ligatures: none;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+}
+
+.ow-prose :where(kbd):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    box-sizing: border-box;
+    display: inline-block;
+    min-width: 1.85em;
+    border: 1px solid var(--ow-border-strong);
+    border-bottom-width: 2px;
+    border-radius: var(--ow-radius-md);
+    background: var(--ow-key-ground);
+    padding: 0 var(--ow-space-xs);
+    color: var(--ow-text-soft);
+    font-family: var(--ow-font-mono);
+    font-size: var(--ow-prose-key);
+    font-weight: var(--ow-weight-control);
+    line-height: 1.6;
+    text-align: center;
+    white-space: nowrap;
+}
+
+/* <kbd><kbd>⌘</kbd><kbd>K</kbd></kbd> is one shortcut: only the inner keys are drawn. */
+.ow-prose :where(kbd:has(kbd)):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    min-width: 0;
+    border: 0;
+    background: none;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+}
+
+.ow-prose :where(mark):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    border-radius: var(--ow-radius-sm);
+    background: var(--ow-brass-soft);
+    padding: 0 2px;
+    color: var(--ow-text);
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+}
+
+/* Raised and lowered text that doesn't open up the line it sits in. */
+.ow-prose :where(sub, sup):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    position: relative;
+    font-size: 0.75em;
+    line-height: 0;
+    vertical-align: baseline;
+}
+
+.ow-prose :where(sup):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    top: -0.5em;
+}
+
+.ow-prose :where(sub):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    bottom: -0.25em;
+}
+
+/* Lists: muted markers hanging in the indent; nested lists sit as close as their items. */
+.ow-prose :where(ul, ol):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    margin-block: var(--ow-prose-flow);
+    padding-inline-start: var(--ow-prose-indent);
+}
+
+.ow-prose :where(ul):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    list-style-type: disc;
+}
+
+.ow-prose :where(ol):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    list-style-type: decimal;
+}
+
+.ow-prose :where(ul ul):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    list-style-type: circle;
+}
+
+.ow-prose :where(ul ul ul):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    list-style-type: square;
+}
+
+.ow-prose :where(li ul, li ol):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    margin-block: var(--ow-prose-item);
+}
+
+.ow-prose :where(li):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    margin-block: var(--ow-prose-item);
+    padding-inline-start: var(--ow-prose-marker-gap);
+}
+
+.ow-prose :where(li):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *)::marker {
+    color: var(--ow-text-muted);
+}
+
+.ow-prose :where(ol > li):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *)::marker {
+    font-variant-numeric: tabular-nums;
+}
+
+/* Task lists (GitHub Markdown's - [ ] and - [x]): the checkbox takes the bullet's place and the text lines up with
+   the other items'. */
+.ow-prose
+    :where(li:has(> input[type="checkbox"]:first-child, > p:first-child > input[type="checkbox"]:first-child)):not(
+        [class^="ow-"],
+        [class*=" ow-"],
+        .ow-prose [class^="ow-"] *,
+        .ow-prose [class*=" ow-"] *
+    ) {
+    list-style-type: none;
+}
+
+.ow-prose :where(input[type="checkbox"]):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    box-sizing: border-box;
+    width: var(--ow-prose-check);
+    height: var(--ow-prose-check);
+    margin: 0 var(--ow-prose-check-gap) 0 0;
+    appearance: none;
+    border: 1px solid var(--ow-border-strong);
+    border-radius: var(--ow-radius-sm);
+    background: var(--ow-surface);
+    box-shadow: var(--ow-shadow-control);
+    vertical-align: -0.15em;
+    cursor: pointer;
+    transition-property: border-color, background-color;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+/* Markdown puts a space after the box; the gap allows for it (a space is 0.28em in Inter), so a wrapped line lines up
+   with the first. */
+.ow-prose
+    :where(li > input[type="checkbox"]:first-child, li > p:first-child > input[type="checkbox"]:first-child):not(
+        [class^="ow-"],
+        [class*=" ow-"],
+        .ow-prose [class^="ow-"] *,
+        .ow-prose [class*=" ow-"] *
+    ) {
+    margin-inline: calc(-1 * (var(--ow-prose-check) + var(--ow-prose-check-gap))) calc(var(--ow-prose-check-gap) - 0.28em);
+}
+
+/* The tick is white, like Checkbox's, on the primary fill in both themes. */
+.ow-prose :where(input[type="checkbox"]:checked):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    border-color: var(--ow-primary-active);
+    background-color: var(--ow-primary);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' \
+        stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: calc(var(--ow-prose-check) - 4px);
+}
+
+.ow-prose
+    :where(input[type="checkbox"]:hover:not(:disabled, :checked)):not(
+        [class^="ow-"],
+        [class*=" ow-"],
+        .ow-prose [class^="ow-"] *,
+        .ow-prose [class*=" ow-"] *
+    ) {
+    border-color: var(--ow-border-hover);
+}
+
+.ow-prose :where(input[type="checkbox"]):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *):focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+/* Rendered Markdown disables its checkboxes: they report a state rather than wait for a click, so they keep their
+   colours and only lose the pointer. */
+.ow-prose :where(input[type="checkbox"]:disabled):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    cursor: default;
+}
+
+.ow-prose :where(blockquote):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    margin-block: var(--ow-prose-block);
+    margin-inline: 0;
+    border-inline-start: 2px solid var(--ow-border-strong);
+    padding-inline-start: var(--ow-prose-quote);
+    color: var(--ow-text-muted);
+}
+
+/* Code blocks: the CodeBlock's dark ground in both themes, scrolling sideways rather than wrapping. */
+.ow-prose :where(pre):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    box-sizing: border-box;
+    margin-block: var(--ow-prose-block);
+    overflow-x: auto;
+    border: 1px solid var(--ow-code-block-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-code-block);
+    padding: var(--ow-prose-pre-y) var(--ow-prose-pre-x);
+    color: var(--ow-on-code-block);
+    font-family: var(--ow-font-mono);
+    font-size: var(--ow-prose-code);
+    font-variant-ligatures: none;
+    line-height: 1.7;
+    tab-size: 4;
+    white-space: pre;
+    overflow-wrap: normal;
+    color-scheme: dark;
+}
+
+.ow-prose :where(pre):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *):focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-prose :where(pre code):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    border-radius: 0;
+    background: none;
+    padding: 0;
+    color: inherit;
+    font-size: inherit;
+}
+
+.ow-prose :where(hr):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    height: 0;
+    margin-block: var(--ow-prose-rule);
+    border: 0;
+    border-top: 1px solid var(--ow-border);
+}
+
+/* Tables: Table's look, a bordered card with a quiet header and hairlines between rows. As a block it scrolls
+   sideways when it's wider than the text, and is as wide as its content otherwise. */
+.ow-prose :where(table):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    box-sizing: border-box;
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    margin-block: var(--ow-prose-block);
+    overflow-x: auto;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    border-collapse: separate;
+    border-spacing: 0;
+    background: var(--ow-surface);
+    color: var(--ow-text);
+    font-size: 14px;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.45;
+}
+
+.ow-prose :where(table):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *):focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-prose :where(caption):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    padding: var(--ow-space-lg) var(--ow-prose-cell-x) var(--ow-space-sm);
+    color: var(--ow-text);
+    font-weight: var(--ow-weight-emphasis);
+    text-align: start;
+}
+
+.ow-prose :where(th, td):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    border-bottom: 1px solid var(--ow-border);
+    padding: var(--ow-prose-cell-y) var(--ow-prose-cell-x);
+    text-align: start;
+    vertical-align: top;
+}
+
+.ow-prose :where(thead th):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    background: var(--ow-surface-muted);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.35;
+    white-space: nowrap;
+    vertical-align: bottom;
+}
+
+.ow-prose :where(tbody th):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    font-weight: var(--ow-weight-emphasis);
+}
+
+.ow-prose :where(tbody tr:last-child > *):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    border-bottom: 0;
+}
+
+/* Markdown sets column alignment with align="…"; the start alignment above would otherwise win over it. */
+.ow-prose :where(th[align="center"], td[align="center"]):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    text-align: center;
+}
+
+.ow-prose :where(th[align="right"], td[align="right"]):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    text-align: right;
+}
+
+.ow-prose :where(img, video):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    max-width: 100%;
+    height: auto;
+}
+
+.ow-prose > :where(img, video):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *),
+.ow-prose :where(figure > img, figure > video):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    display: block;
+    border-radius: var(--ow-radius-container);
+}
+
+.ow-prose > :where(img, video):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    margin-block: var(--ow-prose-block);
+}
+
+.ow-prose :where(figure):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    margin-block: var(--ow-prose-block);
+    margin-inline: 0;
+}
+
+.ow-prose :where(figure > *):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    margin-block: 0;
+}
+
+.ow-prose :where(figcaption):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    margin-top: var(--ow-prose-caption-gap);
+    color: var(--ow-text-muted);
+    font-size: var(--ow-prose-caption);
+    line-height: 1.5;
+    text-wrap: pretty;
+}
+
+/* details: Disclosure's look, a bordered card with a chevron that turns as it opens. The content lines up with the
+   summary's text. */
+.ow-prose :where(details):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    --ow-prose-details-indent: calc(var(--ow-prose-details-x) + 16px + var(--ow-space-sm));
+    box-sizing: border-box;
+    margin-block: var(--ow-prose-block);
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-surface);
+    padding-inline: var(--ow-prose-details-indent) var(--ow-prose-details-x);
+}
+
+.ow-prose :where(details[open]):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    padding-bottom: var(--ow-prose-details-end);
+}
+
+.ow-prose :where(summary):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    display: block;
+    margin-inline: calc(-1 * var(--ow-prose-details-indent)) calc(-1 * var(--ow-prose-details-x));
+    padding-block: var(--ow-prose-details-y);
+    padding-inline: var(--ow-prose-details-indent) var(--ow-prose-details-x);
+    color: var(--ow-text);
+    font-weight: var(--ow-weight-emphasis);
+    list-style: none;
+    cursor: pointer;
+}
+
+.ow-prose :where(summary):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *)::-webkit-details-marker {
+    display: none;
+}
+
+/* The chevron hangs in the indent on the first line, so a summary that wraps keeps its text aligned. */
+.ow-prose :where(summary):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *)::before {
+    content: "";
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-inline: calc(-16px - var(--ow-space-sm)) var(--ow-space-sm);
+    --ow-prose-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' \
+        stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
+    background: var(--ow-text-muted);
+    vertical-align: -0.2em;
+    -webkit-mask: var(--ow-prose-chevron) center / 16px no-repeat;
+    mask: var(--ow-prose-chevron) center / 16px no-repeat;
+    transition: transform var(--ow-duration-slow) var(--ow-ease-emphasized);
+}
+
+.ow-prose :where(summary):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *):hover::before {
+    background: var(--ow-text);
+}
+
+.ow-prose :where(summary:dir(rtl)):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *)::before {
+    transform: scaleX(-1);
+}
+
+.ow-prose :where(details[open] > summary):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *)::before {
+    transform: rotate(90deg);
+}
+
+.ow-prose :where(summary):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *):focus-visible {
+    border-radius: var(--ow-radius-form);
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: -4px;
+}
+
+/* While an answer streams in (aria-busy on it or around it), lines break as they fill rather than evening out, so words
+   already shown don't hop to another line as more arrive. */
+.ow-prose:is([aria-busy="true"], [aria-busy="true"] *)
+    :where(p, h1, h2, h3, h4, h5, h6, figcaption):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    text-wrap: wrap;
+}
+
+/* Openware components placed straight in the text get the block spacing; Text gets a paragraph's. */
+.ow-prose > :where([class^="ow-"], [class*=" ow-"]) {
+    margin-block: var(--ow-prose-block);
+}
+
+.ow-prose > :where(.ow-text) {
+    margin-block: var(--ow-prose-flow);
+}
+
+/* Nothing adds space at the edges, so the text sits flush in a message bubble or a card; the same goes inside quotes,
+   list items, cells, figures and details. */
+.ow-prose > :where([class^="ow-"], [class*=" ow-"]):first-child,
+.ow-prose > :first-child:not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *),
+.ow-prose :where(blockquote, li, th, td, figure) > :first-child:not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *),
+.ow-prose :where(details > summary) + *:not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    margin-top: 0;
+}
+
+.ow-prose > :where([class^="ow-"], [class*=" ow-"]):last-child,
+.ow-prose > :last-child:not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *),
+.ow-prose
+    :where(blockquote, li, th, td, figure, details)
+    > :last-child:not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+    margin-bottom: 0;
+}
+
+/* The heading size on phones, as Text sets it. */
+@media (max-width: 760px) {
+    .ow-prose--md :where(h2):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+        font-size: 21px;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-prose :where(a, input):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *),
+    .ow-prose :where(summary):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *)::before {
+        transition: none;
+    }
+}
+
+/* High contrast: the system draws the checkboxes, and the chevron takes the text colour. */
+@media (forced-colors: active) {
+    .ow-prose :where(input[type="checkbox"]):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *) {
+        appearance: auto;
+    }
+    .ow-prose :where(summary):not([class^="ow-"], [class*=" ow-"], .ow-prose [class^="ow-"] *, .ow-prose [class*=" ow-"] *)::before {
+        background: CanvasText;
+        forced-color-adjust: none;
+    }
+}
+
+/* components/TextShimmer/TextShimmer.css */
+/* TextShimmer: muted text with a band of full-strength text sweeping across it. */
+.ow-shimmer {
+    color: var(--ow-text-muted);
+}
+
+.ow-shimmer--active {
+    /* The band is the text colour; either side is the muted colour, so the words stay readable throughout. */
+    background-image: linear-gradient(
+        90deg,
+        var(--ow-text-muted) 0%,
+        var(--ow-text-muted) 40%,
+        var(--ow-text) 50%,
+        var(--ow-text-muted) 60%,
+        var(--ow-text-muted) 100%
+    );
+    background-size: 250% 100%;
+    background-position: 100% 0;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    animation: ow-shimmer var(--ow-shimmer-duration, 2s) linear infinite;
+}
+
+@keyframes ow-shimmer {
+    from {
+        background-position: 100% 0;
+    }
+    to {
+        background-position: 0 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-shimmer--active {
+        background: none;
+        color: var(--ow-text-muted);
+        animation: none;
+    }
+}
+
+/* Windows high-contrast and forced colours: plain text. */
+@media (forced-colors: active) {
+    .ow-shimmer--active {
+        background: none;
+        color: CanvasText;
+        animation: none;
+    }
+}
+
+/* components/PromptInput/PromptInput.css */
+/* PromptInput: a surface card holding the attachments, the text and a toolbar; the field's border and halo show focus. */
+.ow-prompt-input {
+    --ow-prompt-line: 24px;
+    --ow-prompt-pad: 0px;
+    display: grid;
+    width: 100%;
+    min-width: 0;
+    gap: var(--ow-space-sm);
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+    font-size: 14px;
+}
+
+.ow-prompt-input--sm {
+    --ow-prompt-line: 20px;
+    gap: var(--ow-space-xs);
+}
+
+.ow-prompt-input__box {
+    position: relative;
+    display: grid;
+    min-width: 0;
+    min-inline-size: 0;
+    gap: var(--ow-space-md);
+    margin: 0;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-surface);
+    padding: var(--ow-space-lg) var(--ow-space-md) var(--ow-space-md);
+    box-shadow: var(--ow-shadow-control);
+    cursor: text;
+    transition-property: border-color, box-shadow, opacity;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-prompt-input--sm .ow-prompt-input__box {
+    gap: var(--ow-space-sm);
+    padding: var(--ow-space-sm) var(--ow-space-xs) var(--ow-space-xs);
+}
+
+.ow-prompt-input__box:hover {
+    border-color: var(--ow-border-strong);
+}
+
+.ow-prompt-input__box:focus-within {
+    border-color: var(--ow-focus-border);
+    box-shadow: var(--ow-shadow-focus);
+}
+
+.ow-prompt-input--invalid .ow-prompt-input__box {
+    border-color: var(--ow-danger-line);
+}
+
+.ow-prompt-input--invalid .ow-prompt-input__box:focus-within {
+    border-color: var(--ow-danger-solid);
+    box-shadow: var(--ow-shadow-focus-danger);
+}
+
+.ow-prompt-input--disabled .ow-prompt-input__box {
+    border-color: var(--ow-border);
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 0.62;
+}
+
+/* Inline: with nothing in the toolbar but the send button, the button sits at the end of the text. */
+.ow-prompt-input--inline .ow-prompt-input__box {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+    column-gap: var(--ow-space-sm);
+    padding: var(--ow-space-sm) var(--ow-space-sm) var(--ow-space-sm) var(--ow-space-md);
+}
+
+.ow-prompt-input--inline .ow-prompt-input__attachments {
+    grid-column: 1 / -1;
+}
+
+/* The count stands above the send button, so the text keeps its width. */
+.ow-prompt-input--inline .ow-prompt-input__end {
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--ow-space-2xs);
+}
+
+/* The text, centred on the 32px button while it's one line. */
+.ow-prompt-input--inline {
+    --ow-prompt-pad: var(--ow-space-2xs);
+}
+
+.ow-prompt-input--sm.ow-prompt-input--inline {
+    --ow-prompt-pad: var(--ow-space-xs);
+}
+
+.ow-prompt-input--sm.ow-prompt-input--inline .ow-prompt-input__box {
+    padding: var(--ow-space-xs) var(--ow-space-xs) var(--ow-space-xs) var(--ow-space-sm);
+}
+
+/* The text: borderless, with its own line height so the rows are exact. */
+.ow-prompt-input__textarea.ow-textarea {
+    min-height: calc(var(--ow-prompt-line) * var(--ow-prompt-min-rows, 1) + 2 * var(--ow-prompt-pad));
+    padding: var(--ow-prompt-pad) var(--ow-space-sm);
+    color: var(--ow-text);
+    font-size: 15px;
+    line-height: var(--ow-prompt-line);
+    cursor: text;
+}
+
+.ow-prompt-input--sm .ow-prompt-input__textarea.ow-textarea {
+    padding-inline: var(--ow-space-xs);
+    font-size: 14px;
+}
+
+.ow-prompt-input__textarea.ow-textarea:disabled {
+    cursor: not-allowed;
+    opacity: 1;
+}
+
+/* Attachments: chips with a thumbnail or an icon, the name and size, and a remove button. */
+.ow-prompt-input__attachments {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    gap: var(--ow-space-sm);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    cursor: default;
+}
+
+.ow-prompt-input__attachment {
+    display: flex;
+    min-width: 0;
+    max-width: min(100%, 240px);
+    align-items: center;
+    gap: var(--ow-space-sm);
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-lg);
+    background: var(--ow-surface-muted);
+    padding: var(--ow-space-2xs);
+}
+
+.ow-prompt-input__thumb {
+    position: relative;
+    display: inline-flex;
+    width: 36px;
+    height: 36px;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-md);
+    background: var(--ow-surface);
+    color: var(--ow-text-muted);
+}
+
+.ow-prompt-input__thumb img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.ow-prompt-input__file {
+    display: grid;
+    min-width: 0;
+    gap: 2px;
+    padding-right: var(--ow-space-2xs);
+}
+
+.ow-prompt-input__file-name {
+    display: flex;
+    min-width: 0;
+    color: var(--ow-text);
+    font-size: 13px;
+    font-weight: var(--ow-weight-control);
+    line-height: 16px;
+    white-space: nowrap;
+}
+
+.ow-prompt-input__file-base {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ow-prompt-input__file-size {
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    line-height: 16px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.ow-prompt-input__remove {
+    display: inline-flex;
+    width: 24px;
+    height: 24px;
+    flex: none;
+    align-self: flex-start;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    border: 0;
+    border-radius: var(--ow-radius-md);
+    background: transparent;
+    padding: 0;
+    color: var(--ow-text-muted);
+    cursor: pointer;
+    transition-property: color, background-color;
+    transition-duration: var(--ow-duration-fast);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-prompt-input__remove:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--ow-text) 8%, transparent);
+    color: var(--ow-text);
+}
+
+.ow-prompt-input__remove:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 0;
+}
+
+.ow-prompt-input__remove:disabled {
+    cursor: not-allowed;
+}
+
+.ow-prompt-input--sm .ow-prompt-input__thumb {
+    width: 28px;
+    height: 28px;
+}
+
+.ow-prompt-input--sm .ow-prompt-input__file-name {
+    font-size: 12px;
+}
+
+.ow-prompt-input--sm .ow-prompt-input__file-size {
+    font-size: 11px;
+    line-height: 14px;
+}
+
+.ow-prompt-input--sm .ow-prompt-input__remove {
+    width: 20px;
+    height: 20px;
+}
+
+/* The toolbar: the paperclip and start actions on the left; the count, end actions and send on the right. When the start
+   actions wrap in a narrow box, send stays on the last row, under the end of the text. */
+.ow-prompt-input__toolbar {
+    display: flex;
+    min-width: 0;
+    align-items: flex-end;
+    gap: var(--ow-space-sm);
+    cursor: default;
+}
+
+.ow-prompt-input__start,
+.ow-prompt-input__end {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--ow-space-2xs);
+}
+
+.ow-prompt-input__start {
+    flex: 1;
+    flex-wrap: wrap;
+}
+
+.ow-prompt-input__end {
+    flex: none;
+    margin-left: auto;
+    gap: var(--ow-space-sm);
+}
+
+.ow-prompt-input__counter {
+    padding: 0 var(--ow-space-2xs);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.ow-prompt-input__counter--full {
+    color: var(--ow-warning-text);
+    font-weight: var(--ow-weight-emphasis);
+}
+
+/* The send and Stop button keeps its square while the icon inside changes. */
+.ow-prompt-input__action.ow-button {
+    flex: none;
+}
+
+/* While files are dragged over it, the box turns primary and says what a drop does. */
+.ow-prompt-input__drop {
+    position: absolute;
+    z-index: 1;
+    inset: -1px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ow-space-sm);
+    border: 1.5px dashed var(--ow-primary-text);
+    border-radius: inherit;
+    /* The tint over the surface, since primary-subtle is see-through in dark. */
+    background-color: var(--ow-surface);
+    background-image: linear-gradient(var(--ow-primary-subtle), var(--ow-primary-subtle));
+    color: var(--ow-primary-text);
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    pointer-events: none;
+    animation: ow-prompt-input-drop-in var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+@keyframes ow-prompt-input-drop-in {
+    from {
+        opacity: 0;
+    }
+}
+
+/* The line under the box: a hint, or a message about a file that couldn't be attached. */
+.ow-prompt-input__hint {
+    padding: 0 var(--ow-space-md);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    line-height: 18px;
+    text-wrap: pretty;
+}
+
+.ow-prompt-input--sm .ow-prompt-input__hint {
+    padding: 0 var(--ow-space-sm);
+}
+
+.ow-prompt-input__hint--notice {
+    color: var(--ow-danger-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-prompt-input__box,
+    .ow-prompt-input__remove {
+        transition: none;
+    }
+
+    .ow-prompt-input__drop {
+        animation: none;
+    }
+}
+
+/* components/PromptInput/PromptSuggestion.css */
+/* PromptSuggestion: a secondary pill at regular weight, or a card with a muted second line. */
+.ow-prompt-suggestion--pill.ow-button {
+    max-width: 100%;
+    gap: var(--ow-space-sm);
+    font-weight: var(--ow-weight-regular);
+}
+
+.ow-prompt-suggestion__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ow-prompt-suggestion__icon {
+    display: inline-flex;
+    flex: none;
+    color: var(--ow-icon);
+    transition: color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-prompt-suggestion:hover:not(:disabled) .ow-prompt-suggestion__icon {
+    color: var(--ow-primary-text);
+}
+
+.ow-prompt-suggestion:disabled .ow-prompt-suggestion__icon {
+    color: var(--ow-text-disabled);
+}
+
+/* Card: the secondary button's material, left-aligned, with the icon beside the title. */
+.ow-prompt-suggestion--card {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    align-items: flex-start;
+    gap: var(--ow-space-md);
+    margin: 0;
+    border: 1px solid var(--ow-border-strong);
+    border-radius: var(--ow-radius-container);
+    background-color: var(--ow-control);
+    background-image: linear-gradient(to bottom, var(--ow-control), var(--ow-control-shade));
+    padding: var(--ow-space-lg) var(--ow-space-xl);
+    color: var(--ow-text);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    box-shadow: var(--ow-shadow-button-secondary);
+    transition-property: transform, border-color, background-color, box-shadow;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-prompt-suggestion--card:hover:not(:disabled) {
+    border-color: var(--ow-border-hover);
+    background-image: linear-gradient(to bottom, var(--ow-control), var(--ow-control-shade-hover));
+}
+
+.ow-prompt-suggestion--card:active:not(:disabled) {
+    box-shadow: var(--ow-shadow-pressed-secondary);
+    transform: translateY(1px);
+}
+
+.ow-prompt-suggestion--card:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-prompt-suggestion--card:disabled {
+    border-style: dashed;
+    background: transparent;
+    box-shadow: none;
+    color: var(--ow-text-disabled);
+    cursor: not-allowed;
+}
+
+/* The icon sits on the title's first line (20px). */
+.ow-prompt-suggestion--card .ow-prompt-suggestion__icon {
+    height: 20px;
+    align-items: center;
+}
+
+.ow-prompt-suggestion__text {
+    display: grid;
+    min-width: 0;
+    gap: 2px;
+}
+
+.ow-prompt-suggestion__title {
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 20px;
+    text-wrap: pretty;
+}
+
+.ow-prompt-suggestion__description {
+    color: var(--ow-text-muted);
+    font-size: 13px;
+    line-height: 18px;
+    text-wrap: pretty;
+}
+
+.ow-prompt-suggestion--card:disabled .ow-prompt-suggestion__description {
+    color: var(--ow-text-disabled);
+}
+
+/* PromptSuggestions: pills that wrap, or cards in columns of at least 200px, up to --ow-suggestion-columns. */
+.ow-prompt-suggestions--wrap {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    gap: var(--ow-space-sm);
+}
+
+.ow-prompt-suggestions--center {
+    justify-content: center;
+}
+
+.ow-prompt-suggestions--grid {
+    display: grid;
+    min-width: 0;
+    grid-template-columns: repeat(
+        auto-fill,
+        minmax(min(100%, max(200px, calc((100% - (var(--ow-suggestion-columns, 2) - 1) * var(--ow-space-md)) / var(--ow-suggestion-columns, 2)))), 1fr)
+    );
+    gap: var(--ow-space-md);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-prompt-suggestion--card,
+    .ow-prompt-suggestion__icon {
+        transition: none;
+    }
+
+    .ow-prompt-suggestion--card:active:not(:disabled) {
+        transform: none;
+    }
+}
+
+/* components/Chat/Chat.css */
+/* Chat: the conversation's scrolling column, its messages and the loader. */
+
+/* ChatConversation: fills its parent and scrolls; the messages sit in a reading column in the middle, with the footer
+   (a prompt box) docked under them in the same column. */
+.ow-chat-conversation {
+    --ow-chat-gutter: var(--ow-space-4xl);
+    --ow-chat-column: 720px;
+    display: flex;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+}
+
+/* The scrolling part, which the empty state and Jump to latest sit over. */
+.ow-chat-conversation__viewport {
+    position: relative;
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+}
+
+.ow-chat-conversation__scroll {
+    min-height: 0;
+    flex: 1;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    outline: 0;
+}
+
+.ow-chat-conversation__scroll:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: -2px;
+}
+
+.ow-chat-conversation__content {
+    display: flex;
+    max-width: calc(var(--ow-chat-column) + 2 * var(--ow-chat-gutter));
+    flex-direction: column;
+    gap: var(--ow-space-6xl);
+    margin: 0 auto;
+    padding: var(--ow-space-6xl) var(--ow-chat-gutter) var(--ow-space-7xl);
+}
+
+/* What shows while there are no messages, over the (empty) log so the log is there for the first one. */
+.ow-chat-conversation__empty {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    overflow-y: auto;
+    place-items: center;
+    padding: var(--ow-space-6xl) var(--ow-chat-gutter);
+}
+
+.ow-chat-conversation__empty-inner {
+    width: 100%;
+    max-width: var(--ow-chat-column);
+}
+
+/* The footer: lined up with the messages, with the gutter below it. */
+.ow-chat-conversation__footer {
+    flex-shrink: 0;
+    padding: 0 var(--ow-chat-gutter) var(--ow-chat-gutter);
+}
+
+.ow-chat-conversation__footer-inner {
+    max-width: var(--ow-chat-column);
+    margin: 0 auto;
+}
+
+.ow-chat-conversation--full {
+    --ow-chat-column: none;
+}
+
+.ow-chat-conversation--full .ow-chat-conversation__content {
+    max-width: none;
+}
+
+/* "Jump to latest": floats at the bottom in the middle once the reader scrolls up. */
+.ow-chat-conversation__jump {
+    position: absolute;
+    right: 0;
+    bottom: var(--ow-space-2xl);
+    left: 0;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    pointer-events: none;
+    animation: ow-chat-rise var(--ow-duration-base) var(--ow-ease-emphasized);
+}
+
+.ow-chat-conversation__jump[data-state="closed"] {
+    animation: ow-chat-sink var(--ow-duration-exit) var(--ow-ease-exit) forwards;
+}
+
+.ow-chat-conversation__jump > .ow-button {
+    pointer-events: auto;
+    box-shadow: var(--ow-shadow-button-secondary), var(--ow-shadow-menu);
+}
+
+.ow-chat-conversation__count {
+    display: inline-flex;
+    height: 20px;
+    align-items: center;
+    margin-right: calc(-1 * var(--ow-space-xs));
+    border: 1px solid var(--ow-primary-border);
+    border-radius: var(--ow-radius-pill);
+    background: var(--ow-primary-subtle);
+    padding: 0 var(--ow-space-xs);
+    color: var(--ow-primary-text);
+    font-size: 12px;
+    font-weight: var(--ow-weight-strong);
+    font-variant-numeric: tabular-nums;
+}
+
+/* ChatMessage. */
+.ow-chat-message {
+    min-width: 0;
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+    font-size: 14px;
+    line-height: 1.55;
+}
+
+.ow-chat-message--user,
+.ow-chat-message--assistant {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ow-space-lg);
+}
+
+/* The person's message sits on the right: its avatar, when there is one, on the far side. */
+.ow-chat-message--user {
+    flex-direction: row-reverse;
+}
+
+.ow-chat-message__avatar {
+    display: flex;
+    flex-shrink: 0;
+}
+
+/* ChatAgentAvatar: the bot on a tinted circle, at Avatar's sizes. */
+.ow-chat-avatar {
+    display: inline-flex;
+    width: 28px;
+    height: 28px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--ow-primary-border);
+    border-radius: 50%;
+    background: var(--ow-primary-subtle);
+    color: var(--ow-primary-text);
+}
+
+.ow-chat-avatar--sm {
+    width: 24px;
+    height: 24px;
+}
+
+.ow-chat-avatar--lg {
+    width: 36px;
+    height: 36px;
+}
+
+.ow-chat-message__main {
+    display: grid;
+    min-width: 0;
+    flex: 1;
+    align-content: start;
+    gap: var(--ow-space-xs);
+}
+
+/* Beside a 28px avatar, the header (or the first line) sits level with its middle. */
+.ow-chat-message__avatar + .ow-chat-message__main {
+    padding-top: var(--ow-space-2xs);
+}
+
+.ow-chat-message--user .ow-chat-message__main {
+    max-width: 80%;
+    flex: 0 1 auto;
+    justify-items: end;
+}
+
+.ow-chat-message__header {
+    display: flex;
+    min-width: 0;
+    align-items: baseline;
+    gap: var(--ow-space-sm);
+    line-height: 1.4;
+}
+
+.ow-chat-message__name {
+    min-width: 0;
+    overflow: hidden;
+    font-weight: var(--ow-weight-emphasis);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ow-chat-message__time {
+    flex-shrink: 0;
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+}
+
+/* The body holds the content and, while it streams, the caret placed after its last character. */
+.ow-chat-message__body {
+    position: relative;
+    min-width: 0;
+}
+
+.ow-chat-message--streaming .ow-chat-message__body {
+    min-height: 1.55em;
+}
+
+.ow-chat-message__content {
+    min-width: 0;
+    overflow-wrap: break-word;
+}
+
+/* Blocks in a message (paragraphs, code, a card) sit 12px apart; text, Code and Kbd flow inline as written. */
+.ow-chat-message__content > :is(p, div, pre, ul, ol, dl, blockquote, table, figure, details, section, h1, h2, h3, h4, h5, h6, hr, a):not(:first-child) {
+    margin-top: var(--ow-space-lg);
+}
+
+/* The person's own words in a bubble, kept as typed: line breaks stay, and a long link breaks rather than overflowing. */
+.ow-chat-message--user .ow-chat-message__content {
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-panel) var(--ow-radius-sm) var(--ow-radius-panel) var(--ow-radius-panel);
+    background: var(--ow-surface-muted);
+    padding: var(--ow-space-md) var(--ow-space-xl);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.ow-chat-message__caret {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 2px;
+    height: 1.2em;
+    border-radius: 1px;
+    background: currentColor;
+    pointer-events: none;
+    transform: translateY(0.18em);
+    animation: ow-chat-caret 1s var(--ow-ease-standard) infinite;
+}
+
+/* A system line: muted, in the middle, between hairlines. */
+.ow-chat-message--system {
+    display: flex;
+    align-items: center;
+    gap: var(--ow-space-lg);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    line-height: 1.35;
+    text-align: center;
+}
+
+.ow-chat-message--system::before,
+.ow-chat-message--system::after {
+    content: "";
+    height: 1px;
+    min-width: var(--ow-space-2xl);
+    flex: 1;
+    background: var(--ow-border);
+}
+
+.ow-chat-message__system-text {
+    max-width: 80%;
+    text-wrap: balance;
+}
+
+/* What went wrong, with Retry beside it. */
+.ow-chat-message__error {
+    display: flex;
+    max-width: 100%;
+    align-items: center;
+    justify-self: start;
+    gap: var(--ow-space-sm);
+    border: 1px solid var(--ow-danger-border);
+    border-radius: var(--ow-radius-form);
+    background: var(--ow-danger-surface);
+    padding: var(--ow-space-xs) var(--ow-space-lg);
+    color: var(--ow-danger-text);
+    line-height: 1.4;
+}
+
+.ow-chat-message__error--retry {
+    padding: var(--ow-space-2xs) var(--ow-space-2xs) var(--ow-space-2xs) var(--ow-space-lg);
+}
+
+.ow-chat-message--user .ow-chat-message__error {
+    justify-self: end;
+}
+
+.ow-chat-message__error-icon {
+    flex-shrink: 0;
+    color: var(--ow-danger-solid);
+}
+
+.ow-chat-message__error-text {
+    min-width: 0;
+    flex: 1;
+}
+
+.ow-chat-message__error > .ow-button {
+    margin-left: var(--ow-space-xs);
+}
+
+/* Actions: under the message, the first icon level with the text's edge. Hidden (but reachable) until the message
+   is hovered or holds focus; always shown where there's no hover. The buttons' padding hangs into the space around
+   them, so the row adds its icons' height to the message rather than a whole 32px button. */
+.ow-chat-message__actions {
+    justify-self: start;
+    margin: calc(-1 * var(--ow-space-2xs)) 0 calc(-1 * var(--ow-space-lg)) calc(-1 * var(--ow-space-sm));
+    opacity: 0;
+    transition: opacity var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+.ow-chat-message--user .ow-chat-message__actions {
+    justify-self: end;
+    margin-right: calc(-1 * var(--ow-space-sm));
+    margin-left: 0;
+}
+
+.ow-chat-message:hover .ow-chat-message__actions,
+.ow-chat-message:focus-within .ow-chat-message__actions,
+.ow-chat-message--actions-always .ow-chat-message__actions {
+    opacity: 1;
+}
+
+@media (hover: none) {
+    .ow-chat-message__actions {
+        opacity: 1;
+    }
+}
+
+/* ChatMessageActions. */
+.ow-chat-actions__copy-icon {
+    display: inline-grid;
+}
+
+.ow-chat-actions__copy-icon > svg {
+    grid-area: 1 / 1;
+    transition:
+        opacity var(--ow-duration-base) var(--ow-ease-standard),
+        transform var(--ow-duration-slow) var(--ow-ease-spring);
+}
+
+.ow-chat-actions__copy-icon > svg:last-child,
+.ow-chat-actions__copy--copied .ow-chat-actions__copy-icon > svg:first-child {
+    opacity: 0;
+    transform: scale(0.5);
+}
+
+.ow-chat-actions__copy--copied .ow-chat-actions__copy-icon > svg:last-child {
+    color: var(--ow-success-text);
+    opacity: 1;
+    transform: none;
+}
+
+/* A pressed rating fills its thumb lightly, as well as taking the pressed tint. */
+.ow-chat-actions__rate[aria-pressed="true"] svg {
+    fill: currentColor;
+    fill-opacity: 0.22;
+}
+
+/* ChatLoader. */
+.ow-chat-loader__line {
+    display: flex;
+    min-height: 1.55em;
+    align-items: center;
+}
+
+.ow-chat-loader--inline {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+}
+
+.ow-chat-loader__dots {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ow-space-2xs);
+}
+
+.ow-chat-loader__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--ow-text-muted);
+    opacity: 0.35;
+    animation: ow-chat-dot 1.2s var(--ow-ease-standard) infinite;
+}
+
+.ow-chat-loader__dot:nth-child(2) {
+    animation-delay: 160ms;
+}
+
+.ow-chat-loader__dot:nth-child(3) {
+    animation-delay: 320ms;
+}
+
+/* Arrivals: once a conversation is showing, a person's message and a system line rise in; the agent's answer fades in
+   beside an avatar that stays put, so a loader turning into the answer doesn't blink. */
+.ow-chat-message--enter.ow-chat-message--user,
+.ow-chat-message--enter.ow-chat-message--system,
+.ow-chat-loader--enter {
+    animation: ow-chat-rise var(--ow-duration-slow) var(--ow-ease-emphasized);
+}
+
+.ow-chat-message--enter.ow-chat-message--assistant > .ow-chat-message__main {
+    animation: ow-chat-fade var(--ow-duration-slow) var(--ow-ease-emphasized);
+}
+
+@keyframes ow-chat-rise {
+    from {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+}
+
+@keyframes ow-chat-sink {
+    to {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+}
+
+@keyframes ow-chat-fade {
+    from {
+        opacity: 0;
+    }
+}
+
+@keyframes ow-chat-caret {
+    0%,
+    100% {
+        opacity: 0.9;
+    }
+    50% {
+        opacity: 0.15;
+    }
+}
+
+@keyframes ow-chat-dot {
+    0%,
+    60%,
+    100% {
+        opacity: 0.35;
+        transform: scale(0.8);
+    }
+    30% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@media (max-width: 760px) {
+    .ow-chat-conversation {
+        --ow-chat-gutter: var(--ow-space-2xl);
+    }
+    .ow-chat-conversation__content {
+        gap: var(--ow-space-5xl);
+    }
+    .ow-chat-message--user,
+    .ow-chat-message--assistant {
+        gap: var(--ow-space-md);
+    }
+    .ow-chat-message--user .ow-chat-message__main {
+        max-width: 88%;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-chat-conversation__jump,
+    .ow-chat-message--enter.ow-chat-message--user,
+    .ow-chat-message--enter.ow-chat-message--system,
+    .ow-chat-message--enter.ow-chat-message--assistant > .ow-chat-message__main,
+    .ow-chat-loader--enter,
+    .ow-chat-message__caret {
+        animation: none;
+    }
+    .ow-chat-loader__dot {
+        opacity: 0.6;
+        animation: none;
+    }
+    .ow-chat-message__actions,
+    .ow-chat-actions__copy-icon > svg {
+        transition: none;
+    }
+}
+
+/* Forced colours drop backgrounds: draw the caret and the dots in the text colour. */
+@media (forced-colors: active) {
+    .ow-chat-message__caret,
+    .ow-chat-loader__dot {
+        forced-color-adjust: none;
+        background: CanvasText;
+    }
+}
+
+/* components/ChatTool/ChatTool.css */
+/* ChatTool: one tool call on a row that opens to its input and output. Also the pieces ChainOfThought and ChatSources
+   share: the status mark, the plain disclosure toggle and the collapsing panel. */
+
+/* The status mark: a 20px circle, tinted by status. */
+.ow-chat-status {
+    position: relative;
+    display: inline-flex;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    color: var(--ow-text-muted);
+}
+
+.ow-chat-status__glyph {
+    display: inline-flex;
+}
+
+.ow-chat-status--success {
+    background: var(--ow-success-surface);
+    color: var(--ow-success-text);
+    box-shadow: inset 0 0 0 1px var(--ow-success-border);
+}
+
+.ow-chat-status--error {
+    background: var(--ow-danger-surface);
+    color: var(--ow-danger-text);
+    box-shadow: inset 0 0 0 1px var(--ow-danger-border);
+}
+
+.ow-chat-status--approval {
+    background: var(--ow-warning-surface);
+    color: var(--ow-warning-text);
+    box-shadow: inset 0 0 0 1px var(--ow-warning-border);
+}
+
+/* Not started: a hollow ring. Called off: the ring with a slash across it. */
+.ow-chat-status--pending,
+.ow-chat-status--cancelled {
+    box-shadow: inset 0 0 0 1.5px var(--ow-border-strong);
+}
+
+/* A step's own icon, at the size of the check it stands in for. */
+.ow-chat-status--icon .ow-chat-status__glyph > svg {
+    width: 12px;
+    height: 12px;
+}
+
+/* The mark settles in when a status lands. */
+.ow-chat-status--success .ow-chat-status__glyph,
+.ow-chat-status--error .ow-chat-status__glyph,
+.ow-chat-status--approval .ow-chat-status__glyph,
+.ow-chat-status--cancelled .ow-chat-status__glyph {
+    animation: ow-chat-status-in var(--ow-duration-slow) var(--ow-ease-spring);
+}
+
+@keyframes ow-chat-status-in {
+    from {
+        opacity: 0;
+        transform: scale(0.5);
+    }
+}
+
+/* A plain disclosure toggle ("Thought for 12 s", "3 sources"): a chevron in a 20px column, so whatever opens below
+   lines up with the label. */
+.ow-chat-toggle {
+    display: inline-flex;
+    max-width: 100%;
+    min-height: 28px;
+    align-items: center;
+    gap: var(--ow-space-md);
+    margin: 0;
+    border: 0;
+    border-radius: var(--ow-radius-md);
+    background: transparent;
+    padding: var(--ow-space-2xs) var(--ow-space-xs) var(--ow-space-2xs) 0;
+    color: var(--ow-text-soft);
+    font: inherit;
+    font-family: var(--ow-font-sans);
+    font-size: 14px;
+    font-weight: var(--ow-weight-control);
+    line-height: 20px;
+    text-align: left;
+    cursor: pointer;
+    transition: color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-chat-toggle:hover {
+    color: var(--ow-text);
+}
+
+.ow-chat-toggle:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-chat-toggle__chevron {
+    display: inline-flex;
+    width: 20px;
+    flex-shrink: 0;
+    justify-content: center;
+    color: var(--ow-icon);
+    transition:
+        transform var(--ow-duration-slow) var(--ow-ease-emphasized),
+        color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-chat-toggle:hover .ow-chat-toggle__chevron {
+    color: var(--ow-text-muted);
+}
+
+.ow-chat-toggle[aria-expanded="true"] .ow-chat-toggle__chevron {
+    transform: rotate(90deg);
+}
+
+.ow-chat-toggle__text {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: var(--ow-space-xs);
+}
+
+.ow-chat-toggle__meta {
+    color: var(--ow-text-muted);
+    font-weight: var(--ow-weight-regular);
+    font-variant-numeric: tabular-nums;
+}
+
+/* A panel that animates its height with a 0fr → 1fr grid row. Its content's height can change while it's open
+   (streaming text) without animating. */
+.ow-chat-collapse {
+    display: grid;
+    min-width: 0;
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    transition:
+        grid-template-rows var(--ow-duration-base) var(--ow-ease-standard),
+        visibility 0s linear var(--ow-duration-base);
+}
+
+.ow-chat-collapse[data-open="true"] {
+    grid-template-rows: 1fr;
+    visibility: visible;
+    transition:
+        grid-template-rows var(--ow-duration-panel) var(--ow-ease-emphasized),
+        visibility 0s;
+}
+
+.ow-chat-collapse__clip {
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.ow-chat-collapse__clip > * {
+    opacity: 0;
+    transition: opacity var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+.ow-chat-collapse[data-open="true"] > .ow-chat-collapse__clip > * {
+    opacity: 1;
+    transition: opacity var(--ow-duration-slow) var(--ow-ease-standard) 60ms;
+}
+
+/* Room past the edges for the focus rings of links and cards inside. */
+.ow-chat-collapse--bleed {
+    margin-inline: calc(-1 * var(--ow-space-2xs));
+}
+
+.ow-chat-collapse--bleed > .ow-chat-collapse__clip {
+    padding-inline: var(--ow-space-2xs);
+}
+
+/* The tool call: a bordered card whose header row is the disclosure button. */
+.ow-chat-tool {
+    min-width: 0;
+    overflow: hidden;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-surface);
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+    font-size: 14px;
+    line-height: 1.45;
+    transition: border-color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-chat-tool:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-chat-tool[data-status="approval"] {
+    border-color: var(--ow-warning-border);
+}
+
+.ow-chat-tool[data-status="error"] {
+    border-color: var(--ow-danger-border);
+}
+
+.ow-chat-tool__header {
+    display: flex;
+    width: 100%;
+    align-items: flex-start;
+    gap: var(--ow-space-md);
+    margin: 0;
+    border: 0;
+    background: transparent;
+    padding: var(--ow-space-md) var(--ow-space-lg);
+    color: inherit;
+    font: inherit;
+    text-align: left;
+}
+
+.ow-chat-tool__header--button {
+    cursor: pointer;
+    transition: background-color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-chat-tool__header--button:hover {
+    background: var(--ow-surface-muted);
+}
+
+.ow-chat-tool__header--button:focus-visible {
+    border-radius: calc(var(--ow-radius-container) - 1px);
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: -2px;
+}
+
+.ow-chat-tool__icon {
+    display: inline-flex;
+    height: 20px;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--ow-text-muted);
+}
+
+.ow-chat-tool__icon > svg {
+    width: 15px;
+    height: 15px;
+}
+
+/* The title and tool name, then the result; the result drops to a second line when there's no room beside them. */
+.ow-chat-tool__main {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0 var(--ow-space-lg);
+}
+
+.ow-chat-tool__heading {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0 var(--ow-space-sm);
+}
+
+.ow-chat-tool__title {
+    min-width: 0;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 20px;
+    overflow-wrap: anywhere;
+}
+
+.ow-chat-tool[data-status="pending"] .ow-chat-tool__title,
+.ow-chat-tool[data-status="cancelled"] .ow-chat-tool__title {
+    color: var(--ow-text-muted);
+}
+
+.ow-chat-tool__name.ow-code {
+    font-size: 12px;
+    line-height: 18px;
+}
+
+.ow-chat-tool__meta {
+    display: inline-flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0 var(--ow-space-xs);
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    line-height: 20px;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-chat-tool[data-status="error"] .ow-chat-tool__summary {
+    color: var(--ow-danger-text);
+}
+
+.ow-chat-tool[data-status="approval"] .ow-chat-tool__summary {
+    color: var(--ow-warning-text);
+}
+
+.ow-chat-tool__duration {
+    white-space: nowrap;
+}
+
+.ow-chat-tool__chevron {
+    display: inline-flex;
+    height: 20px;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--ow-icon);
+    transition: transform var(--ow-duration-slow) var(--ow-ease-emphasized);
+}
+
+.ow-chat-tool[data-open="true"] .ow-chat-tool__chevron {
+    transform: rotate(90deg);
+}
+
+/* Input, output and error, lined up with the title (12px padding + the 20px mark + a 10px gap). */
+.ow-chat-tool__details {
+    display: grid;
+    gap: var(--ow-space-lg);
+    padding: var(--ow-space-2xs) var(--ow-space-lg) var(--ow-space-lg) 42px;
+}
+
+.ow-chat-tool__section {
+    display: grid;
+    min-width: 0;
+    gap: var(--ow-space-xs);
+}
+
+.ow-chat-tool__label {
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 1.35;
+}
+
+.ow-chat-tool__output {
+    min-width: 0;
+    color: var(--ow-text-soft);
+}
+
+.ow-chat-tool__error {
+    min-width: 0;
+    border: 1px solid var(--ow-danger-border);
+    border-radius: var(--ow-radius-form);
+    background: var(--ow-danger-surface);
+    padding: var(--ow-space-sm) var(--ow-space-lg);
+    color: var(--ow-danger-text);
+    font-family: var(--ow-font-mono);
+    font-size: 12px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+/* Waiting for the person: what it wants to do, and Approve and Deny. */
+.ow-chat-tool__approval {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ow-space-md) var(--ow-space-lg);
+    border-top: 1px solid var(--ow-warning-border);
+    background: var(--ow-warning-surface);
+    padding: var(--ow-space-md) var(--ow-space-lg) var(--ow-space-md) 42px;
+    animation: ow-fade-up var(--ow-duration-slow) var(--ow-ease-emphasized);
+}
+
+.ow-chat-tool__request {
+    min-width: 0;
+    flex: 1 1 220px;
+    margin: 0;
+    color: var(--ow-text);
+    font-size: 14px;
+    font-weight: var(--ow-weight-control);
+    line-height: 1.45;
+}
+
+.ow-chat-tool__request .ow-code {
+    font-size: 12px;
+}
+
+.ow-chat-tool__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ow-space-sm);
+}
+
+@media (max-width: 480px) {
+    .ow-chat-tool__details,
+    .ow-chat-tool__approval {
+        padding-left: var(--ow-space-lg);
+    }
+}
+
+/* Forced colours drop the tints and inset rings, so the marks get a plain outline. */
+@media (forced-colors: active) {
+    .ow-chat-status:not(.ow-chat-status--running) {
+        border: 1px solid CanvasText;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-chat-status__glyph,
+    .ow-chat-tool__approval {
+        animation: none !important;
+    }
+    .ow-chat-collapse,
+    .ow-chat-collapse[data-open="true"],
+    .ow-chat-collapse__clip > *,
+    .ow-chat-toggle__chevron,
+    .ow-chat-tool__chevron {
+        transition: none !important;
+    }
+}
+
+/* components/ChainOfThought/ChainOfThought.css */
+/* ChainOfThought: a "Thinking…" toggle over the agent's reasoning and its steps on a thin line. The toggle, the status
+   marks and the collapsing panel come from ChatTool.css. */
+.ow-chain-of-thought {
+    display: grid;
+    min-width: 0;
+    justify-items: start;
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+    font-size: 14px;
+    line-height: 1.45;
+}
+
+.ow-chain-of-thought > .ow-chat-collapse {
+    justify-self: stretch;
+}
+
+.ow-chain-of-thought__static,
+.ow-chain-of-thought__static:hover {
+    color: var(--ow-text-soft);
+    cursor: default;
+}
+
+.ow-chain-of-thought__failed {
+    color: var(--ow-danger-text);
+}
+
+.ow-chain-of-thought__body {
+    display: grid;
+    gap: var(--ow-space-md);
+    padding: var(--ow-space-xs) 0 var(--ow-space-2xs);
+}
+
+/* The reasoning, lined up with the toggle's words, with a line down from its chevron. */
+.ow-chain-of-thought__reasoning {
+    position: relative;
+    min-width: 0;
+    padding-left: 30px;
+    color: var(--ow-text-muted);
+    line-height: 1.55;
+    white-space: pre-line;
+    overflow-wrap: anywhere;
+    text-wrap: pretty;
+}
+
+.ow-chain-of-thought__reasoning::before {
+    content: "";
+    position: absolute;
+    top: var(--ow-space-2xs);
+    bottom: var(--ow-space-2xs);
+    left: 9.5px;
+    width: 1px;
+    background: var(--ow-border);
+}
+
+.ow-chain-of-thought__reasoning p {
+    margin: 0 0 var(--ow-space-sm);
+}
+
+.ow-chain-of-thought__reasoning > :last-child {
+    margin-bottom: 0;
+}
+
+.ow-chain-of-thought__steps {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-chain-of-thought__step {
+    position: relative;
+    display: grid;
+    grid-template-columns: 20px minmax(0, 1fr);
+    column-gap: var(--ow-space-md);
+    padding-bottom: var(--ow-space-lg);
+}
+
+.ow-chain-of-thought__step:last-child {
+    padding-bottom: 0;
+}
+
+/* The line from each mark down to the next, with a little air at both ends; green behind the steps that are done. */
+.ow-chain-of-thought__step:not(:last-child)::before {
+    content: "";
+    position: absolute;
+    top: 22px;
+    bottom: 2px;
+    left: 9.5px;
+    width: 1px;
+    background: var(--ow-border);
+}
+
+.ow-chain-of-thought__step[data-status="success"]:not(:last-child)::before {
+    background: color-mix(in srgb, var(--ow-success-solid) 40%, var(--ow-border));
+}
+
+.ow-chain-of-thought__step-body {
+    display: grid;
+    min-width: 0;
+    align-content: start;
+    gap: var(--ow-space-2xs);
+}
+
+.ow-chain-of-thought__step-title {
+    min-width: 0;
+    font-weight: var(--ow-weight-control);
+    line-height: 20px;
+    overflow-wrap: anywhere;
+}
+
+.ow-chain-of-thought__step[data-status="pending"] .ow-chain-of-thought__step-title {
+    color: var(--ow-text-muted);
+}
+
+.ow-chain-of-thought__detail {
+    min-width: 0;
+    color: var(--ow-text-muted);
+    line-height: 1.55;
+    overflow-wrap: anywhere;
+}
+
+.ow-chain-of-thought__detail .ow-code {
+    font-size: 12px;
+}
+
+/* components/ChatSource/ChatSource.css */
+/* ChatSource: a citation chip in running text with a preview card in the top layer. ChatSources: the list of sources
+   under an answer, behind a toggle (from ChatTool.css). */
+.ow-chat-source {
+    display: inline;
+}
+
+/* The chip: a small numbered pill that sits on the line without changing its height. */
+.ow-chat-source__chip,
+.ow-chat-sources__index {
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-pill);
+    background: var(--ow-surface-muted);
+    color: var(--ow-text-soft);
+    font-family: var(--ow-font-sans);
+    font-size: 11px;
+    font-style: normal;
+    font-weight: var(--ow-weight-emphasis);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    letter-spacing: 0;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+/* In the text it's a plain inline, not an inline-flex box: the line can break after a box, so the full stop after a
+   citation could otherwise wrap onto a line of its own. */
+.ow-chat-source__chip {
+    position: relative;
+    top: -1px;
+    display: inline;
+    margin-left: 2px;
+    padding: 2px var(--ow-space-xs);
+    vertical-align: baseline;
+    cursor: pointer;
+    transition-property: color, background-color, border-color;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-chat-sources__index {
+    display: inline-flex;
+    height: 18px;
+    min-width: 18px;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--ow-space-2xs);
+}
+
+/* A label can be cut short, which takes a box. */
+.ow-chat-source__chip--label {
+    display: inline-flex;
+    height: 18px;
+    max-width: 180px;
+    align-items: center;
+    padding: 0 var(--ow-space-xs);
+}
+
+.ow-chat-source__chip-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ow-chat-source__chip:hover,
+.ow-chat-source__chip--open {
+    border-color: var(--ow-primary-border);
+    background: var(--ow-primary-subtle);
+    color: var(--ow-primary-text);
+}
+
+.ow-chat-source__chip:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+/* The preview. It sits in the top layer but inherits from the sentence around the chip, so it sets its own type. */
+.ow-chat-source-card {
+    z-index: 60;
+    display: grid;
+    width: min(320px, calc(100vw - 16px));
+    gap: var(--ow-space-sm);
+    overflow: hidden;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-surface);
+    padding: var(--ow-space-lg) var(--ow-space-xl);
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--ow-weight-regular);
+    line-height: 1.45;
+    letter-spacing: normal;
+    text-align: left;
+    text-transform: none;
+    white-space: normal;
+    box-shadow: var(--ow-shadow-menu);
+}
+
+.ow-chat-source-card[hidden] {
+    display: none;
+}
+
+.ow-chat-source-card__header {
+    display: flex;
+    min-width: 0;
+    align-items: flex-start;
+    gap: var(--ow-space-sm);
+}
+
+.ow-chat-source-card__icon {
+    display: inline-flex;
+    height: 20px;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--ow-text-muted);
+}
+
+.ow-chat-source-card__icon > svg {
+    width: 15px;
+    height: 15px;
+}
+
+.ow-chat-source-card__title {
+    display: -webkit-box;
+    min-width: 0;
+    overflow: hidden;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 20px;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.ow-chat-source-card__source {
+    display: block;
+    min-width: 0;
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+}
+
+.ow-chat-source-card__source .ow-code,
+.ow-chat-sources__source .ow-code {
+    font-size: 11px;
+}
+
+/* A few lines from the source, cut off rather than scrolling: there's nothing to scroll with in a preview. */
+.ow-chat-source-card__snippet {
+    display: -webkit-box;
+    min-width: 0;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+}
+
+.ow-chat-source-card__snippet--text {
+    border-left: 2px solid var(--ow-border-strong);
+    padding-left: var(--ow-space-md);
+    color: var(--ow-text-soft);
+    font-size: 13px;
+    line-height: 1.5;
+    white-space: pre-line;
+    -webkit-line-clamp: 4;
+}
+
+.ow-chat-source-card__snippet--code {
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-form);
+    background: var(--ow-code-ground);
+    padding: var(--ow-space-sm) var(--ow-space-md);
+    font-family: var(--ow-font-mono);
+    font-size: 12px;
+    line-height: 1.6;
+    white-space: pre;
+    -webkit-line-clamp: 6;
+}
+
+.ow-chat-source-card__open.ow-link {
+    display: inline-flex;
+    justify-self: start;
+    align-items: center;
+    gap: var(--ow-space-2xs);
+    font-size: 12px;
+    font-weight: var(--ow-weight-emphasis);
+}
+
+/* ChatSources: a toggle, then a card per source in as many columns as fit. */
+.ow-chat-sources {
+    display: grid;
+    min-width: 0;
+    justify-items: start;
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+    font-size: 14px;
+    line-height: 1.45;
+}
+
+.ow-chat-sources > .ow-chat-collapse {
+    justify-self: stretch;
+}
+
+.ow-chat-sources__body {
+    padding: var(--ow-space-xs) 0 var(--ow-space-2xs);
+}
+
+.ow-chat-sources__list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
+    gap: var(--ow-space-sm);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-chat-sources__list > li {
+    display: grid;
+    min-width: 0;
+}
+
+.ow-chat-sources__card {
+    display: flex;
+    min-width: 0;
+    align-items: flex-start;
+    gap: var(--ow-space-md);
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-surface);
+    padding: var(--ow-space-md) var(--ow-space-lg);
+    color: inherit;
+    text-decoration: none;
+}
+
+.ow-chat-sources__card--link {
+    cursor: pointer;
+    transition-property: border-color, background-color;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-chat-sources__card--link:hover {
+    border-color: var(--ow-border-strong);
+    background: var(--ow-surface-muted);
+}
+
+.ow-chat-sources__card--link:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-chat-sources__lead {
+    display: inline-flex;
+    height: 20px;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--ow-space-xs);
+}
+
+.ow-chat-sources__icon {
+    display: inline-flex;
+    color: var(--ow-text-muted);
+}
+
+.ow-chat-sources__icon > svg {
+    width: 15px;
+    height: 15px;
+}
+
+.ow-chat-sources__text {
+    display: grid;
+    min-width: 0;
+    flex: 1;
+    gap: 2px;
+}
+
+.ow-chat-sources__title {
+    display: -webkit-box;
+    overflow: hidden;
+    font-weight: var(--ow-weight-emphasis);
+    line-height: 20px;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.ow-chat-sources__source {
+    overflow: hidden;
+    color: var(--ow-text-muted);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    line-height: 1.35;
+}
+
+.ow-chat-sources__external {
+    display: inline-flex;
+    height: 20px;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--ow-icon);
+}