@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/chat-aui.css

@@ -0,0 +1,1143 @@
+/* ==========================================================================
+   First-party digichat Thread — assistant-ui CSS-var bridge
+   --------------------------------------------------------------------------
+   Maps AUI / shadcn vars used by primitives and copied elements onto the
+   digiweb terminal pane. SCOPED to `.digichat-thread` so the 11 official
+   catalog skins keep their own `--background` / radius.
+   Import once in the app shell (gallery globals, or via DigichatThread.tsx):
+     @import "@digithings-ai/ui/styles/chat-aui.css";
+   ========================================================================== */
+
+@theme inline {
+  --color-ink: var(--ink);
+  --color-ink-soft: var(--ink-soft);
+  --color-ink-mute: var(--ink-mute);
+  --color-term-bg: var(--term-bg);
+  --color-term-ink: var(--term-ink);
+  --color-term-hair: var(--term-hair);
+  --color-term-fill: var(--term-fill);
+  --color-term-mute: var(--term-mute);
+  --color-hair: var(--hair);
+  --color-hair-2: var(--hair-2);
+  --color-surface: var(--surface);
+  --color-bg: var(--bg);
+  --color-on-accent: var(--on-accent);
+  --color-up: var(--up);
+  --color-down: var(--down);
+  --color-danger: var(--danger);
+  --color-warn: var(--warn);
+}
+
+/* The stock thread's raised fill (user bubble, skeletons, dialog, inline
+   code, hovers): `bg-surface-2` and `bg-surface-2/<n>`. This sheet declares
+   no `--color-surface-2` theme colour, so Tailwind's own `bg-*` does not emit
+   it; this utility does, and only inside the stock thread (its root carries
+   `data-stock-thread`) and the stock portals rendered from it (the dialog
+   carries `data-stock-portal` inside StockShapeProvider). Anywhere else the
+   class matches no declaration at all, exactly as before the stock thread
+   used it: other skins and host chrome reuse stock parts that ask for it
+   (markdown table heads, tool cards, the docs page's outline Button) and
+   keep their own background. `:where()` adds no specificity, and
+   `--surface-2` resolves on the element, so thread-scoped tokens win.
+   `--value("2")` limits the utility to `bg-surface-2`. */
+@utility bg-surface-* {
+  &:where([data-stock-thread], [data-stock-thread] *, [data-stock-portal], [data-stock-portal] *) {
+    --stock-surface-step: --value("2");
+    background-color: var(--surface-2);
+    background-color: color-mix(in oklab, var(--surface-2) --modifier(integer)%, transparent);
+  }
+}
+
+/* `--font-geist-mono` is the retired name for the host surface's one mono face
+   (DIG-2375). It is declared HERE, beside the rules that read it, because every
+   surface that mounts this sheet sets only the generic `--font-mono-face` from
+   its own `fonts.ts` and none of them loads `digichat-app-theme.css`. Without it
+   `font-family: var(--font-geist-mono), …` below is invalid and the skin falls
+   back to the page font. Swap the face in the surface's config; never here. */
+:root {
+  --font-geist-mono: var(--font-mono-face, "Geist Mono");
+}
+
+[data-thread-skin="digichat"] {
+  --radius: 0;
+  --radius-thread: 0;
+  --composer-radius: 0;
+  /* Gallery chatbot.css uses var(--font-mono). --font-geist-mono is the
+     retired-name alias declared below for the app's one mono face. */
+  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
+  --font-sans: var(--font-geist-mono), ui-monospace, monospace;
+  font-family: var(--font-geist-mono), ui-monospace, monospace;
+}
+
+[data-thread-skin="digichat"] .digichat-composer textarea:focus:not(:focus-visible),
+[data-thread-skin="digichat"] .aui-composer-input:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+[data-thread-skin="digichat"] .digichat-composer textarea:focus-visible,
+[data-thread-skin="digichat"] .aui-composer-input:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: -1px;
+  box-shadow: none;
+}
+
+.digichat-thread {
+  --accent: var(--ink);
+  --accent-weak: color-mix(in srgb, var(--accent) 14%, transparent);
+  --on-accent: #06110f;
+  --bg: #0a0e0c;
+  --surface: #121417;
+  --surface-2: #171a1e;
+  --hair: rgba(255, 255, 255, 0.09);
+  --hair-2: rgba(255, 255, 255, 0.15);
+  --ink: #eceef0;
+  --ink-soft: #9aa0a6;
+  --ink-mute: #6b7177;
+  --term-bg: #08090b;
+  --term-ink: #e7eaec;
+  --term-hair: #2a2e33;
+  --term-fill: #101317;
+  --term-mute: #7e858b;
+  --up: #3dd6c4;
+  --down: #e5533e;
+  --danger: #e5533e;
+  --warn: #e0b341;
+  --radius: 0;
+  --radius-thread: 0;
+  --thread-max-width: 44rem;
+  --composer-radius: 0;
+  --composer-padding: 0.5rem;
+  --composer-bg: var(--surface);
+  --background: var(--term-bg);
+  --foreground: var(--term-ink);
+  --card: var(--surface);
+  --card-foreground: var(--term-ink);
+  --muted: var(--term-fill);
+  --muted-foreground: var(--term-mute);
+  --border: var(--term-hair);
+  --primary: var(--ink);
+  --primary-foreground: var(--bg);
+  --ring: var(--accent);
+  font-family: var(--font-geist-mono, var(--font-mono), ui-monospace, monospace);
+  background: var(--term-bg);
+  color: var(--term-ink);
+  /* Full-bleed canvas like the other skins: the root fills its container so
+     the background reaches the edges, and the inner column in
+     `thread.aui.tsx` (`mx-auto max-w-(--thread-max-width)`) keeps the actual
+     messages and composer at 44rem. Constraining the root instead left the
+     page background showing through in the gutters. */
+  width: 100%;
+}
+
+:root[data-theme="light"] .digichat-thread,
+.light .digichat-thread {
+  --bg: #f4f3ee;
+  --surface: #f1f0eb;
+  --surface-2: #e8e6df;
+  --hair: rgba(12, 12, 10, 0.12);
+  --hair-2: rgba(12, 12, 10, 0.2);
+  --ink: #1a1c1e;
+  --ink-soft: #4a4f54;
+  --ink-mute: #6b7177;
+  --term-bg: #f1f0eb;
+  --term-ink: #1a1c1e;
+  --term-hair: #d4d1c8;
+  --term-fill: #e8e6df;
+  --term-mute: #6b7177;
+  --on-accent: #06110f;
+  --background: var(--term-bg);
+  --foreground: var(--term-ink);
+}
+
+/*
+  Density. One token set on the thread root; `data-density` only reassigns it.
+  The scale is the only length source, and `--trace-*` are aliases of the
+  density tokens so the rules that already read them keep working.
+  Values mirror `DENSITY_TOKENS` in `components/chat/trace-spacing.ts` and are
+  pinned by `styles/density-tokens.contract.test.ts`.
+*/
+.digichat-thread,
+.digichat-launcher {
+  --trace-space-1: 0.125rem;
+  --trace-space-2: 0.25rem;
+  --trace-space-3: 0.375rem;
+  --trace-space-4: 0.5rem;
+  --trace-space-5: 0.625rem;
+  --trace-space-6: 0.75rem;
+  --trace-space-7: 1rem;
+  --trace-space-8: 1.25rem;
+
+  /* default mode: four stack gaps, body padding, leading and tracking */
+  --density-gap-1: var(--trace-space-2);
+  --density-gap-2: var(--trace-space-4);
+  --density-gap-3: var(--trace-space-5);
+  --density-gap-4: var(--trace-space-6);
+  --density-pad: var(--trace-space-1);
+  --density-leading: 1.6;
+  --density-leading-tight: 1.4;
+  --density-tracking: 0em;
+  --density-tracking-mono: 0.01em;
+  --composer-padding: calc(var(--density-pad) + 0.5rem);
+
+  /* semantic aliases the chain reads */
+  --trace-title-gap: var(--density-gap-3);
+  --trace-group-gap: var(--density-gap-2);
+  --trace-within-gap: var(--density-gap-1);
+  --trace-header-gap: var(--density-gap-1);
+  --trace-body-pad: var(--density-pad);
+  --trace-body-indent: var(--trace-space-6);
+  --trace-chain-gap: var(--density-gap-4);
+  /* component sizing tokens (chat-aui) — local to the sheet, which declares
+     its own palette and does not assume tokens.css is loaded. */
+  --aui-marker-w: 1.25rem;
+  --aui-marker-offset: 0.2rem;
+  --aui-line-height: 1.375rem;
+  --aui-input-pad-y: 0.2rem;
+  --aui-input-rows: 5;
+  --aui-chip-max-w: 16rem;
+  --aui-chip-gap: 0.35rem;
+  --aui-chip-pad: 0.15rem 0.45rem;
+  --aui-chip-fs: 0.66rem;
+  --aui-trace-icon: 0.875rem;
+  --aui-chevron-size: 0.55rem;
+  --aui-loader-size: 0.75rem;
+  --aui-copy-hit: 1.5rem;
+  --aui-dump-max-h: 8.5rem;
+  --aui-json-max-h: 18rem;
+}
+
+.digichat-thread[data-density="compact"] {
+  --density-gap-1: var(--trace-space-1);
+  --density-gap-2: var(--trace-space-2);
+  --density-gap-3: var(--trace-space-3);
+  --density-gap-4: var(--trace-space-4);
+  --density-pad: 0rem;
+  --density-leading: 1.45;
+  --density-leading-tight: 1.3;
+  --density-tracking: -0.005em;
+  --density-tracking-mono: 0em;
+  --trace-header-gap: 0rem;
+  --trace-body-indent: var(--trace-space-5);
+}
+
+.digichat-thread[data-density="default"] {
+  --density-gap-1: var(--trace-space-2);
+  --density-gap-2: var(--trace-space-4);
+  --density-gap-3: var(--trace-space-5);
+  --density-gap-4: var(--trace-space-6);
+  --density-pad: var(--trace-space-1);
+  --density-leading: 1.6;
+  --density-leading-tight: 1.4;
+  --density-tracking: 0em;
+  --density-tracking-mono: 0.01em;
+  --trace-header-gap: var(--trace-space-2);
+  --trace-body-indent: var(--trace-space-6);
+}
+
+.digichat-thread[data-density="airy"] {
+  --density-gap-1: var(--trace-space-3);
+  --density-gap-2: var(--trace-space-6);
+  --density-gap-3: var(--trace-space-7);
+  --density-gap-4: var(--trace-space-8);
+  --density-pad: var(--trace-space-3);
+  --density-leading: 1.75;
+  --density-leading-tight: 1.55;
+  --density-tracking: 0.005em;
+  --density-tracking-mono: 0.02em;
+  --trace-header-gap: var(--trace-space-6);
+  --trace-body-indent: var(--trace-space-7);
+}
+
+.digichat-thread [data-role="user"],
+.digichat-thread .chat-msg--user,
+.digichat-thread .chat-msg--assistant,
+.digichat-thread .chat-msg--system {
+  justify-content: flex-start;
+  margin-inline: 0;
+  max-width: none;
+}
+
+.digichat-thread textarea,
+.digichat-thread input,
+.digichat-thread button {
+  border-radius: 0;
+}
+
+.digichat-example:hover,
+.digichat-example:focus-visible {
+  color: var(--ink);
+  outline: none;
+}
+
+.digichat-action:hover,
+.digichat-action:focus-visible {
+  background: transparent;
+  color: var(--ink);
+}
+
+.digichat-thread .aui-composer-send,
+.digichat-thread .aui-composer-send:not(:disabled),
+.digichat-thread .aui-composer-send:not(:disabled):hover,
+.digichat-thread .aui-composer-send:focus-visible {
+  background: transparent;
+  color: color-mix(in oklab, var(--ink-mute) 22%, transparent);
+  box-shadow: none;
+}
+
+.digichat-thread .aui-composer-send:not(:disabled) {
+  color: var(--ink-soft);
+}
+
+.digichat-thread .aui-composer-send:not(:disabled):hover,
+.digichat-thread .aui-composer-send:not(:disabled):focus-visible {
+  color: var(--ink);
+}
+
+.digichat-thread .chat-msg {
+  align-items: flex-start;
+}
+
+.digichat-thread [data-slot="aui_thread-viewport"],
+.digichat-thread.aui-thread-root [data-slot="aui_thread-viewport"] {
+  overflow-x: hidden;
+}
+
+.digichat-thread .aui-assistant-message-content,
+.digichat-thread .aui-assistant-message-content .aui-md {
+  overflow: visible;
+}
+
+.digichat-thread .aui-md-ul,
+.digichat-thread .aui-md-ol {
+  margin-inline-start: 0;
+  /* Indents stay literal: gallery-thread.source.test.ts pins the source text. */
+  padding-inline-start: 1.75rem;
+  list-style-position: outside;
+}
+
+.digichat-thread .aui-md-ul {
+  list-style-type: disc;
+}
+
+.digichat-thread .aui-md-ol {
+  padding-inline-start: 2rem;
+  list-style-type: decimal;
+}
+
+.digichat-thread .aui-md-pre,
+.digichat-thread .aui-md-table-wrapper {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.digichat-thread .chat-msg-marker {
+  margin-top: var(--aui-marker-offset);
+}
+
+.digichat-thread .aui-composer-input {
+  display: block;
+  min-height: calc(var(--aui-line-height) + (2 * var(--aui-input-pad-y)));
+  padding-block: var(--aui-input-pad-y);
+  line-height: var(--aui-line-height);
+  field-sizing: content;
+  box-sizing: border-box;
+  /* 3-5 rows then scroll (padding-block 0.2rem each side). */
+  max-height: calc(
+    var(--aui-input-rows) * var(--aui-line-height) + (2 * var(--aui-input-pad-y))
+  );
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+.digichat-thread .aui-composer-input:placeholder-shown {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* Composer shell is a border only. The input is already transparent; the
+   wrapper must not paint --composer-bg / --surface behind it. */
+.digichat-thread [data-slot="aui_composer-shell"],
+.digichat-launcher [data-slot="aui_composer-shell"] {
+  --composer-bg: transparent;
+  background: transparent;
+}
+
+/* Popup / embed compact Thread: one row until a newline. Empty and one-line
+   typed share 1lh — do not shorten :placeholder-shown vs typed. */
+.digichat-launcher [data-slot="aui_composer-shell"][data-layout="compact"] {
+  --composer-padding: var(--trace-space-2);
+  gap: 0;
+  padding: var(--trace-space-2) var(--trace-space-3);
+}
+
+.digichat-launcher [data-slot="aui_composer-shell"][data-layout="compact"] .aui-composer-main {
+  align-items: center;
+  gap: var(--trace-space-2);
+}
+
+.digichat-launcher [data-slot="aui_composer-shell"][data-layout="compact"] .aui-composer-input {
+  display: block;
+  box-sizing: border-box;
+  field-sizing: content;
+  min-height: 1lh;
+  padding-block: 0;
+  line-height: var(--aui-line-height);
+  /* Grow to 5 rows, then scroll; long input wraps instead of running right. */
+  max-height: calc(var(--aui-input-rows) * var(--aui-line-height));
+  overflow-x: hidden;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+.digichat-launcher [data-slot="aui_composer-shell"][data-layout="compact"] .aui-composer-input:placeholder-shown {
+  field-sizing: fixed;
+  height: 1lh;
+  min-height: 1lh;
+  max-height: 1lh;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.digichat-thread [data-slot="dot-matrix"] {
+  color: currentColor;
+  vertical-align: -0.15em;
+}
+
+.digichat-thread :is(
+  .aui-composer-send,
+  .aui-composer-cancel,
+  .aui-composer-add-attachment,
+  .digichat-action
+) {
+  cursor: pointer;
+  animation: none;
+}
+
+.digichat-thread .aui-composer-add-attachment,
+.digichat-thread [data-slot="aui_composer-add-attachment"] {
+  color: var(--ink-mute);
+  caret-color: transparent;
+  animation: none;
+}
+
+.digichat-thread [data-slot="aui_composer-shell"]:focus-within .aui-composer-add-attachment,
+.digichat-thread [data-slot="aui_composer-shell"]:focus-within [data-slot="aui_composer-add-attachment"] {
+  color: var(--ink-mute);
+}
+
+.digichat-thread .aui-composer-add-attachment:hover,
+.digichat-thread .aui-composer-add-attachment:active,
+.digichat-thread [data-slot="aui_composer-add-attachment"]:hover,
+.digichat-thread [data-slot="aui_composer-add-attachment"]:active {
+  color: var(--ink);
+}
+
+.digichat-thread .chat-msg-marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--aui-marker-w);
+}
+
+.digichat-thread .chat-md-copy {
+  display: inline-flex;
+  min-height: var(--aui-copy-hit);
+  min-width: var(--aui-copy-hit);
+  align-items: center;
+  justify-content: center;
+}
+
+.digichat-thread__viewport {
+  scrollbar-width: thin;
+}
+
+/* Keep the top-anchored (trailing) user message off the top edge. The library
+   pins the anchor's border-box top to the viewport top, so padding shows as a
+   gap there. DENSITY: the padding is the message-gap token and the same amount
+   is taken back as margin, so in flow the turn sits exactly one message gap
+   below the previous answer (no extra spacer), and when pinned the previous
+   message ends exactly at the viewport top. */
+.digichat-thread__viewport [data-aui-top-anchor-user] {
+  padding-top: var(--density-gap-4, 0.75rem);
+  margin-top: calc(-1 * var(--density-gap-4, 0.75rem));
+}
+
+.digichat-thread-list {
+  --accent: var(--accent-digichat, #e2708a);
+  --term-bg: #08090b;
+  --term-ink: #e7eaec;
+  --term-hair: #2a2e33;
+  --term-fill: #101317;
+  --term-mute: #7e858b;
+  --hair: rgba(255, 255, 255, 0.09);
+  background: var(--term-bg);
+  color: var(--term-ink);
+  font-family: var(--font-geist-mono, var(--font-mono), ui-monospace, monospace);
+}
+
+:root[data-theme="light"] .digichat-thread-list,
+.light .digichat-thread-list {
+  --term-bg: #f1f0eb;
+  --term-ink: #1a1c1e;
+  --term-hair: #d4d1c8;
+  --term-fill: #e8e6df;
+  --term-mute: #6b7177;
+  --hair: rgba(12, 12, 10, 0.12);
+}
+
+/* assistant-ui puts `data-active` / `aria-current` on the item Root, not on the
+   Trigger that carries `__item`, so match the parent too. The open chat gets a
+   ▸ marker and an accent wash that reads on a transparent sidebar. */
+.digichat-thread-list__item::before {
+  content: "▸";
+  display: inline-block;
+  width: 1.1em;
+  color: transparent;
+}
+.digichat-thread-list__item[data-active],
+.digichat-thread-list__item[aria-current="true"],
+.digichat-thread-list [data-active] > .digichat-thread-list__item,
+.digichat-thread-list [aria-current="true"] > .digichat-thread-list__item {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  color: var(--term-ink);
+}
+.digichat-thread-list__item[data-active]::before,
+.digichat-thread-list__item[aria-current="true"]::before,
+.digichat-thread-list [data-active] > .digichat-thread-list__item::before,
+.digichat-thread-list [aria-current="true"] > .digichat-thread-list__item::before {
+  color: var(--accent);
+}
+
+.digichat-gate,
+[data-thread-skin="digichat"] .dc-paywall,
+[data-thread-skin="digichat"] .dc-gate-card {
+  border: 1px solid var(--term-hair, var(--border));
+  border-radius: 0;
+  background: var(--term-fill, var(--card));
+  color: var(--term-ink, var(--card-foreground));
+  font-family: var(--font-geist-mono, var(--font-mono), ui-monospace, monospace);
+  box-shadow: none;
+}
+
+[data-thread-skin="digichat"][data-chrome-mode="embed"] .digichat-thread {
+  --thread-max-width: 100%;
+  max-width: none;
+}
+
+/* Hairline attachment chips — same grammar as the gallery `/chatbot` chips. */
+.digichat-thread .aui-attachment-chip {
+  display: inline-flex;
+  max-width: var(--aui-chip-max-w);
+  align-items: center;
+  gap: var(--aui-chip-gap);
+  padding: var(--aui-chip-pad);
+  border: 1px solid var(--hair);
+  background: transparent;
+  font-family: var(--font-geist-mono, var(--font-mono), ui-monospace, monospace);
+  font-size: var(--aui-chip-fs);
+  line-height: 1.3;
+  color: var(--ink-soft);
+}
+
+.digichat-thread .aui-attachment-chip-hit {
+  display: inline-flex;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+.digichat-thread .aui-attachment-chip-hit:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.digichat-thread .aui-attachment-chip-name {
+  color: var(--ink-soft);
+}
+
+.digichat-thread .aui-attachment-chip-type::before {
+  content: "· ";
+  color: var(--ink-mute);
+}
+
+.digichat-thread .aui-attachment-chip-type {
+  color: var(--ink-mute);
+}
+
+.digichat-thread .aui-attachment-chip-remove {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--ink-mute);
+  cursor: pointer;
+  font: inherit;
+}
+
+.digichat-thread .aui-attachment-chip-remove:hover {
+  color: var(--ink);
+}
+
+.digichat-attach-viewer {
+  /* own tokens: the viewer is fixed-position and may mount outside the thread */
+  --aui-viewer-pad: 1.25rem;
+  --aui-viewer-w: 36rem;
+  --aui-viewer-h: 36rem;
+  --aui-viewer-head-gap: 0.75rem;
+  --aui-viewer-head-pad: 0.45rem 0.7rem;
+  --aui-viewer-title-fs: 0.72rem;
+  --aui-viewer-meta-fs: 0.66rem;
+  --aui-viewer-frame-pad: 0.7rem;
+  --aui-viewer-frame-min-h: 12rem;
+  --aui-viewer-body-fs: 0.72rem;
+  position: fixed;
+  inset: 0;
+  z-index: 110;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--bg, #0a0e0c) 55%, transparent);
+  padding: var(--aui-viewer-pad);
+}
+
+.digichat-attach-viewer__panel {
+  display: flex;
+  max-height: min(80dvh, var(--aui-viewer-h));
+  width: min(var(--aui-viewer-w), 100%);
+  flex-direction: column;
+  border: 1px solid var(--hair, rgba(255, 255, 255, 0.09));
+  background: var(--term-bg, #08090b);
+  color: var(--term-ink, #e7eaec);
+  font-family: var(--font-geist-mono, var(--font-mono), ui-monospace, monospace);
+}
+
+.digichat-attach-viewer__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--aui-viewer-head-gap);
+  border-bottom: 1px solid var(--hair, rgba(255, 255, 255, 0.09));
+  padding: var(--aui-viewer-head-pad);
+}
+
+.digichat-attach-viewer__title {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--aui-viewer-title-fs);
+  font-weight: 400;
+  color: var(--ink-soft, #9aa0a6);
+}
+
+.digichat-attach-viewer__close {
+  border: 0;
+  background: transparent;
+  color: var(--ink-mute, #6b7177);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--aui-viewer-meta-fs);
+}
+
+.digichat-attach-viewer__close:hover,
+.digichat-attach-viewer__close:focus-visible {
+  color: var(--accent, #e2708a);
+}
+
+.digichat-attach-viewer__frame,
+.digichat-attach-viewer__pre {
+  min-height: var(--aui-viewer-frame-min-h);
+  flex: 1;
+  margin: 0;
+  border: 0;
+  background: var(--term-fill, #101317);
+  color: var(--term-ink, #e7eaec);
+  padding: var(--aui-viewer-frame-pad);
+  font-size: var(--aui-viewer-body-fs);
+  line-height: 1.45;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .digichat-thread .chat-cursor {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+/* Portaled menus leave .digichat-thread. The gallery sheet owns the portaled
+   menu skin (reference chatbot.css); chat-aui.css keeps only the rules it has
+   no twin for: the unwrapped-mount code-header hover, catalog-skin popover
+   items, tooltip/dialog accent tokens, and the hidden tooltip arrows (#3818). */
+
+/* Belt and braces: the scope marker now matches on every mount (the Thread
+   declares `data-thread-skin="digichat"`), so chatbot.css's fence-copy hover
+   applies too — this keeps the flattened header identical for any mount that
+   somehow renders `.digichat-thread` without the marker. */
+.digichat-thread .aui-code-header-root button:hover,
+.digichat-thread .aui-code-header-root button:focus-visible {
+  background: transparent;
+  background-color: transparent;
+  color: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-trigger-popover [data-slot="composer-trigger-popover-item"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-trigger-popover [role="option"],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-composer-trigger-popover [role="option"] {
+  background: transparent;
+  color: var(--ink-mute, #6b7177);
+}
+
+[data-thread-skin="digichat"] [data-slot="tooltip-content"],
+[data-thread-skin="digichat"] .aui-action-bar-more-content,
+[data-thread-skin="digichat"] [data-slot="dialog-content"],
+.digichat-launcher [data-slot="tooltip-content"] {
+  --accent: var(--ink);
+  --ring: var(--ink);
+  background: var(--bg);
+  color: var(--ink);
+}
+
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="tooltip-content"] svg,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="tooltip-content"] [class*="arrow"],
+.digichat-launcher [data-slot="tooltip-content"] svg,
+.digichat-launcher [data-slot="tooltip-content"] [class*="arrow"] {
+  display: none;
+}
+
+/* Tool chain: same rhythm on website / dashboard Thread as /chatbot.
+   One gap, on the stack: the row sets never carry their own margins. */
+.digichat-thread [data-slot="aui_tool-chain"],
+.digichat-thread [data-slot="tool-group-content"] > div,
+.digichat-launcher [data-slot="aui_tool-chain"],
+.digichat-launcher [data-slot="tool-group-content"] > div {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-gap-1, 0.125rem);
+}
+
+/* No margin-bottom here: the assistant message content is the flex stack
+   that spaces the chain against the answer below it. */
+
+.digichat-thread [data-slot="tool-fallback-root"],
+.digichat-launcher [data-slot="tool-fallback-root"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--trace-header-gap, 0.25rem);
+}
+
+.digichat-thread [data-slot="tool-fallback-content"] > div,
+.digichat-launcher [data-slot="tool-fallback-content"] > div {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-top: 0;
+  padding: 0;
+  border: 1px solid var(--hair);
+}
+
+.digichat-thread [data-slot="tool-fallback-args"],
+.digichat-thread [data-slot="tool-fallback-result"],
+.digichat-thread [data-slot="tool-fallback-error"],
+.digichat-launcher [data-slot="tool-fallback-args"],
+.digichat-launcher [data-slot="tool-fallback-result"],
+.digichat-launcher [data-slot="tool-fallback-error"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--trace-header-gap, 0.25rem);
+  padding-block: calc(var(--density-pad, 0rem) + var(--density-gap-1, 0.125rem));
+  padding-inline: calc(var(--density-pad, 0rem) + var(--density-gap-2, 0.5rem));
+}
+
+.digichat-thread [data-slot="tool-fallback-result"],
+.digichat-thread [data-slot="tool-fallback-error"],
+.digichat-launcher [data-slot="tool-fallback-result"],
+.digichat-launcher [data-slot="tool-fallback-error"] {
+  border-top: 1px solid var(--hair);
+}
+
+.digichat-thread .aui-tool-fallback-args-value,
+.digichat-thread .aui-tool-fallback-result-content,
+.digichat-launcher .aui-tool-fallback-args-value,
+.digichat-launcher .aui-tool-fallback-result-content,
+.digichat-thread [data-slot="tool-fallback-dump"],
+.digichat-launcher [data-slot="tool-fallback-dump"] {
+  margin: 0;
+  /* DIG-4459: JSON views and error details sit in an 18rem scroll area (no
+     expand button); only the legacy dump keeps the short cap. */
+  max-height: none;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+.digichat-thread [data-slot="aui_thread-viewport"],
+.digichat-launcher [data-slot="aui_thread-viewport"] {
+  scrollbar-gutter: stable;
+}
+
+.digichat-thread [data-slot="reasoning-trigger"],
+.digichat-thread [data-slot="tool-fallback-trigger"],
+.digichat-launcher [data-slot="reasoning-trigger"],
+.digichat-launcher [data-slot="tool-fallback-trigger"] {
+  width: 100%;
+  align-items: center;
+  transform: none;
+}
+
+.digichat-thread [data-slot="reasoning-trigger"]:active,
+.digichat-thread [data-slot="tool-fallback-trigger"]:active,
+.digichat-launcher [data-slot="reasoning-trigger"]:active,
+.digichat-launcher [data-slot="tool-fallback-trigger"]:active {
+  transform: none;
+}
+
+.digichat-thread [data-slot="reasoning-trigger-icon"],
+.digichat-launcher [data-slot="reasoning-trigger-icon"] {
+  display: inline-flex;
+  width: var(--aui-trace-icon);
+  height: var(--aui-trace-icon);
+}
+
+.digichat-thread [data-slot="reasoning-trigger-label"],
+.digichat-thread [data-slot="tool-fallback-trigger-label"],
+.digichat-launcher [data-slot="reasoning-trigger-label"],
+.digichat-launcher [data-slot="tool-fallback-trigger-label"] {
+  /* No grow: the disclosure arrow belongs right next to the label, not at
+     the far edge of the row. */
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* One disclosure caret for every trace row. Right when closed; a quarter
+   turn down when THAT row is open. The rotate is on the cube svg
+   (`dot-matrix-grid`) only, never the wrapper, the trigger, or the label.
+   The caret
+   is a direct child of its trigger, so the open rule starts at that trigger:
+   an open chain (`data-open` on the Base UI root) must not spin the closed
+   rows inside it.
+   The low-specificity base turns the caret in every skin (stock and
+   gallery threads outside the DigiChat scopes too); the scoped rules below
+   and in chat-digichat.css win wherever they apply. */
+:where([data-slot="disclosure-chevron"]) [data-slot="dot-matrix-grid"] {
+  transform-origin: 50% 50%;
+  transition: transform 150ms ease;
+}
+
+:where([aria-expanded="true"]) > [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"],
+:where([data-panel-open]) > [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"],
+:where([data-state="open"]) > [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"] {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-slot="disclosure-chevron"]) [data-slot="dot-matrix-grid"] {
+    transition: none;
+  }
+}
+
+.digichat-thread [data-slot="disclosure-chevron"],
+.digichat-launcher [data-slot="disclosure-chevron"] {
+  display: inline-flex;
+  position: relative;
+  /* Width stays literal: disclosure-chevron.source.test.ts pins the string. */
+  width: 0.55rem;
+  height: 0.55rem;
+  flex: 0 0 0.55rem;
+  align-items: center;
+  justify-content: center;
+  transform: none;
+  animation: none;
+}
+
+.digichat-thread [data-slot="disclosure-chevron"] [data-slot="dot-matrix"],
+.digichat-launcher [data-slot="disclosure-chevron"] [data-slot="dot-matrix"] {
+  width: var(--aui-chevron-size);
+  height: var(--aui-chevron-size);
+  max-width: var(--aui-chevron-size);
+  max-height: var(--aui-chevron-size);
+  transform: none;
+  animation: none;
+}
+
+.digichat-thread [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"],
+.digichat-launcher [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  transform: rotate(0deg);
+  transform-origin: 50% 50%;
+  transition: transform 150ms ease;
+  animation: none;
+}
+
+.digichat-thread [aria-expanded="true"] > [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"],
+.digichat-thread [data-panel-open] > [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"],
+.digichat-thread [data-state="open"] > [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"],
+.digichat-launcher [aria-expanded="true"] > [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"],
+.digichat-launcher [data-panel-open] > [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"],
+.digichat-launcher [data-state="open"] > [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"] {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .digichat-thread [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"],
+  .digichat-launcher [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"] {
+    transition: none;
+  }
+}
+
+/* The disclosure animates at the upstream duration (200ms): switching it off
+   made the chain snap shut between two tool calls. */
+
+.digichat-thread [data-slot="reasoning-content"],
+.digichat-thread [data-slot="tool-fallback-content"],
+.digichat-thread [data-slot="tool-fallback-content"] > div,
+.digichat-thread [data-slot="reasoning-text"],
+.digichat-launcher [data-slot="reasoning-content"],
+.digichat-launcher [data-slot="tool-fallback-content"],
+.digichat-launcher [data-slot="tool-fallback-content"] > div,
+.digichat-launcher [data-slot="reasoning-text"] {
+  animation: none;
+  transition: none;
+}
+
+/* Grouped tool-call disclosure: match the reasoning trigger rhythm. */
+.digichat-thread [data-slot="aui_work-chain"],
+.digichat-launcher [data-slot="aui_work-chain"] {
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+}
+
+.digichat-thread [data-slot="aui_work-chain-trigger"],
+.digichat-launcher [data-slot="aui_work-chain-trigger"] {
+  display: flex;
+  width: fit-content;
+}
+
+.digichat-thread [data-slot="aui_work-chain-content"],
+.digichat-launcher [data-slot="aui_work-chain-content"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--trace-group-gap, 0.5rem);
+  padding-left: var(--trace-space-2, 0.25rem);
+  /* Air between the Worked title and the first row. One gap for every sibling. */
+  padding-top: var(--trace-title-gap, 0.625rem);
+}
+
+/* A folded chain keeps its panel mounted with [hidden]; the flex display above
+   must not override it, or the collapsed chain reserves its padding and its
+   triggers stay in the tab order. */
+.digichat-thread [data-slot="aui_work-chain-content"][hidden],
+.digichat-launcher [data-slot="aui_work-chain-content"][hidden] {
+  display: none;
+}
+
+.digichat-thread [data-slot="reasoning-root"],
+.digichat-thread [data-slot="tool-group-root"],
+.digichat-launcher [data-slot="reasoning-root"],
+.digichat-launcher [data-slot="tool-group-root"] {
+  margin: 0;
+}
+
+.digichat-thread [data-slot="tool-group-trigger"],
+.digichat-launcher [data-slot="tool-group-trigger"] {
+  width: 100%;
+  align-items: center;
+  transform: none;
+}
+
+.digichat-thread [data-slot="tool-group-trigger"]:active,
+.digichat-launcher [data-slot="tool-group-trigger"]:active {
+  transform: none;
+}
+
+.digichat-thread [data-slot="tool-group-trigger-label"],
+.digichat-launcher [data-slot="tool-group-trigger-label"] {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.digichat-thread [data-slot="tool-group-trigger-loader"],
+.digichat-launcher [data-slot="tool-group-trigger-loader"] {
+  display: inline-flex;
+  width: var(--aui-loader-size);
+  height: var(--aui-loader-size);
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.digichat-thread [data-slot="tool-group-trigger-loader"] [data-slot="dot-matrix"],
+.digichat-launcher [data-slot="tool-group-trigger-loader"] [data-slot="dot-matrix"],
+.digichat-thread [data-slot="tool-group-trigger-loader"] [data-slot="dot-matrix-grid"],
+.digichat-launcher [data-slot="tool-group-trigger-loader"] [data-slot="dot-matrix-grid"] {
+  width: var(--aui-loader-size);
+  height: var(--aui-loader-size);
+  max-width: var(--aui-loader-size);
+  max-height: var(--aui-loader-size);
+}
+
+/* Same as the reasoning and tool rows: keep the upstream 200ms collapse. */
+
+.digichat-thread [data-slot="tool-group-content"],
+.digichat-thread [data-slot="tool-group-content"] > div,
+.digichat-launcher [data-slot="tool-group-content"],
+.digichat-launcher [data-slot="tool-group-content"] > div {
+  animation: none;
+  transition: none;
+}
+
+.digichat-thread [data-slot="tool-group-root"][data-variant="ghost"] [data-slot="tool-group-content"] > div,
+.digichat-launcher [data-slot="tool-group-root"][data-variant="ghost"] [data-slot="tool-group-content"] > div {
+  margin-top: var(--trace-header-gap, 0.25rem);
+}
+
+/* Chain of thought runs (and the tool groups nested inside them) take no
+   margin of their own: `aui_assistant-message-content` is the flex stack that
+   spaces every block, and the chain content spaces the rows inside it. */
+.digichat-thread [data-slot="aui_chain-of-thought"],
+.digichat-launcher [data-slot="aui_chain-of-thought"] {
+  margin: 0;
+}
+
+/* The pre-response loader sits flush in the message. The chain that replaces
+   it must not pick up this rhythm, or the marker jumps down on the handoff. */
+.digichat-thread [data-slot="aui_assistant-message-content"] > [data-slot="aui_chain-of-thought"]:first-child,
+.digichat-launcher [data-slot="aui_assistant-message-content"] > [data-slot="aui_chain-of-thought"]:first-child {
+  margin-top: 0;
+}
+
+/* Portaled layers (tooltips, menus, dialogs) render under <body>, outside the
+   .digichat-thread / .digichat-launcher subtree that declares the palette
+   vars. Mirror the palette on <html> so --bg / --ink / --hair resolve in
+   portals and those layers get an opaque surface instead of a transparent
+   one (the tooltip-content background comes from chatbot.css).
+   Site chat (/chat app, top-level /chat/occ) is excluded: it keeps
+   packages/design/tokens.css, and a portal there should use that same source. */
+html:has([data-thread-skin="digichat"]):not([data-site-theme="1"]):not(:has([data-chrome-mode="app"])) {
+  --bg: #0a0e0c;
+  --ink: #eceef0;
+  --hair: rgba(255, 255, 255, 0.09);
+}
+
+html[data-theme="light"]:has([data-thread-skin="digichat"]):not([data-site-theme="1"]):not(:has([data-chrome-mode="app"])),
+html.light:has([data-thread-skin="digichat"]):not([data-site-theme="1"]):not(:has([data-chrome-mode="app"])) {
+  --bg: #f4f3ee;
+  --ink: #1a1c1e;
+  --hair: rgba(12, 12, 10, 0.12);
+}
+
+/* Portaled tooltips follow the chat's mono stack instead of the page body font. */
+html:has([data-thread-skin="digichat"]) [data-slot="tooltip-content"] {
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
+.digichat-thread [data-slot="tool-fallback-dump"],
+.digichat-launcher [data-slot="tool-fallback-dump"] {
+  max-height: var(--aui-dump-max-h);
+}
+
+.digichat-thread .aui-json-view,
+.digichat-launcher .aui-json-view,
+.digichat-thread .aui-chat-notice-detail,
+.digichat-launcher .aui-chat-notice-detail {
+  overflow: auto;
+  max-height: var(--aui-json-max-h);
+}
+
+/* Chat notices (DIG-4459), faded red (Chris, 21 Oct): danger pulled 28%
+   toward the muted ink, a 5% wash and a 24% hairline; the title mixes 20%
+   ink so it stays WCAG AA on the wash in dark and light. */
+.digichat-thread .aui-chat-notice[data-tone="error"],
+.digichat-launcher .aui-chat-notice[data-tone="error"] {
+  --notice-danger: color-mix(in srgb, var(--danger) 72%, var(--ink-mute));
+  border: 1px solid color-mix(in srgb, var(--notice-danger) 24%, transparent);
+  background: color-mix(in srgb, var(--notice-danger) 5%, transparent);
+  color: var(--ink-soft);
+}
+
+.digichat-thread .aui-chat-notice[data-tone="error"] .aui-chat-notice-title,
+.digichat-launcher .aui-chat-notice[data-tone="error"] .aui-chat-notice-title {
+  color: color-mix(in srgb, var(--notice-danger) 80%, var(--ink));
+}
+
+/* ── Example-question rows: thin overlay-style scrollbar ─────────────────
+   Shared by every skin through <SuggestionScrollRow>. The bar is 4px and
+   invisible at rest; it shows while the row is hovered, focused or being
+   scrolled. The row sets data-hover / data-focus / data-scrolling itself
+   because Chrome does not repaint the thumb on :hover alone. Blink/WebKit use
+   the ::-webkit-scrollbar rules; Gecko gets the standard pair, guarded so
+   Chrome keeps honouring the 4px webkit size. */
+.aui-suggestion-scroll::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  background: transparent;
+}
+
+.aui-suggestion-scroll::-webkit-scrollbar-track,
+.aui-suggestion-scroll::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.aui-suggestion-scroll::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.aui-suggestion-scroll::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: transparent;
+}
+
+.aui-suggestion-scroll:hover::-webkit-scrollbar-thumb,
+.aui-suggestion-scroll[data-hover]::-webkit-scrollbar-thumb,
+.aui-suggestion-scroll[data-focus]::-webkit-scrollbar-thumb,
+.aui-suggestion-scroll[data-scrolling]::-webkit-scrollbar-thumb {
+  background: color-mix(in oklab, var(--muted-foreground, #8a8a8a) 45%, transparent);
+}
+
+@supports (-moz-appearance: none) {
+  .aui-suggestion-scroll {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+
+  .aui-suggestion-scroll:hover,
+  .aui-suggestion-scroll:focus-within,
+  .aui-suggestion-scroll[data-scrolling] {
+    scrollbar-color: color-mix(in oklab, var(--muted-foreground, #8a8a8a) 45%, transparent)
+      transparent;
+  }
+}
+
+/* Send arrow on the filled accent button. Light mode: white whenever white
+   clears 3:1 against the accent (WCAG 1.4.11, icons), i.e. OKLab L below
+   ~0.669; a lighter accent keeps a dark arrow. Dark mode keeps the theme's
+   --on-accent. Tracks whatever --accent the palette or tenant sets. */
+.aui-composer-send {
+  --on-accent-icon: var(--on-accent);
+}
+:root[data-theme="light"] .aui-composer-send {
+  --on-accent-icon: oklch(from var(--accent) clamp(0, (0.669 - l) * 1000, 1) 0 0);
+}
+.aui-composer-send.text-on-accent {
+  color: var(--on-accent-icon);
+}