@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/chat-digichat.css

@@ -0,0 +1,2531 @@
+/* digichat chat grammar — first-party Thread + product skin (WS1/F1).
+   Moved into @digithings-ai/ui from the reference gallery's chatbot sheet
+   so the package owns its theme; the reference gallery now imports this
+   sheet back. Grammar is shared; the .aui-theme-stage specimen frame
+   (height/border) is gallery-only. */
+
+/* Chatbot gallery + product `chrome.skin: digichat`.
+   Grammar is shared. The specimen frame (height/border) is gallery-only. */
+
+.aui-theme-stage {
+  height: min(72vh, 46rem);
+  margin-top: 1.3rem;
+  overflow: hidden;
+  border: 1px solid var(--hair);
+  background: var(--bg);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) {
+  --accent: var(--ink);
+  --on-accent: var(--bg);
+  --radius: 0;
+  --composer-radius: 0;
+  /* Sizing tokens (chat-digichat). Shared by every rule below and by the
+     gallery stage and the product skin alike. */
+  --dc-body-fs: 0.82rem;          /* welcome copy + suggestion labels */
+  --dc-md-fs: 0.88rem;            /* rendered markdown body */
+  --dc-msg-col: 1.25rem;          /* marker / suggestion glyph column */
+  --dc-gap-1: 0.55rem;
+  --dc-gap-2: 0.45rem;
+  --dc-text-sm: 0.7rem;           /* trace-row voice */
+  --dc-text-xs: 0.68rem;          /* trace detail voice */
+  --dc-row-pad-y: 0.2rem;
+  --dc-composer-fs: 0.88rem;
+  --dc-composer-line: 1.375rem;   /* one text row; also the caret row pitch */
+  --dc-composer-pad-y: 0.2rem;
+  --dc-composer-rows: 5;
+  --dc-composer-pad: 0.25rem 0.375rem;  /* compact shell: 4px 6px */
+  --dc-composer-gap: 0.25rem;
+  --dc-composer-inset-x: 0.625rem;
+  --dc-chevron: 0.55rem;
+  --dc-icon: 0.75rem;
+  --dc-icon-lg: 0.85rem;
+  --dc-marker-w: 1.25rem;
+  --dc-marker-offset: 0.2rem;
+  --dc-viewport-pad-x: 0.9rem;
+  --dc-viewport-pad-top: 0.75rem;
+  --dc-group-gap: 0.85rem;
+  --dc-group-mb: 1rem;
+  --dc-chip-max-w: 16rem;
+  --dc-chip-gap: 0.35rem;
+  --dc-chip-pad: 0.15rem 0.45rem;
+  --dc-chip-fs: 0.66rem;
+  --dc-reasoning-max-h: 12rem;
+  --dc-dump-max-h: 8.5rem;
+  --dc-launcher-composer-max-h: 4.5rem;
+  --dc-json-max-h: 18rem;
+  --dc-sidebar-w: 11.5rem;
+  --dc-list-pad-x: 0.7rem;
+  --dc-label-fs: 0.62rem;
+  --dc-chrome-fs: 0.66rem;
+  --dc-item-fs: 0.78rem;
+}
+
+.aui-theme-stage > * {
+  height: 100%;
+}
+
+/* Registry Thread uses rounded-full / rounded-xl on chips, bubbles, send.
+   Flatten inside the stage only — do not fork those class names yet. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-root,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-root *,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .digichat-thread,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .digichat-thread * {
+  border-radius: 0;
+}
+
+/* Increment 2 — welcome slot. Official `components.Welcome` in the footer,
+   immediately above the composer. Left-aligned title + body. Optional
+   example list — not chips, not a top-of-thread empty state. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-welcome-root {
+  align-items: flex-start;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-welcome-message-inner {
+  font-family: var(--font-mono);
+  font-weight: 400;
+  color: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-welcome-copy {
+  margin: 0.7rem 0 0;
+  /* Full thread-column width: the copy reads as paragraphs at hero scale
+     instead of a narrow column hugging the left edge. */
+  max-width: none;
+  font-family: var(--font-mono);
+  font-size: var(--dc-body-fs);
+  line-height: 1.45;
+  color: var(--ink-soft);
+}
+
+/* The not-yet-typed remainder of a line holds its space (the typewriter
+   reveals in place, nothing reflows), painted invisible. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-welcome-ghost {
+  visibility: hidden;
+}
+
+/* Welcome body typewriter caret: same blink grammar as the composer block
+   caret, tinted with the tenant accent. Typing is client-only and degrades
+   to the full copy under prefers-reduced-motion; the infinite blink still
+   needs an explicit animation: none under reduce (contract test). */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-welcome-caret {
+  display: inline-block;
+  width: 0.55em;
+  height: 1.05em;
+  margin-left: 0.08em;
+  /* Net-zero width: the caret overlays the next hidden glyph instead of
+     pushing text, so appearing/retiring never rewraps the line. */
+  margin-right: -0.63em;
+  vertical-align: text-bottom;
+  background: var(--tenant-accent, var(--accent, var(--ink)));
+  animation: aui-caret-blink 1.06s steps(1) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-welcome-caret {
+    animation: none;
+  }
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-welcome-suggestions {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: 0.1rem;
+  padding: 0;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-welcome-suggestion {
+  display: grid;
+  grid-template-columns: var(--dc-msg-col) minmax(0, 1fr);
+  align-items: center;
+  gap: var(--dc-gap-1);
+  width: 100%;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: var(--dc-row-pad-y) 0;
+  font-family: var(--font-mono);
+  font-size: var(--dc-body-fs);
+  font-weight: 400;
+  line-height: 1.45;
+  color: var(--ink-soft);
+  white-space: normal;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-welcome-suggestion:hover,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-welcome-suggestion:focus-visible {
+  background: transparent;
+  color: var(--ink);
+  outline: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-empty {
+  padding: 0;
+}
+
+/* Increment 3 — composer. Official ComposerPrimitive in Thread; restyle here.
+   Placeholder comes from chrome.placeholder. Radius already 0 on .aui-root *. */
+
+/* Footer docks at the bottom. Empty-state copy lives inside it, above the
+   composer, so typing cannot shove the welcome around. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-viewport-footer {
+  margin-top: auto;
+  gap: var(--dc-gap-1);
+  padding-bottom: var(--dc-gap-2);
+}
+
+/* The stock thread column uses px-4 / gap-y-6 / mb-14. Pull that air in so
+   turns, the welcome, and the composer share one inset. */
+/* The stock thread column uses px-4 / gap-y-6 / mb-14. Pull that air in so
+   turns, the welcome, and the composer share one inset, and let density own
+   the turn-to-turn gap instead of the utility. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_thread-viewport"] > div {
+  padding-inline: var(--dc-viewport-pad-x);
+  padding-top: var(--dc-viewport-pad-top);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_message-group"] {
+  gap: var(--density-gap-4, 0.75rem);
+  margin-bottom: var(--density-gap-3, 0.625rem);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_thread-viewport"] {
+  overflow-anchor: none;
+  scrollbar-gutter: stable;
+  overflow-x: hidden;
+}
+
+/* Scrollbars: square, and slimmer with depth. The thread is the outer
+   surface (10px), menus and the composer sit inside it (6px), and the
+   tool-call dumps are the deepest scroll (4px). Styling ::-webkit-scrollbar
+   also makes the thumb square on macOS, whose overlay bar is rounded.
+   The square webkit sizing belongs to the "always" mode: a styled
+   ::-webkit-scrollbar is a classic bar that reserves its own track and
+   never becomes an overlay, so "auto" mode must leave the native bar
+   untouched. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_thread-viewport"] {
+  scrollbar-width: auto;
+  scrollbar-color: color-mix(in oklab, var(--ink-mute) 38%, transparent) transparent;
+}
+
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="aui_thread-viewport"]::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+/* The track and the corner are styled with the square bar: in Blink a
+   styled ::-webkit-scrollbar pseudo turns the native overlay into a classic
+   bar that reserves its own track, so it belongs to the always mode. */
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="aui_thread-viewport"]::-webkit-scrollbar-track,
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="aui_thread-viewport"]::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-input,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .dc-composer-menu-body {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklab, var(--ink-mute) 30%, transparent) transparent;
+  scrollbar-gutter: stable;
+}
+
+[data-thread-skin="digichat"][data-scrollbars="always"] .aui-composer-input::-webkit-scrollbar,
+[data-thread-skin="digichat"][data-scrollbars="always"] .dc-composer-menu-body::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-dump"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-text"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-group-content"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-tool-fallback-args-value,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-tool-fallback-result-content {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklab, var(--ink-mute) 24%, transparent) transparent;
+}
+
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="tool-fallback-dump"]::-webkit-scrollbar,
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="reasoning-text"]::-webkit-scrollbar,
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="tool-group-content"]::-webkit-scrollbar,
+[data-thread-skin="digichat"][data-scrollbars="always"] .aui-tool-fallback-args-value::-webkit-scrollbar,
+[data-thread-skin="digichat"][data-scrollbars="always"] .aui-tool-fallback-result-content::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="aui_thread-viewport"]::-webkit-scrollbar-thumb,
+[data-thread-skin="digichat"][data-scrollbars="always"] .aui-composer-input::-webkit-scrollbar-thumb,
+[data-thread-skin="digichat"][data-scrollbars="always"] .dc-composer-menu-body::-webkit-scrollbar-thumb,
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="tool-fallback-dump"]::-webkit-scrollbar-thumb,
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="reasoning-text"]::-webkit-scrollbar-thumb,
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="tool-group-content"]::-webkit-scrollbar-thumb,
+[data-thread-skin="digichat"][data-scrollbars="always"] .aui-tool-fallback-args-value::-webkit-scrollbar-thumb,
+[data-thread-skin="digichat"][data-scrollbars="always"] .aui-tool-fallback-result-content::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: color-mix(in oklab, var(--ink-mute) 32%, transparent);
+}
+
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="aui_thread-viewport"]::-webkit-scrollbar-thumb:hover,
+[data-thread-skin="digichat"][data-scrollbars="always"] .aui-composer-input::-webkit-scrollbar-thumb:hover,
+[data-thread-skin="digichat"][data-scrollbars="always"] .dc-composer-menu-body::-webkit-scrollbar-thumb:hover,
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="tool-fallback-dump"]::-webkit-scrollbar-thumb:hover,
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="reasoning-text"]::-webkit-scrollbar-thumb:hover,
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="tool-group-content"]::-webkit-scrollbar-thumb:hover,
+[data-thread-skin="digichat"][data-scrollbars="always"] .aui-tool-fallback-args-value::-webkit-scrollbar-thumb:hover,
+[data-thread-skin="digichat"][data-scrollbars="always"] .aui-tool-fallback-result-content::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in oklab, var(--ink-mute) 48%, transparent);
+}
+
+/* The menu keeps its bar in place: 6px track always shown, and the stable
+   gutter reserves that width so the thumb never sits over the row text. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .dc-composer-menu-body {
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
+}
+
+/* data-scrollbars="auto" — the native overlay bar, shown only while the
+   surface is scrolling or the pointer is over it, and never reserving a
+   gutter. "always" keeps every rule above: 6px/10px/4px square bars in a
+   stable gutter. The square ::-webkit-scrollbar sizing is scoped to
+   "always" as well: a styled webkit scrollbar is a classic bar that
+   reserves its own track and never becomes an overlay, so in "auto" mode
+   no ::-webkit-scrollbar pseudo is styled at all.
+   The mode attribute rides on the thread root, next to data-thread-skin, so
+   every mode rule is keyed on that one element and names the mode value.
+   A mode rule keyed on an ancestor that only carries the skin (the app
+   shell sets data-thread-skin without the mode) would reach a thread in
+   "auto" mode and take the native bar away from it.
+   The custom overlay bars are switched off here so a surface never draws
+   the native bar and the component bar together. */
+[data-thread-skin="digichat"][data-scrollbars="auto"]
+  [data-slot="aui_thread-viewport"] {
+  overflow-y: auto;
+  scrollbar-gutter: auto;
+  scrollbar-width: thin;
+}
+
+[data-thread-skin="digichat"][data-scrollbars="auto"]
+  .aui-composer-input,
+[data-thread-skin="digichat"][data-scrollbars="auto"]
+  .dc-composer-menu-body {
+  overflow-y: auto;
+  scrollbar-gutter: auto;
+  scrollbar-width: thin;
+}
+
+[data-thread-skin="digichat"][data-scrollbars="auto"]
+  [data-slot="tool-fallback-dump"],
+[data-thread-skin="digichat"][data-scrollbars="auto"]
+  [data-slot="reasoning-text"],
+[data-thread-skin="digichat"][data-scrollbars="auto"]
+  [data-slot="tool-group-content"],
+[data-thread-skin="digichat"][data-scrollbars="auto"]
+  .aui-tool-fallback-args-value,
+[data-thread-skin="digichat"][data-scrollbars="auto"]
+  .aui-tool-fallback-result-content {
+  overflow-y: auto;
+  scrollbar-gutter: auto;
+  scrollbar-width: thin;
+}
+
+/* The palette list sits inside the composer root, inside the thread root, so
+   it is matched by ancestry from the carrier. The document-level html:has()
+   form would reach the palette of a thread in the other mode on a page that
+   carries both. */
+[data-thread-skin="digichat"][data-scrollbars="auto"]
+  [data-slot="composer-trigger-popover-items"] {
+  overflow-y: auto;
+  scrollbar-gutter: auto;
+  scrollbar-width: thin;
+}
+
+/* One bar per surface: the React overlay bars are inert under "auto". */
+[data-thread-skin="digichat"][data-scrollbars="auto"] .aui-overlay-scroll,
+[data-thread-skin="digichat"][data-scrollbars="auto"] .dc-composer-menu-scroll {
+  display: none;
+}
+
+[data-slot="composer-trigger-popover-items"] {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in oklab, var(--ink-mute) 30%, transparent) transparent;
+  scrollbar-gutter: stable;
+}
+
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="composer-trigger-popover-items"]::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="composer-trigger-popover-items"]::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background: color-mix(in oklab, var(--ink-mute) 32%, transparent);
+}
+
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="composer-trigger-popover-items"]::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in oklab, var(--ink-mute) 48%, transparent);
+}
+
+/* Always mode paints a square overlay bar; the native bar must not draw a
+   second, rounded capsule underneath it (Safari ignores the webkit shape).
+   The suppression is keyed on the thread root, the one element that carries
+   the mode, and it names the mode value: the auto rules switch the component
+   bars off, so an unscoped suppression here leaves those surfaces with no bar
+   at all, and a suppression keyed on an ancestor that only carries the skin
+   takes the native bar away from a thread that is in auto mode. */
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="aui_thread-viewport"],
+[data-thread-skin="digichat"][data-scrollbars="always"] .dc-composer-menu-body,
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="reasoning-text"],
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="composer-trigger-popover-items"] {
+  scrollbar-width: none;
+}
+
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="aui_thread-viewport"]::-webkit-scrollbar,
+[data-thread-skin="digichat"][data-scrollbars="always"] .dc-composer-menu-body::-webkit-scrollbar,
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="reasoning-text"]::-webkit-scrollbar,
+[data-thread-skin="digichat"][data-scrollbars="always"] [data-slot="composer-trigger-popover-items"]::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.aui-overlay-scroll {
+  position: absolute;
+  top: 0;
+  right: 2px;
+  bottom: 0;
+  z-index: 5;
+  pointer-events: none;
+}
+
+.aui-overlay-thumb {
+  position: absolute;
+  right: 0;
+  left: 0;
+  border-radius: 0;
+  background: color-mix(in oklab, var(--ink-mute) 32%, transparent);
+  pointer-events: auto;
+}
+
+.aui-overlay-thumb:hover {
+  background: color-mix(in oklab, var(--ink-mute) 48%, transparent);
+}
+
+.dc-composer-menu-scroll {
+  position: absolute;
+  top: 0;
+  right: 2px;
+  bottom: 0;
+  width: 6px;
+  pointer-events: none;
+}
+
+.dc-composer-menu-thumb {
+  position: absolute;
+  right: 0;
+  width: 6px;
+  border-radius: 0;
+  background: color-mix(in oklab, var(--ink-mute) 32%, transparent);
+  pointer-events: auto;
+}
+
+.dc-composer-menu-thumb:hover {
+  background: color-mix(in oklab, var(--ink-mute) 48%, transparent);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-input {
+  font-family: var(--font-mono);
+  font-size: var(--dc-composer-fs);
+  line-height: var(--dc-composer-line);
+  padding-block: var(--dc-composer-pad-y);
+  min-height: calc(var(--dc-composer-line) + (2 * var(--dc-composer-pad-y)));
+  color: var(--ink);
+  field-sizing: content;
+  /* Long input wraps and the box grows to 5 rows, then scrolls (the old
+     overflow:hidden clipped everything past max-height with no scroll). */
+  max-height: calc(
+    var(--dc-composer-rows) * var(--dc-composer-line) + (2 * var(--dc-composer-pad-y))
+  );
+  overflow-x: hidden;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  /* Wordmark cursor: a bar at text height, not a full-line block (the
+     block read as a too-tall column in the single-row composer). */
+  caret-color: transparent;
+}
+
+/* Painted block caret on every engine: the native caret goes transparent
+   and the overlay span tracks it, so the block is text-height and centred
+   rather than the full line box. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-block-caret {
+  display: none;
+}
+
+/* Composer footer: plain text, no rule and no boxes. Shows the selected
+   model, its provider and the last turn's context size. The model is the
+   only control and opens the settings menu. */
+/* The text box is a complete box; the info row sits below it with the same
+   inline padding as the input text, not tucked under a missing edge. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_composer-toolbar"] {
+  margin-top: 0.4rem;
+  padding-inline: var(--dc-composer-inset-x);
+}
+/* Send is as pale as an unlit context cell until there is text; enabled
+   brightens, hover brightens again. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-send:disabled {
+  color: color-mix(in oklab, var(--ink-mute) 22%, transparent);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-send:not(:disabled) {
+  color: var(--ink-soft);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-send:not(:disabled):hover,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-send:not(:disabled):focus-visible {
+  color: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-meter {
+  display: inline-flex;
+  align-items: center;
+  gap: 1px;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-meter-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-meter {
+  outline: none;
+}
+
+/* Hover/focus legend, opening upward from the bar. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-card {
+  display: none;
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 8px);
+  z-index: 30;
+  width: max-content;
+  min-width: 10.5rem;
+  max-width: 16rem;
+  padding: 0.45rem 0.55rem;
+  box-sizing: border-box;
+  background: var(--bg);
+  border: 1px solid var(--hair);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 35%);
+  font-family: var(--font-mono);
+  font-size: 0.64rem;
+  line-height: 1.55;
+  color: var(--ink-soft);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-meter-wrap:hover .aui-context-card,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-meter-wrap:focus-within .aui-context-card {
+  display: block;
+}
+
+/* Breakdown bar: the 5×5 grid stretched to a row, segmented by type. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-card-bar {
+  display: flex;
+  gap: 1px;
+  margin: 0.3rem 0 0.35rem;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-bar-cell {
+  width: 4px;
+  height: 6px;
+  background: color-mix(in oklab, var(--ink-mute) 14%, transparent);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-bar-cell.is-system,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-swatch.is-system {
+  background: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-bar-cell.is-tools,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-swatch.is-tools {
+  background: color-mix(in oklab, var(--ink) 60%, transparent);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-bar-cell.is-user,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-swatch.is-user {
+  background: color-mix(in oklab, var(--ink) 35%, transparent);
+}
+
+/* Usage meter: the gate's turn budget in the same cube bar. It fills with
+   the used fraction — empty for a fresh visitor, full for a spent budget —
+   so it reads the way the context bar reads. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-usage-meter .aui-context-bar-cell.is-usage {
+  background: var(--ink);
+}
+
+/* The fill scale both bars share: amber past half spent, orange past four
+   fifths, red past nine tenths. Scoped to the lit cells so an unlit grid
+   stays quiet, and to the bar itself so the legend swatches keep the
+   colours that explain the context split. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"])
+  .aui-context-meter-wrap.is-warn
+  .aui-context-meter
+  > .aui-context-bar-cell:is(.is-system, .is-tools, .is-user, .is-usage) {
+  background: var(--warn);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"])
+  .aui-context-meter-wrap.is-hot
+  .aui-context-meter
+  > .aui-context-bar-cell:is(.is-system, .is-tools, .is-user, .is-usage) {
+  background: color-mix(in oklab, var(--warn) 45%, var(--danger));
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"])
+  .aui-context-meter-wrap.is-critical
+  .aui-context-meter
+  > .aui-context-bar-cell:is(.is-system, .is-tools, .is-user, .is-usage) {
+  background: var(--danger);
+}
+
+/* The number in the card takes the tone of the bar it describes. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"])
+  .aui-context-meter-wrap.is-critical
+  .aui-context-card-total
+  > span:last-child {
+  color: var(--danger);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-legend {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-swatch {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-card-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  white-space: nowrap;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-card-row > span {
+  min-width: 0;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-context-card-row > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ink);
+}
+
+/* The branding line takes the same tone as an unlit context cell. */
+.aui-skin-credit {
+  color: color-mix(in oklab, var(--ink-mute) 22%, transparent);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-toolbar-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.32rem;
+  font-family: var(--font-mono);
+  font-size: var(--dc-text-xs, 0.68rem);
+  line-height: 1.25;
+  color: color-mix(in oklab, var(--ink-soft) 72%, transparent);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-meta {
+  color: inherit;
+  white-space: nowrap;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-meta-action {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-meta-action:hover,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-meta-action:focus-visible {
+  text-decoration: none;
+  outline: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-meta-sep {
+  color: color-mix(in oklab, var(--ink-soft) 55%, transparent);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-meta-spacer {
+  flex: 1 1 auto;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-context {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Painted block caret on every engine: a text-height block centred in the
+   line (the native block is the full 22px line and reads too tall). The
+   native caret is transparent; block-caret.tsx tracks and paints this one. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-input {
+  caret-color: transparent !important;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-block-caret {
+  --caret-pad-left: 0.375rem;
+  display: none;
+  position: absolute;
+  width: 1ch;
+  height: 1em;
+  left: calc(var(--caret-col, 0) * 1ch + var(--caret-pad-left));
+  top: calc(var(--caret-row, 0) * var(--dc-composer-line) + var(--caret-pad-top, 0px));
+  background: var(--ink);
+  font-family: var(--font-mono);
+  font-size: var(--dc-composer-fs);
+  pointer-events: none;
+  animation: aui-caret-blink 1.06s steps(1) infinite;
+}
+
+/* Paint the fake caret only while the composer input is actually focused;
+   an unfocused textbox must not look like it has a caret. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"])
+  .aui-composer-input:focus
+  + .aui-block-caret,
+:is(.aui-theme-stage, [data-thread-skin="digichat"])
+  .aui-composer-input-wrap:focus-within
+  .aui-block-caret {
+  display: block;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"])
+  [data-layout="expanded"]
+  .aui-block-caret {
+  --caret-pad-left: var(--dc-composer-inset-x);
+  --caret-pad-top: var(--dc-composer-pad-y);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-block-caret {
+    animation: none;
+  }
+}
+
+@keyframes aui-caret-blink {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+
+/* Placeholder may not wrap (that inflated empty height). Do not lock a
+   shorter height than the typed one-line box — :placeholder-shown
+   height: 1.375rem !important was the first-keystroke jump. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-input:placeholder-shown,
+.digichat-launcher .aui-composer-input:placeholder-shown {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.digichat-launcher .aui-composer-input {
+  line-height: var(--dc-composer-line, 1.375rem);
+  padding-block: var(--dc-composer-pad-y, 0.2rem);
+  min-height: calc(
+    var(--dc-composer-line, 1.375rem) + (2 * var(--dc-composer-pad-y, 0.2rem))
+  );
+  field-sizing: content;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.digichat-launcher .aui-composer-input:placeholder-shown::placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-input::placeholder {
+  color: var(--ink-mute);
+}
+
+/* Compact / popup: one text row until a newline. Override registry min-h-7,
+   leading-7, gap-2, and --composer-padding: 8px. Empty and one-line typed
+   share min-height: 1lh — do not shorten :placeholder-shown. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_composer-shell"][data-layout="compact"],
+.digichat-launcher [data-slot="aui_composer-shell"][data-layout="compact"] {
+  --composer-padding: 0.25rem;
+  gap: 0;
+  padding: var(--dc-composer-pad, 0.25rem 0.375rem);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_composer-shell"][data-layout="compact"] .aui-composer-main,
+.digichat-launcher [data-slot="aui_composer-shell"][data-layout="compact"] .aui-composer-main {
+  align-items: center;
+  gap: var(--dc-composer-gap, 0.25rem);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_composer-shell"][data-layout="compact"] .aui-composer-input,
+.digichat-launcher [data-slot="aui_composer-shell"][data-layout="compact"] .aui-composer-input {
+  box-sizing: border-box;
+  field-sizing: content;
+  min-height: 1lh;
+  padding-block: 0;
+  line-height: var(--dc-composer-line, 1.375rem);
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_composer-shell"][data-layout="compact"] .aui-composer-input:placeholder-shown,
+.digichat-launcher [data-slot="aui_composer-shell"][data-layout="compact"] .aui-composer-input:placeholder-shown {
+  /* Same 1lh as a typed one-line. field-sizing: content + nowrap fills
+     max-height (4.5rem in the launcher) while empty. */
+  field-sizing: fixed;
+  height: 1lh;
+  min-height: 1lh;
+  max-height: 1lh;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* web-theme.css paints :focus-visible as a 2px offset box. Do not. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-input:focus,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-input:focus-visible,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-edit-composer-input:focus,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-edit-composer-input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-edit-composer-root {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-edit-composer-input {
+  font-family: var(--font-mono);
+  font-size: var(--dc-composer-fs);
+  color: var(--ink);
+  caret-color: var(--ink);
+  caret-shape: block;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_composer-shell"] {
+  border-color: var(--hair);
+  --composer-bg: transparent;
+  background: transparent;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_composer-shell"]:focus-within {
+  border-color: var(--hair);
+}
+
+/* Cube chrome: no fill. Disabled cubes stay mute; enabled a bit brighter;
+   hover / focus only brightens the cubes — never a white keycap.
+   Composer dropzone is cursor-text; clickable cubes must not inherit it. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :is(
+  .aui-thread-welcome-suggestion,
+  .aui-composer-send,
+  .aui-composer-cancel,
+  .aui-composer-add-attachment,
+  .aui-composer-dictate,
+  .aui-thread-scroll-to-bottom,
+  .aui-assistant-action-bar-root button,
+  .aui-branch-picker-root button,
+  .aui-user-action-bar-root button,
+  .aui-code-header-root button,
+  .aui-attachment-chip-remove,
+  .aui-chrome-thread-list-new,
+  .aui-chrome-thread-list-item
+),
+.digichat-launcher :is(
+  .aui-thread-welcome-suggestion,
+  .aui-composer-send,
+  .aui-composer-cancel,
+  .aui-composer-add-attachment,
+  .aui-composer-dictate,
+  .aui-thread-scroll-to-bottom,
+  .aui-assistant-action-bar-root button,
+  .aui-branch-picker-root button,
+  .aui-user-action-bar-root button,
+  .aui-code-header-root button,
+  .aui-attachment-chip-remove,
+  .digichat-launcher__close,
+  .digichat-launcher__new
+) {
+  cursor: pointer;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :is(
+  .aui-composer-send,
+  .aui-composer-cancel,
+  .aui-composer-add-attachment,
+  .aui-composer-dictate,
+  .aui-thread-scroll-to-bottom,
+  .aui-assistant-action-bar-root button,
+  .aui-branch-picker-root button,
+  .aui-user-action-bar-root button,
+  .aui-code-header-root button,
+  .aui-attachment-chip-remove
+),
+.digichat-launcher :is(
+  .aui-composer-send,
+  .aui-composer-cancel,
+  .aui-composer-add-attachment,
+  .aui-composer-dictate,
+  .aui-thread-scroll-to-bottom,
+  .aui-assistant-action-bar-root button,
+  .aui-branch-picker-root button,
+  .aui-user-action-bar-root button,
+  .aui-code-header-root button,
+  .aui-attachment-chip-remove,
+  .digichat-launcher__close,
+  .digichat-launcher__new
+) {
+  background: transparent;
+  background-color: transparent;
+  box-shadow: none;
+  color: var(--ink-mute);
+  animation: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :is(
+  .aui-composer-send,
+  .aui-composer-cancel,
+  .aui-composer-dictate,
+  .aui-thread-scroll-to-bottom,
+  .aui-assistant-action-bar-root button,
+  .aui-branch-picker-root button,
+  .aui-user-action-bar-root button,
+  .aui-code-header-root button,
+  .aui-attachment-chip-remove
+):hover,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :is(
+  .aui-composer-send,
+  .aui-composer-cancel,
+  .aui-composer-dictate,
+  .aui-thread-scroll-to-bottom,
+  .aui-assistant-action-bar-root button,
+  .aui-branch-picker-root button,
+  .aui-user-action-bar-root button,
+  .aui-code-header-root button,
+  .aui-attachment-chip-remove
+):focus-visible,
+.digichat-launcher :is(
+  .aui-composer-send,
+  .aui-composer-cancel,
+  .aui-composer-dictate,
+  .aui-thread-scroll-to-bottom,
+  .aui-assistant-action-bar-root button,
+  .aui-branch-picker-root button,
+  .aui-user-action-bar-root button,
+  .aui-code-header-root button,
+  .aui-attachment-chip-remove
+):hover,
+.digichat-launcher :is(
+  .aui-composer-send,
+  .aui-composer-cancel,
+  .aui-composer-dictate,
+  .aui-thread-scroll-to-bottom,
+  .aui-assistant-action-bar-root button,
+  .aui-branch-picker-root button,
+  .aui-user-action-bar-root button,
+  .aui-code-header-root button,
+  .aui-attachment-chip-remove
+):focus-visible {
+  background: transparent;
+  background-color: transparent;
+  box-shadow: none;
+  color: var(--ink);
+}
+
+/* Chrome cubes inherit the button color. The global `[data-slot="dot-matrix"]
+   { color: var(--ink) }` otherwise paints attach with the same --ink as
+   `caret-color` / `caret-shape: block` on `.aui-composer-input`, so the
+   blinking block caret and the plus cubes pulse together. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :is(
+  .aui-composer-send,
+  .aui-composer-cancel,
+  .aui-composer-add-attachment,
+  .aui-composer-dictate,
+  .aui-thread-scroll-to-bottom,
+  .aui-assistant-action-bar-root button,
+  .aui-branch-picker-root button,
+  .aui-user-action-bar-root button,
+  .aui-code-header-root button,
+  .aui-attachment-chip-remove
+) [data-slot="dot-matrix"],
+.digichat-launcher :is(
+  .aui-composer-send,
+  .aui-composer-cancel,
+  .aui-composer-add-attachment,
+  .aui-composer-dictate,
+  .aui-thread-scroll-to-bottom,
+  .aui-assistant-action-bar-root button,
+  .aui-branch-picker-root button,
+  .aui-user-action-bar-root button,
+  .aui-code-header-root button,
+  .aui-attachment-chip-remove,
+  .digichat-launcher__close
+) [data-slot="dot-matrix"] {
+  color: inherit;
+  animation: none;
+}
+
+/* Attach stays mute unless hovered or pressed — not :focus-within / caret. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-add-attachment,
+.digichat-launcher .aui-composer-add-attachment {
+  position: relative;
+  z-index: 1;
+  color: var(--ink-mute);
+  caret-color: transparent;
+  animation: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-add-attachment:hover,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-add-attachment:active,
+.digichat-launcher .aui-composer-add-attachment:hover,
+.digichat-launcher .aui-composer-add-attachment:active {
+  background: transparent;
+  color: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_composer-shell"]:focus-within .aui-composer-add-attachment,
+.digichat-launcher [data-slot="aui_composer-shell"]:focus-within .aui-composer-add-attachment {
+  color: var(--ink-mute);
+  animation: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-input,
+.digichat-launcher .aui-composer-input {
+  cursor: text;
+  /* Vertical scroll once the box hits its 5-row max-height. */
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-send {
+  border: 0;
+  opacity: 1;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-send:disabled {
+  color: color-mix(in oklab, var(--ink-mute) 22%, transparent);
+  opacity: 1;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-send:not(:disabled) {
+  background: transparent;
+  color: var(--ink-soft);
+  border-color: transparent;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-send:not(:disabled):hover,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-send:not(:disabled):focus-visible {
+  background: transparent;
+  color: var(--ink);
+}
+
+.aui-theme-stage[data-composer-layout="compact"] {
+  height: min(52vh, 34rem);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-cancel {
+  background: transparent;
+  color: var(--ink-mute);
+}
+
+/* Increment 4 — transcript. ChatMessage grammar: both left. User keeps
+   the `>` cube; assistant has no role mark. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-msg {
+  align-items: flex-start;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-msg-marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dc-marker-w);
+  margin-top: var(--dc-marker-offset);
+  color: var(--ink);
+  user-select: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-welcome-suggestion .aui-msg-marker {
+  margin-top: 0.12rem;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-welcome-suggestion-mark,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-followup-suggestion-mark {
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-thread-followup-suggestion {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-user-message-content {
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+  line-height: var(--density-leading, 1.6);
+  letter-spacing: var(--density-tracking, 0em);
+  color: var(--ink);
+  white-space: pre-wrap;
+  background: transparent;
+  padding: 0;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-assistant-message-content,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-assistant-message-content .aui-md {
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+  line-height: var(--density-leading, 1.6);
+  letter-spacing: var(--density-tracking, 0em);
+  color: var(--ink-soft);
+  /* Outside markers / fence frames paint in padding. A y-scroll viewport
+     computes overflow-x to auto and would clip hanging ink. */
+  overflow: visible;
+}
+
+/* DENSITY: the assistant turn is one flex stack. Reasoning, tool groups and the
+   answer are spaced by this gap — no element in here carries a stack margin. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-assistant-message-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--density-gap-2, 0.5rem);
+}
+
+/* The answer's own outer margins would land on top of that gap, so the stack
+   owns the edges and markdown only spaces its internal blocks. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-assistant-message-content .aui-md > :first-child {
+  margin-top: 0;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-assistant-message-content .aui-md > :last-child {
+  margin-bottom: 0;
+}
+
+/* Markdown stream cursor: block bar, same as the composer caret. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :where(.aui-md[data-status="running"]):empty::after,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :where(.aui-md[data-status="running"])
+  > :where(:not(ol):not(ul):not(pre)):last-child::after,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :where(.aui-md[data-status="running"]) > pre:last-child code::after,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :where(.aui-md[data-status="running"])
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child:not(:has(* > li)))::after,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :where(.aui-md[data-status="running"])
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child)
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child:not(:has(* > li)))::after,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :where(.aui-md[data-status="running"])
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child)
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child)
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child)::after {
+  --aui-content: none;
+  content: "";
+  display: inline-block;
+  width: 0.48em;
+  height: 1em;
+  margin-left: 0.12em;
+  margin-right: 0;
+  vertical-align: -0.12em;
+  background: var(--ink);
+  font-family: inherit;
+  animation: aui-msg-caret-blink 1.1s steps(1) infinite;
+}
+
+@keyframes aui-msg-caret-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :where(.aui-md[data-status="running"]):empty::after,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :where(.aui-md[data-status="running"])
+  > :where(:not(ol):not(ul):not(pre)):last-child::after,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :where(.aui-md[data-status="running"]) > pre:last-child code::after,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :where(.aui-md[data-status="running"])
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child:not(:has(* > li)))::after,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :where(.aui-md[data-status="running"])
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child)
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child:not(:has(* > li)))::after,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) :where(.aui-md[data-status="running"])
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child)
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child)
+  > :where(:is(ol, ul):last-child)
+  > :where(li:last-child)::after {
+  animation: none;
+}
+}
+
+/* Increment 6 — cube matrix. Snap on/off; color by data-state. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"], .cube-matrix-legend) [data-slot="dot-matrix"] {
+  color: var(--ink);
+  vertical-align: -0.15em;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"], .cube-matrix-legend) [data-slot="dot-matrix"][data-state="idle"] {
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"], .cube-matrix-legend) [data-slot="dot-matrix"][data-state="warning"] {
+  color: var(--warn);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"], .cube-matrix-legend) [data-slot="dot-matrix"][data-state="error"] {
+  color: var(--danger);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"], .cube-matrix-legend) [data-slot="dot-matrix"][data-state="success"] {
+  color: var(--up);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"], .cube-matrix-legend) [data-slot="dot-matrix"] {
+  position: relative;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"], .cube-matrix-legend) [data-slot="dot-matrix-grid"] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: visible;
+}
+
+/* Unlit cells are omitted from the SVG. Only lit cubes paint — no grid. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"], .cube-matrix-legend) [data-slot="dot-matrix-dot"] {
+  stroke: none;
+}
+
+/* Status glyphs only. The disclosure caret is nested, and stays 0.55rem. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_work-status-marker"] [data-slot="dot-matrix"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-trigger"] > [data-slot="dot-matrix"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-message-error-root [data-slot="dot-matrix"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-trigger"] [data-slot="dot-matrix"] {
+  /* 12px marker: loading-row.source.test.ts pins these two declarations. */
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-attachment-chip [data-slot="dot-matrix"] {
+  width: var(--dc-icon-lg);
+  height: var(--dc-icon-lg);
+}
+
+/* ── The one loading row (#4459) ───────────────────────────────────────────
+   The pre-response loader and the Working / Worked header are the same row
+   (`.aui-work-status` + `WorkStatusLead`): a 12px marker, mono 0.7rem,
+   `--ink-mute`, flush left, 0.45rem to the label. The handoff changes the
+   words in `aui_work-status-label`; the marker does not move. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_assistant-message-indicator"].aui-work-status,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_work-chain-trigger"].aui-work-status {
+  display: flex;
+  box-sizing: border-box;
+  width: fit-content;
+  max-width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  /* gap + font-size stay literal: loading-row.source.test.ts and
+     trace-spacing.source.test.ts pin this shared row box. */
+  gap: 0.45rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  appearance: none;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: var(--ink-mute);
+  text-align: start;
+  min-height: var(--dc-icon);
+}
+
+/* The pre-response row must not be shoved down when the work chain mounts.
+   The assistant content is a flex column with a 0.5rem gap, and the chain's
+   part comes before the indicator in the message stream: the moment the chain
+   mounts it becomes the first flow child and the gap alone pushes the marker
+   down by 8px — the visible jump at the handoff, before any tool row settles.
+   Pin the row to the content's top edge and keep the content's height while
+   the row is on its own, so the chain grows underneath the marker and the
+   swap moves nothing (#4459). Scoped to the digichat skin: the base skin
+   renders the indicator without the `hasContent` guard, so overlaying it
+   there would hide a live chain trigger. */
+[data-thread-skin="digichat"]
+  [data-slot="aui_assistant-message-content"]:has(
+    > [data-slot="aui_assistant-message-indicator"]
+  ) {
+  position: relative;
+  min-height: 0.75rem;
+}
+
+[data-thread-skin="digichat"]
+  [data-slot="aui_assistant-message-content"]
+  > [data-slot="aui_assistant-message-indicator"] {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  margin: 0;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_work-status-marker"] {
+  display: inline-flex;
+  width: var(--dc-icon);
+  height: var(--dc-icon);
+  flex: 0 0 var(--dc-icon);
+  align-items: center;
+  justify-content: center;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_work-status-marker"] [data-slot="dot-matrix"] {
+  width: var(--dc-icon);
+  height: var(--dc-icon);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_work-status-label"] {
+  flex: 0 1 auto;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  font-weight: 400;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-message-error-root {
+  align-items: flex-start;
+  gap: var(--dc-gap-2);
+  /* DIG-4459: boxed and red-tinted like other chat products; the shared
+     .aui-chat-notice rules below carry the box. */
+  color: var(--ink-soft);
+  font-family: var(--font-mono);
+  font-size: var(--dc-text-sm, 0.7rem);
+  line-height: 1.35;
+  letter-spacing: 0.02em;
+}
+
+/* The row is muted like the rest of the trace; the red cross and the retry
+   action carry the failure. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-message-error-root .aui-message-error-message {
+  color: inherit;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-message-error-root [data-slot="dot-matrix"] {
+  margin-top: 0.12rem;
+}
+
+.cube-matrix-legend-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+}
+
+.cube-matrix-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.25rem 1.5rem;
+  margin: 1.3rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cube-matrix-legend-groups .cube-matrix-legend:first-child {
+  margin-top: 1.3rem;
+}
+
+.cube-matrix-legend-groups .cube-matrix-legend + .cube-matrix-legend {
+  margin-top: 0;
+  padding-top: 1.1rem;
+  border-top: 1px solid var(--hair);
+}
+
+.cube-matrix-legend-item {
+  display: flex;
+  width: 4.75rem;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.cube-matrix-legend [data-slot="dot-matrix"] {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.cube-matrix-legend-caption {
+  font-family: var(--font-mono);
+  font-size: var(--dc-text-xs, 0.68rem);
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-assistant-action-bar-root button,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-user-action-bar-root button,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-branch-picker-root button {
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-assistant-action-bar-root button:hover,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-user-action-bar-root button:hover,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-branch-picker-root button:hover,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-branch-picker-root button:focus-visible,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-assistant-action-bar-root button[data-state="open"] {
+  background: transparent;
+  color: var(--ink);
+}
+
+/* Portaled More menu sits outside .aui-root. html:has() so catalog skins
+   keep their own menus when product imports this sheet. */
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-action-bar-more-content {
+  border-radius: 0;
+  border: 1px solid var(--hair);
+  background: var(--bg);
+  color: var(--ink-mute);
+  box-shadow: none;
+}
+
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-composer-trigger-popover {
+  border-radius: 0;
+  border: 1px solid var(--hair);
+  background: var(--bg);
+  color: var(--ink);
+  box-shadow: none;
+}
+
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-action-bar-more-item {
+  border-radius: 0;
+  font-family: var(--font-mono);
+  font-size: var(--dc-text-xs, 0.68rem);
+  line-height: 1.3;
+  color: var(--ink-mute);
+  background: transparent;
+}
+
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-action-bar-more-item:hover,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-action-bar-more-item:focus,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-action-bar-more-item:focus-visible,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-action-bar-more-item[data-highlighted],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-action-bar-more-item[data-state="open"] {
+  background: transparent;
+  background-color: transparent;
+  color: var(--ink);
+  outline: none;
+  box-shadow: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-trigger-popover,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-composer-trigger-popover {
+  border-radius: 0;
+  border: 1px solid var(--hair);
+  background: var(--bg);
+  color: var(--ink);
+  box-shadow: none;
+  font-family: var(--font-mono);
+}
+
+/* The highlighted row, in the slash palette and on every composer menu page
+   (data-cursor), is marked by one lighter wash mixed from the menu's own
+   colours, the same as the other skins (chat-skin-palette.css). --accent is
+   not used: brand accents repoint it to a saturated colour. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-trigger-popover [data-highlighted],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-composer-trigger-popover [data-highlighted],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .dc-composer-menu [data-cursor="true"],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .dc-composer-menu [data-cursor="true"] {
+  background: color-mix(in oklab, var(--ink) 9%, var(--bg));
+  color: var(--ink);
+  outline: none;
+}
+
+/* Selected row: a 3x3 cube diamond, the same grid motif as the context
+   meter, instead of the dropdown radio disc. */
+.aui-menu-mark {
+  display: grid;
+  grid-template-columns: repeat(3, 2px);
+  grid-auto-rows: 2px;
+  gap: 1px;
+}
+
+.aui-menu-mark-cell {
+  background: color-mix(in oklab, var(--ink-mute) 22%, transparent);
+}
+
+.aui-menu-mark-cell.is-on {
+  background: currentColor;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-embed-settings],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-embed-settings],
+[data-thread-skin="digichat"][data-embed-settings],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .dc-composer-menu {
+  border-radius: 0;
+  border-color: var(--hair);
+  background: var(--bg);
+  color: var(--ink);
+  box-shadow: none;
+  font-family: var(--font-mono);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+/* App chrome clears --bg on the thread and the footer so those surfaces sit
+   on the canvas. Both command lists are positioned inside that footer, so
+   var(--bg) is transparent and the welcome paints through every list, not
+   only /theme. --term-bg is the canvas colour and is not cleared. Gallery
+   and embed keep the var(--bg) rule above. */
+[data-stock-product][data-thread-skin="digichat"][data-chrome-mode="app"] .aui-composer-trigger-popover,
+[data-stock-product][data-thread-skin="digichat"][data-chrome-mode="app"] .dc-composer-menu {
+  background: var(--term-bg);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-embed-settings] h2,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-embed-settings] label,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-embed-settings] button,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-embed-settings] p {
+  font-family: var(--font-mono);
+  color: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-embed-settings] select {
+  border-radius: 0;
+  border-color: var(--hair);
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-mono);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-user-action-bar-slot {
+  width: 1.5rem;
+  min-height: 1.5rem;
+}
+/* Increment 5 — reasoning. Ghost disclosure, square caret, hairline rail.
+   The disclosure keeps the upstream 200ms collapse: switching it off made the
+   chain snap shut between two tool calls. */
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-trigger"] {
+  max-width: none;
+  /* The row hugs its content: a button is centred by default, which is what
+     put the title in the middle and the arrow at the far edge. */
+  width: fit-content;
+  text-align: left;
+  align-items: center;
+  gap: var(--dc-gap-2);
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: var(--dc-text-sm, 0.7rem);
+  letter-spacing: 0.02em;
+  color: var(--ink-mute);
+  text-transform: lowercase;
+  outline: none;
+  box-shadow: none;
+  transform: none;
+  transition: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-trigger"]:active,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-trigger"]:active {
+  transform: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-trigger"]:hover {
+  color: var(--ink-soft);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-trigger"]:focus,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-trigger"]:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-reasoning-trigger-icon {
+  display: inline-flex;
+  width: var(--dc-icon);
+  height: var(--dc-icon);
+  flex-shrink: 0;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-trigger"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-group-trigger"] {
+  /* The trace is one voice: the same mono, the same size, the same muted ink
+     on the chain header, the reasoning row, the tool-group row and the tool
+     rows. */
+  width: fit-content;
+  max-width: 100%;
+  text-align: left;
+  align-items: center;
+  gap: var(--dc-gap-2);
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: var(--dc-text-sm, 0.7rem);
+  letter-spacing: 0.02em;
+  color: var(--ink-mute);
+  text-transform: lowercase;
+  outline: none;
+  box-shadow: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-trigger-label"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-group-trigger-label"] {
+  flex: 0 1 auto;
+  min-width: 0;
+  background: none;
+  animation: none;
+  font-size: inherit;
+  font-weight: 400;
+  color: inherit;
+}
+
+/* Same caret on every trace disclosure. Closed points right. Open rotates
+   the cube svg only (`dot-matrix-grid`), and only when this row's trigger
+   is open. The wrapper and its screen-reader name stay put: a transform on
+   either turns the words. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="disclosure-chevron"] {
+  display: inline-flex;
+  position: relative;
+  /* Width/height stay literal: disclosure-chevron.source.test.ts pins them. */
+  width: 0.55rem;
+  height: 0.55rem;
+  flex: 0 0 0.55rem;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  transform: none;
+  animation: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="disclosure-chevron"] [data-slot="dot-matrix"] {
+  width: var(--dc-chevron);
+  height: var(--dc-chevron);
+  max-width: var(--dc-chevron);
+  max-height: var(--dc-chevron);
+  transform: none;
+  animation: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [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;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [aria-expanded="true"] > [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-panel-open] > [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-state="open"] > [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"] {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="disclosure-chevron"] [data-slot="dot-matrix-grid"] {
+    transition: none;
+  }
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-content"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-content"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-content"] > div,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-text"] {
+  animation: none;
+  transition: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-group-trigger"] {
+  gap: var(--dc-chip-gap);
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  letter-spacing: calc(var(--density-tracking-mono, 0.01em) + 0.01em);
+  color: var(--ink-mute);
+  text-transform: lowercase;
+  outline: none;
+  box-shadow: none;
+  transform: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-group-trigger"]:hover {
+  color: var(--ink-soft);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-group-trigger-loader"] {
+  display: inline-flex;
+  width: var(--dc-icon);
+  height: var(--dc-icon);
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-group-trigger-loader"] [data-slot="dot-matrix"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-group-trigger-loader"] [data-slot="dot-matrix-grid"] {
+  width: var(--dc-icon);
+  height: var(--dc-icon);
+  max-width: var(--dc-icon);
+  max-height: var(--dc-icon);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-group-trigger-label"] {
+  font-weight: 400;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-fade"] {
+  display: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-content"] {
+  font-size: 0.68rem;
+  line-height: var(--density-leading-tight, 1.4);
+  letter-spacing: var(--density-tracking-mono, 0.01em);
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-text"] {
+  max-height: 12rem;
+  /* DENSITY: the header/body relationship is one gap (header-gap alias), and
+     `padding-block` below is the only vertical padding the body gets. */
+  margin-top: var(--trace-header-gap, 0.25rem);
+  padding-block: var(--trace-body-pad, 0.125rem);
+  padding-inline: var(--trace-body-indent, 0.75rem) 0;
+  border-left: 1px solid var(--hair);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  line-height: var(--density-leading-tight, 1.4);
+  letter-spacing: var(--density-tracking-mono, 0.01em);
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-text"] .aui-md,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-text"] .aui-reasoning-text-content {
+  font-size: 0.68rem;
+  line-height: var(--density-leading-tight, 1.4);
+  letter-spacing: var(--density-tracking-mono, 0.01em);
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-text"] .aui-reasoning-text-content > * + * {
+  margin-top: var(--density-gap-1, 0.25rem);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-text"] .aui-reasoning-text-content > :first-child {
+  margin-top: 0;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="reasoning-text"] .aui-reasoning-text-content > :last-child {
+  margin-bottom: 0;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_work-chain-trigger"] {
+  /* Box metrics live on `.aui-work-status`, shared with the pre-response
+     loader. This only adds the header's own voice. */
+  text-transform: lowercase;
+  outline: none;
+  cursor: pointer;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_work-chain-trigger"]:hover {
+  color: var(--ink-soft);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-trigger"] {
+  align-items: center;
+  width: fit-content;
+  text-align: left;
+  gap: 0.45rem;
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  letter-spacing: calc(var(--density-tracking-mono, 0.01em) + 0.01em);
+  color: var(--ink-mute);
+  transform: none;
+  transition: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-trigger"]:hover {
+  color: var(--ink-soft);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-trigger-label"] {
+  flex: 0 1 auto;
+  min-width: 0;
+  font-weight: 400;
+  font-size: inherit;
+  padding-top: 0;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-duration"] {
+  font-family: var(--font-mono);
+  font-size: var(--dc-text-xs, 0.68rem);
+  color: var(--ink-mute);
+}
+
+/* The tool chain's flex rhythm lives once, in chat-aui.css. This sheet keeps
+   only the skin's own voice for the fallback body. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-content"] {
+  font-size: var(--dc-text-xs, 0.68rem);
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-result"],
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-error"] {
+  border-top: 1px solid var(--hair);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-tool-fallback-args-header,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-tool-fallback-result-header,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-tool-fallback-error-header {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--dc-text-xs, 0.68rem);
+  font-weight: 400;
+  letter-spacing: calc(var(--density-tracking-mono, 0.01em) + 0.03em);
+  text-transform: lowercase;
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-tool-fallback-args-value,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-tool-fallback-result-content,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-tool-fallback-error-reason,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-dump"] {
+  margin: 0;
+  background: transparent;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  line-height: var(--density-leading-tight, 1.4);
+  letter-spacing: var(--density-tracking-mono, 0.01em);
+  color: var(--ink-soft);
+  /* DIG-4459: arguments are never cut; long ones scroll inside an 18rem
+     area (no expand button). */
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-dump"] {
+  max-height: var(--dc-dump-max-h);
+}
+
+/* Increment 7 — markdown / code. Hairline frames, no card wash.
+   DENSITY: block rhythm reads the gap scale, so paragraph/list spacing scales
+   with the mode instead of pinning one rem value for every density. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-h1,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-h2,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-h3,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-h4,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-h5,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-h6 {
+  margin-top: var(--density-gap-2, 0.5rem);
+  margin-bottom: var(--density-gap-1, 0.25rem);
+  font-size: inherit;
+  font-weight: 500;
+  color: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-p {
+  margin-top: var(--density-gap-2, 0.5rem);
+  margin-bottom: var(--density-gap-2, 0.5rem);
+  line-height: var(--density-leading, 1.6);
+  letter-spacing: var(--density-tracking, 0em);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-li {
+  line-height: var(--density-leading, 1.6);
+  letter-spacing: var(--density-tracking, 0em);
+}
+
+/* One li gap, from the list's own stack — not from a `[&>li]:mt-1` utility. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-li + .aui-md-li {
+  margin-top: var(--density-gap-1, 0.25rem);
+}
+
+/* Tailwind preflight zeroes ul/ol padding. `ms-*` leaves outside markers in
+   the margin, which a scrollport + content-visibility paint containment clip
+   (ol digits gone, ul discs nicked). Keep markers in padding. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-ul,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-ol {
+  margin-block: var(--density-gap-2, 0.5rem);
+  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;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-ul {
+  list-style-type: disc;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-ol {
+  padding-inline-start: 2rem;
+  list-style-type: decimal;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-a {
+  color: var(--ink-soft);
+  text-decoration-color: var(--hair-2);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-a:hover {
+  color: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-blockquote {
+  margin: var(--density-gap-2, 0.5rem) 0;
+  padding: 0 0 0 0.85rem;
+  border: none;
+  border-left: 1px solid var(--hair);
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-strong {
+  font-weight: 500;
+  color: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-code-header-root {
+  margin-top: var(--density-gap-2, 0.5rem);
+  padding: 0.3rem 0.55rem;
+  border: 1px solid var(--hair);
+  border-bottom: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-code-header-language {
+  font-family: var(--font-mono);
+  font-size: var(--dc-text-xs, 0.68rem);
+  font-weight: 400;
+  letter-spacing: calc(var(--density-tracking-mono, 0.01em) + 0.05em);
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-code-header-root button,
+.digichat-launcher .aui-code-header-root button {
+  color: var(--ink-mute);
+}
+
+/* Fence copy is a cube, not a keycap — hover only brightens, no wash. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-code-header-root button:hover,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-code-header-root button:focus-visible,
+.digichat-launcher .aui-code-header-root button:hover,
+.digichat-launcher .aui-code-header-root button:focus-visible {
+  background: transparent;
+  background-color: transparent;
+  color: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-pre {
+  margin: 0;
+  padding: 0.55rem 0.65rem 0.65rem;
+  border: 1px solid var(--hair);
+  border-radius: 0;
+  background: transparent;
+  font-size: 0.78rem;
+  line-height: var(--density-leading-tight, 1.4);
+  letter-spacing: var(--density-tracking-mono, 0.01em);
+  color: var(--ink-soft);
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-inline-code {
+  padding: 0 0.2em;
+  border: 1px solid var(--hair);
+  border-radius: 0;
+  background: transparent;
+  font-size: 0.92em;
+  color: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-table-wrapper {
+  margin: var(--density-gap-2, 0.5rem) 0;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-th {
+  padding: var(--density-gap-1, 0.25rem) 0.7rem var(--density-gap-1, 0.25rem) 0;
+  border: none;
+  border-bottom: 1px solid var(--hair);
+  border-radius: 0;
+  background: transparent;
+  font-weight: 400;
+  font-size: 0.68rem;
+  letter-spacing: calc(var(--density-tracking-mono, 0.01em) + 0.03em);
+  text-transform: lowercase;
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-td {
+  padding: var(--density-gap-1, 0.25rem) 0.7rem var(--density-gap-1, 0.25rem) 0;
+  border: none;
+  border-bottom: 1px solid var(--hair);
+  line-height: var(--density-leading, 1.6);
+  color: var(--ink-soft);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-th:last-child,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-td:last-child {
+  padding-right: 0;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-tr:last-child .aui-md-td {
+  border-bottom: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-md-hr {
+  border-color: var(--hair);
+}
+
+/* Increment 9 — attachments. Filename chip, not a thumbnail tile. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-attachment-chip {
+  display: inline-flex;
+  max-width: var(--dc-chip-max-w);
+  align-items: center;
+  gap: var(--dc-chip-gap);
+  padding: var(--dc-chip-pad);
+  border: 1px solid var(--hair);
+  background: transparent;
+  font-family: var(--font-mono);
+  font-size: var(--dc-chip-fs);
+  line-height: 1.3;
+  color: var(--ink-soft);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-attachment-chip-hit {
+  display: inline-flex;
+  min-width: 0;
+  outline: none;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-attachment-chip-name {
+  color: var(--ink-soft);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-attachment-chip-type::before {
+  content: "· ";
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-attachment-chip-type {
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .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;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-attachment-chip-remove:hover {
+  color: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-attachment-root.is-error .aui-attachment-chip {
+  border-color: var(--danger);
+  color: var(--danger);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-add-attachment:hover,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-composer-add-attachment:active {
+  background: transparent;
+  color: var(--ink);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_composer-shell"][data-dragging="true"] {
+  border-style: dashed;
+  border-color: var(--hair);
+  background: transparent;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-user-message-attachments {
+  margin-bottom: 0.35rem;
+}
+
+/* Portaled image preview sits outside .aui-root. */
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-attachment-preview-dialog-content {
+  border-radius: 0;
+  border: 1px solid var(--hair);
+  background: var(--bg);
+  box-shadow: none;
+  padding: 0.55rem;
+}
+
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-attachment-preview-dialog-content [data-slot="dialog-close"] {
+  border-radius: 0;
+  background: transparent;
+  color: var(--ink-mute);
+  box-shadow: none;
+  opacity: 1;
+}
+
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-attachment-preview-dialog-content [data-slot="dialog-close"]:hover {
+  background: color-mix(in srgb, var(--ink) 8%, transparent);
+  color: var(--ink);
+}
+
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="dialog-overlay"] {
+  background: color-mix(in srgb, var(--ink) 28%, transparent);
+}
+
+/* Increment 10 — chrome. Desk list + contained launcher. */
+.aui-theme-stage.aui-chrome-desk {
+  height: min(72vh, 46rem);
+}
+
+.aui-chrome-desk-split {
+  display: grid;
+  grid-template-columns: var(--dc-sidebar-w, 11.5rem) minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+}
+
+.aui-chrome-thread-list {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  border-right: 1px solid var(--hair);
+  background: var(--bg);
+}
+
+.aui-chrome-thread-list-head {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--dc-gap-2, 0.45rem);
+  padding: var(--dc-gap-1, 0.55rem) var(--dc-list-pad-x, 0.7rem);
+  border-bottom: 1px solid var(--hair);
+}
+
+.aui-chrome-thread-list-label {
+  font-family: var(--font-mono);
+  font-size: var(--dc-label-fs, 0.62rem);
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+  color: var(--ink-mute);
+}
+
+.aui-chrome-thread-list-new {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-family: var(--font-mono);
+  font-size: var(--dc-chrome-fs, 0.66rem);
+  letter-spacing: 0.02em;
+  color: var(--ink-mute);
+  cursor: pointer;
+}
+
+.aui-chrome-thread-list-new:hover {
+  color: var(--ink);
+}
+
+.aui-chrome-thread-list-root {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+.aui-chrome-thread-list-row {
+  border-radius: 0;
+}
+
+.aui-chrome-thread-list-item {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  padding: 0.4rem var(--dc-list-pad-x, 0.7rem);
+  border: 0;
+  background: transparent;
+  font-family: var(--font-mono);
+  font-size: var(--dc-item-fs, 0.78rem);
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink);
+  cursor: pointer;
+}
+
+.aui-chrome-thread-list-item:hover {
+  background: color-mix(in srgb, var(--ink) 6%, transparent);
+}
+
+.aui-chrome-thread-list-item[data-active],
+.aui-chrome-thread-list-item[data-active="true"] {
+  background: color-mix(in srgb, var(--ink) 8%, transparent);
+}
+
+.aui-theme-stage.aui-chrome-launcher-stage {
+  position: relative;
+  height: min(72vh, 46rem);
+  overflow: hidden;
+}
+
+.aui-theme-stage.aui-chrome-launcher-stage > .digichat-launcher {
+  height: auto;
+}
+
+.aui-chrome-launcher-stage .digichat-launcher__trigger {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  background: var(--bg);
+}
+
+.aui-chrome-launcher-stage .digichat-launcher__trigger:hover,
+.aui-chrome-launcher-stage .digichat-launcher__trigger:focus-visible {
+  background: var(--bg);
+}
+
+.aui-chrome-launcher-stage .digichat-launcher__panel {
+  background: var(--bg);
+  line-height: 1.45;
+}
+
+.aui-chrome-launcher-stage .digichat-launcher__close svg {
+  stroke-linecap: square;
+}
+
+.aui-chrome-launcher-stage .digichat-launcher__body {
+  background: var(--bg);
+  line-height: 1.45;
+}
+
+.aui-chrome-launcher-stage .digichat-launcher__body .aui-root {
+  height: 100%;
+}
+
+.aui-chrome-launcher-stage .aui-composer-root {
+  flex: none;
+}
+
+.aui-chrome-launcher-stage .aui-composer-input {
+  max-height: var(--dc-launcher-composer-max-h, 4.5rem);
+}
+
+/* digichat popup only — dark canvas + ink, not a light shadcn popover. */
+.digichat-launcher,
+.digichat-launcher__panel,
+.digichat-launcher__body,
+.digichat-launcher .aui-root,
+.digichat-launcher .aui-thread-viewport-footer {
+  --background: var(--bg);
+  --foreground: var(--ink);
+  --popover: var(--bg);
+  --popover-foreground: var(--ink);
+  --card: var(--bg);
+  --card-foreground: var(--ink);
+  --composer-bg: var(--bg);
+  --color-background: var(--bg);
+  --color-foreground: var(--ink);
+  --color-popover: var(--bg);
+  --color-popover-foreground: var(--ink);
+  --color-card: var(--bg);
+  background: var(--bg);
+  color: var(--ink);
+}
+
+.digichat-launcher [data-slot="aui_composer-shell"] {
+  gap: var(--dc-composer-gap, 0.25rem);
+  --composer-bg: transparent;
+  background: transparent;
+}
+
+/* Portaled attach / more / tooltip / dialog must stack above the launcher
+   pane (z-index: 70). Default shadcn / radix layers are z-50. */
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="tooltip-content"],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="dialog-overlay"],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="dialog-content"],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="dropdown-menu-content"],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="popover-content"],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-action-bar-more-content,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-attachment-preview-dialog-content,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-composer-trigger-popover {
+  z-index: 110;
+}
+
+/* Isolated /chatbot gallery is monochrome. Tokens still ship teal
+   --accent / --ring; portaled menus and ::selection read those from :root. */
+html:has(.aui-theme-stage) {
+  --accent: var(--ink);
+  --accent-weak: color-mix(in srgb, var(--ink) 14%, transparent);
+  --on-accent: var(--bg);
+  --color-accent: var(--ink);
+  --color-accent-foreground: var(--bg);
+  --color-primary: var(--ink);
+  --color-primary-foreground: var(--bg);
+  --color-ring: var(--ink);
+  --ring: var(--ink);
+}
+
+html:has(.aui-theme-stage) ::selection {
+  background: color-mix(in srgb, var(--ink) 22%, transparent);
+  color: var(--ink);
+}
+
+html:has(.aui-theme-stage) :focus-visible {
+  outline-color: var(--ink);
+}
+
+/* Portals leave .aui-root. Tooltip used bg-foreground (ink) so it read as
+   a white box with black text. Skin every floating layer to --bg / --ink. */
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="tooltip-content"],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="dialog-content"],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="dropdown-menu-content"],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="popover-content"],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-action-bar-more-content,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-attachment-preview-dialog-content {
+  background: var(--bg);
+  color: var(--ink);
+  border-color: var(--hair);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="tooltip-content"] {
+  border: 1px solid var(--hair);
+}
+
+/* Product tooltip.tsx omits Arrow. Hide leftovers: Radix wraps the svg in a
+   plain span (no data-radix-popper-arrow-wrapper anymore); shadcn diamonds
+   use rotate-45 without "arrow" in the class name. */
+: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"],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="tooltip-content"] [data-radix-popper-arrow-wrapper] {
+  display: none;
+}
+
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="tooltip-content"] ::selection,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="dialog-content"] ::selection,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="dropdown-menu-content"] ::selection,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="popover-content"] ::selection,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) .aui-action-bar-more-content ::selection {
+  background: color-mix(in srgb, var(--ink) 22%, transparent);
+  color: var(--ink);
+}
+
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="dropdown-menu-content"] [role="menuitem"]:hover,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="dropdown-menu-content"] [role="menuitem"]:focus,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="dropdown-menu-content"] [role="menuitem"][data-highlighted],
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="popover-content"] [role="menuitem"]:hover,
+:is(html:has(.aui-theme-stage), html:has([data-thread-skin="digichat"])) [data-slot="popover-content"] [role="menuitem"][data-highlighted] {
+  background: transparent;
+  background-color: transparent;
+  color: var(--ink);
+}
+
+/* Boot handoff choreography. The stock product flips these attributes when
+   the boot starts handing off (`?handoff=` lab switch) so the chat re-enters
+   on the same beat instead of cutting in statically behind the overlay. */
+@keyframes dboot-handoff-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes dboot-handoff-drift {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* Bottom-up entrance after the boot: composer first, then the example rows
+   from the LAST one upward (nth-last-child delays so any count works), then
+   the welcome body, then the welcome headline - the stack slides in from the
+   bottom up. */
+[data-stock-product][data-boot-reveal="true"] .aui-composer-root {
+  animation: dboot-handoff-in 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+}
+
+[data-stock-product][data-boot-reveal="true"] .aui-thread-welcome-suggestion {
+  animation: dboot-handoff-in 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+  animation-delay: 80ms;
+}
+
+[data-stock-product][data-boot-reveal="true"] .aui-thread-welcome-suggestion:nth-last-child(2) {
+  animation-delay: 140ms;
+}
+
+[data-stock-product][data-boot-reveal="true"] .aui-thread-welcome-suggestion:nth-last-child(3) {
+  animation-delay: 200ms;
+}
+
+[data-stock-product][data-boot-reveal="true"] .aui-thread-welcome-suggestion:nth-last-child(4) {
+  animation-delay: 260ms;
+}
+
+[data-stock-product][data-boot-reveal="true"] .aui-thread-welcome-suggestion:nth-last-child(5) {
+  animation-delay: 320ms;
+}
+
+[data-stock-product][data-boot-reveal="true"] .aui-thread-welcome-copy {
+  animation: dboot-handoff-in 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+  animation-delay: 420ms;
+}
+
+[data-stock-product][data-boot-reveal="true"] .aui-thread-welcome-message-inner {
+  animation: dboot-handoff-in 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+  animation-delay: 500ms;
+}
+
+[data-stock-product][data-boot-drift="true"] .aui-thread-empty,
+[data-stock-product][data-boot-drift="true"] .aui-composer-root {
+  animation: dboot-handoff-drift 380ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-stock-product][data-boot-reveal="true"] .aui-thread-welcome-message-inner,
+  [data-stock-product][data-boot-reveal="true"] .aui-thread-welcome-copy,
+  [data-stock-product][data-boot-reveal="true"] .aui-thread-welcome-suggestion,
+  [data-stock-product][data-boot-reveal="true"] .aui-composer-root,
+  [data-stock-product][data-boot-drift="true"] .aui-thread-empty,
+  [data-stock-product][data-boot-drift="true"] .aui-composer-root {
+    animation: none;
+  }
+}
+
+/* Pre-reveal hold: until the bottom-up entrance starts, the hero pieces stay
+   invisible - during the boot (and while a warm container settles) only the
+   footer shows. The entrance then slides each piece in, bottom-up. */
+[data-stock-product]:not([data-boot-reveal="true"]) .aui-thread-welcome-message-inner,
+[data-stock-product]:not([data-boot-reveal="true"]) .aui-thread-welcome-copy,
+[data-stock-product]:not([data-boot-reveal="true"]) .aui-thread-welcome-suggestion,
+[data-stock-product]:not([data-boot-reveal="true"]) .aui-composer-root {
+  opacity: 0;
+}
+
+/* ── Chat notices (DIG-4459) ──────────────────────────────────────────────
+   One box for what the backend says outside the answer: the failed turn
+   (ErrorPrimitive.Root), a failed tool call (under its arguments) and a
+   status line. Error is red-tinted, status neutral; both mono like the
+   trace. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-chat-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--dc-gap-2);
+  padding: var(--dc-gap-1) var(--dc-list-pad-x);
+  border-radius: 0;
+  font-family: var(--font-mono);
+  font-size: var(--dc-text-sm, 0.7rem);
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-chat-notice[data-tone="error"] {
+  /* Faded red (Chris, 21 Oct): the danger hue pulled 28% toward the muted
+     ink (HSL saturation 0.76 → 0.49), a 5% wash and a 24% hairline. The
+     same rules serve dark and light: the vars switch per theme. */
+  --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);
+}
+
+/* Title: the faded red nudged toward the ink so it clears WCAG AA on the
+   wash in both themes (dark ≈ 5.9:1, light ≈ 4.7:1). */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-chat-notice[data-tone="error"] .aui-chat-notice-title {
+  color: color-mix(in srgb, var(--notice-danger) 80%, var(--ink));
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-chat-notice[data-tone="status"] {
+  border: 1px solid var(--hair);
+  background: color-mix(in oklab, var(--ink-mute) 6%, transparent);
+  color: var(--ink-mute);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-chat-notice-detail {
+  color: var(--ink-soft);
+  font-size: var(--dc-chip-fs);
+}
+
+/* Inside the tool box the notice is the last section: it keeps its tint but
+   sits flush with the frame instead of floating inside it. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="tool-fallback-error"].aui-chat-notice {
+  flex-direction: row;
+  border-width: 1px 0 0 0;
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-json-view,
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-chat-notice-detail {
+  overflow: auto;
+  overscroll-behavior: contain;
+  max-height: var(--dc-json-max-h);
+}
+
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-json-key { color: color-mix(in oklab, var(--ink) 80%, #6aa9ff); }
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-json-string { color: color-mix(in oklab, var(--ink-soft) 70%, #5fbf8a); }
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-json-number { color: color-mix(in oklab, var(--ink-soft) 70%, #e0a84f); }
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) .aui-json-literal { color: color-mix(in oklab, var(--ink-soft) 70%, #b48ef0); }
+
+/* DENSITY: the assistant footer reserves the action bar's row (min-h-7.5 +
+   pt-1.5, ~30px) only while it has something to show. On earlier turns the
+   bar autohides (`autohide="not-last"`) and the branch picker hides on a single
+   branch, so an empty footer collapses and the message-group gap alone spaces
+   assistant → user. When the bar appears (hover, or always on the last turn)
+   the footer takes its row back in flow, so it never overlaps the next turn. */
+:is(.aui-theme-stage, [data-thread-skin="digichat"]) [data-slot="aui_assistant-message-footer"]:not(:has(> *)) {
+  min-height: 0;
+  padding-top: 0;
+}