@runtypelabs/persona 4.17.1 → 4.18.0

package/src/components/history-view/css.ts

@@ -0,0 +1,1078 @@
+/**
+ * All styles for the Messages view, carried by the lazy history-view chunk and
+ * injected on mount (`injectStyles`) rather than shipped in `widget.css`:
+ * the eager stylesheet is at its size cap and this surface only ever renders
+ * after the chunk loads.
+ *
+ * Every rule is scoped under `.persona-history-view` (and interactive elements
+ * additionally by tag), so demo/host resets such as `[data-persona-root] h2`
+ * cannot outrank a single-class widget rule. The one exception is the
+ * "shell-hosted top bar" block at the end: those nodes live in the widget's own
+ * header, outside the view, so their selectors are doubled up instead.
+ *
+ * History-specific custom properties, all with a themed fallback chain:
+ *   --persona-history-surface-bg    list/background surface
+ *   --persona-history-topbar-bg     top bar background
+ *   --persona-history-border        hairlines and dividers
+ *   --persona-history-row-hover-bg  row hover/active-press wash
+ *   --persona-history-row-avatar-bg leading row avatar plate
+ *   --persona-history-row-active-bg selected conversation wash (wash-only, no
+ *     edge marker; the divider-chain default cannot collapse into the surface)
+ *   --persona-history-skeleton-bg   loading placeholder blocks
+ *   --persona-history-focus-ring    focus-visible outline color
+ *   --persona-history-slide         entrance/exit horizontal travel
+ *   --persona-history-row-min-height / --persona-history-topbar-min-height
+ *
+ * Section notes are JS comments between concatenated literals, never CSS
+ * comments inside them: the chunk is at its size cap and only JS comments are
+ * minified away. Backticks in a note would terminate the literal.
+ */
+
+export const HISTORY_VIEW_CSS =
+  `
+.persona-history-view {
+  --persona-history-surface-bg: var(--persona-surface, #ffffff);
+  --persona-history-topbar-bg: var(--persona-header-bg, var(--persona-surface, #ffffff));
+  --persona-history-border: var(--persona-divider, var(--persona-border, #e5e7eb));
+  --persona-history-row-hover-bg: var(--persona-button-ghost-hover-bg, rgba(0, 0, 0, 0.04));
+  --persona-history-row-avatar-bg: var(--persona-header-icon-bg, var(--persona-primary, #2563eb));
+  --persona-history-row-active-bg: var(--persona-divider, var(--persona-border, #e5e7eb));
+  --persona-history-skeleton-bg: var(--persona-divider, var(--persona-border, #e5e7eb));
+  --persona-history-focus-ring: var(--persona-primary, #2563eb);
+  --persona-history-slide: 20px;
+  --persona-history-row-min-height: 60px;
+  --persona-history-topbar-min-height: 56px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--persona-history-surface-bg);
+  color: var(--persona-text, #111827);
+  font-family: var(--persona-font-family, inherit);
+  font-size: 14px;
+  line-height: 1.45;
+  opacity: 1;
+}
+.persona-history-view *,
+.persona-history-view *::before,
+.persona-history-view *::after {
+  box-sizing: border-box;
+}
+` +
+  /* In-panel navigation, not a sheet: only the body moves, so the bar is never
+     animated or replaced. The mirrored exit is playExit() in history-view.ts. */
+  `.persona-history-view--enter .persona-history-body {
+  animation: persona-history-enter-body var(--persona-history-enter-ms, 180ms)
+    var(--persona-history-enter-easing, cubic-bezier(0, 0, 0.2, 1)) both;
+}
+@keyframes persona-history-enter-body {
+  from { opacity: 0; transform: translateX(var(--persona-history-slide)); }
+  to { opacity: 1; transform: none; }
+}
+` +
+  /* Ambient identity states collapse to the caption above the list; the sentence
+     stays in the accessibility tree for its aria-describedby. Panel date
+     headings go the same way: one flat list, but the lists stay labelled. */
+  `.persona-history-view .persona-history-sr-only,
+.persona-history-view--panel .persona-history-group-heading,
+.persona-history-view--panel .persona-history-conversations-title,
+.persona-history-view .persona-history-scope-alert[data-persona-history-scope-tone="ambient"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+` +
+  /* --- top bar ------------------------------------------------------------ */
+  /* --shell = the same bar hosted in the widget's own header (block below). */
+  `.persona-history-view .persona-history-topbar,
+.persona-history-topbar.persona-history-topbar--shell {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr) 44px;
+  align-items: center;
+  gap: 4px;
+}
+.persona-history-view .persona-history-topbar {
+  min-height: var(--persona-history-topbar-min-height);
+  padding: 6px 8px;
+  background: var(--persona-history-topbar-bg);
+  border-bottom: 1px solid var(--persona-history-border);
+}
+.persona-history-view .persona-history-heading-group,
+.persona-history-topbar--shell .persona-history-heading-group {
+  min-width: 0;
+  text-align: center;
+}
+.persona-history-view .persona-history-title,
+.persona-history-topbar--shell .persona-history-title {
+  margin: 0;
+  padding: 0;
+` +
+  /* Pinned like the main header stamps it inline: without a declaration here,
+     a non-shadow host's own h2 font rule fills the gap and the two titles
+     drift apart. The inherit fallback resolves to the widget's font. */
+  `  font-family: var(--persona-components-header-title-fontFamily, inherit);
+  font-size: var(--persona-components-header-title-fontSize, 1rem);
+  font-weight: var(--persona-components-header-title-fontWeight, 600);
+  line-height: var(--persona-components-header-title-lineHeight, 1.5rem);
+  color: var(--persona-header-title-fg, var(--persona-primary, #0f0f0f));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+` +
+  /* Ambient privacy caption: a body row above the list, never a second bar line.
+     The row also carries the list overflow trigger at its trailing end. */
+  `.persona-history-view .persona-history-caption {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 4px;
+}
+.persona-history-view .persona-history-scope {
+  flex: 1 1 auto;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--persona-text-muted, #6b7280);
+  overflow-wrap: anywhere;
+}
+` +
+  /* Heading over the list block. Visible only in the rail (the panel sr-onlys
+     it above); rail-specific placement is in the rail section below. Every
+     text property is pinned: a bare host h3 rule beats inheritance for
+     whatever this rule leaves undeclared. */
+  `.persona-history-view .persona-history-conversations-title {
+  margin: 0;
+  font-family: var(--persona-components-history-listHeading-fontFamily, inherit);
+  font-size: var(--persona-components-history-listHeading-fontSize, 14px);
+  font-weight: var(--persona-components-history-listHeading-fontWeight, 600);
+  line-height: var(--persona-components-history-listHeading-lineHeight, 20px);
+  letter-spacing: var(--persona-components-history-listHeading-letterSpacing, normal);
+  color: var(--persona-components-history-listHeading-color, var(--persona-text, #111827));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+` +
+  /* Rail-only caption chrome: hidden until the rail block below reveals it. */
+  `.persona-history-view .persona-history-scope-icon {
+  display: none;
+}
+.persona-history-view .persona-history-scope-description {
+  display: block;
+}
+.persona-history-view .persona-history-scope-alert {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--persona-history-border);
+  border-radius: var(--persona-radius-md, 8px);
+  font-size: 12px;
+  color: var(--persona-text-muted, #6b7280);
+}
+.persona-history-view .persona-history-scope-alert-title {
+  display: block;
+  font-weight: 600;
+  color: var(--persona-text, #111827);
+}
+
+` +
+  /* --- shared controls ---------------------------------------------------- */
+  `.persona-history-view button.persona-history-icon-button,
+.persona-history-topbar--shell button.persona-history-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: var(--persona-button-ghost-radius, var(--persona-radius-md, 8px));
+  background: transparent;
+  color: var(--persona-header-action-icon-fg, var(--persona-text-muted, #6b7280));
+  cursor: pointer;
+}
+.persona-history-view button.persona-history-icon-button:hover:not(:disabled),
+.persona-history-topbar--shell button.persona-history-icon-button:hover:not(:disabled) {
+  background: var(--persona-button-ghost-hover-bg, rgba(0, 0, 0, 0.04));
+}
+.persona-history-view button:focus-visible,
+.persona-history-view [role="menuitem"]:focus-visible,
+.persona-history-topbar--shell button:focus-visible {
+  outline: 2px solid var(--persona-history-focus-ring, var(--persona-primary, #2563eb));
+  outline-offset: 2px;
+}
+.persona-history-view button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+` +
+  /* List overflow trigger: answers to the caption beside it, not to the 44px
+     header controls, and goes back to a real target for coarse pointers. */
+  `.persona-history-view button.persona-history-list-options {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  min-height: 28px;
+  margin-left: auto;
+}
+.persona-history-view button.persona-history-list-options[aria-expanded="true"] {
+  background: var(--persona-button-ghost-hover-bg, rgba(0, 0, 0, 0.04));
+  color: var(--persona-text, #111827);
+}
+
+` +
+  /* --- body / regions ----------------------------------------------------- */
+  `.persona-history-view .persona-history-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 12px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+` +
+  /* Shared skeleton; each presentation styles its own shape below (panel: a
+     floating pill under the list, rail: a row above it). */
+  `.persona-history-view button.persona-history-new {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  border: 1px solid transparent;
+  border-radius: var(--persona-button-radius, var(--persona-radius-lg, 10px));
+  font: inherit;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  cursor: pointer;
+}
+.persona-history-view button.persona-history-new span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.persona-history-view .persona-history-list-region {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+` +
+  /* --- groups and rows ---------------------------------------------------- */
+  `.persona-history-view .persona-history-group-heading {
+  margin: 0 0 4px;
+  padding: 0 4px;
+  font-family: var(--persona-components-history-groupHeading-fontFamily, inherit);
+  font-size: var(--persona-components-history-groupHeading-fontSize, 12px);
+  font-weight: var(--persona-components-history-groupHeading-fontWeight, 600);
+  line-height: var(--persona-components-history-groupHeading-lineHeight, 1.35);
+  letter-spacing: var(--persona-components-history-groupHeading-letterSpacing, normal);
+  color: var(--persona-components-history-groupHeading-color, var(--persona-text-muted, #6b7280));
+}
+.persona-history-view ul.persona-history-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.persona-history-view li.persona-history-item {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.persona-history-view button.persona-history-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: var(--persona-history-row-min-height);
+  padding: 10px 16px;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+` +
+  /* Hover keyed to the li so the wash holds over the sibling menu trigger. */
+  `.persona-history-view li.persona-history-item:hover button.persona-history-row:not(:disabled),
+.persona-history-view button.persona-history-row:hover:not(:disabled) {
+  background: var(--persona-history-row-hover-bg);
+}
+.persona-history-view button.persona-history-row[aria-current="page"] {
+  background: var(--persona-history-row-active-bg);
+}
+.persona-history-view .persona-history-row-avatar {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  border-radius: 16.7%;
+  background: var(--persona-history-row-avatar-bg);
+  color: var(--persona-header-icon-fg, var(--persona-text-inverse, #ffffff));
+  font-size: 20px;
+  line-height: 1;
+}
+.persona-history-view .persona-history-row-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.persona-history-view .persona-history-row-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  line-height: 21px;
+}
+.persona-history-view .persona-history-row-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+.persona-history-view .persona-history-row-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--persona-text, #111827);
+}
+.persona-history-view .persona-history-truncate {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.persona-history-view time.persona-history-row-time {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  color: var(--persona-text-muted, #6b7280);
+}
+.persona-history-view .persona-history-row-star {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-self: center;
+  color: var(--persona-text-muted, #6b7280);
+}
+.persona-history-view .persona-history-row-preview {
+  font-size: 14px;
+  color: var(--persona-text-muted, #6b7280);
+}
+` +
+  /* No per-row menu in the reference design: the trigger takes the time's slot
+     on hover/focus and stays put for coarse pointers and while its menu is open. */
+  `.persona-history-view button.persona-history-row-menu-button {
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+  color: var(--persona-text-muted, #6b7280);
+}
+@media (hover: hover) {
+  .persona-history-view button.persona-history-row-menu-button {
+    opacity: 0;
+    transition: opacity 120ms ease;
+  }
+  .persona-history-view li.persona-history-item:hover time.persona-history-row-time,
+  .persona-history-view li.persona-history-item:focus-within time.persona-history-row-time {
+    opacity: 0;
+  }
+  .persona-history-view li.persona-history-item:hover button.persona-history-row-menu-button,
+  .persona-history-view li.persona-history-item:focus-within button.persona-history-row-menu-button {
+    opacity: 1;
+  }
+}
+.persona-history-view button.persona-history-row-menu-button[aria-expanded="true"] {
+  opacity: 1;
+}
+` +
+  /* The chip composites the wash twice over the opaque surface: one step to
+     match the hovered row, one to stand off it, so text never shows through. */
+  `.persona-history-view button.persona-history-row-menu-button:hover:not(:disabled),
+.persona-history-view button.persona-history-row-menu-button[aria-expanded="true"] {
+  background: linear-gradient(var(--persona-history-row-hover-bg), var(--persona-history-row-hover-bg)),
+    linear-gradient(var(--persona-history-row-hover-bg), var(--persona-history-row-hover-bg)),
+    var(--persona-history-surface-bg);
+  color: var(--persona-text, #111827);
+}
+` +
+  /* Long previews taper out before the trigger zone instead of running under
+     the glyph: whenever the trigger is present (revealed on hover/focus, held
+     by an open menu, or always for coarse pointers). */
+  `@media (hover: hover) {
+  .persona-history-view li.persona-history-item:hover .persona-history-row-preview,
+  .persona-history-view li.persona-history-item:focus-within .persona-history-row-preview,
+  .persona-history-view li.persona-history-item:has(button[aria-expanded="true"]) .persona-history-row-preview {
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 84px), transparent calc(100% - 36px));
+    mask-image: linear-gradient(to right, #000 calc(100% - 84px), transparent calc(100% - 36px));
+  }
+}
+` +
+  /* showDelete:false rows render no trigger, so the time keeps its slot on
+     hover and the preview never tapers. Must stay after the rules above (the
+     hover pairs tie on specificity) but outranks the coarse mask below. */
+  `.persona-history-view li.persona-history-item--no-menu:hover time.persona-history-row-time,
+.persona-history-view li.persona-history-item--no-menu:focus-within time.persona-history-row-time {
+  opacity: 1;
+}
+.persona-history-view li.persona-history-item--no-menu:hover .persona-history-row-preview,
+.persona-history-view li.persona-history-item--no-menu:focus-within .persona-history-row-preview,
+.persona-history-view li.persona-history-item--no-menu .persona-history-row-preview {
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+.persona-history-view .persona-history-menu {
+  position: absolute;
+  top: calc(50% + 20px);
+  right: 8px;
+  z-index: 2;
+  min-width: 160px;
+  max-width: calc(100% - 16px);
+  padding: 4px;
+  border: 1px solid var(--persona-history-border);
+  border-radius: var(--persona-history-menu-radius, 12px);
+  background: var(--persona-history-surface-bg);
+  background: var(--persona-history-menu-bg, color-mix(in srgb, var(--persona-history-surface-bg) 92%, #fff));
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
+}
+` +
+  /* The list menu hangs off the caption row's trailing end instead of a row. */
+  `.persona-history-view .persona-history-caption .persona-history-menu {
+  top: calc(100% - 2px);
+  right: 4px;
+}
+` +
+  /* Rail caption is a two-row grid (heading + scope line); grid-placing the
+     abspos menu makes row 1 its containing block, so 100% means "below the
+     trigger row", not "below the whole caption". Spanning both columns keeps
+     the base rule's max-width resolving against the full caption width. */
+  `.persona-history-view--rail .persona-history-caption .persona-history-menu {
+  grid-row: 1 / 2;
+  grid-column: 1 / -1;
+  top: calc(100% + 2px);
+  right: 0;
+}
+.persona-history-view button.persona-history-menu-item {
+  display: block;
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--persona-text, #111827);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.persona-history-view button.persona-history-menu-item--danger {
+  color: var(--persona-history-danger-fg, var(--persona-palette-colors-error-600, #b91c1c));
+}
+.persona-history-view button.persona-history-menu-item:hover:not(:disabled) {
+  background: var(--persona-history-row-hover-bg);
+}
+.persona-history-view .persona-history-row-error {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px 12px;
+  font-size: 13px;
+  color: var(--persona-history-danger-fg, var(--persona-palette-colors-error-600, #b91c1c));
+}
+
+` +
+  /* --- pagination and states ----------------------------------------------- */
+  `.persona-history-view button.persona-history-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 44px;
+  padding: 10px 16px;
+  margin: 0;
+  border: 1px solid var(--persona-history-border);
+  border-radius: var(--persona-button-radius, var(--persona-radius-lg, 10px));
+  background: transparent;
+  color: var(--persona-text, #111827);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+}
+.persona-history-view button.persona-history-secondary:hover:not(:disabled) {
+  background: var(--persona-history-row-hover-bg);
+}
+.persona-history-view .persona-history-state {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 4px;
+}
+.persona-history-view .persona-history-state-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--persona-text, #111827);
+}
+.persona-history-view .persona-history-state-description {
+  margin: 0;
+  font-size: 13px;
+  color: var(--persona-text-muted, #6b7280);
+  overflow-wrap: anywhere;
+}
+.persona-history-view button.persona-history-state-action {
+  width: auto;
+  min-width: 44px;
+}
+.persona-history-view .persona-history-view-loading {
+  display: flex;
+  flex-direction: column;
+` +
+  /* Show-delay: loads that resolve inside 250ms never flash the skeleton. */
+  `  animation: persona-history-skeleton-in 120ms ease-out 250ms both;
+}
+@keyframes persona-history-skeleton-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+` +
+  /* Mirrors the row anatomy exactly (same box, head line with the time slot,
+     preview under), so the loaded rows land where the skeleton stood. Bar
+     height splits the 21px line: text-sized pill, line-spaced rhythm. */
+  `.persona-history-view .persona-history-skeleton-row {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 9px;
+  min-height: var(--persona-history-row-min-height);
+  padding: 10px 16px;
+}
+.persona-history-view .persona-history-skeleton-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.persona-history-view .persona-history-skeleton-bar {
+  height: 12px;
+  border-radius: 999px;
+  background: var(--persona-history-skeleton-bg);
+  animation: persona-history-pulse 1400ms ease-in-out infinite;
+}
+.persona-history-view .persona-history-skeleton-bar--time {
+  flex: 0 0 auto;
+  width: 22px;
+}
+.persona-history-view .persona-history-skeleton-bar--preview {
+  width: 88%;
+}
+@keyframes persona-history-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+
+` +
+  /* --- panel presentation -------------------------------------------------- */
+  /* One flat, edge-to-edge list. The date headings stay in the DOM for their
+     list labelling; rows carry a relative time, so nothing is lost. */
+  `.persona-history-view--panel .persona-history-list-region {
+  gap: 0;
+}
+.persona-history-view--panel .persona-history-group {
+  margin: 0 -16px;
+}
+.persona-history-view--panel button.persona-history-load-more {
+  margin-top: 12px;
+}
+` +
+  /* Floating pill over the end of the list: last in flex order, pinned to the
+     bottom of the scrolling body, and still in flow so the last row clears it. */
+  `.persona-history-view--panel button.persona-history-new {
+  order: 1;
+  position: sticky;
+  bottom: 12px;
+  z-index: 1;
+  align-self: center;
+  width: auto;
+  min-height: 40px;
+  padding: 10px 16px;
+  margin: auto 0 0;
+  background: var(--persona-button-primary-bg, var(--persona-primary, #2563eb));
+  color: var(--persona-button-primary-fg, var(--persona-text-inverse, #ffffff));
+  font-weight: 600;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
+}
+
+` +
+  /* --- rail presentation --------------------------------------------------- */
+  /* A sidebar of single-line titles on their own surface: no avatar, preview,
+     time, divider or edge marker, and 36px rows inset 6px from both edges so
+     the hover and selection washes read as rounded chips. The host draws the
+     divider, on whichever edge faces the conversation. */
+  `.persona-history-view--rail {
+  --persona-history-slide: 12px;
+  --persona-history-surface-bg: var(--persona-container, #f7f7f8);
+  --persona-history-topbar-bg: transparent;
+  --persona-history-topbar-min-height: 48px;
+  --persona-history-row-min-height: 36px;
+}
+` +
+  /* The rail bar IS the sidebar header: a header-height strip that lines up
+     with the conversation column's own header band beside it. Identity leads,
+     the collapse toggle takes the inner edge facing the conversation, and there
+     is no third track to push the title off the leading edge. */
+  `.persona-history-view--rail .persona-history-topbar {
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-height: var(
+    --persona-history-rail-header-min-height,
+    var(--persona-header-min-height, 56px)
+  );
+  padding: 2px 6px;
+  background: var(
+    --persona-history-rail-header-bg,
+    var(--persona-history-surface-bg)
+  );
+  border-bottom: var(--persona-history-rail-header-border, 0);
+}
+` +
+  /* Identity sits at the leading edge on the rows' 16px text inset, which the
+     bar's own 6px padding already covers 6 of. */
+  `.persona-history-view--rail .persona-history-heading-group {
+  text-align: left;
+  padding-left: 10px;
+}
+` +
+  /* A right-docked rail faces the conversation with its LEFT edge, so the
+     toggle leads there and the identity trails it, inset from the outer edge. */
+  `.persona-history-view--rail-right .persona-history-topbar {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+.persona-history-view--rail-right .persona-history-heading-group {
+  padding: 0 10px 0 0;
+}
+` +
+  /* The sidebar toggle answers to the 36px rows beside it, not to the 44px
+     header controls; the auto tracks above take their width from it. Its color
+     answers to the rail surface, not the conversation header: the shared
+     icon-button rule reads the header action token, which brand themes tint
+     for a colored header band, and that tint has no contrast on the rail. */
+  `.persona-history-view--rail .persona-history-topbar button.persona-history-icon-button {
+  width: 36px;
+  height: 36px;
+  min-width: 36px;
+  min-height: 36px;
+  color: var(--persona-text-muted, #6b7280);
+}
+` +
+  /* Touch has no hover to aim with, so the target goes back to 44px. */
+  `@media (pointer: coarse) {
+  .persona-history-view--rail .persona-history-topbar button.persona-history-icon-button {
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .persona-history-view button.persona-history-menu-item {
+    min-height: 44px;
+    padding: 10px 12px;
+  }
+  .persona-history-view .persona-history-row-preview {
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 84px), transparent calc(100% - 36px));
+    mask-image: linear-gradient(to right, #000 calc(100% - 84px), transparent calc(100% - 36px));
+  }
+  .persona-history-view button.persona-history-list-options {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    min-height: 40px;
+  }
+}
+.persona-history-view--rail .persona-history-title {
+  font-family: var(--persona-components-history-railHeader-title-fontFamily, inherit);
+  font-size: var(--persona-components-history-railHeader-title-fontSize, 14px);
+  font-weight: var(--persona-components-history-railHeader-title-fontWeight, 600);
+  line-height: var(--persona-components-history-railHeader-title-lineHeight, inherit);
+  letter-spacing: var(--persona-components-history-railHeader-title-letterSpacing, normal);
+  color: var(
+    --persona-components-history-railHeader-title-color,
+    var(--persona-text, #111827)
+  );
+}
+` +
+  /* features.history.rail.brand, expanded: the mark leads on the same 16px
+     text inset as the rows, the view title follows as the wordmark. */
+  `.persona-history-view .persona-history-heading-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.persona-history-view .persona-history-brand-mark {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+}
+.persona-history-view .persona-history-brand-mark > img,
+.persona-history-view .persona-history-brand-mark > svg {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+.persona-history-view .persona-history-wordmark {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--persona-text, #111827);
+  font-size: 14px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+` +
+  /* The same brand is the collapsed toggle's rest face; the glyph under it
+     takes over on hover and keyboard focus, so the control still reads as one. */
+  `.persona-history-view .persona-history-toggle-brand {
+  display: none;
+}
+.persona-history-view--rail-collapsed .persona-history-back--branded .persona-history-toggle-brand {
+  display: flex;
+}
+.persona-history-view--rail-collapsed .persona-history-back--branded > svg {
+  display: none;
+}
+.persona-history-view--rail-collapsed .persona-history-back--branded:hover .persona-history-toggle-brand,
+.persona-history-view--rail-collapsed .persona-history-back--branded:focus-visible .persona-history-toggle-brand {
+  display: none;
+}
+.persona-history-view--rail-collapsed .persona-history-back--branded:hover > svg,
+.persona-history-view--rail-collapsed .persona-history-back--branded:focus-visible > svg {
+  display: block;
+}
+` +
+  /* Touch has no hover to bring the glyph up with, so it stays the only face. */
+  `@media (pointer: coarse) {
+  .persona-history-view--rail-collapsed .persona-history-back--branded .persona-history-toggle-brand {
+    display: none;
+  }
+  .persona-history-view--rail-collapsed .persona-history-back--branded > svg {
+    display: block;
+  }
+}
+.persona-history-view--rail .persona-history-body {
+  gap: 8px;
+  padding: 4px 0 12px;
+}
+` +
+  /* Rows and headings carry their own 16px text inset, so everything else in
+     the body has to opt into it. */
+  `.persona-history-view--rail .persona-history-caption,
+.persona-history-view--rail .persona-history-scope-alert,
+.persona-history-view--rail .persona-history-state {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+` +
+  /* Rail list header: heading and overflow trigger on the first line, the
+     scope caption spanning under them. DOM order is heading, scope, trigger,
+     so each cell is placed explicitly. */
+  `.persona-history-view--rail .persona-history-caption {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  /* Explicit rows: the abspos menu is grid-placed into row 1, and abspos
+     grid placement only resolves against explicit lines (implicit/auto ends
+     fall back to the padding-box edge, i.e. below the scope line). */
+  grid-template-rows: auto auto;
+  align-items: center;
+  row-gap: 2px;
+}
+.persona-history-view--rail .persona-history-conversations-title {
+  grid-row: 1;
+  grid-column: 1;
+}
+.persona-history-view--rail .persona-history-caption button.persona-history-list-options {
+  grid-row: 1;
+  grid-column: 2;
+  margin-left: 0;
+}
+.persona-history-view--rail .persona-history-scope {
+  grid-row: 2;
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+` +
+  /* The explicit display beats the UA hidden rule, so restate it: attention
+     states hide the caption and speak through the alert block instead. */
+  `.persona-history-view--rail .persona-history-scope[hidden] {
+  display: none;
+}
+.persona-history-view--rail .persona-history-scope-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+` +
+  /* Device icon only for the browser-only scope; the line is hidden for
+     everything but the ambient states. */
+  `.persona-history-view--rail .persona-history-scope[data-persona-history-identity="browser_only"] .persona-history-scope-icon {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+` +
+  /* A nav block above the list closes off with a hairline over the header. */
+  `.persona-history-view--rail.persona-history-view--has-nav .persona-history-caption {
+  margin-top: 4px;
+  padding-top: 12px;
+  border-top: 1px solid var(--persona-history-border);
+}
+` +
+  /* New-conversation row: the same geometry as a conversation, icon leading. */
+  `.persona-history-view--rail button.persona-history-new {
+  width: calc(100% - 12px);
+  min-height: 36px;
+  padding: 6px 10px;
+  margin: 0 6px;
+  border-radius: 10px;
+  background: transparent;
+  color: inherit;
+  font-weight: 500;
+}
+.persona-history-view--rail button.persona-history-new:hover:not(:disabled) {
+  background: var(--persona-history-row-hover-bg);
+}
+.persona-history-view--rail .persona-history-list-region {
+  gap: 24px;
+}
+` +
+  /* Host nav sections. Rail-only, so they take the row geometry unconditionally;
+     the footer bucket sinks to the bottom of the body. */
+  `.persona-history-view .persona-history-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.persona-history-view .persona-history-nav--footer {
+  margin-top: auto;
+}
+` +
+  /* A render-backed section that yielded nothing keeps its heading out too. */
+  `.persona-history-view .persona-history-nav[hidden] {
+  display: none;
+}
+.persona-history-view button.persona-history-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: calc(100% - 12px);
+  min-height: 36px;
+  padding: 6px 10px;
+  margin: 0 6px;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.persona-history-view button.persona-history-nav-item:hover:not(:disabled) {
+  background: var(--persona-history-row-hover-bg);
+}
+.persona-history-view .persona-history-nav-icon {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--persona-text-muted, #6b7280);
+}
+.persona-history-view .persona-history-nav-icon > * {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+}
+.persona-history-view .persona-history-nav-label {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.persona-history-view .persona-history-nav-badge {
+  flex: none;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--persona-history-row-hover-bg);
+  color: var(--persona-text-muted, #6b7280);
+  font-size: 11px;
+  line-height: 18px;
+}
+.persona-history-view--rail .persona-history-group-heading {
+  margin: 0 0 6px;
+  padding: 0 16px;
+  font-size: var(--persona-components-history-groupHeading-fontSize, 13px);
+  font-weight: var(--persona-components-history-groupHeading-fontWeight, 500);
+  line-height: var(--persona-components-history-groupHeading-lineHeight, 20px);
+}
+.persona-history-view--rail .persona-history-row-avatar,
+.persona-history-view--rail .persona-history-row-preview,
+.persona-history-view--rail time.persona-history-row-time {
+  display: none;
+}
+.persona-history-view--rail button.persona-history-row {
+  min-height: 36px;
+  padding: 6px 10px;
+  margin: 0 6px;
+  width: calc(100% - 12px);
+  border-radius: 10px;
+}
+.persona-history-view--rail .persona-history-row-title {
+  font-weight: 400;
+}
+.persona-history-view--rail button.persona-history-row-menu-button {
+  right: 10px;
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  min-height: 28px;
+}
+.persona-history-view--rail .persona-history-skeleton-row {
+  padding: 6px 16px;
+}
+.persona-history-view--rail .persona-history-skeleton-bar--preview,
+.persona-history-view--rail .persona-history-skeleton-bar--time {
+  display: none;
+}
+` +
+  /* Collapsed rail: an icon column of the expand toggle over an icon-only
+     new-conversation square. Everything else is hidden, so the host can carry
+     the rail down to 52px. */
+  `.persona-history-view--rail-collapsed .persona-history-topbar {
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: center;
+  padding: 2px;
+}
+.persona-history-view--rail-collapsed .persona-history-heading-group,
+.persona-history-view--rail-collapsed .persona-history-body > :not(.persona-history-new):not(.persona-history-nav) {
+  display: none;
+}
+.persona-history-view--rail-collapsed button.persona-history-new {
+  width: 36px;
+  padding: 0;
+  margin: 0 auto;
+  justify-content: center;
+}
+.persona-history-view--rail-collapsed button.persona-history-new span {
+  display: none;
+}
+` +
+  /* Nav sections keep only their icon rows, squared off like the one above. A
+     labelled row with no icon has nothing to show in a 52px column. */
+  `.persona-history-view--rail-collapsed .persona-history-nav .persona-history-group-heading,
+.persona-history-view--rail-collapsed button.persona-history-nav-item:not(.persona-history-nav-item--icon),
+.persona-history-view--rail-collapsed .persona-history-nav-label,
+.persona-history-view--rail-collapsed .persona-history-nav-badge {
+  display: none;
+}
+.persona-history-view--rail-collapsed button.persona-history-nav-item {
+  width: 36px;
+  padding: 0;
+  margin: 0 auto;
+  justify-content: center;
+}
+
+` +
+  /* --- shell-hosted top bar ------------------------------------------------ */
+  /* Panel keeps ONE bar: the shell header stays, its own children are suppressed,
+     and this bar mounts inside it. Unscoped: these nodes are outside the view. */
+  `[data-persona-history-suppressed] { display: none !important; }
+.persona-history-header-host {
+  display: flex;
+  flex: 1 1 auto;
+  align-self: stretch;
+  align-items: center;
+  min-width: 0;
+}
+` +
+  /* Shell-owned rail host: only its width animates, and only on a collapse. */
+  `.persona-history-rail-host {
+  transition: flex-basis 180ms cubic-bezier(0, 0, 0.2, 1);
+}
+` +
+  /* The header supplies padding and background; the bar only fills it. Its
+     controls follow the header's sizing tokens so the band height never
+     changes between surfaces; the 40px coarse floor matches
+     .persona-header-control. */
+  `.persona-history-topbar.persona-history-topbar--shell {
+  flex: 1 1 auto;
+  min-width: 0;
+  grid-template-columns: var(--persona-header-control-size, 44px) minmax(0, 1fr) var(--persona-header-control-size, 44px);
+}
+.persona-history-topbar--shell button.persona-history-icon-button {
+  width: var(--persona-header-control-size, 44px);
+  height: var(--persona-header-control-size, 44px);
+  min-width: var(--persona-header-control-size, 44px);
+  min-height: var(--persona-header-control-size, 44px);
+}
+.persona-history-topbar--shell button.persona-history-icon-button svg {
+  width: var(--persona-header-control-icon-size, 20px);
+  height: var(--persona-header-control-icon-size, 20px);
+}
+@media (pointer: coarse) {
+  .persona-history-topbar--shell button.persona-history-icon-button {
+    min-width: 40px;
+    min-height: 40px;
+  }
+}
+` +
+  /* The bar never animates; only its arrival in the shell header does. */
+  `.persona-history-topbar--shell.persona-history-topbar--shell-enter {
+  animation: persona-history-header-fade 120ms cubic-bezier(0, 0, 0.2, 1) both;
+}
+@keyframes persona-history-header-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .persona-history-view--enter .persona-history-body { animation: none; }
+  .persona-history-topbar--shell.persona-history-topbar--shell-enter {
+    animation: none;
+  }
+  .persona-history-view .persona-history-skeleton-bar { animation: none; }
+  .persona-history-rail-host { transition: none; }
+}
+`;