@adia-ai/web-modules 0.8.30 → 0.8.32

package/CHANGELOG.md

@@ -1,11 +1,32 @@
 # Changelog — @adia-ai/web-modules
 
+## [0.8.32] — 2026-08-09
+
+### Maintenance
+- **Every `.d.ts` with a custom `events:` block regenerated — `addEventListener` overload order fixed at the generator** (gh#711 S1 review, `@adia-ai/web-components` CHANGELOG has the root-cause writeup). `scripts/build/dts-codegen.mjs` now emits event-specific overloads before the generic `HTMLElementEventMap` fallback instead of after, so TS overload resolution stops silently shadowing typed custom-event overloads (`change` chief among them, since it's also a literal `HTMLElementEventMap` key). Reordering only — `npm run typecheck` stays clean.
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+- **`editor/` touched in this release window** (2 file(s), e.g. `editor-sidebar/editor-sidebar.d.ts`) — carried by the entries above.
+- **`runtime/` touched in this release window** (1 file(s), e.g. `a2ui-root/a2ui-root.d.ts`) — carried by the entries above.
+- **`theme/` touched in this release window** (1 file(s), e.g. `theme-panel/theme-panel.d.ts`) — carried by the entries above.
+
+### Fixed
+- **`chat-shell` message rows hosting a generated surface no longer inherit the prose reading-width cap (gh#719).** Every `[data-role]` row carried `max-width: var(--chat-message-max-width)` (85%) — right for conversational text bubbles, wrong for rows whose bubble hosts a mounted A2UI surface (a full structured card/form, e.g. a follow-up proposal or working differential). Two mount shapes carry a surface and both are now exempted: `[data-bubble][data-surface]` (a consumer's own attribute-on-bubble convention, e.g. patient-visit's `hydrate.js`) and `[data-bubble]:has(> [data-surface-root])` (`chat-shell`'s own registry mount — `chat-surfaces.js`'s `createSurfaceRegistry#route` appends an "island" div as a direct child of the bubble, with no attribute on the bubble itself; every `agent-chat`/`agent-admin` surface row rides this shape). Follows the file's own existing exemption precedent for `[data-role="error"]`.
+
+## [0.8.31] — 2026-08-07
+
+### Fixed
+- **`chat-empty` is now registered** (gh#655). It had every sidecar (yaml/a2ui.json/examples) but no `defineIfFree('chat-empty', …)` anywhere — the tag never upgraded, so `customElements.whenDefined('chat-empty')` never resolved for any consumer awaiting it (light-DOM children still rendered; CSS tag-selectors still painted it, since neither cares about upgrade status — but the element itself stayed undefined). Added `chat-empty.js` with a minimal `UIElement` subclass (no reactive props, matching its CSS-only visibility contract) registered the way the sibling JS-bearing chat-cluster modules are (`chat-sidebar`, `chat-thread`, `chat-composer`); wired into `chat/index.js`'s barrel export.
+
+### Maintenance
+- **`dist/` bundles rebuilt** in this cut's window (1 file(s)) — regenerated from the source changes described above, not independent edits.
+
 ## [0.8.30] — 2026-08-07
 
 ### Added
 - **`chatShell.setStreamedText(text)`** — replaces the streaming assistant message's text outright, the counterpart to `appendChunk` for a producer that revises what it already streamed.
 
 ### Fixed
+- **`chat-composer` stops the inner `submit` event at its re-dispatch boundary (gh#676).** The re-emitted `composer-submit` was riding alongside the raw `submit` bubbling in from `chat-input-ui` unstopped — a host could receive both. `stopPropagation()` on the inner event before re-dispatching as `composer-submit` closes the second path.
 - **A rewritten or withheld turn now leaves the screen agreeing with the transcript (gh#665).** `wireAgentEvents` treated every `text` event as an append, so an `@adia-ai/agent` output guardrail's re-snapshot (`{ text: '', snapshot: <rewritten> }`) appended nothing and the ORIGINAL text stayed on screen while the session recorded the rewrite — a redaction that redacted nothing visible. An empty delta is now a replace from `snapshot` (an empty snapshot clears the bubble), which is safe for any text event since the snapshot is always the authoritative text.
 
 ### Maintenance

package/chat/chat-composer/chat-composer.d.ts

@@ -34,10 +34,10 @@ code. Propagated to the inner input element automatically.
  */
   disabled: boolean;
 
+  addEventListener(type: 'composer-submit', listener: (ev: ChatComposerComposerSubmitEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: ChatComposer, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'composer-submit', listener: (ev: ChatComposerComposerSubmitEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/chat/chat-composer/chat-composer.js

@@ -49,6 +49,12 @@ class ChatComposer extends UIElement {
     this.#inputEl = this.querySelector('chat-input-ui') || this.querySelector('input-ui') || this.querySelector('textarea-ui');
 
     this.#onSubmit = (e) => {
+      // Stop the inner 'submit' event at this re-dispatch boundary too —
+      // this component re-emits it as 'composer-submit' below, so letting
+      // the raw 'submit' keep bubbling past chat-composer would let a
+      // host that (also) listens for raw 'submit' receive a duplicate
+      // (gh#676).
+      e.stopPropagation();
       // Re-emit as 'composer-submit' so host listens to one event
       // regardless of which inner input it is
       this.dispatchEvent(new CustomEvent('composer-submit', {

package/chat/chat-empty/chat-empty.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/ChatEmpty.json",
   "title": "ChatEmpty",
-  "description": "Module-tier chat empty state. CSS-only — no behavior, no JS. Sits\nas the first child of <chat-thread> as the empty state placeholder.\nVisibility is driven by <chat-thread>'s [empty] reflected attribute\nvia CSS (no JS toggling needed) — when messages arrive, the parent\nthread loses [empty] and CSS hides this stub.\n\nReplaces the legacy <empty-state-ui data-chat-empty> child of the\nmessages container per ADR-0023. The legacy shape was retired in\nv0.4.0 per ADR-0024 and is no longer recognized.\n",
+  "description": "Module-tier chat empty state. No reactive props — visibility is\ndriven by <chat-thread>'s [empty] reflected attribute via CSS (no\nJS toggling needed); when messages arrive, the parent thread loses\n[empty] and CSS hides this stub. Registered (defineIfFree) so the\ntag upgrades and resolves customElements.whenDefined('chat-empty')\n(gh#655) — sits as the first child of <chat-thread> as the empty\nstate placeholder.\n\nReplaces the legacy <empty-state-ui data-chat-empty> child of the\nmessages container per ADR-0023. The legacy shape was retired in\nv0.4.0 per ADR-0024 and is no longer recognized.\n",
   "type": "object",
   "allOf": [
     {

package/chat/chat-empty/chat-empty.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `<chat-empty>` — Module-tier chat empty state. No reactive props — visibility is
+driven by <chat-thread>'s [empty] reflected attribute via CSS (no
+JS toggling needed); when messages arrive, the parent thread loses
+[empty] and CSS hides this stub. Registered (defineIfFree) so the
+tag upgrades and resolves customElements.whenDefined('chat-empty')
+(gh#655) — sits as the first child of <chat-thread> as the empty
+state placeholder.
+
+Replaces the legacy <empty-state-ui data-chat-empty> child of the
+messages container per ADR-0023. The legacy shape was retired in
+v0.4.0 per ADR-0024 and is no longer recognized.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/chat-empty
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+
+export class ChatEmpty extends UIElement {
+}

package/chat/chat-empty/chat-empty.js

@@ -0,0 +1,34 @@
+/**
+ * <chat-empty>
+ *   <empty-state-ui icon="chat-circle" heading="Hello!" description="Ask me anything."></empty-state-ui>
+ * </chat-empty>
+ *
+ * Module-tier chat empty state — the bespoke replacement for legacy
+ * `<empty-state-ui data-chat-empty>` per ADR-0023. Sits as the first
+ * child of <chat-thread>; visibility is driven entirely by CSS off
+ * <chat-thread>'s [empty] reflected attribute (see
+ * chat-shell/css/chat-shell.bespoke.css) — no JS toggling needed.
+ *
+ * Registered (gh#655) even though the element carries no reactive
+ * state: an unregistered custom element never resolves
+ * `customElements.whenDefined('chat-empty')` and never matches
+ * `:defined` — a host or test that waits on either hangs/mismatches
+ * forever, even though CSS tag-selectors keep painting it either way.
+ * Matches the sibling JS-bearing chat-cluster modules' own-file
+ * registration shape (chat-sidebar, chat-thread, chat-composer);
+ * chat-header/chat-status stay genuinely unregistered CSS-only markup
+ * wrappers — chat-empty is the one with a live tag reference in
+ * consumer surfaces (patient-visit), so it gets the class.
+ */
+
+import { defineIfFree } from '../../../web-components/core/register.js';
+import { UIElement } from '../../../web-components/core/element.js';
+
+class ChatEmpty extends UIElement {
+  static properties = {};
+
+  static template = () => null;
+}
+
+defineIfFree('chat-empty', ChatEmpty);
+export { ChatEmpty };

package/chat/chat-empty/chat-empty.yaml

@@ -7,11 +7,13 @@ component: ChatEmpty
 category: feedback
 version: 1
 description: |
-  Module-tier chat empty state. CSS-only — no behavior, no JS. Sits
-  as the first child of <chat-thread> as the empty state placeholder.
-  Visibility is driven by <chat-thread>'s [empty] reflected attribute
-  via CSS (no JS toggling needed) — when messages arrive, the parent
-  thread loses [empty] and CSS hides this stub.
+  Module-tier chat empty state. No reactive props — visibility is
+  driven by <chat-thread>'s [empty] reflected attribute via CSS (no
+  JS toggling needed); when messages arrive, the parent thread loses
+  [empty] and CSS hides this stub. Registered (defineIfFree) so the
+  tag upgrades and resolves customElements.whenDefined('chat-empty')
+  (gh#655) — sits as the first child of <chat-thread> as the empty
+  state placeholder.
 
   Replaces the legacy <empty-state-ui data-chat-empty> child of the
   messages container per ADR-0023. The legacy shape was retired in
@@ -43,8 +45,8 @@ a2ui:
       <empty-state-ui data-chat-empty>. Place as the first child of
       <chat-thread>; visibility is automatic via the [empty]
       reflected attribute.
-    - rule: 'CSS-only — no JS module needed in shell HTML imports.'
-      reason: 'CSS-only primitive.'
+    - rule: 'No reactive props — visibility is CSS-driven off the parent [empty] attribute, not a JS toggle.'
+      reason: 'State contract.'
     - rule: 'For non-chat empty states (lists, tables, canvas) use <empty-state-ui> primitive instead; chat-empty is chat-cluster-namespaced.'
       reason: 'Cluster vs primitive distinction.'
 

package/chat/chat-shell/chat-shell.d.ts

@@ -79,11 +79,6 @@ export class ChatShell extends UIElement {
   /** Enable Anthropic extended-thinking mode. */
   thinking: boolean;
 
-  addEventListener<K extends keyof HTMLElementEventMap>(
-    type: K,
-    listener: (this: ChatShell, ev: HTMLElementEventMap[K]) => unknown,
-    options?: boolean | AddEventListenerOptions,
-  ): void;
   addEventListener(type: 'abort', listener: (ev: ChatShellAbortEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'chunk', listener: (ev: ChatShellChunkEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'clear', listener: (ev: ChatShellClearEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
@@ -92,4 +87,9 @@ export class ChatShell extends UIElement {
   addEventListener(type: 'message', listener: (ev: ChatShellMessageEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'submit', listener: (ev: ChatShellSubmitEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'thinking', listener: (ev: ChatShellThinkingEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: ChatShell, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
 }

package/chat/chat-shell/css/chat-shell.messages.css

@@ -63,6 +63,24 @@ chat-shell [data-role="assistant"] [data-bubble] {
   border-bottom-left-radius: var(--chat-assistant-tail-radius);
 }
 
+/* Generated-surface row — a mounted A2UI surface (structured card/form,
+   not conversational prose) shouldn't inherit the reading-width cap meant
+   for text bubbles. Mirrors the [data-role="error"] exemption below: "not
+   a conversational text bubble" already has precedent here.
+
+   Two mount shapes carry a surface, and neither is optional:
+     - [data-bubble][data-surface] — the attribute-on-bubble convention a
+       consumer (e.g. patient-visit's hydrate.js) applies to its own bubble.
+     - [data-bubble]:has(> [data-surface-root]) — chat-shell's OWN registry
+       mount (chat-surfaces.js's createSurfaceRegistry#route): an "island"
+       div appended as a direct child of the bubble, with no attribute on
+       the bubble itself. Every agent-chat / agent-admin surface row rides
+       this shape, not the patient-visit one. */
+chat-shell [data-role]:has([data-bubble][data-surface]),
+chat-shell [data-role]:has([data-bubble] > [data-surface-root]) {
+  max-width: none;
+}
+
 /* Error message */
 chat-shell [data-role="error"] {
   align-self: center;

package/chat/chat-sidebar/chat-sidebar.d.ts

@@ -60,11 +60,11 @@ Useful for suppressing transitions while dragging.
  */
   resizing: boolean;
 
+  addEventListener(type: 'sidebar-resize', listener: (ev: ChatSidebarSidebarResizeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'sidebar-toggle', listener: (ev: ChatSidebarSidebarToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: ChatSidebar, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'sidebar-resize', listener: (ev: ChatSidebarSidebarResizeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'sidebar-toggle', listener: (ev: ChatSidebarSidebarToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/chat/index.js

@@ -2,4 +2,5 @@ export { ChatShell } from './chat-shell/chat-shell.js';
 export { ChatThread } from './chat-thread/chat-thread.js';
 export { ChatComposer } from './chat-composer/chat-composer.js';
 export { ChatSidebar } from './chat-sidebar/chat-sidebar.js';
+export { ChatEmpty } from './chat-empty/chat-empty.js';
 export { createSurfaceRegistry, wireAgentEvents, PROGRESS_LABELS } from './chat-surfaces/chat-surfaces.js';

package/dist/chat/chat-shell.min.css

@@ -1 +1 @@
-:where(chat-shell){--chat-bg:var(--a-canvas-0);--chat-border:unset;--chat-radius:unset;--chat-header-height:var(--a-chrome-app-header-height);--chat-header-px:var(--a-space-4);--chat-header-gap:var(--a-space-2);--chat-header-border:1px solid var(--md-sys-color-neutral-outline-variant);--chat-messages-px:var(--a-space-4);--chat-messages-py:var(--a-space-4);--chat-messages-gap:var(--a-space-3);--chat-message-max-width:85%;--chat-user-bg:var(--md-sys-color-primary);--chat-user-fg:var(--md-sys-color-primary-on-primary);--chat-user-radius:var(--a-radius-md);--chat-user-tail-radius:var(--a-radius-sm);--chat-user-px:var(--a-space-3);--chat-user-py:var(--a-space-1);--chat-assistant-bg:var(--a-canvas-2);--chat-assistant-fg:var(--md-sys-color-neutral-on-surface);--chat-assistant-radius:var(--a-radius-lg);--chat-assistant-tail-radius:var(--a-radius-sm);--chat-assistant-px:var(--a-space-3);--chat-assistant-py:var(--a-space-1);--chat-avatar-size:1.75rem;--chat-avatar-bg:var(--chat-assistant-bg);--chat-avatar-fg:var(--chat-assistant-fg);--chat-avatar-font:var(--a-ui-sm);--chat-avatar-weight:var(--a-weight-semibold);--chat-cursor-width:2px;--chat-cursor-color:currentColor;--chat-cursor-speed:.8s;--chat-footer-px:var(--a-space-3);--chat-footer-py:var(--a-space-3);--chat-actions-gap:var(--a-space-1);--chat-code-bg:var(--a-canvas-2);--chat-code-radius:var(--a-radius-md);--chat-font-size:var(--a-ui-size);--chat-line-height:var(--a-leading-normal);--chat-weight-semibold:var(--a-weight-semibold);--chat-header-name-font:var(--a-ui-lg);--chat-header-status-font:var(--a-ui-md);--chat-header-status-fg:var(--a-fg-muted);--chat-error-gap:var(--a-space-2);--chat-error-fg:var(--a-danger-strong);--chat-error-font:var(--a-ui-sm);--chat-actions-duration:var(--a-duration-fast);--chat-actions-easing:var(--a-easing);--chat-avatar-radius:var(--a-radius-full);--chat-thinking-fg:var(--a-fg-muted);--chat-code-inline-radius:var(--a-radius-sm);--chat-code-inline-family:var(--a-font-family-code);--chat-code-block-px:var(--a-space-3);--chat-code-block-my:var(--a-space-2);--chat-code-block-font:var(--a-ui-sm)}chat-shell{box-sizing:border-box;border:var(--chat-border);border-radius:var(--chat-radius);background:var(--chat-bg);flex-direction:column;height:100%;display:flex;overflow:hidden}chat-shell>header{align-items:center;gap:var(--chat-header-gap);min-height:var(--chat-header-height);padding:0 var(--chat-header-px);border-bottom:var(--chat-header-border);flex-shrink:0;display:flex}chat-shell>header [data-chat-name]{font-weight:var(--chat-weight-semibold);font-size:var(--chat-header-name-font)}chat-shell>header chat-status{font-size:var(--chat-header-status-font);color:var(--chat-header-status-fg);margin-inline-start:auto}chat-shell>chat-thread,chat-shell>section{padding:var(--chat-messages-py) var(--chat-messages-px);gap:var(--chat-messages-gap);flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}chat-shell>footer{padding:var(--chat-footer-py) var(--chat-footer-px);flex-shrink:0;align-items:center;display:flex}chat-shell>footer chat-input-ui{flex:1}chat-shell [data-role]{gap:var(--chat-header-gap);max-width:var(--chat-message-max-width);align-items:flex-end;display:flex}chat-shell [data-role=user]{flex-direction:row-reverse;align-self:flex-end}chat-shell [data-role=assistant]{align-self:flex-start}chat-shell [data-role] [data-avatar]{width:var(--chat-avatar-size);height:var(--chat-avatar-size);border-radius:var(--chat-avatar-radius);background:var(--chat-avatar-bg);color:var(--chat-avatar-fg);font-size:var(--chat-avatar-font);font-weight:var(--chat-avatar-weight);flex-shrink:0;justify-content:center;align-items:center;display:flex}chat-shell [data-role] [data-bubble]{padding:var(--chat-assistant-py) var(--chat-assistant-px);border-radius:var(--chat-assistant-radius);font-size:var(--chat-font-size);line-height:var(--chat-line-height);white-space:pre-wrap;word-break:break-word}chat-shell [data-role] [data-bubble]>:first-child{margin-block-start:0}chat-shell [data-role] [data-bubble]>:last-child{margin-block-end:0}chat-shell [data-role=user] [data-bubble]{background:var(--chat-user-bg);color:var(--chat-user-fg);padding:var(--chat-user-py) var(--chat-user-px);border-radius:var(--chat-user-radius);border-bottom-right-radius:var(--chat-user-tail-radius)}chat-shell [data-role=assistant] [data-bubble]{background:var(--chat-assistant-bg);color:var(--chat-assistant-fg);border-bottom-left-radius:var(--chat-assistant-tail-radius)}chat-shell [data-role=error]{align-self:center;align-items:center;gap:var(--chat-error-gap);max-width:none;color:var(--chat-error-fg);font-size:var(--chat-error-font);display:flex}chat-shell [data-role] [data-actions]{gap:var(--chat-actions-gap);opacity:0;transition:opacity var(--chat-actions-duration) var(--chat-actions-easing);display:flex}chat-shell [data-role]:hover [data-actions]{opacity:1}chat-shell [data-cursor]{width:var(--chat-cursor-width);background:var(--chat-cursor-color);vertical-align:text-bottom;height:1em;animation:chat-shell-blink var(--chat-cursor-speed) step-end infinite;margin-inline-start:1px;display:inline-block}@keyframes chat-shell-blink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){chat-shell [data-cursor]{opacity:.7;animation:none}}chat-shell [data-role=assistant][data-thinking] [data-bubble]{color:var(--chat-thinking-fg)}chat-shell [data-bubble] [data-content]{white-space:normal}chat-shell [data-bubble] [data-content] p{margin:0 0 .5em}chat-shell [data-bubble] [data-content] p:last-child{margin-bottom:0}chat-shell [data-bubble] [data-content] strong{font-weight:var(--chat-weight-semibold)}chat-shell [data-bubble] [data-content] code{background:var(--chat-code-bg);border-radius:var(--chat-code-inline-radius);font-family:var(--chat-code-inline-family);padding:.1em .15em;font-size:.875em}chat-shell [data-bubble] [data-content] pre{background:var(--chat-code-bg);border-radius:var(--chat-code-radius);padding:var(--chat-code-block-px);margin:var(--chat-code-block-my) 0;font-size:var(--chat-code-block-font);line-height:1.5;overflow-x:auto}chat-shell [data-bubble] [data-content] pre code{font-size:inherit;background:0 0;border-radius:0;padding:0}chat-shell [data-bubble] [data-content] ul,chat-shell [data-bubble] [data-content] ol{margin:.25em 0;padding-inline-start:1.25em}chat-shell [data-bubble] [data-content] li{margin-bottom:.15em}chat-shell [data-bubble] [data-content] a{color:inherit;text-underline-offset:2px;text-decoration:underline}chat-shell [data-bubble] [data-content] h1,chat-shell [data-bubble] [data-content] h2,chat-shell [data-bubble] [data-content] h3,chat-shell [data-bubble] [data-content] h4{font-weight:var(--chat-weight-semibold);margin:.75em 0 .25em}chat-shell [data-bubble] [data-content] h1:first-child,chat-shell [data-bubble] [data-content] h2:first-child,chat-shell [data-bubble] [data-content] h3:first-child{margin-top:0}chat-shell chat-empty{margin:auto}chat-shell[streaming] chat-empty,chat-shell:has([data-role]) chat-empty{display:none}chat-shell>chat-header,chat-sidebar>chat-header[slot=header],chat-sidebar>chat-header:first-child{align-items:center;gap:var(--chat-header-gap,var(--a-space-2));padding:0 var(--chat-header-px,var(--a-space-3));height:var(--chat-header-height,var(--a-size-lg));font-size:var(--chat-header-font,var(--a-ui-size));border-bottom:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant));background:var(--chat-bg,var(--md-sys-color-neutral-background));flex-shrink:0;display:flex}chat-header>[slot=name]{font-weight:var(--a-weight-medium,500);color:var(--md-sys-color-neutral-on-surface)}chat-header>[slot=status]{margin-inline-start:var(--a-space-2)}chat-header>[slot=action]:first-of-type{margin-inline-start:auto}chat-header>[slot=action-leading]{margin-inline-end:var(--a-space-2)}chat-status{align-items:center;gap:var(--a-space-1);font-size:var(--a-ui-sm);color:var(--a-fg-muted);display:inline-flex}chat-shell>chat-thread{overscroll-behavior:contain;gap:var(--chat-message-gap,var(--a-space-3));min-height:0;padding:var(--chat-thread-py,var(--a-space-4)) var(--chat-thread-px,var(--a-space-4));background:var(--chat-thread-bg,var(--md-sys-color-neutral-background));flex-direction:column;flex:1;display:flex;overflow-y:auto}chat-thread:not([empty])>chat-empty{display:none}chat-thread[empty]>chat-empty{padding:var(--a-space-6);flex:1;justify-content:center;align-items:center;display:flex}chat-shell>chat-composer{align-items:stretch;gap:var(--a-space-2);padding:var(--chat-composer-py,var(--a-space-3)) var(--chat-composer-px,var(--a-space-3));border-top:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant));background:var(--chat-bg,var(--md-sys-color-neutral-background));flex-shrink:0;display:flex}chat-composer>[slot=leading],chat-composer>[slot=attach],chat-composer>[slot=trailing]{align-items:center;gap:var(--a-space-1);flex-shrink:0;display:inline-flex}chat-composer>:is(chat-input-ui,input-ui,textarea-ui){flex:1;min-width:0}chat-composer[disabled]{opacity:.6;pointer-events:none}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing]){min-width:var(--chat-sidebar-min-width,48px);max-width:var(--chat-sidebar-max-width,480px);min-height:0;font-size:var(--chat-sidebar-font,var(--a-ui-size));transition:width var(--chat-duration,var(--a-duration,.2s)) var(--chat-easing,var(--a-easing,ease));background:var(--chat-bg,var(--md-sys-color-neutral-background));flex-direction:column;flex-shrink:0;display:flex;position:relative;container:sidebar/inline-size}chat-sidebar[slot=leading]{width:var(--chat-sidebar-width-leading,240px);border-right:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant))}chat-sidebar[slot=trailing]{width:var(--chat-sidebar-width-trailing,320px);border-left:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant))}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing])>[data-resize]{cursor:col-resize;z-index:1;-webkit-user-select:none;user-select:none;width:6px;position:absolute;top:0;bottom:0}chat-sidebar[slot=leading]>[data-resize]{right:-3px}chat-sidebar[slot=trailing]>[data-resize]{left:-3px}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing])>[data-resize]:hover{background:var(--md-sys-color-primary);opacity:.5}chat-sidebar[resizing]{transition:none}chat-sidebar[resizing]>[data-resize]{background:var(--md-sys-color-primary);opacity:.8}chat-shell:has(>chat-sidebar){flex-direction:row;display:flex}chat-shell:has(>chat-sidebar)>:not(chat-sidebar){display:contents}
+:where(chat-shell){--chat-bg:var(--a-canvas-0);--chat-border:unset;--chat-radius:unset;--chat-header-height:var(--a-chrome-app-header-height);--chat-header-px:var(--a-space-4);--chat-header-gap:var(--a-space-2);--chat-header-border:1px solid var(--md-sys-color-neutral-outline-variant);--chat-messages-px:var(--a-space-4);--chat-messages-py:var(--a-space-4);--chat-messages-gap:var(--a-space-3);--chat-message-max-width:85%;--chat-user-bg:var(--md-sys-color-primary);--chat-user-fg:var(--md-sys-color-primary-on-primary);--chat-user-radius:var(--a-radius-md);--chat-user-tail-radius:var(--a-radius-sm);--chat-user-px:var(--a-space-3);--chat-user-py:var(--a-space-1);--chat-assistant-bg:var(--a-canvas-2);--chat-assistant-fg:var(--md-sys-color-neutral-on-surface);--chat-assistant-radius:var(--a-radius-lg);--chat-assistant-tail-radius:var(--a-radius-sm);--chat-assistant-px:var(--a-space-3);--chat-assistant-py:var(--a-space-1);--chat-avatar-size:1.75rem;--chat-avatar-bg:var(--chat-assistant-bg);--chat-avatar-fg:var(--chat-assistant-fg);--chat-avatar-font:var(--a-ui-sm);--chat-avatar-weight:var(--a-weight-semibold);--chat-cursor-width:2px;--chat-cursor-color:currentColor;--chat-cursor-speed:.8s;--chat-footer-px:var(--a-space-3);--chat-footer-py:var(--a-space-3);--chat-actions-gap:var(--a-space-1);--chat-code-bg:var(--a-canvas-2);--chat-code-radius:var(--a-radius-md);--chat-font-size:var(--a-ui-size);--chat-line-height:var(--a-leading-normal);--chat-weight-semibold:var(--a-weight-semibold);--chat-header-name-font:var(--a-ui-lg);--chat-header-status-font:var(--a-ui-md);--chat-header-status-fg:var(--a-fg-muted);--chat-error-gap:var(--a-space-2);--chat-error-fg:var(--a-danger-strong);--chat-error-font:var(--a-ui-sm);--chat-actions-duration:var(--a-duration-fast);--chat-actions-easing:var(--a-easing);--chat-avatar-radius:var(--a-radius-full);--chat-thinking-fg:var(--a-fg-muted);--chat-code-inline-radius:var(--a-radius-sm);--chat-code-inline-family:var(--a-font-family-code);--chat-code-block-px:var(--a-space-3);--chat-code-block-my:var(--a-space-2);--chat-code-block-font:var(--a-ui-sm)}chat-shell{box-sizing:border-box;border:var(--chat-border);border-radius:var(--chat-radius);background:var(--chat-bg);flex-direction:column;height:100%;display:flex;overflow:hidden}chat-shell>header{align-items:center;gap:var(--chat-header-gap);min-height:var(--chat-header-height);padding:0 var(--chat-header-px);border-bottom:var(--chat-header-border);flex-shrink:0;display:flex}chat-shell>header [data-chat-name]{font-weight:var(--chat-weight-semibold);font-size:var(--chat-header-name-font)}chat-shell>header chat-status{font-size:var(--chat-header-status-font);color:var(--chat-header-status-fg);margin-inline-start:auto}chat-shell>chat-thread,chat-shell>section{padding:var(--chat-messages-py) var(--chat-messages-px);gap:var(--chat-messages-gap);flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}chat-shell>footer{padding:var(--chat-footer-py) var(--chat-footer-px);flex-shrink:0;align-items:center;display:flex}chat-shell>footer chat-input-ui{flex:1}chat-shell [data-role]{gap:var(--chat-header-gap);max-width:var(--chat-message-max-width);align-items:flex-end;display:flex}chat-shell [data-role=user]{flex-direction:row-reverse;align-self:flex-end}chat-shell [data-role=assistant]{align-self:flex-start}chat-shell [data-role] [data-avatar]{width:var(--chat-avatar-size);height:var(--chat-avatar-size);border-radius:var(--chat-avatar-radius);background:var(--chat-avatar-bg);color:var(--chat-avatar-fg);font-size:var(--chat-avatar-font);font-weight:var(--chat-avatar-weight);flex-shrink:0;justify-content:center;align-items:center;display:flex}chat-shell [data-role] [data-bubble]{padding:var(--chat-assistant-py) var(--chat-assistant-px);border-radius:var(--chat-assistant-radius);font-size:var(--chat-font-size);line-height:var(--chat-line-height);white-space:pre-wrap;word-break:break-word}chat-shell [data-role] [data-bubble]>:first-child{margin-block-start:0}chat-shell [data-role] [data-bubble]>:last-child{margin-block-end:0}chat-shell [data-role=user] [data-bubble]{background:var(--chat-user-bg);color:var(--chat-user-fg);padding:var(--chat-user-py) var(--chat-user-px);border-radius:var(--chat-user-radius);border-bottom-right-radius:var(--chat-user-tail-radius)}chat-shell [data-role=assistant] [data-bubble]{background:var(--chat-assistant-bg);color:var(--chat-assistant-fg);border-bottom-left-radius:var(--chat-assistant-tail-radius)}chat-shell [data-role]:has([data-bubble][data-surface]),chat-shell [data-role]:has([data-bubble]>[data-surface-root]){max-width:none}chat-shell [data-role=error]{align-self:center;align-items:center;gap:var(--chat-error-gap);max-width:none;color:var(--chat-error-fg);font-size:var(--chat-error-font);display:flex}chat-shell [data-role] [data-actions]{gap:var(--chat-actions-gap);opacity:0;transition:opacity var(--chat-actions-duration) var(--chat-actions-easing);display:flex}chat-shell [data-role]:hover [data-actions]{opacity:1}chat-shell [data-cursor]{width:var(--chat-cursor-width);background:var(--chat-cursor-color);vertical-align:text-bottom;height:1em;animation:chat-shell-blink var(--chat-cursor-speed) step-end infinite;margin-inline-start:1px;display:inline-block}@keyframes chat-shell-blink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){chat-shell [data-cursor]{opacity:.7;animation:none}}chat-shell [data-role=assistant][data-thinking] [data-bubble]{color:var(--chat-thinking-fg)}chat-shell [data-bubble] [data-content]{white-space:normal}chat-shell [data-bubble] [data-content] p{margin:0 0 .5em}chat-shell [data-bubble] [data-content] p:last-child{margin-bottom:0}chat-shell [data-bubble] [data-content] strong{font-weight:var(--chat-weight-semibold)}chat-shell [data-bubble] [data-content] code{background:var(--chat-code-bg);border-radius:var(--chat-code-inline-radius);font-family:var(--chat-code-inline-family);padding:.1em .15em;font-size:.875em}chat-shell [data-bubble] [data-content] pre{background:var(--chat-code-bg);border-radius:var(--chat-code-radius);padding:var(--chat-code-block-px);margin:var(--chat-code-block-my) 0;font-size:var(--chat-code-block-font);line-height:1.5;overflow-x:auto}chat-shell [data-bubble] [data-content] pre code{font-size:inherit;background:0 0;border-radius:0;padding:0}chat-shell [data-bubble] [data-content] ul,chat-shell [data-bubble] [data-content] ol{margin:.25em 0;padding-inline-start:1.25em}chat-shell [data-bubble] [data-content] li{margin-bottom:.15em}chat-shell [data-bubble] [data-content] a{color:inherit;text-underline-offset:2px;text-decoration:underline}chat-shell [data-bubble] [data-content] h1,chat-shell [data-bubble] [data-content] h2,chat-shell [data-bubble] [data-content] h3,chat-shell [data-bubble] [data-content] h4{font-weight:var(--chat-weight-semibold);margin:.75em 0 .25em}chat-shell [data-bubble] [data-content] h1:first-child,chat-shell [data-bubble] [data-content] h2:first-child,chat-shell [data-bubble] [data-content] h3:first-child{margin-top:0}chat-shell chat-empty{margin:auto}chat-shell[streaming] chat-empty,chat-shell:has([data-role]) chat-empty{display:none}chat-shell>chat-header,chat-sidebar>chat-header[slot=header],chat-sidebar>chat-header:first-child{align-items:center;gap:var(--chat-header-gap,var(--a-space-2));padding:0 var(--chat-header-px,var(--a-space-3));height:var(--chat-header-height,var(--a-size-lg));font-size:var(--chat-header-font,var(--a-ui-size));border-bottom:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant));background:var(--chat-bg,var(--md-sys-color-neutral-background));flex-shrink:0;display:flex}chat-header>[slot=name]{font-weight:var(--a-weight-medium,500);color:var(--md-sys-color-neutral-on-surface)}chat-header>[slot=status]{margin-inline-start:var(--a-space-2)}chat-header>[slot=action]:first-of-type{margin-inline-start:auto}chat-header>[slot=action-leading]{margin-inline-end:var(--a-space-2)}chat-status{align-items:center;gap:var(--a-space-1);font-size:var(--a-ui-sm);color:var(--a-fg-muted);display:inline-flex}chat-shell>chat-thread{overscroll-behavior:contain;gap:var(--chat-message-gap,var(--a-space-3));min-height:0;padding:var(--chat-thread-py,var(--a-space-4)) var(--chat-thread-px,var(--a-space-4));background:var(--chat-thread-bg,var(--md-sys-color-neutral-background));flex-direction:column;flex:1;display:flex;overflow-y:auto}chat-thread:not([empty])>chat-empty{display:none}chat-thread[empty]>chat-empty{padding:var(--a-space-6);flex:1;justify-content:center;align-items:center;display:flex}chat-shell>chat-composer{align-items:stretch;gap:var(--a-space-2);padding:var(--chat-composer-py,var(--a-space-3)) var(--chat-composer-px,var(--a-space-3));border-top:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant));background:var(--chat-bg,var(--md-sys-color-neutral-background));flex-shrink:0;display:flex}chat-composer>[slot=leading],chat-composer>[slot=attach],chat-composer>[slot=trailing]{align-items:center;gap:var(--a-space-1);flex-shrink:0;display:inline-flex}chat-composer>:is(chat-input-ui,input-ui,textarea-ui){flex:1;min-width:0}chat-composer[disabled]{opacity:.6;pointer-events:none}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing]){min-width:var(--chat-sidebar-min-width,48px);max-width:var(--chat-sidebar-max-width,480px);min-height:0;font-size:var(--chat-sidebar-font,var(--a-ui-size));transition:width var(--chat-duration,var(--a-duration,.2s)) var(--chat-easing,var(--a-easing,ease));background:var(--chat-bg,var(--md-sys-color-neutral-background));flex-direction:column;flex-shrink:0;display:flex;position:relative;container:sidebar/inline-size}chat-sidebar[slot=leading]{width:var(--chat-sidebar-width-leading,240px);border-right:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant))}chat-sidebar[slot=trailing]{width:var(--chat-sidebar-width-trailing,320px);border-left:var(--chat-border,1px solid var(--md-sys-color-neutral-outline-variant))}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing])>[data-resize]{cursor:col-resize;z-index:1;-webkit-user-select:none;user-select:none;width:6px;position:absolute;top:0;bottom:0}chat-sidebar[slot=leading]>[data-resize]{right:-3px}chat-sidebar[slot=trailing]>[data-resize]{left:-3px}:is(chat-sidebar[slot=leading],chat-sidebar[slot=trailing])>[data-resize]:hover{background:var(--md-sys-color-primary);opacity:.5}chat-sidebar[resizing]{transition:none}chat-sidebar[resizing]>[data-resize]{background:var(--md-sys-color-primary);opacity:.8}chat-shell:has(>chat-sidebar){flex-direction:row;display:flex}chat-shell:has(>chat-sidebar)>:not(chat-sidebar){display:contents}