@x12i/ai 1.0.0 → 1.1.0

package/dist/styles.css

@@ -0,0 +1,1225 @@
+/*
+ * @x12i/ai styles.
+ *
+ * Tokens only: no hard-coded colors, spacing or font sizes (a test enforces
+ * this). It builds on the kit variables and on the kit's own component
+ * styles, so load them first:
+ *
+ *   @import "@x12i/themes/themes.css";
+ *   @import "@x12i/ui/styles.css";
+ *   @import "@x12i/ai/styles.css";
+ *
+ * Every selector sits inside :where(), so it has zero specificity and any app
+ * class overrides it without a specificity fight. Components expose styling
+ * hooks as data attributes (data-kit="ai-*", data-state, data-role, ...).
+ * Layout uses logical properties, so right-to-left works without extra CSS.
+ */
+
+/* ------------------------------------------------------------ Shared bits */
+
+:where([data-kit="ai-glyph"]) {
+  flex: none;
+  inline-size: var(--kit-size-icon-sm);
+  block-size: var(--kit-size-icon-sm);
+  stroke-width: var(--kit-icon-stroke-width);
+}
+
+:where([data-kit="ai-glyph"][data-size="xs"]) {
+  inline-size: var(--kit-size-icon-xs);
+  block-size: var(--kit-size-icon-xs);
+}
+
+:where([data-kit="ai-glyph"][data-size="md"]) {
+  inline-size: var(--kit-size-icon-md);
+  block-size: var(--kit-size-icon-md);
+}
+
+:where([data-kit="ai-glyph"][data-size="lg"]) {
+  inline-size: var(--kit-size-icon-lg);
+  block-size: var(--kit-size-icon-lg);
+}
+
+/* Arrows that point along the reading direction mirror in right-to-left. */
+:where([data-kit="ai-glyph"][data-flip]:dir(rtl)) {
+  transform: scaleX(-1);
+}
+
+/* Disclosure buttons (reasoning, sources, tool calls): plain buttons that look like a line of text. */
+:where(
+    [data-kit="ai-reasoning-trigger"],
+    [data-kit="ai-sources-trigger"],
+    [data-kit="ai-tool-call-trigger"]
+  ) {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  min-block-size: var(--kit-size-target-min);
+  margin: 0;
+  padding-block: var(--kit-space-1);
+  padding-inline: var(--kit-space-2);
+  border: var(--kit-border-width-default) solid transparent;
+  border-radius: var(--kit-radius-control);
+  background: transparent;
+  color: var(--kit-color-text-secondary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: var(--kit-text-label-line-height);
+  text-align: start;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:where(
+    [data-kit="ai-reasoning-trigger"],
+    [data-kit="ai-sources-trigger"],
+    [data-kit="ai-tool-call-trigger"]
+  ):hover {
+  color: var(--kit-color-text-primary);
+  background: color-mix(in srgb, var(--kit-color-text-primary) 6%, transparent);
+}
+
+/* Panels use the `hidden` attribute; a display value must not undo it. */
+:where([data-kit$="-panel"][hidden]) {
+  display: none;
+}
+
+/* Every focusable piece of the chat shows the kit's focus ring. */
+:where(
+    [data-kit="ai-reasoning-trigger"],
+    [data-kit="ai-sources-trigger"],
+    [data-kit="ai-tool-call-trigger"],
+    [data-kit="ai-citation"],
+    [data-kit="ai-source-link"],
+    [data-kit="ai-markdown-link"],
+    [data-kit="ai-attachment"] a,
+    [data-kit="ai-prompt-commands"] [role="option"]
+  ):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+/* Scrollable areas that become keyboard-focusable get the ring inside their edge. */
+:where(
+    [data-kit="ai-conversation-scroller"],
+    [data-kit="ai-code-block"] pre,
+    [data-kit="ai-json-view"] pre,
+    [data-kit="ai-markdown-table"],
+    [data-kit="ai-message"],
+    [data-kit="ai-source"]
+  ):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: calc(var(--kit-border-width-focus) * -1);
+}
+
+/* ---------------------------------------------------------------- Thread */
+
+:where([data-kit="ai-chat-thread"]) {
+  --_measure: calc(var(--kit-size-56) * 14);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0;
+  block-size: 100%;
+  background: var(--kit-color-bg-canvas);
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-sans);
+  font-size: var(--kit-text-body-size);
+  font-weight: var(--kit-text-body-weight);
+  line-height: var(--kit-text-body-line-height);
+}
+
+:where([data-kit="ai-conversation"]) {
+  --_measure: calc(var(--kit-size-56) * 14);
+
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-block-size: 0;
+}
+
+:where([data-kit="ai-conversation-scroller"]) {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+:where([data-kit="ai-conversation-content"]) {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-6);
+  inline-size: 100%;
+  max-inline-size: var(--_measure);
+  margin-inline: auto;
+  padding-block: var(--kit-space-6);
+  padding-inline: var(--kit-space-4);
+}
+
+:where([data-kit="ai-message-list"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-6);
+}
+
+:where([data-kit="ai-pending"]) {
+  padding-inline: var(--kit-space-2);
+  color: var(--kit-color-text-tertiary);
+}
+
+:where([data-kit="ai-jump-to-latest"]) {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: var(--kit-space-3);
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  z-index: var(--kit-z-sticky);
+}
+
+:where([data-kit="ai-jump-to-latest"] > *) {
+  pointer-events: auto;
+  background-color: var(--kit-color-bg-surface);
+  box-shadow: var(--kit-shadow-raised);
+}
+
+:where([data-kit="ai-chat-composer"]) {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--kit-space-2);
+  inline-size: 100%;
+  max-inline-size: var(--_measure);
+  margin-inline: auto;
+  padding-block: var(--kit-space-2) var(--kit-space-3);
+  padding-inline: var(--kit-space-4);
+}
+
+:where([data-kit="ai-disclaimer"]) {
+  margin: 0;
+  color: var(--kit-color-text-tertiary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+  text-align: center;
+}
+
+/* ---------------------------------------------------------------- Empty */
+
+:where([data-kit="ai-empty-thread"]) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--kit-space-3);
+  padding-block: var(--kit-space-12);
+  text-align: center;
+}
+
+:where([data-kit="ai-empty-icon"]) {
+  display: inline-flex;
+  color: var(--kit-color-accent-default);
+}
+
+:where([data-kit="ai-empty-title"]) {
+  margin: 0;
+  font-size: var(--kit-text-h3-size);
+  font-weight: var(--kit-text-h3-weight);
+  line-height: var(--kit-text-h3-line-height);
+}
+
+:where([data-kit="ai-empty-description"]) {
+  margin: 0;
+  color: var(--kit-color-text-secondary);
+}
+
+/* ------------------------------------------------------------ Suggestions */
+
+:where([data-kit="ai-suggestions"] > ul) {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--kit-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* --------------------------------------------------------------- Message */
+
+:where([data-kit="ai-message"]) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kit-space-3);
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+/* The user's messages sit at the end of the line (the right in LTR, the left in RTL). */
+:where([data-kit="ai-message"][data-role="user"]) {
+  justify-content: flex-end;
+}
+
+:where([data-kit="ai-message"][data-role="system"]) {
+  justify-content: center;
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="ai-message-avatar"]) {
+  display: inline-flex;
+  flex: none;
+}
+
+:where([data-kit="ai-message-main"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-2);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:where([data-kit="ai-message"][data-role="user"] > [data-kit="ai-message-main"]) {
+  align-items: flex-end;
+  max-inline-size: 85%;
+}
+
+:where([data-kit="ai-message"][data-role="assistant"] > [data-kit="ai-message-main"]) {
+  flex: 1 1 auto;
+}
+
+:where([data-kit="ai-message-header"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kit-space-2);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="ai-message-author"]) {
+  color: var(--kit-color-text-primary);
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="ai-message-content"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-3);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow-wrap: anywhere;
+}
+
+:where([data-kit="ai-message"][data-role="user"] [data-kit="ai-message-content"]) {
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-4);
+  border-radius: var(--kit-radius-panel);
+  background: var(--kit-color-accent-subtle);
+}
+
+:where([data-kit="ai-message-text"]) {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+:where([data-kit="ai-message-part"]) {
+  min-inline-size: 0;
+}
+
+:where([data-kit="ai-message-status"], [data-kit="ai-message-usage"]) {
+  margin: 0;
+  color: var(--kit-color-text-tertiary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="ai-message-status"][data-status="stopped"]) {
+  color: var(--kit-color-text-secondary);
+  font-style: italic;
+}
+
+:where([data-kit="ai-message-edited"], [data-kit="ai-message-time"]) {
+  color: var(--kit-color-text-tertiary);
+}
+
+/* Message editor */
+
+:where([data-kit="ai-message-editor"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-2);
+  inline-size: 100%;
+  min-inline-size: calc(var(--kit-size-56) * 4);
+}
+
+:where([data-kit="ai-message-editor"] textarea) {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: var(--kit-size-control-md);
+  block-size: var(--_ai-height, auto);
+  max-block-size: calc(var(--_ai-max-rows, 12) * 1lh);
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-control);
+  background: var(--kit-color-bg-surface);
+  color: var(--kit-color-text-primary);
+  font: inherit;
+  resize: none;
+}
+
+:where([data-kit="ai-message-editor"] textarea):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="ai-message-editor-actions"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kit-space-2);
+  justify-content: flex-end;
+}
+
+/* ------------------------------------------------------- Message actions */
+
+:where([data-kit="ai-message-actions"]) {
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit="ai-branch-nav"]) {
+  display: inline-flex;
+  align-items: center;
+}
+
+:where([data-kit="ai-branch-position"]) {
+  min-inline-size: var(--kit-size-24);
+  text-align: center;
+  font-size: var(--kit-text-caption-size);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit="ai-copy"]) {
+  display: inline-flex;
+}
+
+:where([data-kit="ai-copy"][data-state="copied"]) {
+  color: var(--kit-color-status-success-foreground);
+}
+
+/* -------------------------------------------------------------- Markdown */
+
+:where([data-kit="ai-markdown"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-3);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+/* The blocks of one reply flow like one document. */
+:where([data-kit="ai-markdown"] > *) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-3);
+  min-inline-size: 0;
+}
+
+:where([data-kit="ai-markdown"] :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, hr, pre)) {
+  margin: 0;
+}
+
+:where([data-kit="ai-markdown"] :is(h1, h2, h3)) {
+  font-size: var(--kit-text-h3-size);
+  font-weight: var(--kit-text-h3-weight);
+  line-height: var(--kit-text-h3-line-height);
+}
+
+:where([data-kit="ai-markdown"] h4) {
+  font-size: var(--kit-text-h4-size);
+  font-weight: var(--kit-text-h4-weight);
+  line-height: var(--kit-text-h4-line-height);
+}
+
+:where([data-kit="ai-markdown"] :is(h5, h6)) {
+  font-size: var(--kit-text-label-size);
+  font-weight: var(--kit-text-label-weight);
+  line-height: var(--kit-text-label-line-height);
+}
+
+:where([data-kit="ai-markdown"] :is(ul, ol)) {
+  padding-inline-start: var(--kit-space-6);
+}
+
+:where([data-kit="ai-markdown"] li) {
+  margin-block: var(--kit-space-1);
+}
+
+:where([data-kit="ai-markdown"] :is(ul, ol) :is(ul, ol)) {
+  margin-block-start: var(--kit-space-1);
+}
+
+:where([data-kit="ai-markdown"] .contains-task-list) {
+  padding-inline-start: 0;
+  list-style: none;
+}
+
+:where([data-kit="ai-markdown"] .task-list-item > input) {
+  margin-inline: 0 var(--kit-space-2);
+}
+
+:where([data-kit="ai-markdown"] blockquote) {
+  padding-inline-start: var(--kit-space-3);
+  border-inline-start: var(--kit-border-width-emphasis) solid var(--kit-color-border-strong);
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit="ai-markdown"] hr) {
+  inline-size: 100%;
+  border: 0;
+  border-block-start: var(--kit-border-width-default) solid var(--kit-color-border-default);
+}
+
+:where([data-kit="ai-markdown"] :not(pre) > code) {
+  padding-block: var(--kit-space-0-5);
+  padding-inline: var(--kit-space-1);
+  border-radius: var(--kit-radius-4);
+  background: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+  font-family: var(--kit-font-family-mono);
+  font-size: var(--kit-text-code-size);
+  font-weight: var(--kit-text-code-weight);
+  unicode-bidi: isolate;
+}
+
+:where([data-kit="ai-markdown-link"], [data-kit="ai-source-link"]) {
+  color: var(--kit-color-text-link);
+  text-decoration: underline;
+}
+
+:where([data-kit="ai-markdown-link"][data-blocked], [data-kit="ai-source-link"][data-inert]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+:where([data-kit="ai-markdown-image"]) {
+  max-inline-size: 100%;
+  block-size: auto;
+  border-radius: var(--kit-radius-control);
+}
+
+:where([data-kit="ai-markdown-image"][data-blocked]) {
+  color: var(--kit-color-text-secondary);
+  font-style: italic;
+}
+
+:where([data-kit="ai-markdown-table"]) {
+  max-inline-size: 100%;
+  overflow-x: auto;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-control);
+}
+
+:where([data-kit="ai-markdown-table"] table) {
+  inline-size: 100%;
+  border-collapse: collapse;
+  font-size: var(--kit-text-label-size);
+}
+
+:where([data-kit="ai-markdown-table"] :is(th, td)) {
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  border-block-end: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  text-align: start;
+  vertical-align: top;
+}
+
+:where([data-kit="ai-markdown-table"] th) {
+  background: var(--kit-color-bg-raised);
+  font-weight: var(--kit-font-weight-semibold);
+  white-space: nowrap;
+}
+
+:where([data-kit="ai-markdown-table"] tr:last-child > td) {
+  border-block-end: 0;
+}
+
+:where([data-kit="ai-markdown"] [data-footnotes]) {
+  padding-block-start: var(--kit-space-2);
+  border-block-start: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+/* The "Footnotes" heading is for assistive technology only. */
+:where([data-kit="ai-markdown"] [data-footnote-label]) {
+  position: absolute;
+  inline-size: var(--kit-border-width-default);
+  block-size: var(--kit-border-width-default);
+  margin: calc(var(--kit-border-width-default) * -1);
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Citation chips */
+
+:where([data-kit="ai-citation"]) {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--kit-size-16);
+  block-size: var(--kit-size-16);
+  margin-inline: var(--kit-space-0-5);
+  padding-inline: var(--kit-space-1);
+  border-radius: var(--kit-radius-pill);
+  background: var(--kit-color-accent-subtle);
+  color: var(--kit-color-accent-11);
+  font-size: var(--kit-font-size-12);
+  font-weight: var(--kit-font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  text-decoration: none;
+  vertical-align: text-top;
+}
+
+:where(a[data-kit="ai-citation"]):hover {
+  background: var(--kit-color-accent-4);
+}
+
+:where([data-kit="ai-citation"][data-inert]) {
+  background: color-mix(in srgb, var(--kit-color-text-primary) 8%, transparent);
+  color: var(--kit-color-text-secondary);
+}
+
+/* ------------------------------------------------------------ Code block */
+
+:where([data-kit="ai-code-block"], [data-kit="ai-json-view"]) {
+  overflow: hidden;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-control);
+  background: var(--kit-color-bg-surface);
+}
+
+:where([data-kit="ai-code-block-header"], [data-kit="ai-json-view-header"]) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--kit-space-2);
+  padding-block: var(--kit-space-0-5);
+  padding-inline: var(--kit-space-3) var(--kit-space-1);
+  border-block-end: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  background: var(--kit-color-bg-raised);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="ai-code-block-language"], [data-kit="ai-json-view-label"]) {
+  font-family: var(--kit-font-family-mono);
+}
+
+:where([data-kit="ai-code-block"] pre, [data-kit="ai-json-view"] pre) {
+  margin: 0;
+  padding: var(--kit-space-3);
+  overflow-x: auto;
+  color: var(--kit-color-text-primary);
+  font-family: var(--kit-font-family-mono);
+  font-size: var(--kit-text-code-size);
+  font-weight: var(--kit-text-code-weight);
+  line-height: var(--kit-text-code-line-height);
+  tab-size: 2;
+  white-space: pre;
+}
+
+:where([data-kit="ai-json-view"] pre) {
+  max-block-size: calc(var(--kit-size-56) * 6);
+  overflow-y: auto;
+}
+
+/* ------------------------------------------------------------- Reasoning */
+
+:where([data-kit="ai-reasoning"]) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+:where([data-kit="ai-reasoning-panel"]) {
+  align-self: stretch;
+  margin-inline-start: var(--kit-space-3);
+  padding-inline-start: var(--kit-space-3);
+  border-inline-start: var(--kit-border-width-emphasis) solid var(--kit-color-border-subtle);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+}
+
+/* ------------------------------------------------------------- Tool call */
+
+:where([data-kit="ai-tool-call"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-2);
+  padding: var(--kit-space-1);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-panel);
+  background: var(--kit-color-bg-surface);
+}
+
+:where([data-kit="ai-tool-call"][data-state="needs-approval"]) {
+  border-color: var(--kit-color-status-warning-border);
+}
+
+:where([data-kit="ai-tool-call"][data-state="failed"], [data-kit="ai-tool-call"][data-state="denied"]) {
+  border-color: var(--kit-color-status-danger-border);
+}
+
+:where([data-kit="ai-tool-call-trigger"]) {
+  inline-size: 100%;
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit="ai-tool-call-trigger"] > :last-child) {
+  margin-inline-start: auto;
+}
+
+:where([data-kit="ai-tool-call-name"]) {
+  font-family: var(--kit-font-family-mono);
+  font-size: var(--kit-text-code-size);
+  unicode-bidi: isolate;
+}
+
+:where([data-kit="ai-tool-call-duration"]) {
+  color: var(--kit-color-text-tertiary);
+  font-size: var(--kit-text-caption-size);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit="ai-tool-call-error"]) {
+  margin: 0;
+  padding-inline: var(--kit-space-2);
+  color: var(--kit-color-status-danger-foreground);
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+}
+
+:where([data-kit="ai-tool-call-error"][data-aborted]) {
+  color: var(--kit-color-text-secondary);
+}
+
+:where([data-kit="ai-tool-call-note"], [data-kit="ai-tool-call-empty"]) {
+  margin: 0;
+  padding-inline: var(--kit-space-2);
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-label-size);
+}
+
+:where([data-kit="ai-tool-call-panel"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-2);
+  padding: var(--kit-space-2);
+}
+
+:where([data-kit="ai-tool-call-panel"][hidden]) {
+  display: none;
+}
+
+/* ------------------------------------------------------ Approval prompt */
+
+:where([data-kit="ai-approval-prompt"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-3);
+  margin: var(--kit-space-1);
+  padding: var(--kit-space-3);
+  border: var(--kit-border-width-emphasis) solid var(--kit-color-status-warning-border);
+  border-radius: var(--kit-radius-control);
+  background: var(--kit-color-status-warning-background);
+  color: var(--kit-color-status-warning-foreground);
+}
+
+/* The prompt takes focus when it appears, so it shows the ring whenever it has focus. */
+:where([data-kit="ai-approval-prompt"]):focus {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="ai-approval-title"]) {
+  margin: 0;
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="ai-approval-description"], [data-kit="ai-approval-no-input"]) {
+  margin: 0;
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+}
+
+:where([data-kit="ai-approval-prompt"] [data-kit="ai-json-view"]) {
+  color: var(--kit-color-text-primary);
+}
+
+:where([data-kit="ai-approval-reason"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-1);
+  font-size: var(--kit-text-label-size);
+}
+
+:where([data-kit="ai-approval-reason"] input) {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: var(--kit-size-control-md);
+  padding-inline: var(--kit-space-3);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-control);
+  background: var(--kit-color-bg-surface);
+  color: var(--kit-color-text-primary);
+  font: inherit;
+}
+
+:where([data-kit="ai-approval-reason"] input):focus-visible {
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="ai-approval-buttons"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kit-space-2);
+}
+
+/* --------------------------------------------------------------- Sources */
+
+:where([data-kit="ai-sources"]) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+:where([data-kit="ai-sources-panel"]) {
+  align-self: stretch;
+}
+
+:where([data-kit="ai-sources-list"]) {
+  display: grid;
+  gap: var(--kit-space-2);
+  margin: var(--kit-space-1) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where([data-kit="ai-source"]) {
+  display: flex;
+  gap: var(--kit-space-3);
+  padding: var(--kit-space-2);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  border-radius: var(--kit-radius-control);
+  background: var(--kit-color-bg-surface);
+}
+
+:where([data-kit="ai-source-index"]) {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--kit-size-20);
+  block-size: var(--kit-size-20);
+  border-radius: var(--kit-radius-full);
+  background: var(--kit-color-accent-subtle);
+  color: var(--kit-color-accent-11);
+  font-size: var(--kit-font-size-12);
+  font-weight: var(--kit-font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit="ai-source-body"]) {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+}
+
+:where([data-kit="ai-source-link"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  overflow-wrap: anywhere;
+}
+
+:where([data-kit="ai-source-host"]) {
+  color: var(--kit-color-text-tertiary);
+  font-size: var(--kit-text-caption-size);
+}
+
+:where([data-kit="ai-source-snippet"]) {
+  margin: var(--kit-space-1) 0 0;
+  color: var(--kit-color-text-secondary);
+}
+
+/* ----------------------------------------------------------- Attachments */
+
+:where([data-kit="ai-attachments"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kit-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where([data-kit="ai-attachment"][data-kind="image"] img) {
+  display: block;
+  max-inline-size: calc(var(--kit-size-56) * 4);
+  max-block-size: calc(var(--kit-size-56) * 4);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-subtle);
+  border-radius: var(--kit-radius-control);
+  object-fit: cover;
+}
+
+:where([data-kit="ai-attachment-link"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  padding-block: var(--kit-space-1);
+  padding-inline: var(--kit-space-3);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-pill);
+  background: var(--kit-color-bg-surface);
+  color: var(--kit-color-text-primary);
+  font-size: var(--kit-text-label-size);
+  text-decoration: none;
+}
+
+:where([data-kit="ai-attachment-size"]) {
+  color: var(--kit-color-text-tertiary);
+  font-size: var(--kit-text-caption-size);
+}
+
+/* -------------------------------------------------------------- Indicator */
+
+:where([data-kit="ai-streaming-indicator"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-1);
+  block-size: var(--kit-size-16);
+}
+
+:where([data-kit="ai-streaming-dot"]) {
+  inline-size: var(--kit-space-2);
+  block-size: var(--kit-space-2);
+  border-radius: var(--kit-radius-full);
+  background: currentcolor;
+  opacity: 0.3;
+  animation: ai-pulse var(--kit-duration-slow) var(--kit-easing-standard) infinite alternate;
+}
+
+:where([data-kit="ai-streaming-dot"]:nth-child(2)) {
+  animation-delay: var(--kit-duration-base);
+}
+
+:where([data-kit="ai-streaming-dot"]:nth-child(3)) {
+  animation-delay: calc(var(--kit-duration-base) * 2);
+}
+
+@keyframes ai-pulse {
+  from {
+    opacity: 0.3;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/* ----------------------------------------------------------- Error banner */
+
+:where([data-kit="ai-error-banner"]) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--kit-space-3);
+  padding: var(--kit-space-3);
+  border: var(--kit-border-width-default) solid var(--kit-color-status-danger-border);
+  border-radius: var(--kit-radius-panel);
+  background: var(--kit-color-status-danger-background);
+  color: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit="ai-error-banner"][data-kind="rate-limit"]) {
+  border-color: var(--kit-color-status-warning-border);
+  background: var(--kit-color-status-warning-background);
+  color: var(--kit-color-status-warning-foreground);
+}
+
+:where([data-kit="ai-error-icon"]) {
+  display: inline-flex;
+  flex: none;
+}
+
+:where([data-kit="ai-error-body"]) {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--kit-space-1);
+  min-inline-size: 0;
+}
+
+:where([data-kit="ai-error-body"] > p) {
+  margin: 0;
+}
+
+:where([data-kit="ai-error-title"]) {
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="ai-error-description"], [data-kit="ai-error-detail"]) {
+  font-size: var(--kit-text-label-size);
+  line-height: var(--kit-text-label-line-height);
+}
+
+:where([data-kit="ai-error-detail"]) {
+  color: var(--kit-color-text-secondary);
+  overflow-wrap: anywhere;
+}
+
+:where([data-kit="ai-error-actions"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kit-space-2);
+  margin-block-start: var(--kit-space-2);
+}
+
+/* ---------------------------------------------------------------- Prompt */
+
+:where([data-kit="ai-prompt-input"]) {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--kit-space-2);
+  padding: var(--kit-space-2);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-panel);
+  background: var(--kit-color-bg-surface);
+}
+
+/* The box shows the ring while its text field has focus; the field itself draws none, so it is not doubled. */
+:where([data-kit="ai-prompt-input"]):focus-within {
+  border-color: var(--kit-color-border-focus);
+  outline: var(--kit-border-width-focus) solid var(--kit-color-border-focus);
+  outline-offset: var(--kit-space-0-5);
+}
+
+:where([data-kit="ai-prompt-input"][data-disabled]) {
+  background: var(--kit-color-bg-raised);
+  color: var(--kit-color-text-disabled);
+}
+
+:where([data-kit="ai-prompt-row"]) {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--kit-space-2);
+}
+
+:where([data-kit="ai-prompt-textarea"]) {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  min-block-size: var(--kit-size-control-md);
+  block-size: var(--_ai-height, auto);
+  max-block-size: calc(var(--_ai-max-rows, 8) * 1lh);
+  margin: 0;
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-2);
+  border: 0;
+  outline: var(--kit-border-width-focus) solid transparent;
+  background: transparent;
+  color: var(--kit-color-text-primary);
+  font: inherit;
+  line-height: var(--kit-text-body-line-height);
+  overflow-y: auto;
+  resize: none;
+}
+
+:where([data-kit="ai-prompt-textarea"])::placeholder {
+  color: var(--kit-color-text-tertiary);
+}
+
+:where([data-kit="ai-prompt-meta"]) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--kit-space-3);
+  padding-inline: var(--kit-space-2);
+  color: var(--kit-color-text-tertiary);
+  font-size: var(--kit-text-caption-size);
+  line-height: var(--kit-text-caption-line-height);
+}
+
+:where([data-kit="ai-prompt-counter"]) {
+  margin-inline-start: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-kit="ai-prompt-counter"][data-limit]) {
+  color: var(--kit-color-status-danger-foreground);
+  font-weight: var(--kit-font-weight-semibold);
+}
+
+:where([data-kit="ai-prompt-attachments"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--kit-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where([data-kit="ai-prompt-attachment"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-space-2);
+  max-inline-size: 100%;
+  padding-block: var(--kit-space-0-5);
+  padding-inline: var(--kit-space-3) var(--kit-space-1);
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-pill);
+  background: var(--kit-color-bg-raised);
+  font-size: var(--kit-text-label-size);
+}
+
+:where([data-kit="ai-prompt-attachment"][data-status="error"]) {
+  border-color: var(--kit-color-status-danger-border);
+  color: var(--kit-color-status-danger-foreground);
+}
+
+:where([data-kit="ai-prompt-attachment-name"]) {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where([data-kit="ai-prompt-attachment-size"], [data-kit="ai-prompt-attachment-status"]) {
+  color: var(--kit-color-text-tertiary);
+  font-size: var(--kit-text-caption-size);
+}
+
+:where([data-kit="ai-prompt-commands"]) {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 100%;
+  z-index: var(--kit-z-dropdown);
+  box-sizing: border-box;
+  max-block-size: calc(var(--kit-size-56) * 4);
+  margin: 0 0 var(--kit-space-1);
+  padding: var(--kit-space-1);
+  overflow-y: auto;
+  border: var(--kit-border-width-default) solid var(--kit-color-border-default);
+  border-radius: var(--kit-radius-overlay);
+  background: var(--kit-color-bg-raised);
+  box-shadow: var(--kit-shadow-overlay);
+  list-style: none;
+}
+
+:where([data-kit="ai-prompt-commands"] [role="option"]) {
+  display: flex;
+  align-items: baseline;
+  gap: var(--kit-space-3);
+  padding-block: var(--kit-space-2);
+  padding-inline: var(--kit-space-3);
+  border-radius: var(--kit-radius-control);
+  cursor: pointer;
+}
+
+:where([data-kit="ai-prompt-commands"] [role="option"][aria-selected="true"]) {
+  background: var(--kit-color-accent-subtle);
+}
+
+:where([data-kit="ai-prompt-command-name"]) {
+  font-family: var(--kit-font-family-mono);
+  font-size: var(--kit-text-code-size);
+}
+
+:where([data-kit="ai-prompt-command-description"]) {
+  color: var(--kit-color-text-secondary);
+  font-size: var(--kit-text-caption-size);
+}
+
+:where([data-kit="ai-prompt-drop"]) {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  border: var(--kit-border-width-emphasis) dashed var(--kit-color-accent-default);
+  border-radius: inherit;
+  background: color-mix(in srgb, var(--kit-color-bg-surface) 88%, transparent);
+  color: var(--kit-color-accent-11);
+  font-weight: var(--kit-font-weight-semibold);
+  pointer-events: none;
+}
+
+/* ------------------------------------------------------------ Preferences */
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-kit="ai-streaming-dot"]) {
+    opacity: 0.6;
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :where([data-kit="ai-message"][data-role="user"] [data-kit="ai-message-content"]) {
+    border: var(--kit-border-width-default) solid CanvasText;
+  }
+
+  :where([data-kit="ai-citation"], [data-kit="ai-source-index"]) {
+    border: var(--kit-border-width-default) solid ButtonText;
+  }
+
+  :where([data-kit="ai-streaming-dot"]) {
+    background: CanvasText;
+    opacity: 1;
+  }
+
+  :where([data-kit="ai-prompt-commands"] [role="option"][aria-selected="true"]) {
+    outline: var(--kit-border-width-focus) solid Highlight;
+    outline-offset: calc(var(--kit-border-width-focus) * -1);
+  }
+
+  :where([data-kit="ai-prompt-drop"]) {
+    border-color: Highlight;
+    background: Canvas;
+    color: CanvasText;
+  }
+
+  :where(
+      [data-kit="ai-tool-call"],
+      [data-kit="ai-approval-prompt"],
+      [data-kit="ai-error-banner"],
+      [data-kit="ai-code-block"],
+      [data-kit="ai-json-view"],
+      [data-kit="ai-markdown-table"],
+      [data-kit="ai-prompt-input"]
+    ) {
+    border-color: CanvasText;
+  }
+
+  :where([data-kit="ai-prompt-input"]):focus-within {
+    border-color: Highlight;
+  }
+
+  :where([data-kit="ai-markdown"] :not(pre) > code) {
+    border: var(--kit-border-width-default) solid CanvasText;
+  }
+}