@runtypelabs/persona 3.17.0 → 3.19.0

package/src/styles/widget.css

@@ -1759,6 +1759,30 @@
   animation: persona-message-actions-fade-in 0.3s ease-out forwards;
 }
 
+/* ask_user_question — collapsed answered state.
+ * When the user picks an option, the interactive card is replaced with a
+ * plain assistant bubble showing the question text. A short fade + slight
+ * upward slide sells the "card resolved into history" feel.
+ */
+@keyframes persona-ask-resolved {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+[data-ask-answered="true"] {
+  animation: persona-ask-resolved 0.22s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-ask-answered="true"] {
+    animation: none;
+  }
+}
+
 /* Action bar alignment */
 .persona-message-actions-left {
   justify-content: flex-start;
@@ -2957,3 +2981,759 @@
             background-clip: border-box !important;
   }
 }
+
+/* ========================================================================
+ * ask_user_question — built-in answer-pill sheet
+ * Slides in over the composer when the assistant invokes `ask_user_question`.
+ * Overridable via `config.features.askUserQuestion.styles`.
+ * ======================================================================== */
+
+[data-persona-root] .persona-hidden {
+  display: none !important;
+}
+
+/* In-transcript stub — small "Awaiting…" chip. */
+[data-persona-root] .persona-ask-stub {
+  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  color: var(--persona-muted, #6b7280);
+  background: var(--persona-container, #f3f4f6);
+  border: 1px dashed var(--persona-border, #e5e7eb);
+}
+
+[data-persona-root] .persona-ask-stub-label {
+  font-weight: 500;
+}
+
+/* Sheet container — absolute inside composerOverlay. */
+[data-persona-root] .persona-ask-sheet {
+  position: absolute;
+  left: 0.75rem;
+  right: 0.75rem;
+  bottom: calc(100% + 0.5rem);
+  box-sizing: border-box;
+  padding: 0.85rem 1rem;
+  background: var(--persona-ask-sheet-bg, var(--persona-surface, #ffffff));
+  border: 1px solid var(--persona-ask-sheet-border, var(--persona-border, #e5e7eb));
+  border-radius: 1rem;
+  box-shadow: var(--persona-ask-sheet-shadow, 0 12px 28px -10px rgba(0, 0, 0, 0.15), 0 4px 10px -6px rgba(0, 0, 0, 0.08));
+  transition: transform var(--persona-ask-sheet-duration, 180ms) ease, opacity var(--persona-ask-sheet-duration, 180ms) ease;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+[data-persona-root] .persona-ask-sheet.persona-ask-sheet-enter {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+[data-persona-root] .persona-ask-sheet.persona-ask-sheet-leave {
+  opacity: 0;
+  transform: translateY(8px);
+  pointer-events: none;
+}
+
+/* Header row — question + close button */
+[data-persona-root] .persona-ask-sheet-header {
+  margin-bottom: 0.55rem;
+}
+
+[data-persona-root] .persona-ask-sheet-question {
+  font-size: 0.92rem;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--persona-text, #1f2937);
+  min-height: 1.35em;
+}
+
+[data-persona-root] .persona-ask-question-skeleton {
+  display: block;
+  width: 60%;
+  height: 0.85rem;
+  border-radius: 0.3rem;
+  background: linear-gradient(90deg,
+    var(--persona-container, #f3f4f6) 0%,
+    var(--persona-border, #e5e7eb) 50%,
+    var(--persona-container, #f3f4f6) 100%);
+  background-size: 200% 100%;
+  animation: persona-ask-skeleton-shimmer 1.2s ease-in-out infinite;
+  color: transparent;
+}
+
+[data-persona-root] .persona-ask-sheet-step-inline {
+  flex: 0 0 auto;
+  font-size: 0.78rem;
+  line-height: 1;
+  color: var(--persona-text-muted, #6b7280);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+}
+
+[data-persona-root] .persona-ask-sheet-step-inline:empty {
+  display: none;
+}
+
+/* Option list — stacked one per row by default ("rows" layout). The "pills"
+   layout opt-in switches to horizontal wrap with compact pills; see also
+   horizontalPillsAskPlugin example for a custom variant. */
+[data-persona-root] .persona-ask-pills {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  row-gap: 0.4rem;
+  column-gap: 0;
+}
+
+[data-persona-root] .persona-ask-pills--rows {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 0.4rem;
+}
+
+/* Pills layout opt-in — horizontal wrap, auto-width compact pills. */
+[data-persona-root] .persona-ask-sheet--pills .persona-ask-pills:not(.persona-ask-pills--rows) {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+[data-persona-root] .persona-ask-sheet--pills .persona-ask-pills:not(.persona-ask-pills--rows) .persona-ask-pill {
+  width: auto;
+  padding: 0.4rem 0.9rem;
+  border-radius: var(--persona-ask-pill-radius, 9999px);
+}
+
+[data-persona-root] .persona-ask-pill {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  text-align: left;
+  padding: 0.65rem 0.9rem;
+  border-radius: var(--persona-ask-pill-radius, 0.6rem);
+  background: var(--persona-ask-pill-bg, transparent);
+  color: var(--persona-ask-pill-fg, var(--persona-text, #1f2937));
+  border: 1px solid var(--persona-border, #e5e7eb);
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
+}
+
+[data-persona-root] .persona-ask-pill:hover:not(:disabled):not(.persona-ask-pill-skeleton):not(.persona-ask-pill-selected):not([aria-pressed="true"]) {
+  border-color: var(--persona-text, #1f2937);
+  background: var(--persona-container, #f3f4f6);
+}
+
+[data-persona-root] .persona-ask-pill:active {
+  transform: translateY(1px);
+}
+
+[data-persona-root] .persona-ask-pill-selected,
+[data-persona-root] .persona-ask-pill[aria-pressed="true"] {
+  background: var(--persona-ask-pill-bg-selected, var(--persona-accent, #0f0f0f));
+  color: var(--persona-ask-pill-fg-selected, #fafafa);
+  border-color: var(--persona-ask-pill-bg-selected, var(--persona-accent, #0f0f0f));
+}
+
+[data-persona-root] .persona-ask-pill:focus:not(:focus-visible) {
+  outline: none;
+}
+
+[data-persona-root] .persona-ask-pill:focus-visible {
+  outline: 2px solid var(--persona-accent, #0f0f0f);
+  outline-offset: 2px;
+}
+
+[data-persona-root] .persona-ask-pill-custom {
+  border-style: dashed;
+}
+
+[data-persona-root] .persona-ask-pill-skeleton {
+  min-width: 5rem;
+  height: 2rem;
+  padding: 0;
+  border: 1px solid var(--persona-border, #e5e7eb);
+  background: linear-gradient(90deg,
+    var(--persona-container, #f3f4f6) 0%,
+    var(--persona-border, #e5e7eb) 50%,
+    var(--persona-container, #f3f4f6) 100%);
+  background-size: 200% 100%;
+  animation: persona-ask-skeleton-shimmer 1.2s ease-in-out infinite;
+}
+
+@keyframes persona-ask-skeleton-shimmer {
+  0%   { background-position: 100% 50%; }
+  100% { background-position: -100% 50%; }
+}
+
+/* Row layout — full-width stacked rows with always-visible description
+   and a right-edge affordance (number badge for single-select, check for
+   multi-select). Layered on top of .persona-ask-pill base styles. */
+[data-persona-root] .persona-ask-row {
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.7rem 0.9rem;
+}
+
+[data-persona-root] .persona-ask-row-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+[data-persona-root] .persona-ask-row-label {
+  font-size: 0.92rem;
+  font-weight: 600;
+  line-height: 1.25;
+  color: inherit;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+[data-persona-root] .persona-ask-row-description {
+  font-size: 0.82rem;
+  font-weight: 400;
+  line-height: 1.35;
+  color: var(--persona-text-muted, #6b7280);
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+[data-persona-root] .persona-ask-pill-selected .persona-ask-row-description,
+[data-persona-root] .persona-ask-pill[aria-pressed="true"] .persona-ask-row-description {
+  color: var(--persona-ask-pill-fg-selected, #fafafa);
+  opacity: 0.85;
+}
+
+[data-persona-root] .persona-ask-row-affordance {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  align-self: center;
+}
+
+[data-persona-root] .persona-ask-row-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.4rem;
+  border: 1px solid var(--persona-border, #e5e7eb);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--persona-text-muted, #6b7280);
+  background: transparent;
+}
+
+[data-persona-root] .persona-ask-pill-selected .persona-ask-row-badge,
+[data-persona-root] .persona-ask-pill[aria-pressed="true"] .persona-ask-row-badge {
+  border-color: var(--persona-ask-pill-fg-selected, #fafafa);
+  color: var(--persona-ask-pill-fg-selected, #fafafa);
+}
+
+[data-persona-root] .persona-ask-row-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.4rem;
+  height: 1.4rem;
+  border-radius: 0.35rem;
+  border: 1.5px solid var(--persona-border, #d1d5db);
+  background: transparent;
+  position: relative;
+}
+
+[data-persona-root] .persona-ask-pill-selected .persona-ask-row-check,
+[data-persona-root] .persona-ask-pill[aria-pressed="true"] .persona-ask-row-check {
+  background: var(--persona-ask-pill-fg-selected, #fafafa);
+  border-color: var(--persona-ask-pill-fg-selected, #fafafa);
+}
+
+[data-persona-root] .persona-ask-pill-selected .persona-ask-row-check::after,
+[data-persona-root] .persona-ask-pill[aria-pressed="true"] .persona-ask-row-check::after {
+  content: "";
+  width: 0.45rem;
+  height: 0.75rem;
+  border-right: 2px solid var(--persona-ask-pill-bg-selected, var(--persona-accent, #0f0f0f));
+  border-bottom: 2px solid var(--persona-ask-pill-bg-selected, var(--persona-accent, #0f0f0f));
+  transform: rotate(45deg) translate(-1px, -1px);
+}
+
+[data-persona-root] .persona-ask-row.persona-ask-pill-skeleton {
+  height: 3rem;
+}
+
+/* Other row (rows mode) — composite row that contains the free-text input
+ * directly. The input fills the row body; the badge sits on the right. */
+[data-persona-root] .persona-ask-row--other {
+  cursor: text;
+}
+
+[data-persona-root] .persona-ask-row-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  font-size: 0.92rem;
+  color: inherit;
+  outline: none;
+  width: 100%;
+}
+
+[data-persona-root] .persona-ask-row-input::placeholder {
+  color: var(--persona-text-muted, #6b7280);
+  opacity: 1;
+}
+
+/* Free-text expansion row (pills layout only) */
+[data-persona-root] .persona-ask-free-text {
+  width: 100%;
+}
+
+[data-persona-root] .persona-ask-free-text--rows {
+  margin-top: 0.4rem;
+}
+
+[data-persona-root] .persona-ask-free-text-input {
+  padding: 0.5rem 0.8rem;
+  border: 1px solid var(--persona-border, #e5e7eb);
+  border-radius: 0.55rem;
+  font-size: 0.88rem;
+  background: var(--persona-ask-input-bg, var(--persona-surface, #ffffff));
+  color: var(--persona-text, #1f2937);
+}
+
+[data-persona-root] .persona-ask-free-text-input:focus {
+  outline: 2px solid var(--persona-accent, #0f0f0f);
+  outline-offset: 1px;
+}
+
+[data-persona-root] .persona-ask-free-text-submit,
+[data-persona-root] .persona-ask-multi-submit {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.55rem;
+  background: var(--persona-accent, #0f0f0f);
+  color: #fafafa;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+[data-persona-root] .persona-ask-free-text-submit:disabled,
+[data-persona-root] .persona-ask-multi-submit:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Nav row — Back / Skip / Next-or-Submit buttons for grouped payloads. */
+[data-persona-root] .persona-ask-nav-back,
+[data-persona-root] .persona-ask-nav-skip {
+  padding: 0.45rem 0.85rem;
+  border: 1px solid transparent;
+  border-radius: 0.55rem;
+  background: transparent;
+  color: var(--persona-text-muted, #6b7280);
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+[data-persona-root] .persona-ask-nav-back:hover:not(:disabled),
+[data-persona-root] .persona-ask-nav-skip:hover:not(:disabled) {
+  background: var(--persona-container, #f3f4f6);
+  color: var(--persona-text, #1f2937);
+}
+
+[data-persona-root] .persona-ask-nav-back:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+[data-persona-root] .persona-ask-nav-next {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.55rem;
+  background: var(--persona-accent, #0f0f0f);
+  color: #fafafa;
+  font-size: 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+[data-persona-root] .persona-ask-nav-next:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-persona-root] .persona-ask-sheet,
+  [data-persona-root] .persona-ask-pill-skeleton,
+  [data-persona-root] .persona-ask-question-skeleton {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* ===========================================================================
+ * Composer-bar mode (`launcher.mountMode: "composer-bar"`)
+ *
+ * Geometry (position, width, height) is set per-state inline by
+ * `applyComposerBarGeometry()` in ui.ts. The pill composer
+ * (`pill-composer-builder.ts`) ships with its own clean className
+ * (`persona-pill-composer`, no `persona-flex-col` / `persona-rounded-2xl`
+ * baggage), so layout CSS does not need to fight utility classes — no
+ * !important. The pill is the visible element in both collapsed and
+ * expanded states; only the panel above it appears/disappears.
+ *
+ * Avoid `transform: scale(...)` on the wrapper — it breaks the textarea
+ * caret/IME.
+ * ======================================================================= */
+.persona-widget-wrapper[data-persona-composer-bar] {
+  /* Flex column so the inner panel (which has `flex-1`) fills the wrapper.
+   * Without this, the panel would shrink-wrap its children (chat container
+   * + pill) and a gap would appear between the pill and the wrapper's
+   * `bottom: 16px` edge. */
+  display: flex;
+  flex-direction: column;
+  transition:
+    max-width 220ms ease,
+    bottom 220ms ease,
+    top 220ms ease,
+    left 220ms ease,
+    right 220ms ease,
+    transform 220ms ease,
+    border-radius 220ms ease,
+    height 220ms ease,
+    width 220ms ease;
+}
+
+/* Modal and anchored: the wrapper goes from collapsed (no inline geometry,
+ * so `top/left/transform` resolve to their auto/none defaults) to its
+ * expanded position. The default `transform 220ms ease` transition would
+ * interpolate `none → translate(...)` and visibly slide the wrapper from
+ * its static-default origin toward its target — diagonally for modal,
+ * horizontally from the right for anchored. Neither mode is morphing
+ * something the user can see (the wrapper is invisible when collapsed
+ * because the pill lives in pillRoot, not the wrapper), so the slide
+ * is pure motion noise. Disable geometry transitions for both; the
+ * container's opacity fade-in keyframe is the reveal.
+ *
+ * Fullscreen intentionally keeps its geometry transition — that's the
+ * one mode where the wrapper genuinely morphs (empty → full viewport),
+ * and the staggered fade-in cascade below is built to mask the
+ * outer-edge/inner-content desync during that morph. */
+.persona-widget-wrapper[data-persona-composer-bar][data-expanded-size="modal"],
+.persona-widget-wrapper[data-persona-composer-bar][data-expanded-size="anchored"] {
+  transition: none;
+}
+
+/* --- Pill composer chrome (always visible in composer-bar mode) -------- */
+
+/* Pill is a single-row grid: paperclip · textarea · mic + send. */
+.persona-pill-composer {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  border-radius: 9999px;
+  background: var(--persona-surface, #ffffff);
+  border: 1px solid var(--persona-border, #e5e7eb);
+  box-shadow:
+    0 6px 24px rgba(15, 23, 42, 0.10),
+    0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.persona-pill-composer .persona-composer-textarea {
+  /* Single line by default; the autoresize closure expands up to the
+   * max-height set inline by pill-composer-builder (100px). Width 100%
+   * fills the `1fr` middle grid cell so wrapping only happens once the
+   * pill itself can't grow any wider. */
+  min-height: 24px;
+  width: 100%;
+  padding: 4px 0;
+}
+
+/* Responsive default width for the collapsed pill — applied only when
+ * `applyComposerBarGeometry()` leaves the wrapper's inline width empty
+ * (i.e., the user did NOT set `composerBar.collapsedMaxWidth`). Inline
+ * width from a user config still wins via specificity (inline > class). */
+/* Pill responsive widths now live on the viewport-fixed pillRoot below;
+ * the wrapper no longer doubles as the pill container. */
+
+/* The action cells host inline-flex buttons; without explicit flex layout
+ * on the cell, the buttons sit on the inline baseline and the cell extends
+ * below them with descender space, making the buttons look top-aligned. */
+.persona-pill-composer__left,
+.persona-pill-composer__right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Footer wrapping the pill: transparent surface, vertical stack with
+ * room above the pill for the previews row. */
+.persona-widget-footer--pill {
+  background: transparent;
+  border-top: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Attachment previews row (above the pill). AttachmentManager toggles
+ * display:flex when items are added; default is display:none. */
+.persona-pill-composer__previews {
+  padding: 0 8px;
+}
+
+/* --- Container chrome ---------------------------------------------------
+ *
+ * Container chrome (background, border, border-radius, box-shadow) is
+ * applied inline by `applyFullHeightStyles()` in ui.ts so it can flow through
+ * the same `theme.components.panel.{shadow,border,borderRadius}` contract
+ * used by every other mount mode. Collapsed hides the container entirely
+ * (only the pill is visible); expanded re-applies the chrome. The
+ * `fullscreen` expanded variant intentionally stays chrome-less. */
+
+/* Composer overlay (interactive sheets like ask_user_question) hidden in
+ * collapsed; the pill has no room and the panel above is gone anyway. */
+[data-persona-composer-bar][data-state="collapsed"] .persona-composer-overlay {
+  display: none;
+}
+
+/* --- Pill root: viewport-fixed sibling of the wrapper ------------------
+ *
+ * In composer-bar mode the pill (`footer`) and peek banner live in a
+ * viewport-fixed sibling of the wrapper, NOT inside the wrapper. Reason:
+ * modal mode applies `transform: translate(-50%, -50%)` to the wrapper,
+ * which establishes a containing block for `position: fixed` descendants —
+ * a fixed pill inside a transformed wrapper would be positioned relative
+ * to the wrapper, not the viewport.
+ *
+ * Bottom offset and (optionally) width are written inline by ui.ts based
+ * on `launcher.composerBar.{bottomOffset, collapsedMaxWidth}`; otherwise
+ * the responsive defaults below apply. The pillRoot mirrors the wrapper's
+ * `[data-state]` and `[data-expanded-size]` attributes so peek/pill rules
+ * keyed off those attributes still cascade. */
+.persona-widget-pill-root {
+  position: fixed;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90vw;
+  max-width: calc(100vw - 32px);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+@media (min-width: 640px) {
+  .persona-widget-pill-root {
+    width: 70vw;
+  }
+}
+@media (min-width: 1024px) {
+  .persona-widget-pill-root {
+    width: 50vw;
+  }
+}
+
+/* Container hidden when the chat is collapsed — only the pill is visible. */
+[data-persona-composer-bar][data-state="collapsed"] .persona-widget-container {
+  display: none;
+}
+
+/* --- Peek banner ------------------------------------------------------- */
+/* The peek is the chrome-less row above the pill (composer-bar mode only)
+ * that previews the trailing 100 chars of the most recent assistant
+ * message. ui.ts toggles `--visible` based on streaming/hover/open state;
+ * pointer-events are gated so the faded-out peek never swallows clicks
+ * targeted at the pill below. */
+.persona-pill-peek {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  /* Frosted-glass chrome so the text stays readable over arbitrary host
+   * backgrounds (busy hero images, dark sections, brand colors). The
+   * translucent fill + backdrop blur turns the underlying area into a
+   * neutral surface; the hairline border + soft shadow define the edge
+   * without competing with the pill below. */
+  background: rgba(255, 255, 255, 0.78);
+  -webkit-backdrop-filter: blur(10px) saturate(1.5);
+  backdrop-filter: blur(10px) saturate(1.5);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 9999px;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
+  color: var(--persona-primary, #111827);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.4;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(2px);
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease,
+    background-color 150ms ease;
+  text-align: left;
+  /* Full-width row that matches the pill below — text takes the middle
+   * (flex: 1 1 auto) and the chevron pins to the right edge. */
+  width: 100%;
+  align-self: stretch;
+}
+
+/* Browsers without backdrop-filter support (older Firefox, some webviews)
+ * fall through to a slightly more opaque solid surface so the underlying
+ * page can't bleed through. The non-supports rule above already gives a
+ * usable look (78% opacity); this just hardens it for non-blur fallback. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .persona-pill-peek {
+    background: rgba(255, 255, 255, 0.95);
+  }
+}
+
+.persona-pill-peek--visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.persona-pill-peek:hover {
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.persona-pill-peek__icon,
+.persona-pill-peek__caret {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: currentColor;
+}
+
+.persona-pill-peek__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Per-char/per-word animated spans render as inline-block, which interacts
+ * with the peek's nowrap+ellipsis chrome. Setting `vertical-align: baseline`
+ * keeps the spans on the same baseline as surrounding text so reveal
+ * transforms (translateY, scale) don't bump the line height. */
+[data-persona-root] .persona-pill-peek__text .persona-stream-char,
+[data-persona-root] .persona-pill-peek__text .persona-stream-word {
+  vertical-align: baseline;
+}
+
+/* Peek-scaled skeleton: the bubble-sized 260×10 bar would dwarf a 14px-line
+ * pill. Inside the peek we shrink to a single, full-flex bar that hints at
+ * "more is coming" without dominating the chrome. Used when
+ * `streamAnimation.placeholder === "skeleton"` AND content trims to empty
+ * (e.g. `buffer: "line"` between line completions). */
+[data-persona-root] .persona-pill-peek__text .persona-pill-peek__skeleton {
+  display: inline-flex;
+  vertical-align: middle;
+  width: 100%;
+  max-width: 200px;
+  padding: 0;
+}
+[data-persona-root] .persona-pill-peek__text .persona-pill-peek__skeleton .persona-stream-skeleton-line {
+  height: 8px;
+}
+
+/* --- Expanded states: geometry safety nets ----------------------------- */
+
+/* `fullscreen`: ui.ts clears all inline geometry so this rule lights up. */
+.persona-widget-wrapper[data-persona-composer-bar][data-state="expanded"][data-expanded-size="fullscreen"] {
+  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: none;
+  max-width: none;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+
+/* Fullscreen "panel behind pill": the chat body fills the full viewport
+ * (including the area behind the fixed pill) so messages scroll under the
+ * pill. The body itself drops its bottom padding so its background extends
+ * to the viewport edge; reachability for the last bubble comes from
+ * padding-bottom on the messages wrapper (body's last child) — that
+ * pushes the final message above the pill area rather than hiding it
+ * behind. */
+.persona-widget-wrapper[data-persona-composer-bar][data-expanded-size="fullscreen"] .persona-widget-body {
+  padding-bottom: 0;
+}
+.persona-widget-wrapper[data-persona-composer-bar][data-expanded-size="fullscreen"] .persona-widget-body > :last-child {
+  padding-bottom: calc(var(--persona-pill-bottom, 16px) + var(--persona-pill-area-height, 80px) + 16px);
+}
+
+/* `modal` and `anchored` get their geometry inline from ui.ts; nothing
+ * needed in CSS for those. */
+
+/* --- Expand fade-in cascade -------------------------------------------- */
+/*
+ * Two staggered fades that mask the visual desync between the wrapper's
+ * fast-traveling outer edges and the inner content (which is constrained
+ * by `contentMaxWidth` + `margin: auto` and therefore moves at a fraction
+ * of the wrapper's growth rate). Without this, the user perceives an
+ * empty "gap" inside the wrapper as it morphs to fullscreen.
+ *
+ * - Chrome (container background, border, shadow, and the absolute close +
+ *   clear buttons) fades in across the same 220ms as the geometry transition,
+ *   so the box appears to materialize as it grows rather than snap into
+ *   existence at frame 0.
+ * - Body content (intro card, messages, composer overlay) fades in AFTER
+ *   the geometry has settled — `animation-delay: 220ms` plus
+ *   `animation-fill-mode: both` keeps it at opacity 0 during the morph.
+ *
+ * Because `[data-state="collapsed"] .persona-widget-container { display:
+ * none }`, the container leaves and re-enters the rendering tree on each
+ * expand, which retriggers the keyframe animation cleanly without
+ * needing a JS class toggle.
+ */
+@keyframes persona-composer-bar-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.persona-widget-wrapper[data-persona-composer-bar][data-state="expanded"] .persona-widget-container {
+  animation: persona-composer-bar-fade-in 220ms ease both;
+}
+
+.persona-widget-wrapper[data-persona-composer-bar][data-state="expanded"] .persona-widget-body {
+  animation: persona-composer-bar-fade-in 200ms ease 220ms both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .persona-widget-wrapper[data-persona-composer-bar] {
+    transition: none !important;
+  }
+  .persona-widget-wrapper[data-persona-composer-bar][data-state="expanded"] .persona-widget-container,
+  .persona-widget-wrapper[data-persona-composer-bar][data-state="expanded"] .persona-widget-body {
+    animation: none !important;
+  }
+}