@crewlethq/ui 0.81.1 → 0.82.0

package/dist/ChatDay-E3FF5HWF.css

@@ -0,0 +1,116 @@
+/*
+ * ChatDay: a day of a conversation under its date, set on the conversation's
+ * own scale (ChatScale.css).
+ */
+
+/* The day is the pill's range: pinned, the pill stays inside it, so the next
+   day pushes it out from below. */
+.crewlet-chat-day {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/*
+ * THE PILL'S PLACE. A box as tall as the pill, first in the day, set so the
+ * pill's middle is on the rule. Sticky in the day, it holds the pill a little
+ * under the list's top edge for as long as the day is in view, and the day's
+ * end pushes it out, a small gap above the next day's pill.
+ *
+ * ITS OWN MARGINS STAY POSITIVE. A sticky box may travel as far as its margin
+ * box allows, so a negative margin here let the pill run past the end of its
+ * day and sit on the next day's pill. The rule under it takes the overlap
+ * instead, with a negative margin of its own, which moves nothing sticky.
+ *
+ * The box lets the pointer through to the rows beside the pill; the pill
+ * takes it. It stands under a message's hover toolbar (which stands over the
+ * rows and the pill alike) and over the rows and the New line.
+ */
+.crewlet-chat-day__label {
+  position: sticky;
+  top: var(--crewlet-chat-day-pin);
+  z-index: var(--z-index-sticky);
+  display: flex;
+  flex: none;
+  justify-content: center;
+  height: var(--crewlet-chat-day-pill);
+  margin-top: calc(var(--crewlet-chat-day-gap) - var(--crewlet-chat-day-pill) / 2);
+  pointer-events: none;
+  /* A host that raises the pin (a banner arriving) moves the pinned pill
+     down with it rather than jumping it. */
+  transition: top var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/*
+ * THE DAY'S RULE: a hairline across the whole list with the day's gap under
+ * it, in the flow like any row. It rises half a pill, so it runs through the
+ * pill's middle.
+ */
+.crewlet-chat-day__rule {
+  position: relative;
+  flex: none;
+  height: 1px;
+  margin: calc(var(--crewlet-chat-day-pill) / -2) 0 var(--crewlet-chat-day-gap);
+  background: var(--color-edge-hairline);
+}
+
+/* The New line on the day's rule covers the rule, as one line. */
+.crewlet-chat-day__rule > .crewlet-chat-divider--unread {
+  position: absolute;
+  inset: 0;
+}
+
+/*
+ * THE PILL floats over the rows: the transcript's own ground, ringed with the
+ * hairline and a small shadow, so it reads as lifted off the messages it
+ * passes over. The ring is a shadow, which forced colors drops, so a
+ * transparent outline stands in for it there.
+ */
+.crewlet-chat-day__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  height: var(--crewlet-chat-day-pill);
+  box-sizing: border-box;
+  padding: 0 var(--spacing-3);
+  border: 0;
+  border-radius: var(--radius-pill);
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+  background-color: var(--crewlet-chat-ground);
+  box-shadow:
+    0 0 0 1px var(--color-edge-hairline),
+    var(--shadow-xs);
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  pointer-events: auto;
+}
+
+/* A pill that opens a menu: its chevron sits a step closer to its edge. */
+.crewlet-chat-day__pill--button {
+  padding-inline-end: var(--spacing-2);
+  cursor: pointer;
+}
+
+/* Under the pointer, and while its menu is open, the hover overlay laid on
+   the pill's own ground. */
+.crewlet-chat-day__pill--button:hover,
+.crewlet-chat-day__pill--button[aria-expanded='true'] {
+  background-image: linear-gradient(var(--color-surface-hover), var(--color-surface-hover));
+}
+
+/* The pill draws its own ring, so focus is drawn over it, as one edge. */
+.crewlet-chat-day__pill--button:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-chat-day__label {
+    transition: none;
+  }
+}

package/dist/ChatDivider/ChatDivider.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'react';
+export type ChatDividerVariant = 
+/**
+ * The New line: a hairline in the danger hue across the whole list, laid
+ * on the boundary between the last message the reader has read and the
+ * first one they have not, with its word at the line's end.
+ */
+'unread'
+/** A quiet labelled rule, as a thread pane sets its reply count over the replies. */
+ | 'date';
+export interface ChatDividerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
+    variant: ChatDividerVariant;
+    /** The words on the line, and its name for a screen reader: "New", "3 replies". */
+    label: string;
+}
+/**
+ * A line between the rows of a conversation.
+ *
+ * THE NEW LINE TAKES NO HEIGHT. Marking where the reader left off moves no
+ * message: the line is drawn on the boundary between two rows, over the gap
+ * they already keep, so a list that gains or loses it never shifts under the
+ * reader's eye. Inside a `ChatDay` whose first message is the first unread
+ * one, the day draws it on its own rule (`unread`), as one line rather than
+ * a second line under the first.
+ *
+ * A SEPARATOR TO A SCREEN READER, named by its words, so a reader moving
+ * through the log hears "New" where the unread messages start. The host can
+ * find it again by `data-divider` (to bring it into view, or to tell whether
+ * it is on screen for an unread banner).
+ */
+export declare function ChatDivider({ variant, label, className, ...rest }: ChatDividerProps): import("react").JSX.Element;

package/dist/ChatDivider/index.d.ts

@@ -0,0 +1,4 @@
+import '../ChatMessage/ChatScale.css';
+import './ChatDivider.css';
+export { ChatDivider } from './ChatDivider.js';
+export type { ChatDividerProps, ChatDividerVariant } from './ChatDivider.js';

package/dist/ChatDivider/index.js

@@ -0,0 +1,2 @@
+export { ChatDivider } from '../chunk-K774LUN3.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ChatDivider-7ZNDL2PZ.css

@@ -0,0 +1,76 @@
+/*
+ * ChatDivider: a line between the rows of a conversation, set on the
+ * conversation's own scale (ChatScale.css).
+ */
+
+/* A quiet labelled rule: the words in the middle, a hairline either side. */
+.crewlet-chat-divider--date {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--crewlet-chat-pad-x);
+  color: var(--color-text-tertiary);
+  font-size: var(--crewlet-chat-meta);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-chat-divider--date::before,
+.crewlet-chat-divider--date::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--color-border-default);
+}
+
+.crewlet-chat-divider--date .crewlet-chat-divider__label {
+  white-space: nowrap;
+}
+
+/*
+ * THE NEW LINE TAKES NO HEIGHT. A hairline across the whole list in the
+ * danger hue, laid on the boundary between the last read message and the
+ * first unread one, with "New" at its end on the transcript's ground, so it
+ * reads over the rows it passes. Brought to the top of the view (scrolled to
+ * as a target), it stops under the day's pinned pill rather than behind it.
+ */
+.crewlet-chat-divider--unread {
+  position: relative;
+  z-index: var(--z-index-raised);
+  height: 0;
+  pointer-events: none;
+  scroll-margin-top: calc(var(--crewlet-chat-day-pin) + var(--crewlet-chat-day-pill) + var(--spacing-3));
+}
+
+.crewlet-chat-divider--unread::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  height: 1px;
+  background: var(--color-feedback-danger);
+}
+
+.crewlet-chat-divider--unread .crewlet-chat-divider__label {
+  position: absolute;
+  top: 0;
+  right: var(--crewlet-chat-pad-x);
+  padding: 0 var(--spacing-1);
+  transform: translateY(-50%);
+  background: var(--crewlet-chat-ground);
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-normal);
+}
+
+/*
+ * FORCED COLORS drops the line's background, which is the whole line. A
+ * border is the one edge the mode keeps, painted in its own text colour.
+ */
+@media (forced-colors: active) {
+  .crewlet-chat-divider--unread::before,
+  .crewlet-chat-divider--date::before,
+  .crewlet-chat-divider--date::after {
+    border-top: 1px solid CanvasText;
+  }
+}

package/dist/ChatMessage/ChatMessage.d.ts

@@ -0,0 +1,111 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Why a row is drawn apart from the rest: it names the reader, or the whole room. */
+export type ChatMessageHighlight = 'mention';
+/** An outbox row: `sending` is drawn faint in place, `failed` carries its own line. */
+export type ChatMessagePending = 'sending' | 'failed';
+/**
+ * Where the toolbar stands. `auto` rests it on the row's first line, over the
+ * row above, and inside the row's own head where the scroller's edge would cut
+ * it. `inside` always draws it inside the row, for a row with something of the
+ * host's own above it that the toolbar must not cover (the head of a card).
+ */
+export type ChatMessageActionsPlacement = 'auto' | 'inside';
+/** The class every message row carries, which the row's keys walk between. */
+export declare const CHAT_MESSAGE_CLASS = "crewlet-chat-message";
+export interface ChatMessageProps extends Omit<HTMLAttributes<HTMLElement>, 'id' | 'children'> {
+    /** The message's own id, drawn as `data-message-id` so a host can find the row it opens at. */
+    id: string;
+    /** Names the row for a screen reader: "Product Manager, 11:02 AM". */
+    label: string;
+    /** The author's face, drawn in the gutter of a message that starts a run. A button that opens their profile is styled to fit. */
+    avatar: ReactNode;
+    /** The author's name, usually a button that opens their profile. */
+    author: ReactNode;
+    /** After the name: a quiet `Tag` naming the seat's kind ("Agent"), a saved flag, the room a mention came from. */
+    badges?: ReactNode;
+    /** The short time beside the name ("11:40 AM"). */
+    time: string;
+    /** The full time, shown on hover of either time. */
+    timeTitle: string;
+    /** The machine-readable time, for the `<time>` elements' `dateTime`. */
+    dateTime?: string | undefined;
+    /**
+     * The time a continuation shows in its gutter, which is a face wide:
+     * "11:40" rather than "11:40 AM". `time` by default.
+     */
+    gutterTime?: string | undefined;
+    /** A later message from the same author, close in time to the one before: no face and no head. */
+    continuation?: boolean | undefined;
+    /** `mention` for a message that names the reader or the whole room: a light warning wash and a bar on its edge. */
+    highlight?: ChatMessageHighlight | null | undefined;
+    /** An outbox row. See `ChatMessageFailure` for the line a failed one carries. */
+    pending?: ChatMessagePending | undefined;
+    /** Holds the row's fill and its toolbar in view while one of the toolbar's menus or pickers is open. */
+    active?: boolean | undefined;
+    /** The row a link, a mention or a search opened at: a wash of the accent that fades out. */
+    flash?: boolean | undefined;
+    /** The words are being edited in place: the toolbar steps aside. */
+    editing?: boolean | undefined;
+    /** The hover toolbar, a `MessageActions`. */
+    actions?: ReactNode;
+    /** Where the toolbar stands, `auto` by default. */
+    actionsPlacement?: ChatMessageActionsPlacement | undefined;
+    /** Under the words, one stack a step apart: previews, a `ReactionBar`, a `ThreadSummary`, a `ChatMessageFailure`. */
+    footer?: ReactNode;
+    /** The message's words. */
+    children: ReactNode;
+}
+/**
+ * One message in a transcript: the author's face in a gutter, the name, a
+ * quiet label and the time on one head line, the words, and a footer stack
+ * under them.
+ *
+ * A RUN OF MESSAGES IS ONE BLOCK. A `continuation` (the same author again,
+ * close in time) draws no face and no head: its gutter holds the time, a
+ * face wide, shown while the row is pointed at or focused, on the baseline
+ * of the words' first line.
+ *
+ * THE TOOLBAR RESTS ON THE ROW'S FIRST LINE, over the row above. Laid across
+ * the row's top edge, it covered the end of the row's own head, which on a
+ * narrow column is the time of the very message it acts on. A row with less
+ * room above it than the toolbar needs, at the top of its scroller, would
+ * have it cut by the scroller's edge, so that row draws it inside its own
+ * head. The room is MEASURED, when the pointer arrives or focus enters: the
+ * toolbar's height less the row's own top inset, against the distance to the
+ * scroller's top.
+ *
+ * A TOUCH SCREEN HAS NO HOVER. A tap on the row focuses it (it is focusable,
+ * out of the tab order), and a focused row shows its toolbar there, so
+ * replying, saving and the More menu are reached by touch as well.
+ *
+ * THE KEYS. ArrowUp and ArrowDown on a focused row move to the row before and
+ * after it in the same log. A host's own `onKeyDown` runs first, and a key it
+ * handles (`preventDefault`) is left alone.
+ *
+ * NO BOLD. The name is the medium weight and everything else on the head the
+ * regular one, in the meta step and the tertiary ink.
+ */
+export declare const ChatMessage: import("react").ForwardRefExoticComponent<ChatMessageProps & import("react").RefAttributes<HTMLElement>>;
+/** The words a failed row's line says. */
+export interface ChatMessageFailureLabels {
+    /** Leads the line, before the reason. */
+    notSent: string;
+    retry: string;
+    discard: string;
+}
+export declare const CHAT_MESSAGE_FAILURE_LABELS: ChatMessageFailureLabels;
+export interface ChatMessageFailureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Why it was not sent, in a sentence: "The engine did not answer." */
+    reason?: ReactNode;
+    /** Sends it again. */
+    onRetry: () => void;
+    /** Drops it from the outbox. */
+    onDiscard: () => void;
+    labels?: Partial<ChatMessageFailureLabels> | undefined;
+}
+/**
+ * The line under a message that was not sent (`pending="failed"`): what
+ * happened in the danger ink, then Retry and Discard. It is a status, so a
+ * screen reader hears it once when it appears.
+ */
+export declare function ChatMessageFailure({ reason, onRetry, onDiscard, labels: overrides, className, ...rest }: ChatMessageFailureProps): import("react").JSX.Element;

package/dist/ChatMessage/index.d.ts

@@ -0,0 +1,4 @@
+import './ChatScale.css';
+import './ChatMessage.css';
+export { CHAT_MESSAGE_CLASS, CHAT_MESSAGE_FAILURE_LABELS, ChatMessage, ChatMessageFailure } from './ChatMessage.js';
+export type { ChatMessageActionsPlacement, ChatMessageFailureLabels, ChatMessageFailureProps, ChatMessageHighlight, ChatMessagePending, ChatMessageProps, } from './ChatMessage.js';

package/dist/ChatMessage/index.js

@@ -0,0 +1,5 @@
+export { CHAT_MESSAGE_CLASS, CHAT_MESSAGE_FAILURE_LABELS, ChatMessage, ChatMessageFailure } from '../chunk-IUBOLGHG.js';
+import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ChatMessage-FH7VRVCH.css

@@ -0,0 +1,304 @@
+/*
+ * One message in a transcript: a face in a gutter, the head line, the words
+ * and a footer stack. Every size reads the conversation scale
+ * (ChatScale.css); every edge and fill the quiet scale in @crewlethq/tokens.
+ */
+
+.crewlet-chat-message {
+  /* Where the row's first line starts: the toolbar rests on it. */
+  --crewlet-chat-row-top: var(--spacing-2);
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--crewlet-chat-avatar) minmax(0, 1fr);
+  column-gap: var(--crewlet-chat-gap);
+  padding: var(--crewlet-chat-row-top) var(--crewlet-chat-pad-x) var(--spacing-1);
+  font-size: var(--crewlet-chat-text);
+  line-height: var(--crewlet-chat-line);
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+  /* A message the reader is taken to stops under the day's pinned pill. */
+  scroll-margin-top: calc(var(--crewlet-chat-day-pin) + var(--crewlet-chat-day-pill) + var(--spacing-2));
+}
+
+.crewlet-chat-message.is-continuation {
+  --crewlet-chat-row-top: 1px;
+  padding-bottom: 1px;
+}
+
+.crewlet-chat-message:hover,
+.crewlet-chat-message:focus-visible,
+.crewlet-chat-message:has(:focus-visible),
+.crewlet-chat-message.is-active {
+  background: var(--color-fill-row);
+}
+
+.crewlet-chat-message:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* A row that names the reader: its wash and the warning bar on its edge. It
+   keeps its wash, and only its wash, under the pointer: the toolbar and the
+   gutter's time say which row is pointed at, and a hover step laid over the
+   wash took the row's quiet text under 4.5:1 on the darker palettes. */
+.crewlet-chat-message.is-mention,
+.crewlet-chat-message.is-mention:hover,
+.crewlet-chat-message.is-mention:focus-visible,
+.crewlet-chat-message.is-mention:has(:focus-visible),
+.crewlet-chat-message.is-mention.is-active {
+  background: var(--crewlet-chat-mention);
+  box-shadow: inset 2px 0 0 var(--color-feedback-warning);
+}
+
+/* The row a link or a search opened at: a wash of the accent that fades back
+   to whatever the row draws of its own (the mention wash included), so there
+   is no last keyframe to name it. */
+.crewlet-chat-message.is-flash {
+  animation: crewlet-chat-message-flash calc(var(--motion-duration-moderate) * 8) var(--motion-easing-out);
+}
+
+@keyframes crewlet-chat-message-flash {
+  0%,
+  40% {
+    background: var(--color-brand-accent-soft-strong);
+  }
+}
+
+.crewlet-chat-message.is-sending .crewlet-chat-message__body {
+  color: var(--color-text-tertiary);
+}
+
+/* The face starts a hairline under the top of the name's line box, so across
+   the name and the first line of words it sits centred on the pair. It keeps
+   its own height: stretched to the row, the face's button (and its focus
+   ring) ran the full height of a long message. */
+.crewlet-chat-message__gutter {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 2px;
+}
+
+/* A face that opens the author's profile: the face is the whole control. */
+.crewlet-chat-message__gutter > button {
+  display: inline-flex;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  cursor: pointer;
+}
+
+.crewlet-chat-message__gutter > button:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/* A continuation's time sits on the baseline of the first line of its words.
+   The two are in different columns and set at different sizes, so the grid
+   aligns them by baseline rather than by sharing a line height. It ends on
+   the column's edge: a time is wider than a face, and centred it ran into the
+   gap before the words. */
+.crewlet-chat-message.is-continuation > .crewlet-chat-message__gutter {
+  justify-content: flex-end;
+  padding-top: 0;
+}
+
+.crewlet-chat-message.is-continuation > .crewlet-chat-message__gutter,
+.crewlet-chat-message.is-continuation > .crewlet-chat-message__main {
+  align-self: baseline;
+}
+
+.crewlet-chat-message__gutter-time {
+  visibility: hidden;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.crewlet-chat-message:hover .crewlet-chat-message__gutter-time,
+.crewlet-chat-message:focus-visible .crewlet-chat-message__gutter-time,
+.crewlet-chat-message:has(:focus-visible) .crewlet-chat-message__gutter-time,
+.crewlet-chat-message.is-active .crewlet-chat-message__gutter-time {
+  visibility: visible;
+}
+
+.crewlet-chat-message__main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* THE HEAD IS SET AS TEXT, not as a flex row. Every line of it, the first or
+   one a narrow pane wraps the time onto, is held to one body line by the
+   block's strut, and the smaller meta stands on the name's baseline inside
+   it. As a wrapping flex row the line grew a pixel to fit the time's own
+   line box, and a time wrapped alone got a short line of its own. */
+.crewlet-chat-message__head {
+  min-width: 0;
+  line-height: calc(var(--crewlet-chat-text) * var(--crewlet-chat-line));
+}
+
+/* The gap follows each part, so a part a narrow pane wraps starts flush. */
+.crewlet-chat-message__head > * {
+  white-space: nowrap;
+}
+
+.crewlet-chat-message__head > :not(:last-child) {
+  margin-inline-end: var(--spacing-2);
+}
+
+/* A label beside the name ("Agent") is centred on the lower-case letters, as
+   text sets an inline mark. */
+.crewlet-chat-message__head > .crewlet-tag {
+  vertical-align: middle;
+}
+
+.crewlet-chat-message__author {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+/* A name that opens the author's profile reads as the name, not a button. */
+.crewlet-chat-message__author > button {
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.crewlet-chat-message__author > button:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.crewlet-chat-message__author > button:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/* Meta on the head shares the name's baseline. A line height of its own
+   would sit its smaller text lower in a box as tall as the name's and grow
+   the line by a pixel, so it takes none. */
+.crewlet-chat-message__time {
+  color: var(--color-text-tertiary);
+  font-size: var(--crewlet-chat-meta);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.crewlet-chat-message__body {
+  min-width: 0;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+/* Emphasis in a message is the semibold step, as it is everywhere else in
+   the product: the browser's own bold read heavier than the names. */
+.crewlet-chat-message__body :is(b, strong) {
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Previews, reactions and the thread line: one stack, one gap. */
+.crewlet-chat-message__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--crewlet-chat-stack);
+  margin-top: var(--crewlet-chat-stack);
+}
+
+/* NO PIECE UNDER A MESSAGE IS WIDER THAN ITS COLUMN. Stacked on the start
+   edge, each piece takes its one-line width, and an agent's working line set
+   it wider than a phone's column: the transcript scrolled sideways. */
+.crewlet-chat-message__footer > * {
+  max-width: 100%;
+}
+
+/* THE TOOLBAR STANDS ON THE ROW'S FIRST LINE, over the row above, and over
+   the day's pinned pill as well as the rows: a toolbar that slid under the
+   pill lost its middle buttons wherever the two crossed. */
+.crewlet-chat-message__actions {
+  position: absolute;
+  top: calc(var(--crewlet-chat-row-top) - var(--crewlet-chat-toolbar));
+  right: var(--crewlet-chat-pad-x);
+  z-index: calc(var(--z-index-sticky) + var(--z-index-raised));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-chat-message:hover > .crewlet-chat-message__actions,
+.crewlet-chat-message:focus-visible > .crewlet-chat-message__actions,
+.crewlet-chat-message:has(:focus-visible) > .crewlet-chat-message__actions,
+.crewlet-chat-message.is-active > .crewlet-chat-message__actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* With no row above to stand over (see ChatMessage.tsx), or when the host
+   asks, it is drawn inside the row's own head. */
+.crewlet-chat-message.has-actions-inside > .crewlet-chat-message__actions {
+  top: var(--spacing-1);
+}
+
+/* A row's quiet controls, the add-reaction pill among them, show while the
+   row is pointed at or holds keyboard focus, and while their picker is open. */
+.crewlet-chat-message .crewlet-reaction--add {
+  opacity: 0;
+}
+
+.crewlet-chat-message:hover .crewlet-reaction--add,
+.crewlet-chat-message:has(:focus-visible) .crewlet-reaction--add,
+.crewlet-chat-message.is-active .crewlet-reaction--add,
+.crewlet-chat-message .crewlet-reaction--add[aria-expanded='true'] {
+  opacity: 1;
+}
+
+/* A TOUCH SCREEN HAS NO HOVER: a tap on the row (which focuses it) shows the
+   toolbar, so replying in a thread, saving and the More menu are reached by
+   touch as well as by pointer and keyboard. The add pill is always shown
+   there, so a reaction is one tap away without finding the toolbar first. */
+@media (hover: none) {
+  .crewlet-chat-message:focus-within > .crewlet-chat-message__actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .crewlet-chat-message .crewlet-reaction--add {
+    opacity: 1;
+  }
+}
+
+/* The line under a message that was not sent. */
+.crewlet-chat-message-failure {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--crewlet-chat-meta);
+  line-height: var(--crewlet-chat-line);
+}
+
+.crewlet-chat-message-failure__words {
+  margin-inline-end: var(--spacing-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-chat-message {
+    transition: none;
+  }
+
+  .crewlet-chat-message.is-flash {
+    animation: none;
+  }
+
+  .crewlet-chat-message__actions {
+    transition: none;
+  }
+}