@openwarelabs/ui 0.3.1 → 0.5.0

package/dist/styles.css

@@ -744,9 +744,8 @@
     padding: 0;
 }
 .ow-button--icon-only.ow-button--sm {
-    width: 28px;
-    height: 28px;
-    min-height: 28px;
+    width: 32px;
+    height: 32px;
 }
 .ow-button--icon-only.ow-button--md {
     width: 40px;
@@ -954,29 +953,38 @@
     flex-wrap: nowrap;
     gap: 0;
 }
-.ow-button-group--attached > .ow-button {
+/* A button joins its neighbours whether it's a direct child or wrapped one level down, by a Tooltip or a Menu's trigger. */
+.ow-button-group--attached > .ow-button,
+.ow-button-group--attached > * > .ow-button {
     position: relative;
 }
 .ow-button-group--attached > .ow-button:hover,
 .ow-button-group--attached > .ow-button:focus-visible,
-.ow-button-group--attached > .ow-button--pressed {
+.ow-button-group--attached > .ow-button--pressed,
+.ow-button-group--attached > * > .ow-button:hover,
+.ow-button-group--attached > * > .ow-button:focus-visible,
+.ow-button-group--attached > * > .ow-button--pressed {
     z-index: 1;
 }
-.ow-button-group--attached:not(.ow-button-group--vertical) > .ow-button:not(:first-child) {
+.ow-button-group--attached:not(.ow-button-group--vertical) > .ow-button:not(:first-child),
+.ow-button-group--attached:not(.ow-button-group--vertical) > :not(:first-child) > .ow-button {
     margin-left: -1px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-.ow-button-group--attached:not(.ow-button-group--vertical) > .ow-button:not(:last-child) {
+.ow-button-group--attached:not(.ow-button-group--vertical) > .ow-button:not(:last-child),
+.ow-button-group--attached:not(.ow-button-group--vertical) > :not(:last-child) > .ow-button {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }
-.ow-button-group--attached.ow-button-group--vertical > .ow-button:not(:first-child) {
+.ow-button-group--attached.ow-button-group--vertical > .ow-button:not(:first-child),
+.ow-button-group--attached.ow-button-group--vertical > :not(:first-child) > .ow-button {
     margin-top: -1px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }
-.ow-button-group--attached.ow-button-group--vertical > .ow-button:not(:last-child) {
+.ow-button-group--attached.ow-button-group--vertical > .ow-button:not(:last-child),
+.ow-button-group--attached.ow-button-group--vertical > :not(:last-child) > .ow-button {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -1020,6 +1028,139 @@
     opacity: 0.5;
 }
 
+/* components/ToggleButtonGroup/ToggleButtonGroup.css */
+/* ToggleButtonGroup: toggles joined like an attached ButtonGroup, sharing borders, each pressed in while it's on.
+   An item is the button itself, or the Tooltip around an icon-only one. */
+.ow-toggle-group {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    vertical-align: middle;
+}
+
+.ow-toggle-group--vertical {
+    flex-direction: column;
+}
+
+.ow-toggle-group > * {
+    position: relative;
+}
+
+.ow-toggle-group > .ow-tooltip > .ow-button {
+    flex: 1;
+}
+
+/* Hovered and pressed buttons sit above their neighbours so their whole border shows; a focused one above all,
+   so nothing covers its ring. */
+.ow-toggle-group > :hover,
+.ow-toggle-group > .ow-button--pressed,
+.ow-toggle-group > :has(> .ow-button--pressed) {
+    z-index: 1;
+}
+
+.ow-toggle-group > :focus-visible,
+.ow-toggle-group > :has(> :focus-visible) {
+    z-index: 2;
+}
+
+/* Shared borders: each item overlaps the one before by a border's width, and only the ends keep their corners. */
+.ow-toggle-group:not(.ow-toggle-group--vertical) > :not(:first-child) {
+    margin-inline-start: -1px;
+}
+
+.ow-toggle-group:not(.ow-toggle-group--vertical) > .ow-button:not(:first-child),
+.ow-toggle-group:not(.ow-toggle-group--vertical) > :not(:first-child) > .ow-button {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+}
+
+.ow-toggle-group:not(.ow-toggle-group--vertical) > .ow-button:not(:last-child),
+.ow-toggle-group:not(.ow-toggle-group--vertical) > :not(:last-child) > .ow-button {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+}
+
+.ow-toggle-group--vertical > :not(:first-child) {
+    margin-block-start: -1px;
+}
+
+.ow-toggle-group--vertical > .ow-button:not(:first-child),
+.ow-toggle-group--vertical > :not(:first-child) > .ow-button {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+}
+
+.ow-toggle-group--vertical > .ow-button:not(:last-child),
+.ow-toggle-group--vertical > :not(:last-child) > .ow-button {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+}
+
+/* An icon-only option among labelled ones matches their height. */
+.ow-toggle-group--sm:not(.ow-toggle-group--icon-only) .ow-button--icon-only {
+    width: 32px;
+    height: 32px;
+    min-height: 32px;
+}
+
+/* components/Toolbar/Toolbar.css */
+/* Toolbar: a row (or column) of controls for one context, raised on its own surface or plain. */
+.ow-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ow-space-xs);
+    min-width: 0;
+}
+
+.ow-toolbar--sm {
+    gap: var(--ow-space-2xs);
+}
+
+.ow-toolbar--raised {
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-container);
+    background: var(--ow-surface);
+    padding: var(--ow-space-xs);
+    box-shadow: var(--ow-shadow-control);
+}
+
+/* 4px inside a 12px corner keeps the buttons' 8px corners concentric with the bar's. */
+.ow-toolbar--raised.ow-toolbar--sm {
+    padding: var(--ow-space-2xs);
+}
+
+.ow-toolbar--vertical {
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+}
+
+/* The separator stops short of the bar's edges, so it divides groups without boxing them in. */
+.ow-toolbar__separator {
+    flex-shrink: 0;
+    align-self: center;
+    width: 1px;
+    height: 20px;
+    margin: 0 var(--ow-space-2xs);
+    background: var(--ow-border);
+}
+
+.ow-toolbar--sm .ow-toolbar__separator {
+    height: 16px;
+}
+
+.ow-toolbar--vertical .ow-toolbar__separator {
+    width: 20px;
+    height: 1px;
+    margin: var(--ow-space-2xs) 0;
+}
+
+.ow-toolbar--vertical.ow-toolbar--sm .ow-toolbar__separator {
+    width: 16px;
+}
+
 /* components/SegmentedControl/SegmentedControl.css */
 /* SegmentedControl and segmented Tabs: a well with the chosen segment raised. */
 .ow-segmented,
@@ -1425,6 +1566,153 @@
     white-space: nowrap;
 }
 
+/* components/DateField/DateField.css */
+/* DateField and TimeField: typed segments in a field drawn like Input. The whole field shows focus while a segment
+   has it; the focused segment is tinted. */
+.ow-date-field {
+    display: flex;
+    width: 100%;
+    /* Shrink in a narrow grid or flex column instead of pushing past it. */
+    min-width: 0;
+    height: 40px;
+    align-items: center;
+    gap: var(--ow-space-xs);
+    border: 1px solid var(--ow-border-strong);
+    border-radius: var(--ow-radius-form);
+    background: var(--ow-surface);
+    /* With the segments' own 2px, the digits start where Input's text does. */
+    padding: 0 var(--ow-space-md);
+    color: var(--ow-text);
+    font-size: 14px;
+    font-weight: var(--ow-weight-regular);
+    line-height: 1.45;
+    font-variant-numeric: tabular-nums;
+    cursor: text;
+    transition-property: border-color, background-color, box-shadow, opacity;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-date-field--sm {
+    height: 32px;
+    gap: var(--ow-space-2xs);
+    padding: 0 var(--ow-space-sm);
+    font-size: 13px;
+}
+
+.ow-date-field--with-start {
+    padding-left: var(--ow-space-lg);
+}
+
+.ow-date-field--sm.ow-date-field--with-start {
+    padding-left: var(--ow-space-md);
+}
+
+.ow-date-field:focus-within {
+    border-color: var(--ow-focus-border);
+    box-shadow: var(--ow-shadow-focus);
+}
+
+.ow-date-field:has(.ow-date-field__segment:focus-visible) {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-date-field--invalid {
+    border-color: var(--ow-danger-line);
+}
+
+.ow-date-field--invalid:focus-within {
+    border-color: var(--ow-danger-solid);
+    box-shadow: var(--ow-shadow-focus-danger);
+}
+
+.ow-date-field--readonly {
+    cursor: default;
+}
+
+.ow-date-field--disabled {
+    cursor: not-allowed;
+    opacity: 0.62;
+}
+
+.ow-date-field__addon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--ow-text-muted);
+    cursor: default;
+}
+
+.ow-date-field__segments {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    white-space: pre;
+}
+
+.ow-date-field__segment {
+    flex-shrink: 0;
+    border-radius: var(--ow-radius-sm);
+    padding: 2px;
+    color: var(--ow-text);
+    text-align: center;
+    caret-color: transparent;
+    outline: 0;
+    transition-property: color, background-color, box-shadow;
+    transition-duration: var(--ow-duration-fast);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-date-field__segment::selection {
+    background: transparent;
+}
+
+/* Tabular digits are 1ch wide, so a segment keeps its width while a value is half typed ("1" on the way to "12").
+   Placeholders keep their own width, so the letters sit evenly. */
+.ow-date-field__segment--digits-2:not(.ow-date-field__segment--placeholder) {
+    min-width: calc(2ch + 4px);
+}
+
+.ow-date-field__segment--digits-4:not(.ow-date-field__segment--placeholder) {
+    min-width: calc(4ch + 4px);
+}
+
+.ow-date-field__segment--placeholder {
+    color: var(--ow-text-muted);
+}
+
+/* The tint and edge of selected things, as on Pagination's current page. */
+.ow-date-field__segment:focus {
+    background: var(--ow-primary-subtle);
+    box-shadow: inset 0 0 0 1px var(--ow-primary-border);
+    color: var(--ow-primary-text);
+}
+
+.ow-date-field__segment--placeholder:focus {
+    color: var(--ow-text-muted);
+}
+
+.ow-date-field--disabled .ow-date-field__segment {
+    cursor: not-allowed;
+}
+
+.ow-date-field--readonly .ow-date-field__segment {
+    cursor: default;
+}
+
+.ow-date-field__literal {
+    color: var(--ow-text-muted);
+    user-select: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-date-field,
+    .ow-date-field__segment {
+        transition: none;
+    }
+}
+
 /* components/Textarea/Textarea.css */
 /* Textarea: the field look from Input.css, taller and resizable. */
 .ow-textarea {
@@ -1638,6 +1926,87 @@
     font-weight: var(--ow-weight-control);
 }
 
+/* components/ListBox/ListBox.css */
+/* ListBox: Select's list on the page. It wears Select.css's .ow-listbox and .ow-option (rows, checkmarks, group
+   labels, sizes), so the two stay in step; this file only undoes the floating and adds the field states. */
+.ow-listbox.ow-listbox--standalone {
+    position: relative;
+    z-index: auto;
+    min-width: 0;
+    box-shadow: none;
+    overscroll-behavior: auto;
+    outline: 0;
+    transition-property: border-color, box-shadow, opacity;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-listbox--standalone .ow-option {
+    user-select: none;
+    transition: background-color var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+/* In a floating list the pointer moves the highlight; here hover is its own state, apart from the keyboard's. */
+.ow-listbox--standalone:not(.ow-listbox--disabled, .ow-listbox--readonly) .ow-option:not(.ow-option--disabled):hover {
+    background: var(--ow-hover);
+}
+
+.ow-listbox--readonly .ow-option {
+    cursor: default;
+}
+
+.ow-listbox--standalone.ow-listbox--focus-visible {
+    border-color: var(--ow-focus-border);
+    box-shadow: var(--ow-shadow-focus);
+}
+
+.ow-listbox--standalone.ow-listbox--invalid {
+    border-color: var(--ow-danger-line);
+}
+
+.ow-listbox--standalone.ow-listbox--invalid.ow-listbox--focus-visible {
+    border-color: var(--ow-danger-solid);
+    box-shadow: var(--ow-shadow-focus-danger);
+}
+
+.ow-listbox--standalone.ow-listbox--disabled {
+    cursor: not-allowed;
+    opacity: 0.62;
+}
+
+.ow-listbox--disabled .ow-option {
+    cursor: not-allowed;
+}
+
+/* An empty list is one option row tall. */
+.ow-listbox--standalone .ow-listbox__empty {
+    padding: var(--ow-space-md);
+    font-size: 14px;
+    line-height: 16px;
+}
+
+.ow-listbox--standalone.ow-listbox--sm .ow-listbox__empty {
+    padding-block: var(--ow-space-sm);
+    font-size: 12px;
+}
+
+.ow-option__icon {
+    display: flex;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--ow-text-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-listbox.ow-listbox--standalone,
+    .ow-listbox--standalone .ow-option {
+        transition: none;
+    }
+}
+
 /* components/Combobox/Combobox.css */
 /* Combobox: a grouped field (Input.css) with a chevron, over Select's listbox. */
 .ow-combobox {
@@ -2444,9 +2813,32 @@
     line-height: 1.4;
 }
 
-/* components/Badge/Badge.css */
-/* Badge (the app's Pill): status in a bordered pill. */
-.ow-badge {
+/* A checkbox in a Field with an error (the terms, say) takes the invalid field's border until it's ticked. */
+.ow-field .ow-checkbox__input[aria-invalid="true"]:not(:checked, :disabled) {
+    border-color: var(--ow-danger-line);
+}
+
+/* components/Form/Form.css */
+/* Form: its rows sit ow-space-xl apart, as the README asks. */
+.ow-form {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    gap: var(--ow-space-xl);
+}
+
+/* A button on a row of its own keeps its width, unless it's fullWidth. */
+.ow-form > .ow-button {
+    justify-self: start;
+}
+
+.ow-form > .ow-button--full {
+    justify-self: stretch;
+}
+
+/* components/Badge/Badge.css */
+/* Badge (the app's Pill): status in a bordered pill. */
+.ow-badge {
     display: inline-flex;
     width: fit-content;
     align-items: center;
@@ -2734,6 +3126,96 @@
     }
 }
 
+/* components/Meter/Meter.css */
+/* Meter: ProgressBar's header and track (Progress.css), for an amount within a range. Tones swap in a status colour. */
+.ow-meter {
+    display: grid;
+    min-width: 0;
+    gap: var(--ow-space-sm);
+}
+
+.ow-meter--primary {
+    --ow-meter-fill: var(--ow-progress);
+}
+
+/* Status fills use the status text colours, which keep 3:1 against the track in both themes. */
+.ow-meter--success {
+    --ow-meter-fill: var(--ow-success-text);
+}
+
+.ow-meter--warning {
+    --ow-meter-fill: var(--ow-warning-text);
+}
+
+.ow-meter--danger {
+    --ow-meter-fill: var(--ow-danger-text);
+}
+
+.ow-meter__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--ow-space-md);
+}
+
+.ow-meter__label {
+    min-width: 0;
+    color: var(--ow-text);
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+}
+
+.ow-meter__value {
+    flex-shrink: 0;
+    color: var(--ow-text-muted);
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-meter__track {
+    display: flex;
+    height: 4px;
+    overflow: hidden;
+    border-radius: var(--ow-radius-pill);
+    background: var(--ow-meter-track);
+}
+
+.ow-meter--md .ow-meter__track {
+    height: 8px;
+}
+
+.ow-meter__fill {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--ow-meter-fill);
+    transition:
+        width var(--ow-duration-slow) var(--ow-ease-standard),
+        background-color var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+/* Segments: the track splits into blocks, each with its own track and a share of the fill. */
+.ow-meter__track--segmented {
+    gap: var(--ow-space-2xs);
+    overflow: visible;
+    border-radius: 0;
+    background: none;
+}
+
+.ow-meter__segment {
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    border-radius: var(--ow-radius-pill);
+    background: var(--ow-meter-track);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-meter__fill {
+        transition: none;
+    }
+}
+
 /* components/Tooltip/Tooltip.css */
 /* Tooltip: a small dark label in the top layer, on the side of the child it prefers (or the other side when there's no room). */
 .ow-tooltip {
@@ -3338,6 +3820,13 @@
     cursor: not-allowed;
 }
 
+/* Holds a missing button's place, so a month's name stays centred (RangeCalendar's months side by side). */
+.ow-calendar__nav-space {
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+}
+
 .ow-calendar__grid {
     border-collapse: separate;
     border-spacing: 2px;
@@ -3471,6 +3960,200 @@
     padding: var(--ow-space-md);
 }
 
+/* components/Calendar/RangeCalendar.css */
+/* RangeCalendar: Calendar's month grid, with the range's ends as solid caps and a primary-subtle band between them. */
+.ow-range-calendar {
+    display: inline-flex;
+    max-width: 100%;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--ow-space-2xl) var(--ow-space-4xl);
+    color: var(--ow-text);
+    font-family: var(--ow-font-sans);
+}
+
+.ow-range-calendar .ow-calendar__cell {
+    position: relative;
+}
+
+/* The band sits behind the day buttons and reaches 1px into the 2px gaps either side, so the days join up. */
+.ow-range-calendar__cell--in-range::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -1px;
+    bottom: 0;
+    left: -1px;
+    background: var(--ow-primary-subtle);
+}
+
+/* It rounds off at the ends of each week, and side by side at the ends of each month. */
+.ow-range-calendar__cell--row-start::before {
+    left: 0;
+    border-top-left-radius: var(--ow-radius-form);
+    border-bottom-left-radius: var(--ow-radius-form);
+}
+
+.ow-range-calendar__cell--row-end::before {
+    right: 0;
+    border-top-right-radius: var(--ow-radius-form);
+    border-bottom-right-radius: var(--ow-radius-form);
+}
+
+/* At the caps it starts and stops halfway, so it fills in behind their inner corners. */
+.ow-range-calendar__cell--start::before {
+    left: 50%;
+}
+
+.ow-range-calendar__cell--end::before {
+    right: 50%;
+}
+
+.ow-range-calendar__day--in-range:not(.ow-calendar__day--disabled):hover {
+    border-color: var(--ow-primary-border);
+    background: var(--ow-primary-soft);
+}
+
+/* components/Calendar/DateRangePicker.css */
+/* DateRangePicker: Select's trigger with a calendar icon and a clear button, opening a RangeCalendar and presets. */
+.ow-date-range-picker {
+    position: relative;
+    display: inline-flex;
+    min-width: 0;
+    vertical-align: middle;
+}
+
+.ow-date-range-picker--md {
+    min-width: 240px;
+}
+
+.ow-date-range-picker--sm {
+    min-width: 210px;
+}
+
+.ow-date-range-picker__trigger {
+    width: 100%;
+}
+
+.ow-date-range-picker__icon {
+    flex-shrink: 0;
+    color: var(--ow-text-muted);
+}
+
+/* The clear button sits over the trigger's right end (a button can't hold another), which leaves it room. */
+.ow-date-range-picker--clearable.ow-date-range-picker--md .ow-date-range-picker__trigger {
+    padding-right: 38px;
+}
+
+.ow-date-range-picker--clearable.ow-date-range-picker--sm .ow-date-range-picker__trigger {
+    padding-right: 30px;
+}
+
+.ow-date-range-picker__clear {
+    position: absolute;
+    top: 50%;
+    right: var(--ow-space-sm);
+    transform: translateY(-50%);
+}
+
+.ow-date-range-picker--sm .ow-date-range-picker__clear {
+    right: var(--ow-space-2xs);
+}
+
+/* Hovering the clear button still shows the field's hover edge. */
+.ow-date-range-picker:hover .ow-date-range-picker__trigger:not(:disabled):not(.ow-select--open):not(.ow-select--invalid):not(:focus-visible) {
+    border-color: var(--ow-border-hover);
+}
+
+.ow-date-range-picker__panel {
+    display: flex;
+    width: auto;
+    max-width: calc(100vw - 16px);
+    align-items: flex-start;
+    gap: var(--ow-space-lg);
+    padding: var(--ow-space-md);
+}
+
+.ow-date-range-picker__presets {
+    display: grid;
+    width: 148px;
+    flex-shrink: 0;
+    align-self: stretch;
+    align-content: start;
+    gap: var(--ow-space-2xs);
+    border-right: 1px solid var(--ow-border);
+    padding-right: var(--ow-space-md);
+}
+
+.ow-date-range-picker__preset {
+    display: flex;
+    min-height: 32px;
+    align-items: center;
+    gap: var(--ow-space-sm);
+    margin: 0;
+    border: 0;
+    border-radius: var(--ow-radius-lg);
+    background: transparent;
+    padding: var(--ow-space-xs) var(--ow-space-sm);
+    color: var(--ow-text);
+    font: inherit;
+    font-size: 14px;
+    font-weight: var(--ow-weight-control);
+    line-height: 1.1;
+    text-align: left;
+    cursor: pointer;
+    transition-property: color, background-color;
+    transition-duration: var(--ow-duration-base);
+    transition-timing-function: var(--ow-ease-standard);
+}
+
+.ow-date-range-picker__preset:hover {
+    background: var(--ow-hover);
+}
+
+.ow-date-range-picker__preset:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: -2px;
+}
+
+.ow-date-range-picker__preset--current,
+.ow-date-range-picker__preset--current:hover {
+    background: var(--ow-primary-subtle);
+    color: var(--ow-primary-text);
+    font-weight: var(--ow-weight-emphasis);
+}
+
+.ow-date-range-picker__preset-label {
+    min-width: 0;
+    flex: 1;
+}
+
+.ow-date-range-picker__preset-check {
+    flex-shrink: 0;
+}
+
+/* On a phone the presets wrap in rows above the month, no wider than it. */
+@media (max-width: 479px) {
+    .ow-date-range-picker__panel {
+        width: min-content;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .ow-date-range-picker__presets {
+        display: flex;
+        width: auto;
+        flex-wrap: wrap;
+        border-right: 0;
+        border-bottom: 1px solid var(--ow-border);
+        padding: 0 0 var(--ow-space-md);
+    }
+
+    .ow-date-range-picker__preset {
+        border: 1px solid var(--ow-border);
+    }
+}
+
 /* components/ColorPicker/ColorPicker.css */
 /* ColorPicker: react-colorful's saturation area and hue slider in Openware's look, with a hex field,
    an eyedropper and swatches. react-colorful injects its own styles after this sheet, so these
@@ -3669,38 +4352,350 @@
     padding: var(--ow-space-lg);
 }
 
-/* components/CommandPalette/CommandPalette.css */
-/* CommandPalette: a dialog 12vh from the top, 560px wide, with a search row and a results list. */
-.ow-palette {
-    top: 12vh;
-    bottom: auto;
-    width: min(560px, calc(100% - 32px));
-    margin: 0 auto;
-    overflow: hidden;
-    padding: 0;
+/* components/ColorPicker/ColorArea.css */
+/* ColorArea: one hue's square, white to the hue across and down to black, in ColorPicker's look (its corners,
+   hairline and thumb), so the two can sit side by side. */
+.ow-color-area {
+    --ow-color-area-direction: to right;
+    position: relative;
+    width: var(--ow-color-area-width, 232px);
+    max-width: 100%;
+    height: var(--ow-color-area-height, 152px);
+    flex-shrink: 0;
+    border-radius: var(--ow-radius-form);
+    background: linear-gradient(to top, #000000, transparent), linear-gradient(var(--ow-color-area-direction), #ffffff, var(--ow-color-area-hue));
+    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
+    cursor: pointer;
+    touch-action: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
 }
 
-.ow-palette__search {
-    display: flex;
-    align-items: center;
-    gap: var(--ow-space-sm);
-    border-bottom: 1px solid var(--ow-border);
-    padding: var(--ow-space-md) var(--ow-space-lg);
+.ow-color-area:dir(rtl) {
+    --ow-color-area-direction: to left;
 }
 
-.ow-palette__search-icon {
-    flex-shrink: 0;
-    color: var(--ow-text-muted);
+.ow-color-area__thumb {
+    position: absolute;
+    top: var(--ow-color-area-y);
+    inset-inline-start: var(--ow-color-area-x);
+    width: 18px;
+    height: 18px;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    background: var(--ow-color-area-color);
+    box-shadow:
+        0 0 0 1px rgba(15, 23, 42, 0.18),
+        0 2px 6px rgba(15, 23, 42, 0.28);
+    pointer-events: none;
+    translate: -50% -50%;
+    transition: scale var(--ow-duration-fast) var(--ow-ease-standard);
 }
 
-.ow-palette__input {
-    min-width: 0;
-    flex: 1;
-    margin: 0;
-    border: 0;
-    background: transparent;
-    padding: 0;
-    color: var(--ow-text);
+.ow-color-area:dir(rtl) .ow-color-area__thumb {
+    translate: 50% -50%;
+}
+
+.ow-color-area--dragging .ow-color-area__thumb {
+    scale: 1.15;
+}
+
+/* Focused by a press, it shows no ring until a key is used (useDrag's pointerFocus). */
+.ow-color-area:not(.ow-color-area--pointer) .ow-color-area__thumb:has(:focus-visible) {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-color-area--disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-color-area__thumb {
+        transition: none;
+    }
+}
+
+/* components/ColorPicker/ColorSlider.css */
+/* ColorSlider: a 12px pill track painted with the channel's range, and ColorPicker's thumb, which shows the colour.
+   The input is visually hidden inside the thumb, so a screen reader's focus box sits where the thumb is. */
+.ow-color-slider {
+    --ow-color-slider-direction: to right;
+    display: grid;
+    min-width: 0;
+    gap: var(--ow-space-md);
+}
+
+.ow-color-slider--horizontal:dir(rtl) {
+    --ow-color-slider-direction: to left;
+}
+
+.ow-color-slider--vertical {
+    --ow-color-slider-direction: to top;
+    display: inline-flex;
+    height: 152px;
+    flex-direction: column;
+    align-items: center;
+}
+
+.ow-color-slider__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--ow-space-md);
+}
+
+.ow-color-slider--vertical .ow-color-slider__header {
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+}
+
+.ow-color-slider__label {
+    color: var(--ow-text);
+    font-size: 14px;
+    font-weight: var(--ow-weight-emphasis);
+}
+
+.ow-color-slider__value {
+    color: var(--ow-text-muted);
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-color-slider__track {
+    position: relative;
+    border-radius: var(--ow-radius-pill);
+    background: var(--ow-color-slider-gradient);
+    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
+    cursor: pointer;
+    touch-action: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* A taller target than the 12px track, the thumb's full height. */
+.ow-color-slider__track::before {
+    position: absolute;
+    content: "";
+}
+
+.ow-color-slider--horizontal .ow-color-slider__track {
+    height: 12px;
+}
+
+.ow-color-slider--horizontal .ow-color-slider__track::before {
+    inset: -4px 0;
+}
+
+.ow-color-slider--vertical .ow-color-slider__track {
+    width: 12px;
+    min-height: 0;
+    flex: 1;
+}
+
+.ow-color-slider--vertical .ow-color-slider__track::before {
+    inset: 0 -4px;
+}
+
+.ow-color-slider--alpha .ow-color-slider__track {
+    background:
+        var(--ow-color-slider-gradient),
+        repeating-conic-gradient(var(--ow-gray-200) 0 25%, #ffffff 0 50%) 0 0 / 12px 12px;
+}
+
+.ow-color-slider__thumb {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    background:
+        linear-gradient(var(--ow-color-slider-thumb), var(--ow-color-slider-thumb)),
+        repeating-conic-gradient(var(--ow-gray-200) 0 25%, #ffffff 0 50%) 0 0 / 8px 8px;
+    box-shadow:
+        0 0 0 1px rgba(15, 23, 42, 0.18),
+        0 2px 6px rgba(15, 23, 42, 0.28);
+    pointer-events: none;
+    transition: scale var(--ow-duration-fast) var(--ow-ease-standard);
+}
+
+.ow-color-slider--horizontal .ow-color-slider__thumb {
+    top: 50%;
+    inset-inline-start: var(--ow-color-slider-position);
+    translate: -50% -50%;
+}
+
+.ow-color-slider--horizontal:dir(rtl) .ow-color-slider__thumb {
+    translate: 50% -50%;
+}
+
+.ow-color-slider--vertical .ow-color-slider__thumb {
+    bottom: var(--ow-color-slider-position);
+    left: 50%;
+    translate: -50% 50%;
+}
+
+.ow-color-slider--dragging .ow-color-slider__thumb {
+    scale: 1.15;
+}
+
+/* Focused by a press, it shows no ring until a key is used (useDrag's pointerFocus). */
+.ow-color-slider:not(.ow-color-slider--pointer) .ow-color-slider__thumb:has(:focus-visible) {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-color-slider--disabled {
+    opacity: 0.55;
+}
+
+.ow-color-slider--disabled .ow-color-slider__track {
+    cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-color-slider__thumb {
+        transition: none;
+    }
+}
+
+/* components/ColorPicker/ColorSwatchPicker.css */
+/* ColorSwatchPicker: swatches in wrapping rows, like ColorPicker's. The chosen one gets ColorPicker's ring (a gap in
+   the surface colour, then a 2px ring in the text colour) and a check in white or slate, whichever reads on it.
+   The focus outline lands exactly on the ring, so a focused swatch's ring turns the focus colour. */
+.ow-color-swatch-picker {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ow-space-sm);
+}
+
+.ow-color-swatch-picker--sm {
+    gap: var(--ow-space-xs);
+}
+
+.ow-color-swatch-picker__swatch {
+    display: inline-flex;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--ow-radius-form);
+    background:
+        linear-gradient(var(--ow-color-swatch-picker-value), var(--ow-color-swatch-picker-value)),
+        repeating-conic-gradient(var(--ow-gray-200) 0 25%, #ffffff 0 50%) 0 0 / 8px 8px;
+    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
+    cursor: pointer;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+        transform var(--ow-duration-base) var(--ow-ease-spring),
+        box-shadow var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-color-swatch-picker--sm .ow-color-swatch-picker__swatch {
+    width: 24px;
+    height: 24px;
+    border-radius: var(--ow-radius-md);
+}
+
+.ow-color-swatch-picker--circle .ow-color-swatch-picker__swatch {
+    border-radius: 50%;
+}
+
+.ow-color-swatch-picker__swatch:hover:not([aria-disabled="true"]) {
+    transform: scale(1.1);
+}
+
+.ow-color-swatch-picker__swatch[aria-checked="true"] {
+    box-shadow:
+        inset 0 0 0 1px rgba(15, 23, 42, 0.14),
+        0 0 0 2px var(--ow-surface),
+        0 0 0 4px var(--ow-text);
+}
+
+.ow-color-swatch-picker__swatch:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 2px;
+}
+
+.ow-color-swatch-picker__check {
+    opacity: 0;
+    scale: 0.5;
+    transition:
+        opacity var(--ow-duration-fast) var(--ow-ease-standard),
+        scale var(--ow-duration-base) var(--ow-ease-spring);
+}
+
+.ow-color-swatch-picker__swatch[data-ink="light"] .ow-color-swatch-picker__check {
+    color: #ffffff;
+}
+
+.ow-color-swatch-picker__swatch[data-ink="dark"] .ow-color-swatch-picker__check {
+    color: var(--ow-gray-900);
+}
+
+.ow-color-swatch-picker__swatch[aria-checked="true"] .ow-color-swatch-picker__check {
+    opacity: 1;
+    scale: 1;
+}
+
+.ow-color-swatch-picker__swatch[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.4;
+}
+
+.ow-color-swatch-picker--disabled {
+    opacity: 0.55;
+}
+
+/* The group fades as a whole; its swatches don't fade again. */
+.ow-color-swatch-picker--disabled .ow-color-swatch-picker__swatch[aria-disabled="true"] {
+    opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-color-swatch-picker__swatch,
+    .ow-color-swatch-picker__check {
+        transition: none;
+    }
+}
+
+/* components/CommandPalette/CommandPalette.css */
+/* CommandPalette: a dialog 12vh from the top, 560px wide, with a search row and a results list. */
+.ow-palette {
+    top: 12vh;
+    bottom: auto;
+    width: min(560px, calc(100% - 32px));
+    margin: 0 auto;
+    overflow: hidden;
+    padding: 0;
+}
+
+.ow-palette__search {
+    display: flex;
+    align-items: center;
+    gap: var(--ow-space-sm);
+    border-bottom: 1px solid var(--ow-border);
+    padding: var(--ow-space-md) var(--ow-space-lg);
+}
+
+.ow-palette__search-icon {
+    flex-shrink: 0;
+    color: var(--ow-text-muted);
+}
+
+.ow-palette__input {
+    min-width: 0;
+    flex: 1;
+    margin: 0;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    color: var(--ow-text);
     font: inherit;
     font-size: 14px;
     outline: 0;
@@ -5809,3 +6804,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);
+}