@runtypelabs/persona 4.7.0 → 4.9.0

package/src/styles/widget.css

@@ -53,10 +53,6 @@
   align-items: center;
 }
 
-.persona-items-end {
-  align-items: flex-end;
-}
-
 .persona-items-start {
   align-items: flex-start;
 }
@@ -238,6 +234,24 @@
   border-radius: var(--persona-button-radius);
 }
 
+/* Composer ghost icon buttons (attachment + mention): transparent, neutral
+   foreground, subtle hover. Themeable via `components.button.ghost.*`
+   → `--persona-button-ghost-*`. The `[data-persona-root]` prefix outranks the
+   `.persona-rounded-button` full-radius above so the ghost radius wins. */
+[data-persona-root] .persona-mention-button,
+[data-persona-root] .persona-attachment-button {
+  background-color: var(--persona-button-ghost-bg, transparent);
+  color: var(--persona-button-ghost-fg, var(--persona-text, #111827));
+  border: none;
+  border-radius: var(--persona-button-ghost-radius, var(--persona-radius-md, 0.375rem));
+  transition: background-color 0.15s ease;
+}
+
+[data-persona-root] .persona-mention-button:hover,
+[data-persona-root] .persona-attachment-button:hover {
+  background-color: var(--persona-button-ghost-hover-bg, rgba(0, 0, 0, 0.05));
+}
+
 .persona-overflow-hidden {
   overflow: hidden;
 }
@@ -274,10 +288,6 @@
   background-color: #f3f4f6;
 }
 
-.persona-bg-gray-200 {
-  background-color: #e5e7eb;
-}
-
 .persona-text-persona-primary {
   color: var(--persona-primary, #171717);
 }
@@ -436,14 +446,6 @@
   padding-left: 0.75rem;
 }
 
-.persona-pl-7 {
-  padding-left: 1.75rem;
-}
-
-.persona-pr-7 {
-  padding-right: 1.75rem;
-}
-
 .persona-pl-8 {
   padding-left: 2rem;
 }
@@ -526,22 +528,10 @@
   opacity: 0.5;
 }
 
-.persona-shadow-2xl {
-  box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.35);
-}
-
 .persona-shadow-sm {
   box-shadow: 0 5px 15px rgba(15, 23, 42, 0.08);
 }
 
-.persona-shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
-}
-
-.persona-shadow-lg {
-  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
-}
-
 .persona-border {
   border-width: 1px;
   border-style: solid;
@@ -558,14 +548,6 @@
   border-bottom-color: rgba(148, 163, 184, 0.28);
 }
 
-.persona-border-gray-100 {
-  border-color: #f1f5f9;
-}
-
-.persona-border-persona-secondary {
-  border-color: var(--persona-secondary, #7c3aed);
-}
-
 .persona-border-persona-border {
   border-color: var(--persona-border, #e5e7eb);
 }
@@ -576,18 +558,6 @@
   border-top-color: rgba(148, 163, 184, 0.28);
 }
 
-.persona-border-t-persona-border {
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: var(--persona-border, #f1f5f9);
-}
-
-.persona-border-b-persona-border {
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--persona-border, #f1f5f9);
-}
-
 .persona-border-t-persona-divider {
   border-top-width: 1px;
   border-top-style: solid;
@@ -664,13 +634,6 @@
   width: 2.5rem;
 }
 
-.persona-h-12 {
-  height: 3rem;
-}
-
-.persona-w-12 {
-  width: 3rem;
-}
 
 .persona-leading-relaxed {
   line-height: 1.75;
@@ -725,6 +688,10 @@
   flex-shrink: 0;
 }
 
+.persona-shrink-0 {
+  flex-shrink: 0;
+}
+
 .persona-min-w-0 {
   min-width: 0;
 }
@@ -773,8 +740,6 @@
   margin-top: 0.5rem;
 }
 
-.persona-h-12,
-.persona-w-12,
 .persona-h-10,
 .persona-w-10,
 .persona-h-8,
@@ -786,10 +751,6 @@
   text-align: right;
 }
 
-.hover\:persona-bg-gray-200:hover {
-  background-color: #e5e7eb;
-}
-
 .hover\:persona-bg-persona-container:hover {
   background-color: var(--persona-container, #f8fafc);
 }
@@ -863,6 +824,10 @@
   overflow-y: auto;
 }
 
+.persona-overflow-x-auto {
+  overflow-x: auto;
+}
+
 .persona-widget-body {
   overscroll-behavior: contain;
 }
@@ -1340,68 +1305,6 @@
   font-size: 0.8125rem;
 }
 
-/* Code block copy button */
-.persona-code-block-wrapper {
-  position: relative;
-  margin: 0.5rem 0;
-}
-
-.persona-code-block-wrapper pre {
-  margin: 0 !important;
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-}
-
-.persona-code-block-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: var(--persona-md-code-block-bg, #f3f4f6);
-  border: 1px solid var(--persona-md-code-block-border-color, #e5e7eb);
-  border-bottom: none;
-  border-top-left-radius: var(--persona-md-code-block-border-radius, 0.375rem);
-  border-top-right-radius: var(--persona-md-code-block-border-radius, 0.375rem);
-  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
-  font-size: 0.75rem;
-  color: var(--persona-text-muted, #6b7280);
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
-}
-
-.persona-code-copy-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  cursor: pointer;
-  color: var(--persona-text-muted, #6b7280);
-  font-size: 0.75rem;
-  font-family: inherit;
-  line-height: 1;
-  transition: color 0.15s ease, border-color 0.15s ease;
-}
-
-.persona-code-copy-btn:hover {
-  color: var(--persona-text, #111827);
-  border-color: var(--persona-md-code-block-border-color, #e5e7eb);
-}
-
-.persona-code-copy-btn.persona-code-copied {
-  color: #16a34a;
-}
-
-.persona-code-copy-btn.persona-code-copy-generating {
-  cursor: default;
-  opacity: 0.5;
-}
-
-.persona-code-copy-btn.persona-code-copy-generating:hover {
-  color: var(--persona-text-muted, #6b7280);
-  border-color: transparent;
-}
-
 /* Ensure all links in chat bubbles have underlines */
 .persona-message-bubble a {
   text-decoration: underline;
@@ -2668,7 +2571,12 @@
 }
 
 /* Document toolbar preset: optional layout vars: --persona-artifact-doc-toolbar-icon-color, etc. */
-[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn {
+/* Document-toolbar icon/copy button styling is shared by the artifact pane's
+   document preset and the inline chrome actions cluster, so both surfaces read
+   the same `components.artifact.toolbar` tokens (the vars are emitted globally
+   at the widget root). */
+[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn,
+[data-persona-root] .persona-artifact-inline-chrome-actions .persona-artifact-doc-icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2681,17 +2589,20 @@
   line-height: 1;
 }
 
-[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn:hover {
+[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn:hover,
+[data-persona-root] .persona-artifact-inline-chrome-actions .persona-artifact-doc-icon-btn:hover {
   color: var(--persona-artifact-toolbar-icon-hover-color, inherit);
-  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-container, #f3f4f6));
+  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-icon-btn-hover-bg, var(--persona-container, #f3f4f6)));
 }
 
-[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn[aria-pressed="true"] {
-  background: var(--persona-artifact-doc-toggle-active-bg, var(--persona-container, #f3f4f6));
-  border-color: var(--persona-artifact-doc-toggle-active-border, var(--persona-border, #e5e7eb));
+[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-icon-btn[aria-pressed="true"],
+[data-persona-root] .persona-artifact-inline-chrome-actions .persona-artifact-doc-icon-btn[aria-pressed="true"] {
+  background: var(--persona-artifact-doc-toggle-active-bg, var(--persona-icon-btn-active-bg, var(--persona-container, #f3f4f6)));
+  border-color: var(--persona-artifact-doc-toggle-active-border, var(--persona-icon-btn-active-border, var(--persona-border, #e5e7eb)));
 }
 
-[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-copy-btn {
+[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-copy-btn,
+[data-persona-root] .persona-artifact-inline-chrome-actions .persona-artifact-doc-copy-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
@@ -2705,19 +2616,23 @@
   line-height: 1.25;
 }
 
-[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-copy-btn:hover {
-  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-container, #f3f4f6));
+[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-copy-btn:hover,
+[data-persona-root] .persona-artifact-inline-chrome-actions .persona-artifact-doc-copy-btn:hover {
+  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-icon-btn-hover-bg, var(--persona-container, #f3f4f6)));
 }
 
-[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-copy-label {
-  font-weight: 500;
-}
 
 /* Artifact tab theming */
 [data-persona-root] .persona-artifact-tab {
   background: var(--persona-artifact-tab-bg, transparent);
   border-radius: var(--persona-artifact-tab-radius, 0.5rem);
   color: var(--persona-artifact-tab-color, inherit);
+  /* Keep each tab on one line and cap its width so the strip scrolls
+     horizontally instead of wrapping/overflowing the pane. */
+  white-space: nowrap;
+  max-width: var(--persona-artifact-tab-max-width, 12rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 [data-persona-root] .persona-artifact-tab.persona-bg-persona-container {
@@ -2730,27 +2645,40 @@
   background: var(--persona-artifact-toolbar-bg, var(--persona-surface, #fff));
 }
 
-/* Toggle group gap */
-[data-persona-root] .persona-artifact-toggle-group {
-  gap: var(--persona-artifact-toolbar-toggle-group-gap, 0.25rem);
-}
-
-/* Toggle button border-radius (view/code buttons) */
-[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-view-btn,
-[data-persona-root] .persona-artifact-toolbar-document .persona-artifact-code-btn {
-  border-radius: var(--persona-artifact-toolbar-toggle-radius, var(--persona-artifact-toolbar-icon-radius, var(--persona-radius-md, 0.375rem)));
-}
+/* Toggle group + view/code button styling lives in the segmented
+   .persona-toggle-group.persona-artifact-toggle-group block further down. */
 
 /* Tab hover */
 [data-persona-root] .persona-artifact-tab:hover {
   background: var(--persona-artifact-tab-hover-bg, var(--persona-container, #f3f4f6));
 }
 
+/* Keyboard focus ring, themed to match cards/buttons instead of the UA default
+   (which varies by browser). Custom renderTabBar bars reuse .persona-artifact-tab,
+   so they inherit the same ring; give a scroll container enough padding that the
+   2px offset isn't clipped. */
+[data-persona-root] .persona-artifact-tab:focus-visible {
+  outline: 2px solid var(--persona-accent, #171717);
+  outline-offset: 2px;
+}
+
 /* Tab list container */
 [data-persona-root] .persona-artifact-list {
   background: var(--persona-artifact-tab-list-bg, transparent);
   border-bottom-color: var(--persona-artifact-tab-list-border-color, var(--persona-border, #e5e7eb));
   padding: var(--persona-artifact-tab-list-padding, 0.5rem);
+  /* Thin, unobtrusive horizontal scrollbar for the tab strip. */
+  scrollbar-width: thin;
+  scroll-behavior: smooth;
+}
+
+[data-persona-root] .persona-artifact-list::-webkit-scrollbar {
+  height: 6px;
+}
+
+[data-persona-root] .persona-artifact-list::-webkit-scrollbar-thumb {
+  background: var(--persona-artifact-tab-list-scrollbar, var(--persona-border, #e5e7eb));
+  border-radius: 9999px;
 }
 
 /* Toolbar border override */
@@ -2758,6 +2686,23 @@
   border-bottom: var(--persona-artifact-toolbar-border, 1px solid var(--persona-border, #e5e7eb));
 }
 
+/* Artifact reference card (chat thread) */
+[data-persona-root] .persona-artifact-card {
+  background: var(--persona-artifact-card-bg, var(--persona-surface, #ffffff));
+  border: var(--persona-artifact-card-border, 1px solid var(--persona-border, #e5e7eb));
+  border-radius: var(--persona-artifact-card-radius, var(--persona-message-assistant-radius, var(--persona-radius-lg, 0.5rem)));
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+[data-persona-root] .persona-artifact-card:hover {
+  background: var(--persona-artifact-card-hover-bg, #f3f4f6);
+  border-color: var(--persona-artifact-card-hover-border, var(--persona-border, #e5e7eb));
+}
+[data-persona-root] .persona-artifact-card:focus-visible {
+  outline: 2px solid var(--persona-accent, #171717);
+  outline-offset: 2px;
+}
+
 /* ── Composable button utilities ── */
 
 /* Icon button: base for all icon-only buttons created by createIconButton() */
@@ -2929,6 +2874,89 @@
   border-bottom-right-radius: var(--persona-toggle-group-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem)));
 }
 
+/* Artifact view/source toggle: one segmented pill. The container carries the
+   border; segments are borderless and the active one is highlighted, so the
+   pair reads as a single mutually exclusive switch instead of two buttons. */
+[data-persona-root] .persona-toggle-group.persona-artifact-toggle-group {
+  gap: var(--persona-artifact-toolbar-toggle-group-gap, 2px);
+  padding: var(--persona-artifact-toolbar-toggle-group-padding, 2px);
+  border: var(--persona-artifact-toolbar-toggle-group-border, 1px solid var(--persona-border, #e5e7eb));
+  /* Default to the toolbar button radius (document preset var, then the plain
+     icon-button var) so the pill matches the neighboring copy/close buttons
+     instead of standing out as a capsule. */
+  border-radius: var(--persona-artifact-toolbar-toggle-group-radius, var(--persona-artifact-toolbar-icon-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem))));
+  background: var(--persona-artifact-toolbar-toggle-group-bg, var(--persona-surface, #ffffff));
+}
+[data-persona-root] .persona-toggle-group.persona-artifact-toggle-group > .persona-icon-btn {
+  border: none;
+  background: transparent;
+  /* Segment padding = standalone icon-button padding minus the container's
+     padding, so the pill's outer height matches the neighboring icon buttons
+     (the container's 1px border stands in for the border the segments lost).
+     calc() clamps to 0 if a theme sets group padding larger than icon padding. */
+  padding: calc(var(--persona-artifact-toolbar-icon-padding, var(--persona-icon-btn-padding, 0.25rem)) - var(--persona-artifact-toolbar-toggle-group-padding, 2px));
+  /* Container radius minus the 2px padding so the segment nests concentrically. */
+  border-radius: var(--persona-artifact-toolbar-toggle-radius, calc(var(--persona-artifact-toolbar-icon-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem))) - 2px));
+}
+[data-persona-root] .persona-toggle-group.persona-artifact-toggle-group > .persona-icon-btn:hover {
+  background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-icon-btn-hover-bg, var(--persona-container, #f3f4f6)));
+}
+[data-persona-root] .persona-toggle-group.persona-artifact-toggle-group > .persona-icon-btn[aria-pressed="true"] {
+  background: var(--persona-artifact-doc-toggle-active-bg, var(--persona-icon-btn-active-bg, var(--persona-container, #f3f4f6)));
+  /* Inset ring instead of a border so documentToolbarToggleActiveBorderColor
+     still applies inside the borderless segment (transparent by default). */
+  box-shadow: inset 0 0 0 1px var(--persona-artifact-doc-toggle-active-border, transparent);
+}
+
+/* Sliding selection thumb: a container ::before that translates between the
+   two equal-width segments, keyed off aria-pressed via :has(). The static
+   aria-pressed background above stays as the fallback for browsers without
+   :has() and is disabled inside the @supports block so the highlight is only
+   ever painted once. Geometry assumes the group's two segments are equal
+   width (both are square icon buttons). */
+@supports selector(:has(*)) {
+  [data-persona-root] .persona-toggle-group.persona-artifact-toggle-group {
+    position: relative;
+  }
+  [data-persona-root] .persona-toggle-group.persona-artifact-toggle-group::before {
+    content: "";
+    position: absolute;
+    top: var(--persona-artifact-toolbar-toggle-group-padding, 2px);
+    bottom: var(--persona-artifact-toolbar-toggle-group-padding, 2px);
+    left: var(--persona-artifact-toolbar-toggle-group-padding, 2px);
+    width: calc(
+      50% - var(--persona-artifact-toolbar-toggle-group-padding, 2px) -
+        (var(--persona-artifact-toolbar-toggle-group-gap, 2px) / 2)
+    );
+    border-radius: var(--persona-artifact-toolbar-toggle-radius, calc(var(--persona-artifact-toolbar-icon-radius, var(--persona-icon-btn-radius, var(--persona-radius-md, 0.375rem))) - 2px));
+    background: var(--persona-artifact-doc-toggle-active-bg, var(--persona-icon-btn-active-bg, var(--persona-container, #f3f4f6)));
+    box-shadow: inset 0 0 0 1px var(--persona-artifact-doc-toggle-active-border, transparent);
+    transition: transform 0.18s ease;
+    pointer-events: none;
+  }
+  [data-persona-root]
+    .persona-toggle-group.persona-artifact-toggle-group:has(
+      > .persona-icon-btn:last-child[aria-pressed="true"]
+    )::before {
+    transform: translateX(calc(100% + var(--persona-artifact-toolbar-toggle-group-gap, 2px)));
+  }
+  /* Positioned so the segments paint above the absolutely positioned thumb
+     (document order applies once both are in the positioned layer). */
+  [data-persona-root] .persona-toggle-group.persona-artifact-toggle-group > .persona-icon-btn {
+    position: relative;
+  }
+  /* The thumb carries the highlight; keep the segment itself transparent. */
+  [data-persona-root] .persona-toggle-group.persona-artifact-toggle-group > .persona-icon-btn[aria-pressed="true"] {
+    background: transparent;
+    box-shadow: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-persona-root] .persona-toggle-group.persona-artifact-toggle-group::before {
+      transition: none;
+    }
+  }
+}
+
 /* Combo button: label + chevron with dropdown */
 [data-persona-root] .persona-combo-btn {
   font-size: var(--persona-combo-btn-font-size, 0.8125rem);
@@ -3019,11 +3047,560 @@
     max-width: var(--persona-artifact-pane-max-width, 28rem);
     min-width: var(--persona-artifact-pane-min-width, 0);
     flex-shrink: 0;
-    box-shadow: var(--persona-artifact-pane-shadow, -2px 0 12px rgba(15, 23, 42, 0.06));
+    /* No default elevation on the pane; welded reads as one card, detached and
+       the drawer set their own shadow. Explicit paneShadow still wins. */
+    box-shadow: var(--persona-artifact-pane-shadow, none);
+  }
+}
+
+/* Expanded artifact pane: pane takes the whole split root, chat column hides.
+   Split-view only: below 641px / narrow hosts the drawer already covers everything. */
+@media (min-width: 641px) {
+  [data-persona-root].persona-artifact-expanded .persona-artifact-split-root > :first-child {
+    display: none;
+  }
+  [data-persona-root].persona-artifact-expanded .persona-artifact-pane {
+    width: 100%;
+    max-width: none;
+  }
+  [data-persona-root].persona-artifact-expanded .persona-artifact-split-handle {
+    display: none !important;
+  }
+}
+@media (max-width: 640px) {
+  [data-persona-root] .persona-artifact-expand-btn {
+    display: none !important;
   }
 }
+[data-persona-root].persona-artifact-narrow-host .persona-artifact-expand-btn {
+  display: none !important;
+}
 
 /* paneBorderRadius: works on any paneAppearance; overflow clips content to rounded shape */
+/* Positioned frame wrapping the sandboxed preview iframe (artifact-preview.ts).
+   `position: relative` gives the absolute loading overlay a containing block
+   (the shared preview body is display: contents, so the iframe alone has no
+   positioning context). The frame owns the rendered height and the iframe is
+   100% of it — see the pane default here and the inline overrides below.
+
+   Opaque-canvas / color-scheme trap: an opaque-origin srcdoc (sandbox without
+   allow-same-origin) that declares no color-scheme can get a UA-forced opaque
+   canvas that flashes before content paints. Declaring color-scheme on the
+   iframe plus an explicit background on both the frame and iframe makes the
+   pre-paint surface a deliberate, themeable canvas rather than an uncontrolled
+   flash. Artifact content generally assumes a light canvas, so white stays the
+   default; override via --persona-artifact-frame-bg. */
+[data-persona-root] .persona-artifact-frame {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--persona-artifact-frame-bg, #ffffff);
+}
+/* Previewable file artifact: sandboxed iframe fills its frame. */
+[data-persona-root] .persona-artifact-iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  color-scheme: light;
+  background: var(--persona-artifact-frame-bg, #ffffff);
+}
+
+/* Loading overlay above the preview iframe (artifact-preview.ts): absolutely
+   fills the frame with the same themed canvas the iframe paints onto, so the
+   pre-paint area reads as one deliberate surface. Appended only after
+   `loading.delayMs`; the --out modifier fades it before removal. */
+[data-persona-root] .persona-artifact-frame-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--persona-artifact-frame-bg, #ffffff);
+  opacity: 1;
+  transition: opacity var(--persona-artifact-frame-loading-fade, 200ms) ease;
+}
+[data-persona-root] .persona-artifact-frame-loading--out {
+  opacity: 0;
+}
+/* Default indicator column: the icon spinner, with the escalation label (when
+   present) stacked below it. Icon-first, text only as a later escalation. */
+[data-persona-root] .persona-artifact-frame-loading-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.625rem;
+}
+/* Escalation label: calm, muted, small — NO shimmer (deliberate, per research).
+   Hidden until setupPreviewLoading adds --visible after labelDelayMs; a plain
+   opacity transition fades it in. */
+[data-persona-root] .persona-artifact-frame-loading-text {
+  color: var(
+    --persona-artifact-frame-loading-color,
+    var(--persona-text-muted, #6b7280)
+  );
+  font-size: 0.8125rem;
+  font-weight: 500;
+  opacity: 0;
+  transition: opacity 240ms ease;
+}
+[data-persona-root] .persona-artifact-frame-loading-text--visible {
+  opacity: 1;
+}
+
+/* Reusable icon spinner (utils/spinner.ts): a faint full track ring with a
+   rotating arc on top. Icon-first loading is the norm across preview surfaces
+   (Sandpack, embeds, v0/ChatGPT) and design systems (HIG/Material/Carbon/Geist);
+   text-only "loading" is used by none. The arc spins via a GPU-friendly
+   `transform: rotate` keyframe. Fallback chains:
+   - size:  --persona-artifact-spinner-size (default 28px)
+   - arc:   --persona-artifact-spinner-color → --persona-accent → --persona-primary
+            → neutral dark (the interactive/brand hue)
+   - track: --persona-artifact-spinner-track-color → --persona-border → light gray
+   - speed: --persona-artifact-spinner-speed (default 0.8s) */
+[data-persona-root] .persona-spinner {
+  width: var(--persona-artifact-spinner-size, 28px);
+  height: var(--persona-artifact-spinner-size, 28px);
+  transform-origin: center;
+  animation: persona-spinner-rotate var(--persona-artifact-spinner-speed, 0.8s)
+    linear infinite;
+}
+[data-persona-root] .persona-spinner-track {
+  fill: none;
+  stroke: var(
+    --persona-artifact-spinner-track-color,
+    var(--persona-border, #e5e7eb)
+  );
+  stroke-width: 2.5;
+}
+[data-persona-root] .persona-spinner-arc {
+  fill: none;
+  stroke: var(
+    --persona-artifact-spinner-color,
+    var(--persona-accent, var(--persona-primary, #171717))
+  );
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  /* r=9 → circumference ≈ 56.5; ~15u arc reads as a quarter-ish sweep. */
+  stroke-dasharray: 15 42;
+}
+@keyframes persona-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* Reduced motion: stop the rotation (the static arc still reads as a ring) and
+   drop the label fade. */
+@media (prefers-reduced-motion: reduce) {
+  [data-persona-root] .persona-spinner {
+    animation: none;
+  }
+  [data-persona-root] .persona-artifact-frame-loading-text {
+    transition: none;
+  }
+}
+
+/* Shared artifact preview body wrapper (artifact-preview.ts): generates no box
+   so children (e.g. the iframe's height: 100%) lay out against the host
+   container exactly as if they were its direct children. */
+[data-persona-root] .persona-artifact-preview-body {
+  display: contents;
+}
+
+/* Syntax-highlighted source view (code-highlight.ts). The host <pre> keeps its
+   wrapping (persona-whitespace-pre-wrap); <code> resets white-space to normal so
+   the literal "\n" separator text nodes between block line spans collapse
+   visually while still reconstructing the verbatim source via textContent. Each
+   line reserves a left gutter whose number is drawn by a CSS counter — never
+   real text, so it is not selectable or copyable. */
+/* The source view sits directly on the pane surface (transparent, matching
+   Claude's code view); set --persona-code-bg via theme.components.code.background
+   to render it as an inset sheet instead. */
+[data-persona-root] .persona-code-pre {
+  margin: 0;
+  background: var(--persona-code-bg, transparent);
+  border-radius: var(--persona-radius-md, 0.375rem);
+  padding: 0.5rem 0.75rem 0.5rem 0.25rem;
+}
+
+/* Pane source view is full-bleed: the pane drops its content padding (class
+   toggled in artifact-pane.ts when the body rendered a code pre) so the
+   line-number gutter sits flush against the pane's left edge. */
+[data-persona-root] .persona-artifact-content-flush {
+  padding: 0;
+}
+[data-persona-root] .persona-artifact-content-flush .persona-code-pre {
+  padding: 0.5rem 0.75rem 0.5rem 0;
+  border-radius: 0;
+  min-height: 100%;
+}
+[data-persona-root] .persona-code {
+  display: block;
+  white-space: normal;
+  counter-reset: persona-code-line;
+  /* Defend against host-page element rules (`code { background/padding/… }`):
+     without Shadow DOM those selectors reach into the widget, and inline-code
+     chip styling on a full source view reads as a mystery tinted block. */
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+[data-persona-root] .persona-code-line {
+  display: block;
+  position: relative;
+  white-space: pre-wrap;
+  padding-left: 3em;
+  counter-increment: persona-code-line;
+  /* An empty source line emits a childless span — a zero-height block whose
+     absolutely-positioned gutter number would paint on top of the next line's.
+     Reserve one line box (1lh; 1em as the older-engine fallback). */
+  min-height: 1em;
+  min-height: 1lh;
+}
+[data-persona-root] .persona-code-line::before {
+  content: counter(persona-code-line);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2em;
+  padding-right: 0.5em;
+  text-align: right;
+  color: var(--persona-code-line-number-color, #a0a1a7);
+  border-right: 1px solid
+    var(--persona-code-gutter-border-color, var(--persona-border, #e5e7eb));
+  -webkit-user-select: none;
+  user-select: none;
+}
+/* Default syntax palette: One Light (Atom), the same theme Claude.ai's code
+   view uses. Numbers and attribute names share One's constant orange; CSS
+   properties / JSON keys take the function blue so keys stay distinct from
+   string values. */
+[data-persona-root] .persona-code-token-keyword {
+  color: var(--persona-code-keyword-color, #a626a4);
+}
+[data-persona-root] .persona-code-token-string {
+  color: var(--persona-code-string-color, #50a14f);
+}
+[data-persona-root] .persona-code-token-comment {
+  color: var(--persona-code-comment-color, #a0a1a7);
+  font-style: italic;
+}
+[data-persona-root] .persona-code-token-number {
+  color: var(--persona-code-number-color, #986801);
+}
+[data-persona-root] .persona-code-token-tag {
+  color: var(--persona-code-tag-color, #e45649);
+}
+[data-persona-root] .persona-code-token-attr {
+  color: var(--persona-code-attr-color, #986801);
+}
+[data-persona-root] .persona-code-token-property {
+  color: var(--persona-code-property-color, #4078f2);
+}
+
+/* Dark-scheme defaults for the syntax palette (One Dark counterparts of the
+   One Light defaults above). Keyed off the widget's resolved scheme, stamped
+   as data-persona-color-scheme by applyThemeVariables — NOT the OS
+   prefers-color-scheme, which diverges whenever a host pins colorScheme.
+   The widget's semantic vars can't drive these (syntax colors aren't
+   derivable from surface/text). Explicit theme.components.code values still
+   win in both schemes. */
+[data-persona-root][data-persona-color-scheme="dark"] .persona-code-line::before {
+  color: var(--persona-code-line-number-color, #4b5263);
+  border-right-color: var(--persona-code-gutter-border-color, #3b4048);
+}
+[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-keyword {
+  color: var(--persona-code-keyword-color, #c678dd);
+}
+[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-string {
+  color: var(--persona-code-string-color, #98c379);
+}
+[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-comment {
+  color: var(--persona-code-comment-color, #5c6370);
+}
+[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-number {
+  color: var(--persona-code-number-color, #d19a66);
+}
+[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-tag {
+  color: var(--persona-code-tag-color, #e06c75);
+}
+[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-attr {
+  color: var(--persona-code-attr-color, #d19a66);
+}
+[data-persona-root][data-persona-color-scheme="dark"] .persona-code-token-property {
+  color: var(--persona-code-property-color, #61afef);
+}
+
+/* Inline artifact block (artifact-inline.ts, display: "inline"): carries its
+   own border/surface (registered with bubbleChrome: false, like the card).
+   Reads like a file preview: a flush title/toolbar chrome bar above the body.
+   Default vars draw from the same semantic surface/border/text/muted family
+   the card uses, so light/dark themes work with zero config. */
+[data-persona-root] .persona-artifact-inline {
+  border: var(--persona-artifact-inline-border, 1px solid var(--persona-border, #e5e7eb));
+  border-radius: var(
+    --persona-artifact-inline-radius,
+    var(--persona-message-assistant-radius, var(--persona-radius-lg, 0.5rem))
+  );
+  background: var(--persona-artifact-inline-bg, var(--persona-surface, #ffffff));
+  overflow: hidden;
+}
+
+/* completeDisplay: "card" — once the block collapses to the compact reference
+   card it keeps the same root (updater keying + theme zone survive) but must
+   drop the inline frame styling, since the nested card carries its own border,
+   background, and radius. overflow: visible so the card's focus outline (which
+   uses outline-offset) isn't clipped. */
+[data-persona-root] .persona-artifact-inline.persona-artifact-inline--card {
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  overflow: visible;
+}
+
+/* Title/toolbar chrome bar: flush to the frame edge (no frame padding). */
+[data-persona-root] .persona-artifact-inline-chrome {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--persona-artifact-inline-chrome-bg, var(--persona-surface, #ffffff));
+  border-bottom: 1px solid var(--persona-artifact-inline-chrome-border, var(--persona-border, #e5e7eb));
+}
+
+/* Leading cluster: file icon + title + type label / streaming status. */
+[data-persona-root] .persona-artifact-inline-chrome-lead {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  flex: 1 1 auto;
+  color: var(--persona-artifact-inline-title-color, var(--persona-text, #111827));
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+[data-persona-root] .persona-artifact-inline-chrome-lead .persona-artifact-inline-type,
+[data-persona-root] .persona-artifact-inline-chrome-lead .persona-artifact-inline-status {
+  color: var(--persona-artifact-inline-muted-color, var(--persona-text-muted, #6b7280));
+  font-weight: 400;
+}
+
+/* Streaming status: animated label span + optional plain detail span (live
+   counters). The label carries the loading animation; the detail updates freely
+   per delta and stays un-animated. Shared by the card, the inline chrome, and
+   the inline status body (features.artifacts.statusLabel). Keep the status span
+   from blowing out the chrome bar when a long detail streams in. */
+[data-persona-root] .persona-artifact-inline-chrome-lead .persona-artifact-inline-status {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+[data-persona-root] .persona-artifact-status-detail {
+  color: var(--persona-artifact-inline-muted-color, var(--persona-text-muted, #6b7280));
+  margin-left: 0.375rem;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Trailing cluster: custom inlineActions, copy, expand. */
+[data-persona-root] .persona-artifact-inline-chrome-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 0 0 auto;
+}
+
+/* Body wraps the chrome-free preview; padding lives here so the chrome sits
+   flush to the frame edge. */
+[data-persona-root] .persona-artifact-inline-body {
+  padding: 0.75rem;
+}
+
+/* The preview frame (and its 100%-height iframe) is height: 100%, which
+   collapses inside the auto-height inline block; pin a themeable fixed height on
+   the frame instead. Height var chain: inlineBody.height
+   (--persona-artifact-inline-body-height, set per state by artifact-inline.ts) →
+   the legacy --persona-artifact-inline-frame-height override → 320px. The legacy
+   var still wins when the new one is unset (inlineBody.height "auto"), so themes
+   pinned to it keep working. The --sized rule below (equal specificity, declared
+   later) overrides this to 100% when the body wrapper owns the height. */
+[data-persona-root] .persona-artifact-inline .persona-artifact-frame {
+  height: var(
+    --persona-artifact-inline-body-height,
+    var(--persona-artifact-inline-frame-height, 320px)
+  );
+}
+
+/* Inline body height model (features.artifacts.inlineBody). The block root sets
+   --persona-artifact-inline-body-height (px) for the current state; leaving it
+   unset (inlineBody.height "auto") lets the body size to content and the iframe
+   fall back through the chain above. */
+
+/* Code bodies are full-bleed, matching the pane's source-view treatment (same
+   class the pane toggles): the line-number gutter sits flush against the frame
+   edge. Declared after .persona-artifact-inline-body so padding: 0 wins the
+   specificity tie. */
+[data-persona-root] .persona-artifact-inline-body.persona-artifact-content-flush {
+  padding: 0;
+}
+
+/* Numeric inlineBody.height: the body wrapper owns the reserved height
+   (border-box), so flush code, padded iframe, and padded status bodies all
+   occupy the same outer box and every state swap is layout neutral. Fill-capable
+   content stretches to the wrapper. */
+[data-persona-root] .persona-artifact-inline-body--sized {
+  height: var(--persona-artifact-inline-body-height, auto);
+}
+[data-persona-root] .persona-artifact-inline-body--sized .persona-artifact-source-window--fixed,
+[data-persona-root] .persona-artifact-inline-body--sized .persona-artifact-frame {
+  height: 100%;
+}
+[data-persona-root] .persona-artifact-inline-body--sized .persona-artifact-status-view {
+  min-height: 100%;
+}
+
+/* Fixed-height streaming source window: a reserved scroll viewport so streamed
+   source no longer grows an unbounded <pre> and then snaps to the preview. The
+   height comes from the sized body wrapper above (the --fixed class is only
+   ever applied together with it). The bare (non-fixed) window is an inert
+   wrapper (pane path never adds it; the source <pre> sits directly on el
+   there). */
+[data-persona-root] .persona-artifact-source-window {
+  min-width: 0;
+}
+[data-persona-root] .persona-artifact-source-window--fixed {
+  overflow-y: auto;
+}
+
+/* Clipped preview window (inlineBody.overflow: "clip"): a fixed-height window
+   showing the top of the document with no internal scroll. Applied together with
+   --fixed (which supplies the reserved height via the --sized body wrapper and
+   the fill-capable detection in artifact-inline.ts); declared after --fixed so
+   this overflow: hidden wins its overflow-y: auto on the specificity tie. */
+[data-persona-root] .persona-artifact-source-window--clip {
+  overflow: hidden;
+}
+
+/* Edge fade masks on the fixed window (top fade signals content clipped above).
+   mask-image works over any themed background; size via --persona-artifact-fade-size
+   (defaults to 40px). */
+[data-persona-root]
+  .persona-artifact-fade-top:not(.persona-artifact-fade-bottom) {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--persona-artifact-fade-size, 40px)
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--persona-artifact-fade-size, 40px)
+  );
+}
+[data-persona-root]
+  .persona-artifact-fade-bottom:not(.persona-artifact-fade-top) {
+  -webkit-mask-image: linear-gradient(
+    to top,
+    transparent 0,
+    #000 var(--persona-artifact-fade-size, 40px)
+  );
+  mask-image: linear-gradient(
+    to top,
+    transparent 0,
+    #000 var(--persona-artifact-fade-size, 40px)
+  );
+}
+[data-persona-root]
+  .persona-artifact-fade-top.persona-artifact-fade-bottom {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--persona-artifact-fade-size, 40px),
+    #000 calc(100% - var(--persona-artifact-fade-size, 40px)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--persona-artifact-fade-size, 40px),
+    #000 calc(100% - var(--persona-artifact-fade-size, 40px)),
+    transparent 100%
+  );
+}
+
+/* Edge fade on the horizontally scrollable tab strip. Visual hint only; the
+   tablist keyboard behavior is the real affordance. Sized via
+   --persona-artifact-tab-fade-size (default 24px). */
+[data-persona-root]
+  .persona-artifact-tab-fade-start:not(.persona-artifact-tab-fade-end) {
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--persona-artifact-tab-fade-size, 24px)
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--persona-artifact-tab-fade-size, 24px)
+  );
+}
+[data-persona-root]
+  .persona-artifact-tab-fade-end:not(.persona-artifact-tab-fade-start) {
+  -webkit-mask-image: linear-gradient(
+    to left,
+    transparent 0,
+    #000 var(--persona-artifact-tab-fade-size, 24px)
+  );
+  mask-image: linear-gradient(
+    to left,
+    transparent 0,
+    #000 var(--persona-artifact-tab-fade-size, 24px)
+  );
+}
+[data-persona-root]
+  .persona-artifact-tab-fade-start.persona-artifact-tab-fade-end {
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--persona-artifact-tab-fade-size, 24px),
+    #000 calc(100% - var(--persona-artifact-tab-fade-size, 24px)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--persona-artifact-tab-fade-size, 24px),
+    #000 calc(100% - var(--persona-artifact-tab-fade-size, 24px)),
+    transparent 100%
+  );
+}
+
+/* Reserved-height status placeholder (inlineBody.streamingView: "status").
+   Numeric height reserves the var; "auto" falls back to a modest 160px min-height
+   so the card doesn't collapse. */
+[data-persona-root] .persona-artifact-status-view {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--persona-artifact-inline-body-height, 160px);
+}
+
+/* Complete-state height cap for non-iframe bodies (rendered markdown, source
+   view, component). The iframe path is sized by the iframe rule above instead,
+   so this class is only applied when the completed body has no iframe. */
+[data-persona-root] .persona-artifact-inline-body--cap {
+  max-height: var(--persona-artifact-inline-body-height, none);
+  overflow-y: auto;
+}
+
 [data-persona-root] .persona-artifact-pane {
   border-radius: var(--persona-artifact-pane-radius, 0);
   overflow: hidden;
@@ -3072,23 +3649,71 @@
   border: var(--persona-artifact-pane-border) !important;
 }
 
+/* paneAppearance: 'detached': floating card with gap, all-side border, radius, elevation, canvas behind */
+/* Split gap defaults to --persona-panel-inset from ui.ts; canvas paints behind both columns. */
+[data-persona-root].persona-artifact-appearance-detached .persona-artifact-split-root {
+  background: var(--persona-panel-canvas-bg);
+}
+
+/* Desktop split only (drawer keeps its own chrome). Non-!important so explicit
+   paneBorder / paneShadow / paneBorderRadius overrides still win. */
+@media (min-width: 641px) {
+  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-appearance-detached .persona-artifact-pane {
+    border-radius: var(
+      --persona-artifact-pane-radius,
+      var(--persona-panel-radius, var(--persona-radius-xl, 0.75rem))
+    );
+    border: var(--persona-panel-border, 1px solid var(--persona-border, #e5e7eb));
+    box-shadow: var(
+      --persona-artifact-pane-shadow,
+      var(--persona-panel-shadow, var(--persona-palette-shadows-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25)))
+    );
+  }
+}
+
+/* chatSurface: 'flush': chat is flat flush background, only the pane floats. The
+   chat has no perimeter inset, so inset the pane on 3 sides (left gap comes from
+   the existing detached split flex gap). Keeps the pane's border/radius/shadow. */
+@media (min-width: 641px) {
+  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-chat-flush .persona-artifact-pane {
+    margin-top: var(--persona-panel-inset);
+    margin-right: var(--persona-panel-inset);
+    margin-bottom: var(--persona-panel-inset);
+  }
+}
+
 /*
- * Unified split chrome: one visual shell (desktop split only; narrowed via :not(.narrow-host) + breakpoint).
- * Main chat card (.persona-widget-container) loses inner-right rounding; artifact gains matching outer-right.
+ * Welded split chrome (panel + seamless): one card. The outer panel carries the
+ * border + radius + shadow (set in ui.ts); each column rounds only its outer
+ * corners and clips, so the columns fill the panel's rounded rect and butt flush
+ * at the seam. Desktop split only (narrowed via :not(.narrow-host) + breakpoint).
+ * Toggled from ui.ts by splitChromeMode(); the pane's flex layout owns gap 0.
  */
 @media (min-width: 641px) {
-  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-unified-split .persona-widget-container {
+  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-welded-split .persona-artifact-split-root {
+    position: relative;
+  }
+
+  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-welded-split .persona-widget-container {
     border-top-right-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
+    overflow: hidden;
   }
 
-  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-unified-split .persona-artifact-pane {
+  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-welded-split .persona-artifact-pane {
     border-top-left-radius: 0 !important;
     border-bottom-left-radius: 0 !important;
-    border-top-right-radius: var(--persona-artifact-unified-outer-radius, var(--persona-radius-lg, 1rem)) !important;
-    border-bottom-right-radius: var(--persona-artifact-unified-outer-radius, var(--persona-radius-lg, 1rem)) !important;
+    border-top-right-radius: var(--persona-artifact-welded-outer-radius, var(--persona-panel-radius, var(--persona-radius-xl, 0.75rem))) !important;
+    border-bottom-right-radius: var(--persona-artifact-welded-outer-radius, var(--persona-panel-radius, var(--persona-radius-xl, 0.75rem))) !important;
     overflow: hidden;
   }
+
+  /* panel appearance: a hairline divider on the pane's chat-facing edge. seamless
+     omits it (it already zeroes border-left). Non-!important so paneBorder /
+     paneBorderLeft overrides win. */
+  [data-persona-root]:not(.persona-artifact-narrow-host).persona-artifact-welded-split.persona-artifact-appearance-panel .persona-artifact-pane {
+    border-left: 1px solid var(--persona-border, #e5e7eb);
+  }
 }
 
 /* Narrow floating panel: drawer inside panel (class toggled by JS from panel width) */
@@ -3789,6 +4414,20 @@
   gap: 8px;
 }
 
+/* Configured / agent-pushed suggestion chips belong to the expanded
+ * conversation surface, not the always-on collapsed composer. Keeping the
+ * row in pillRoot lets it sit directly above the textarea without re-entering
+ * the transcript's scrolling region. */
+.persona-widget-pill-root[data-state="collapsed"] [data-persona-composer-suggestions] {
+  display: none;
+}
+
+.persona-widget-pill-root[data-state="expanded"] [data-persona-composer-suggestions] {
+  display: flex;
+  justify-content: center;
+  margin: 0 8px 4px;
+}
+
 /* Attachment previews row (above the pill). AttachmentManager toggles
  * display:flex when items are added; default is display:none. */
 .persona-pill-composer__previews {
@@ -4039,3 +4678,214 @@
     display: none;
   }
 }
+
+/* ===========================================================================
+ * Context mentions (composer @-mentions): chip row, menu, affordance button.
+ * Tokens default off the existing palette vars so themed widgets pick them up.
+ * =========================================================================== */
+
+/* Composer size-query container. Both the full and pill composers carry
+ * `data-persona-composer-form`; establishing a container here lets a host
+ * stylesheet make composer controls responsive to the PANEL width rather than
+ * the viewport — correct across floating / docked / fullscreen, where the
+ * composer is frequently narrower than the screen. Safe: the form is block-level
+ * and already sized by its parent, so inline-size containment doesn't change its
+ * width, and the ask sheet + mention menu mount OUTSIDE the form, so layout
+ * containment can't capture them. Query with `@container persona-composer (...)`;
+ * `.persona-mention-button` is a supported, stable hook. */
+[data-persona-composer-form] {
+  container-type: inline-size;
+  container-name: persona-composer;
+}
+
+.persona-mention-context-row {
+  display: none; /* toggled to flex by the manager when chips exist */
+  flex-wrap: wrap;
+  gap: var(--persona-mention-chip-gap, 6px);
+  margin-bottom: var(--persona-mention-row-gap, 8px);
+}
+
+.persona-mention-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: var(--persona-mention-chip-height, 26px);
+  padding: 0 6px 0 8px;
+  border-radius: var(--persona-mention-chip-radius, 6px);
+  background: var(--persona-mention-chip-bg, var(--persona-container, #f3f4f6));
+  border: 1px solid var(--persona-mention-chip-border, var(--persona-border, #e5e7eb));
+  color: var(--persona-mention-chip-fg, var(--persona-text, #111827));
+  font-size: var(--persona-mention-chip-font-size, 12px);
+  line-height: 1;
+  max-width: 220px;
+}
+
+.persona-mention-chip[data-status="error"] {
+  border-color: var(--persona-mention-error, #dc2626);
+  color: var(--persona-mention-error, #dc2626);
+}
+
+.persona-mention-chip-icon {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  opacity: 0.8;
+}
+
+.persona-mention-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.persona-mention-chip-spinner {
+  flex: 0 0 auto;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--persona-mention-chip-border, var(--persona-border, #d1d5db));
+  border-top-color: var(--persona-mention-accent, var(--persona-accent, #0f0f0f));
+  animation: persona-mention-spin 0.7s linear infinite;
+}
+
+@keyframes persona-mention-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.persona-mention-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.persona-mention-chip-remove:hover {
+  opacity: 1;
+  background: var(--persona-palette-colors-black-alpha-50, rgba(0, 0, 0, 0.06));
+}
+
+/* The mention MENU CSS (.persona-mention-menu / -list / -search / -group /
+ * -option / -status / -error / -retry and its coarse-pointer row sizing) lives
+ * in the lazy context-mentions chunk (src/styles/context-mention-menu-css.ts)
+ * and is injected on first menu open — so it also styles the body-mounted menu
+ * inside a useShadowDom widget. Only the eagerly-rendered chip / context-row
+ * pieces stay here. */
+
+.persona-mention-chip-readonly {
+  padding-right: 8px;
+  cursor: default;
+}
+
+/* Inline mention token (display: "inline"). Atomic styled chip that sits INSIDE
+ * the sentence — in the contenteditable composer and in the read-only sent
+ * bubble. Kept in the core stylesheet (tiny) so tokens are styled the instant a
+ * segmented bubble renders, without waiting on the inline chunk's CSS. */
+.persona-mention-token {
+  /* Per-token accent — set inline from `ref.color`, per source via
+   * `.persona-mention-token[data-mention-source="…"]`, or globally by overriding
+   * this var. Recolors the whole pill (tint bg + icon + label). */
+  --persona-mention-token-accent: var(--persona-accent, #4338ca);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--persona-mention-token-gap, 4px);
+  padding: var(--persona-mention-token-padding, 1px 6px);
+  border-radius: var(--persona-mention-token-radius, 6px);
+  /* Fallback flat tint first (older browsers), then a per-accent translucent
+   * tint via color-mix so each type reads as its own color (Slack/Cursor). */
+  background: var(--persona-mention-token-bg, #eef2ff);
+  background: var(
+    --persona-mention-token-bg,
+    color-mix(in srgb, var(--persona-mention-token-accent) 14%, transparent)
+  );
+  color: var(--persona-mention-token-fg, var(--persona-mention-token-accent));
+  font-size: var(--persona-mention-token-font-size, 0.95em);
+  font-weight: var(--persona-mention-token-font-weight, 550);
+  line-height: 1.5;
+  white-space: nowrap;
+  vertical-align: baseline;
+  user-select: none;
+}
+
+.persona-mention-token-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.persona-mention-token-label {
+  white-space: nowrap;
+}
+
+/* Read-only token in a sent bubble: no editable affordances (the composer's
+ * atomic caret/select behavior doesn't apply), so it reads as inert prose. */
+.persona-mention-token-readonly {
+  cursor: default;
+  user-select: text;
+}
+
+/* Resolve failure on an inline token: recolor the pill to the danger accent and
+ * add a subtle inset border ring, reusing the same accent custom-property the
+ * token already themes on (so bg tint + icon + label all shift together). */
+.persona-mention-token-error {
+  --persona-mention-token-accent: var(--persona-mention-error, #dc2626);
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--persona-mention-token-accent) 45%, transparent);
+}
+
+/* The contenteditable composer surface: behaves like the textarea it replaced. */
+.persona-composer-contenteditable {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  outline: none;
+  max-height: var(--persona-composer-max-height, 200px);
+  overflow-y: auto;
+}
+
+.persona-composer-contenteditable:empty::before {
+  content: attr(data-placeholder);
+  color: var(--persona-placeholder, var(--persona-muted, #9ca3af));
+  pointer-events: none;
+}
+
+.persona-message-mentions {
+  margin-top: 6px;
+  margin-bottom: 0;
+}
+
+/* Touch targets: on coarse pointers (phones/tablets) grow the chip + its remove
+ * control to the ~44px minimum. Desktop keeps the compact sizing above. (The
+ * menu row / retry coarse sizing ships with the menu CSS in the lazy chunk.) */
+@media (pointer: coarse) {
+  .persona-mention-chip {
+    height: auto;
+    min-height: 40px;
+  }
+  .persona-mention-chip-remove {
+    width: 36px;
+    height: 36px;
+    margin-right: -6px; /* keep the visual gap tight while the hit area grows */
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* No spin: show a static neutral ring instead of a rotating arc. */
+  .persona-mention-chip-spinner {
+    animation: none;
+    border-top-color: var(
+      --persona-mention-chip-border,
+      var(--persona-border, #d1d5db)
+    );
+    opacity: 0.6;
+  }
+}