@xenosystem/elements-react 0.0.1

package/src/chrome-unified.css

@@ -0,0 +1,72 @@
+/*
+ * ══════════════════════════════════════════════════════════════════════════════════════════════
+ *  OWNED FILE — SOFT (`unified`)
+ * ══════════════════════════════════════════════════════════════════════════════════════════════
+ *
+ * One construction, one file, one owner, so the two can be worked on in parallel without either
+ * side touching the other's values. Everything a construction decides lives HERE — colours, box
+ * metrics, typography, radii. Nothing construction-specific belongs in a component stylesheet or
+ * in `xeno-theme.css`, because those are shared and a change there hits BOTH looks.
+ *
+ * THE CONTRACT BETWEEN THE TWO FILES, enforced by `theme.test.ts`:
+ *   1. Every token declared in `chrome-separated.css` must also be declared here, and vice versa.
+ *      Adding one on your side and not telling the other side is the failure mode — the missing
+ *      one silently inherits the other construction's value and half-renders.
+ *   2. Every token must actually DIFFER between the two files. If a value is the same in both, it
+ *      is not a construction decision: move it to the shared base.
+ *
+ * So adding a token is a two-file change and the suite will say so. That is deliberate: it is the
+ * cheapest possible coordination between two people editing in parallel.
+ */
+
+/* ── UNIFIED chrome ────────────────────────────────────────────────────────────────────────────
+ * One clipped surface with hairline dividers — the construction this set shipped before the chrome
+ * axis existed, preserved deliberately rather than corrected away.
+ *
+ * It is expressed ENTIRELY as values. Collapsing the gap to 0, painting the shell with the surface
+ * colour and making the plates transparent reproduces a single card exactly — same DOM, same
+ * components, no second implementation. That is the whole test for whether something may be a theme.
+ */
+[data-chrome='unified'] {
+  --xeno-chrome-gap: 0px;
+  --xeno-chrome-inset: 0px;
+  --xeno-chrome-shell: var(--xeno-surface);
+  --xeno-chrome-plate: transparent;
+  --xeno-chrome-body: transparent;
+  --xeno-chrome-divider: 1px solid var(--xeno-border);
+  --xeno-chrome-shadow: 0 12px 48px -16px rgba(0, 0, 0, 0.55);
+  --xeno-chrome-radius: var(--xeno-radius-card);
+  --xeno-chrome-radius-plate: 0px;
+  /* No glass: a single clipped surface has nothing behind a plate to blur. */
+  --xeno-chrome-plate-filter: none;
+  /* The inverted primary this set already shipped — preserved, not corrected. */
+  /* The soft card this set shipped — surface, big radius, hairline, and a real shadow. */
+  --xeno-chrome-card-bg: var(--xeno-surface);
+  --xeno-chrome-card-border: 1px solid var(--xeno-border);
+  --xeno-chrome-card-radius: var(--xeno-radius-card);
+  --xeno-chrome-card-pad: 13px 15px;
+  --xeno-chrome-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
+  --xeno-chrome-card-lift: 0 8px 24px -10px rgba(0, 0, 0, 0.45);
+
+  /* Restores every pre-axis value exactly. Verified against the baseline, not eyeballed. */
+  --xeno-chrome-border: var(--xeno-border);
+  --xeno-chrome-panel-header-pad: 11px 15px;
+  --xeno-chrome-panel-header-min-h: auto;
+  --xeno-chrome-panel-body-pad: 15px;
+  --xeno-chrome-title-size: 14px;
+  --xeno-chrome-title-color: var(--xeno-text);
+  --xeno-chrome-title-transform: none;
+  --xeno-chrome-title-spacing: normal;
+  --xeno-chrome-dialog-header-pad: 16px 16px 12px 20px;
+  --xeno-chrome-dialog-title-size: 16px;
+  --xeno-chrome-dialog-title-weight: 600;
+  --xeno-chrome-dialog-body-pad: 4px 20px 20px;
+  --xeno-chrome-dialog-body-size: 14px;
+  --xeno-chrome-dialog-footer-pad: 12px 20px;
+  --xeno-chrome-dialog-footer-gap: 8px;
+  --xeno-chrome-card-elevated-bg: var(--xeno-elevated);
+
+  --xeno-chrome-btn-primary-bg: var(--xeno-text);
+  --xeno-chrome-btn-primary-fg: var(--xeno-on-accent);
+  --xeno-chrome-btn-radius: var(--xeno-radius-control);
+}

package/src/containers/Badges.css

@@ -0,0 +1,116 @@
+/*
+ * Badges — inline monochrome markers (Badge / StatusPill / CountBadge / CitationBadge).
+ *
+ * CSS-first, driven by the theme custom properties from `xeno-theme.css`. These elements are STATIC
+ * (no interaction), so the only state seam is `data-tone` on the tonal members. Colours stay in the
+ * monochrome shell; the sole exception is the StatusPill status hue — `success`/`warning` arrive as
+ * the inline `--xeno-pill-tone` var (set from the status token by the renderer) and `danger` maps to
+ * `--xeno-danger`. Grammar: rounded squares, never circles. No literal colours here.
+ */
+
+/* ── Badge ─────────────────────────────────────────────────────────────────────────── */
+.xeno-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 16px;
+  padding: 0 6px;
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--xeno-muted);
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-sm);
+}
+
+/* ── StatusPill ────────────────────────────────────────────────────────────────────── */
+.xeno-statuspill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 16px;
+  padding: 0 6px;
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--xeno-muted);
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-sm);
+}
+
+/* leading dot — a rounded SQUARE (never a circle), inheriting the pill tone via currentColor */
+.xeno-statuspill-dot {
+  flex: none;
+  width: 5px;
+  height: 5px;
+  background: currentColor;
+  border-radius: var(--xeno-radius-hair);
+}
+
+/* success / warning: colour text + border from the injected status-token var */
+.xeno-statuspill[data-tone='success'],
+.xeno-statuspill[data-tone='warning'] {
+  color: var(--xeno-pill-tone);
+  border-color: color-mix(in srgb, var(--xeno-pill-tone) 45%, transparent);
+}
+
+/* danger: the one status hue that IS a theme token */
+.xeno-statuspill[data-tone='danger'] {
+  color: var(--xeno-danger);
+  border-color: color-mix(in srgb, var(--xeno-danger) 45%, transparent);
+}
+
+/* ── CountBadge ────────────────────────────────────────────────────────────────────── */
+.xeno-countbadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--xeno-text);
+  background: var(--xeno-control);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-sm);
+}
+
+/* ── CitationBadge ─────────────────────────────────────────────────────────────────── */
+.xeno-citation {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 16px;
+  padding: 0 4px;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: baseline;
+  color: var(--xeno-muted);
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-sm);
+}
+
+/* the index reads brighter than its muted brackets */
+.xeno-citation-index {
+  color: var(--xeno-text);
+}

package/src/containers/avatar.css

@@ -0,0 +1,70 @@
+/*
+ * Avatar + AvatarStack — a person/agent tile and its overlapping cluster. CSS-first: the square edge is
+ * an inline `--xeno-avatar-size` var (set by the component from `size`), so metrics never drift from the
+ * data. Rounded SQUARES only (`radius-xs`), never circles. Monochrome shell; depth is a hairline border
+ * plus, in the stack, a flat canvas ring. No literal colours — theme tokens only.
+ */
+
+.xeno-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--xeno-avatar-size, 24px);
+  height: var(--xeno-avatar-size, 24px);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-xs);
+  background: var(--xeno-control);
+  color: var(--xeno-muted);
+  overflow: hidden;
+  user-select: none;
+  vertical-align: middle;
+}
+
+/* Image fill — cover the square, clipped to its rounded corners. */
+.xeno-avatar-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+/* Initials + '+N' overflow text — centred, uppercase, muted, scaled off the edge length. */
+.xeno-avatar-initials {
+  font-family: inherit;
+  font-size: calc(var(--xeno-avatar-size, 24px) * 0.4);
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: var(--xeno-muted);
+  text-transform: uppercase;
+}
+
+/* Glyph fallback inherits the tile's muted ink via currentColor. */
+.xeno-avatar[data-variant='icon'] {
+  color: var(--xeno-muted);
+}
+
+/* ── AvatarStack ─────────────────────────────────────────────────────────────────── */
+.xeno-avatar-stack {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+/* Overlap: pull each tile left and ring it in the canvas so the stack reads as separated squares. */
+.xeno-avatar-stack > .xeno-avatar {
+  position: relative;
+  margin-left: -8px;
+  box-shadow: 0 0 0 2px var(--xeno-canvas);
+}
+.xeno-avatar-stack > .xeno-avatar:first-child {
+  margin-left: 0;
+}
+
+/* The '+N' tile sits on the elevated surface to distinguish it from the people tiles. */
+.xeno-avatar-more {
+  background: var(--xeno-elevated);
+}

package/src/containers/card.css

@@ -0,0 +1,75 @@
+/*
+ * Card — the base surface box. Monochrome shell: background + hairline border + card radius; depth on the
+ * `elevated` variant is the darker `--xeno-elevated` token plus one soft (hue-free) shadow. The hover-lift
+ * is opt-in via `data-interactive` and its transform lives behind `prefers-reduced-motion` — the border
+ * brighten still applies when motion is reduced. Only theme tokens; no literal colours (shadow excepted).
+ */
+.xeno-card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--xeno-chrome-card-pad);
+  background: var(--xeno-chrome-card-bg);
+  border: var(--xeno-chrome-card-border);
+  border-radius: var(--xeno-chrome-card-radius);
+  color: var(--xeno-text);
+}
+
+.xeno-card[data-variant='elevated'] {
+  background: var(--xeno-chrome-card-elevated-bg);
+  box-shadow: var(--xeno-chrome-card-shadow);
+}
+
+/* Body — the default slot. min-width:0 keeps flex-row children from overflowing the card. */
+.xeno-card-body {
+  min-width: 0;
+}
+
+/* Header — a titled slot split from the body by an inset hairline. */
+.xeno-card-header {
+  margin-bottom: 11px;
+  padding-bottom: 11px;
+  border-bottom: var(--xeno-chrome-divider);
+  color: var(--xeno-text);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+/* Footer — a trailing slot, mirror of the header, quieter text. */
+.xeno-card-footer {
+  margin-top: 11px;
+  padding-top: 11px;
+  border-top: var(--xeno-chrome-divider);
+  color: var(--xeno-muted);
+  font-size: 13px;
+  line-height: 1.3;
+}
+
+/* Interactive — the sole hover-lift XENO allows. Border brighten is safe without motion. */
+.xeno-card[data-interactive='true'] {
+  cursor: pointer;
+}
+.xeno-card[data-interactive='true']:hover {
+  border-color: var(--xeno-muted);
+}
+
+/* Strong lift — the artifact-card affordance: a bigger rise + one soft, hue-free shadow. The shadow is
+   safe without motion, so it sits outside the reduced-motion guard; only the transform is gated. */
+.xeno-card[data-interactive='true'][data-lift='strong']:hover {
+  box-shadow: var(--xeno-chrome-card-lift);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .xeno-card[data-interactive='true'] {
+    transition:
+      transform var(--xeno-dur) var(--xeno-ease),
+      border-color var(--xeno-dur) ease,
+      box-shadow var(--xeno-dur) ease;
+  }
+  .xeno-card[data-interactive='true']:hover {
+    transform: translateY(-1px);
+  }
+  .xeno-card[data-interactive='true'][data-lift='strong']:hover {
+    transform: translateY(-3px);
+  }
+}

package/src/containers/chip.css

@@ -0,0 +1,103 @@
+/*
+ * Chip — a small selectable/removable token. SQUARE (radius-control), 1px hairline border, monochrome
+ * shell. State is driven by `data-*` on the root; size metrics arrive as inline `--xeno-h/-padx/-gap/
+ * -font` vars set from the size tokens, so a size can never drift from the data. No literal colours.
+ */
+.xeno-chip {
+  display: inline-flex;
+  align-items: center;
+  height: var(--xeno-h, 32px);
+  max-width: 100%;
+  color: var(--xeno-text);
+  background: transparent;
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-control);
+  font-family: inherit;
+  font-size: var(--xeno-font, 14px);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+  overflow: hidden; /* clips inner hover fills to the rounded corners */
+}
+.xeno-chip[data-selection='on'] {
+  background: var(--xeno-control);
+}
+.xeno-chip[data-availability='disabled'] {
+  opacity: 0.4;
+}
+
+/* Body — the label region: a plain span, or a toggle <button> when selectable. */
+.xeno-chip-body {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--xeno-gap, 6px);
+  height: 100%;
+  min-width: 0;
+  padding: 0 var(--xeno-padx, 12px);
+  color: inherit;
+  background: transparent;
+  border: none;
+  font: inherit;
+  line-height: 1;
+}
+.xeno-chip[data-removable='true'] .xeno-chip-body {
+  padding-right: var(--xeno-gap, 6px);
+}
+.xeno-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Selectable body toggles the selection axis (aria-pressed); hover/press are CSS, not attributes. */
+.xeno-chip-select {
+  cursor: pointer;
+  transition:
+    background var(--xeno-dur) ease,
+    color var(--xeno-dur) ease;
+}
+.xeno-chip-select:hover:not(:disabled) {
+  background: var(--xeno-hover);
+}
+.xeno-chip-select:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--xeno-border);
+}
+.xeno-chip-select:disabled {
+  cursor: not-allowed;
+}
+
+/* Remove — a bare 'x' button; muted ink that resolves to text on hover. */
+.xeno-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 6px;
+  color: var(--xeno-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition:
+    background var(--xeno-dur) ease,
+    color var(--xeno-dur) ease;
+}
+.xeno-chip-remove:hover:not(:disabled) {
+  color: var(--xeno-text);
+  background: var(--xeno-hover);
+}
+.xeno-chip-remove:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--xeno-border);
+}
+.xeno-chip-remove:disabled {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-chip-select,
+  .xeno-chip-remove {
+    transition: none;
+  }
+}

package/src/containers/list-row.css

@@ -0,0 +1,132 @@
+/*
+ * ListRow — a selectable / actionable list row. CSS-first: the `selection` and `availability` axes
+ * arrive as `data-*` attributes on the root; interaction (hover / press / focus) is pure CSS. Depth is
+ * hairline borders only — monochrome shell, no coloured glow. Only the theme tokens from
+ * `xeno-theme.css` are used; no literal colours.
+ */
+
+.xeno-list-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  padding: 8px 12px;
+  color: var(--xeno-text);
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--xeno-radius-md);
+  cursor: default;
+  transition:
+    background var(--xeno-dur) ease,
+    border-color var(--xeno-dur) ease;
+}
+
+/* Reset the native <button> chrome so a button row reads exactly like a div row. */
+button.xeno-list-row {
+  font: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+/* Interactive rows (a real button, or a div carrying role=button / role=option) invite the pointer. */
+button.xeno-list-row:not(:disabled),
+.xeno-list-row[role='button'],
+.xeno-list-row[role='option'] {
+  cursor: pointer;
+}
+
+/* Hover — only interactive, enabled, unselected rows lift onto --xeno-hover. */
+button.xeno-list-row:not(:disabled):hover,
+.xeno-list-row[role='button']:not([aria-disabled='true']):hover,
+.xeno-list-row[role='option']:not([aria-disabled='true']):hover {
+  background: var(--xeno-hover);
+}
+
+/* Selection wins over hover — a selected row stays on the solid control fill. */
+.xeno-list-row[data-selection='on'],
+button.xeno-list-row[data-selection='on']:not(:disabled):hover,
+.xeno-list-row[role='button'][data-selection='on']:hover,
+.xeno-list-row[role='option'][data-selection='on']:hover {
+  background: var(--xeno-control);
+}
+
+.xeno-list-row:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+
+button.xeno-list-row:active:not(:disabled) {
+  transform: scale(0.995);
+}
+
+.xeno-list-row:disabled,
+.xeno-list-row[data-availability='disabled'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Slots ───────────────────────────────────────────────────────────────────────── */
+
+/* Leading — glyph / avatar. Fixed, never shrinks. Its own children keep their intrinsic colour. */
+.xeno-list-row-leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--xeno-muted);
+}
+
+/* Middle — the truncation column. min-width:0 lets the title/subtitle ellipsize inside the flex row. */
+.xeno-list-row-body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.xeno-list-row-title {
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--xeno-text);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.xeno-list-row-subtitle {
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--xeno-muted);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Trailing — meta / actions pinned to the end. Fixed, never shrinks. */
+.xeno-list-row-trailing {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--xeno-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-list-row {
+    transition: none;
+  }
+  button.xeno-list-row:active:not(:disabled) {
+    transform: none;
+  }
+}

package/src/containers/message-bubble.css

@@ -0,0 +1,112 @@
+/*
+ * MessageBubble — the chat message container. Monochrome SHELL: the container carries no colour of its
+ * own; only `children` may bring content colour. A `user` turn is a right-aligned bubble; an `assistant`
+ * turn is a bare left-aligned prose block (the locked design). State rides the root as `data-role` and,
+ * while a turn is still being written, `data-streaming`. Only the theme custom properties are used here.
+ */
+
+.xeno-message {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 100%;
+  /* How wide a user bubble may run before it wraps. A knob rather than a prop, because the answer is
+     usually a MEDIA QUERY — a bubble that reads well at 80% on a desktop column is cramped at 80% of
+     a phone — and a breakpoint belongs in the product's stylesheet, not threaded through React state.
+     Override it on the turn, on the transcript, or in an `@media` block; the default stands alone. */
+  --xeno-message-max: 80%;
+}
+
+/* Sides: user hugs the right rail, assistant the left. */
+.xeno-message[data-role='user'] {
+  align-items: flex-end;
+}
+.xeno-message[data-role='assistant'] {
+  align-items: flex-start;
+}
+
+.xeno-message-body {
+  min-width: 0;
+  color: var(--xeno-text);
+  font-size: 15px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+/* Attachments — what was sent WITH the message, above the body and outside the bubble. They share the
+   turn's alignment and take no fill of their own: an image already has edges, and wrapping it in a
+   border plus 12px of surface only draws a second frame around the first. */
+.xeno-message-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-width: var(--xeno-message-max);
+  min-width: 0;
+}
+.xeno-message[data-role='user'] .xeno-message-attachments {
+  justify-content: flex-end;
+}
+
+/* User: a bubble — surface fill, hairline border, card radius with the bottom-right corner squared. */
+.xeno-message[data-role='user'] .xeno-message-body {
+  max-width: var(--xeno-message-max);
+  /* A person's own words keep the shape they were typed in — the blank line they left between two
+     thoughts is part of the message. Only on this side: an assistant turn is rendered prose, where
+     the source newlines are markup and honouring them would double every paragraph break. */
+  white-space: pre-wrap;
+  padding: 12px;
+  background: var(--xeno-surface);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-card);
+  border-bottom-right-radius: var(--xeno-radius-xs);
+}
+
+/* Assistant: no bubble, just prose (locked design). */
+.xeno-message[data-role='assistant'] .xeno-message-body {
+  max-width: 100%;
+}
+
+/* Meta row: timestamp + hover action bar, aligned under the turn. */
+.xeno-message-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 20px;
+}
+
+.xeno-message-time {
+  font-size: 12px;
+  line-height: 1;
+  color: var(--xeno-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Hover action bar — fades in on hover/focus of the whole turn. */
+.xeno-message-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+  /* Transparent is not gone. At `opacity: 0` these buttons still take the pointer, so the strip of
+     nothing under a message swallowed clicks and — worse — sometimes ran Copy or Regenerate on a turn
+     whose bar the reader could not see. Faded out means out of reach; hover puts it back. */
+  pointer-events: none;
+  transition: opacity 0.18s var(--xeno-ease);
+}
+.xeno-message:hover .xeno-message-actions,
+.xeno-message:focus-within .xeno-message-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* While streaming the bar stays hidden and inert, even on hover/focus (this rule wins by source order). */
+.xeno-message[data-streaming] .xeno-message-actions {
+  opacity: 0;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-message-actions {
+    transition: none;
+  }
+}