@crewlethq/ui 0.81.1 → 0.82.0

package/dist/styles.css

@@ -109,6 +109,196 @@
 }
 
 
+/* ActionCard-47WSZ2O5.css */
+/*
+ * ActionCard: a first step offered as a picture, on an artifact kind's
+ * colour ground. The ground is the kind's own Ground steps (ArtifactKinds.css)
+ * laid over the card rung, which the palette suite holds to 4.5:1 for the
+ * primary text in every palette and both modes, with the kind's glow behind
+ * the drawing.
+ */
+
+/*
+ * ONE ROW THAT SCROLLS SIDEWAYS when it runs out of width, so a phone shows
+ * two cards and part of the third (the part says there is more) instead of a
+ * tall stack. The block padding keeps the focus ring and the hover shadow
+ * inside the scroller's clip; the negative margin gives that space back to
+ * the layout. A host that runs the row to its container's edges sets the
+ * inline padding and `scroll-padding-inline` to its own inset.
+ */
+.crewlet-action-cards {
+  display: flex;
+  gap: var(--spacing-2);
+  overflow-x: auto;
+  margin-block: calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1);
+  padding-block: var(--spacing-1) var(--spacing-2);
+  scroll-snap-type: x mandatory;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+.crewlet-action-cards::-webkit-scrollbar {
+  display: none;
+}
+
+.crewlet-action-card {
+  --crewlet-action-card-ground: var(--crewlet-kind-ground);
+  position: relative;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 148px;
+  height: 172px;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: var(--spacing-3) var(--spacing-3) 0;
+  /* The kind's hue itself is the edge: 3:1 or more on the sheet in every
+     palette and mode, where the kind's Line step measured 2.5:1. */
+  border: 1px solid var(--crewlet-kind-hue);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-surface-subtle);
+  background-image:
+    radial-gradient(110% 64% at 50% 100%, var(--crewlet-kind-glow) 0%, transparent 72%),
+    linear-gradient(180deg, var(--crewlet-action-card-ground) 0%, var(--crewlet-kind-ground-end) 100%);
+  color: var(--color-text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  scroll-snap-align: start;
+  transition: box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* A QUIET HOVER: the ground deepens a step and a small shadow lifts the
+   card off the page. Nothing moves. */
+.crewlet-action-card:hover {
+  --crewlet-action-card-ground: var(--crewlet-kind-ground-strong);
+  box-shadow: var(--shadow-sm);
+}
+
+/* The card draws its own edge, so the ring is drawn over it. */
+.crewlet-action-card:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The title at the medium weight, as every emphasis in a conversation is,
+   two lines at most at its width, balanced so neither line is one word. */
+.crewlet-action-card__title {
+  max-width: 14ch;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-snug);
+  text-wrap: balance;
+}
+
+/* The drawing stands on the card's foot, still. */
+.crewlet-action-card__art {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  height: 100px;
+  margin: 0 calc(var(--spacing-3) * -1);
+}
+
+.crewlet-action-card__art .crewlet-kind-illustration {
+  width: 112px;
+  max-height: 96px;
+  margin-bottom: calc(var(--spacing-2) * -1);
+  filter: drop-shadow(0 6px 12px var(--crewlet-kind-line));
+}
+
+/* FORCED COLORS drops the ground; the hue's border stays as the card's edge. */
+@media (forced-colors: active) {
+  .crewlet-action-card {
+    border-color: CanvasText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-action-card {
+    transition: none;
+  }
+}
+
+
+/* ActivityLine-AMSERTOB.css */
+/*
+ * Who is typing and which agent is working, under a composer, in the meta
+ * step and the tertiary ink.
+ */
+
+.crewlet-activity-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-4);
+  min-height: 20px;
+  min-width: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--crewlet-chat-meta);
+}
+
+/* No piece is wider than the line: a long working status truncates. */
+.crewlet-activity-line > * {
+  max-width: 100%;
+}
+
+/* The working line in the line's own step, over the indicator's. */
+.crewlet-activity-line .crewlet-activity-line__working {
+  font-size: var(--crewlet-chat-meta);
+}
+
+.crewlet-activity-line__typing {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-activity-line__dots {
+  display: inline-flex;
+  gap: 2px;
+}
+
+.crewlet-activity-line__dots > i {
+  width: 4px;
+  height: 4px;
+  border-radius: var(--radius-circle);
+  background: currentColor;
+  animation: crewlet-activity-line-typing calc(var(--motion-duration-slow) * 4) var(--motion-easing-in-out) infinite;
+}
+
+.crewlet-activity-line__dots > i:nth-child(2) {
+  animation-delay: var(--motion-duration-base);
+}
+
+.crewlet-activity-line__dots > i:nth-child(3) {
+  animation-delay: var(--motion-duration-slow);
+}
+
+@keyframes crewlet-activity-line-typing {
+  0%,
+  60%,
+  100% {
+    opacity: 0.3;
+    transform: none;
+  }
+
+  30% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+
+/* Under reduced motion the dots hold still at full strength: the words say
+   who is typing. */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-activity-line__dots > i {
+    animation: none;
+  }
+}
+
+
 /* AddPill-FPM5RUKI.css */
 /*
  * The control that adds a child (AddPill.tsx).
@@ -754,7 +944,7 @@
 }
 
 
-/* AppShell-2IBUS4TH.css */
+/* AppShell-F7RID4P4.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -890,6 +1080,10 @@
  * run the height of the window parallel to it, eight pixels off.
  */
 .crewlet-app-shell__rail {
+  /* The fold control's containing block. Re-declared as `fixed` by the
+     narrow block below, which comes later at the same weight, so the drawer
+     keeps its layer. */
+  position: relative;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -1475,6 +1669,24 @@
   height: 100%;
 }
 
+/*
+ * A FLUSH SCREEN draws its own frame to the sheet's edges: the column gives up
+ * its pad, its measure and its gap, and the scroller reserves no gutter, since
+ * nothing in it scrolls and a strip at its end would cut the screen's own
+ * edge. The column is the containing block for a `LayerHost` the screen
+ * keeps, so its layers fill the screen rather than the window.
+ */
+.crewlet-app-shell--fill-flush .crewlet-app-shell__main {
+  scrollbar-gutter: auto;
+}
+
+.crewlet-app-shell--fill-flush .crewlet-app-shell__content {
+  position: relative;
+  gap: 0;
+  max-width: none;
+  padding: 0;
+}
+
 /* Hidden by default, revealed by the breakpoint below: the wide layout has the
    rail on screen already, so the control that opens it has nothing to do. */
 .crewlet-app-shell__toggle {
@@ -1624,6 +1836,107 @@
   animation: crewlet-app-shell-aside-slide var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
+/*
+ * THE COMPACT RAIL: the same track, narrowed to the compact column. One
+ * variable is the rail's width for the grid, the aside's cap and the drawer
+ * alike, so folding the rail is this one declaration. The shell writes the
+ * attribute only where the layout is wide: the drawer under the step is
+ * always the full list.
+ */
+.crewlet-app-shell[data-rail='compact'] {
+  --crewlet-app-shell-rail: var(--size-shell-rail-compact);
+}
+
+/*
+ * THE FOLD CONTROL stands over the compact column's centre, in the row under
+ * the head, in both shapes, so it never moves under the pointer that pressed
+ * it. Quiet until the rail is pointed at: the tertiary ink, which holds 3:1
+ * on the frame, then the secondary, and the ghost's own primary under the
+ * pointer.
+ */
+.crewlet-app-shell__fold {
+  position: absolute;
+  top: calc(var(--size-shell-inset) + var(--crewlet-app-shell-topbar));
+  left: calc((var(--size-shell-rail-compact) - var(--size-control-sm)) / 2);
+  z-index: 1;
+  display: inline-flex;
+}
+
+.crewlet-app-shell__fold > .crewlet-icon-btn {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-app-shell__rail:hover > .crewlet-app-shell__fold > .crewlet-icon-btn:not(:hover) {
+  color: var(--color-text-secondary);
+}
+
+/*
+ * THE MARK STANDS WHERE THE COMPACT RAIL'S DOES, in both shapes: centred over
+ * the compact column, in the head. Full, the name follows it; compact, the
+ * name is not drawn (the link keeps it as its name and title).
+ */
+.crewlet-app-shell--foldable .crewlet-app-shell__rail-head > .crewlet-brand,
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-head > .crewlet-brand {
+  padding-left: calc((var(--size-shell-rail-compact) - var(--crewlet-brand-mark)) / 2);
+}
+
+.crewlet-app-shell[data-rail='compact'] .crewlet-brand__name,
+.crewlet-app-shell[data-rail='compact'] .crewlet-brand__context {
+  display: none;
+}
+
+/*
+ * FULL, THE FIELD STARTS AFTER THE FOLD CONTROL, a step off it, on the row
+ * the control stands in. The field holds its place at the top of the rail's
+ * middle while the rows scroll under it, on the frame's own ground, so the
+ * control beside it is always beside it.
+ */
+/* The middle is a stacking context of its own, so the field pinned in it
+   stands over the rows scrolling under it and the whole middle stands under
+   the fold control, which is painted a step above the rail. */
+.crewlet-app-shell--foldable .crewlet-app-shell__rail-body {
+  isolation: isolate;
+}
+
+.crewlet-app-shell--foldable[data-rail='full'] .crewlet-app-shell__rail-search {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding-left: calc((var(--size-shell-rail-compact) + var(--size-control-sm)) / 2 + var(--spacing-2));
+  background: var(--color-surface-frame);
+}
+
+/* COMPACT, THE FOLD CONTROL HAS A ROW OF ITS OWN under the mark, which the
+   head leaves room for, and the column of tiles starts under it. */
+.crewlet-app-shell--foldable[data-rail='compact'] .crewlet-app-shell__rail-head {
+  margin-bottom: var(--size-control-sm);
+}
+
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-body {
+  padding: var(--spacing-1) 0;
+  scrollbar-width: thin;
+}
+
+/*
+ * The compact foot: what the full foot holds, centred in the column, a step
+ * apart: the status's dot, a Settings tile, the reader's face.
+ */
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot {
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) 0 var(--spacing-3);
+}
+
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot > .crewlet-compact-nav {
+  align-self: stretch;
+}
+
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot > .crewlet-app-shell__rail-status {
+  justify-content: center;
+  min-width: 0;
+  margin: 0;
+}
+
 @media (width < 1024px) {
   .crewlet-app-shell {
     --crewlet-app-shell-beside: 0px;
@@ -1933,6 +2246,33 @@ button.crewlet-account-row__who:focus-visible {
   gap: var(--spacing-1);
 }
 
+/*
+ * THE COMPACT ACCOUNT: the reader's face alone, centred in the compact rail's
+ * foot, the face's own corner carrying the lift, the hover and the ring. It
+ * keeps the row's link and menu rules above (hover, current, ring), with no
+ * pad of its own, so the box is the face.
+ */
+.crewlet-account-row--compact {
+  justify-content: center;
+  padding: 0;
+}
+
+.crewlet-account-row__who--compact,
+.crewlet-app-shell__rail-foot .crewlet-account-row__who--compact {
+  flex: none;
+  width: auto;
+  min-height: 0;
+  padding: calc(var(--spacing-1) / 2);
+  border-radius: var(--radius-md);
+}
+
+/* The ring stands off the face, outside it: drawn inside, it would cover the
+   face's own edge and status. */
+.crewlet-account-row__who.crewlet-account-row__who--compact:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-account-row__who {
     transition: none;
@@ -4004,23 +4344,25 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
 }
 
 
-/* ArtifactKinds-O3CALPVX.css */
+/* ArtifactKinds-3EH4KR3F.css */
 /*
  * A kind's colours, set once per kind on `--crewlet-kind-*` by its class
- * (`crewlet-kind--<kind>`): the hue, its Fill and Line steps and the ink a
- * glyph is drawn in. Every surface that tints by kind reads these, so a kind
- * glyph in a bar, a card's badge and a Make row's tile repaint together with
+ * (`crewlet-kind--<kind>`): the hue, its Fill and Line steps, the ink a
+ * glyph is drawn in, and the Ground steps a card drawn ON the kind's colour
+ * reads (its ground, the ground under the pointer, the ground at its foot
+ * and the glow behind its drawing; ActionCard). Every surface that tints by
+ * kind reads these, so a kind glyph in a bar, a card's badge and a Make row's tile repaint together with
  * the theme, and no surface spells a kind's colour of its own. A sheet of
  * its own, imported by each surface that tints, because the glyph's module
  * carries no stylesheet (a frame that draws one glyph takes nothing else).
  */
-.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); }
-.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); }
-.crewlet-kind--design { --crewlet-kind-hue: var(--color-artifact-kind-design); --crewlet-kind-fill: var(--color-artifact-kind-design-fill); --crewlet-kind-line: var(--color-artifact-kind-design-line); --crewlet-kind-ink: var(--color-artifact-kind-design-ink); }
-.crewlet-kind--dashboard { --crewlet-kind-hue: var(--color-artifact-kind-dashboard); --crewlet-kind-fill: var(--color-artifact-kind-dashboard-fill); --crewlet-kind-line: var(--color-artifact-kind-dashboard-line); --crewlet-kind-ink: var(--color-artifact-kind-dashboard-ink); }
-.crewlet-kind--html { --crewlet-kind-hue: var(--color-artifact-kind-html); --crewlet-kind-fill: var(--color-artifact-kind-html-fill); --crewlet-kind-line: var(--color-artifact-kind-html-line); --crewlet-kind-ink: var(--color-artifact-kind-html-ink); }
-.crewlet-kind--brand { --crewlet-kind-hue: var(--color-artifact-kind-brand); --crewlet-kind-fill: var(--color-artifact-kind-brand-fill); --crewlet-kind-line: var(--color-artifact-kind-brand-line); --crewlet-kind-ink: var(--color-artifact-kind-brand-ink); }
-.crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); }
+.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); --crewlet-kind-ground: var(--color-artifact-kind-doc-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-doc-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-doc-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-doc-glow); }
+.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); --crewlet-kind-ground: var(--color-artifact-kind-slides-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-slides-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-slides-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-slides-glow); }
+.crewlet-kind--design { --crewlet-kind-hue: var(--color-artifact-kind-design); --crewlet-kind-fill: var(--color-artifact-kind-design-fill); --crewlet-kind-line: var(--color-artifact-kind-design-line); --crewlet-kind-ink: var(--color-artifact-kind-design-ink); --crewlet-kind-ground: var(--color-artifact-kind-design-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-design-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-design-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-design-glow); }
+.crewlet-kind--dashboard { --crewlet-kind-hue: var(--color-artifact-kind-dashboard); --crewlet-kind-fill: var(--color-artifact-kind-dashboard-fill); --crewlet-kind-line: var(--color-artifact-kind-dashboard-line); --crewlet-kind-ink: var(--color-artifact-kind-dashboard-ink); --crewlet-kind-ground: var(--color-artifact-kind-dashboard-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-dashboard-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-dashboard-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-dashboard-glow); }
+.crewlet-kind--html { --crewlet-kind-hue: var(--color-artifact-kind-html); --crewlet-kind-fill: var(--color-artifact-kind-html-fill); --crewlet-kind-line: var(--color-artifact-kind-html-line); --crewlet-kind-ink: var(--color-artifact-kind-html-ink); --crewlet-kind-ground: var(--color-artifact-kind-html-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-html-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-html-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-html-glow); }
+.crewlet-kind--brand { --crewlet-kind-hue: var(--color-artifact-kind-brand); --crewlet-kind-fill: var(--color-artifact-kind-brand-fill); --crewlet-kind-line: var(--color-artifact-kind-brand-line); --crewlet-kind-ink: var(--color-artifact-kind-brand-ink); --crewlet-kind-ground: var(--color-artifact-kind-brand-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-brand-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-brand-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-brand-glow); }
+.crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); --crewlet-kind-ground: var(--color-artifact-kind-sheet-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-sheet-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-sheet-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-sheet-glow); }
 
 
 /* ArtifactMakeRow-6UX2LTF7.css */
@@ -4560,7 +4902,7 @@ a.crewlet-make-row__item:active {
 }
 
 
-/* Avatar-VJSJGFRG.css */
+/* Avatar-MNE3WBZO.css */
 /*
  * The identity badge.
  *
@@ -4569,9 +4911,10 @@ a.crewlet-make-row__item:active {
  * same eight families it also spent on phases and event categories, so one
  * amber meant "the execute phase", "the decision category" and "the Analyst"
  * at once. A hash of a name carries no information: rename the seat and its
- * colour changes, which is the proof it never meant anything. Identity is the
- * OUTLINE (a squircle for an agent, a circle for a person), the monogram and
- * the name, and for an agent an operator gave one, its character and its hue.
+ * colour changes, which is the proof it never meant anything. Identity is
+ * what the face holds (a monogram set in the kind's face, a picture, or for an
+ * agent an operator gave one, its character and its hue) and the name beside
+ * it. Every face is ONE SHAPE, people and agents alike (see "the shape").
  *
  * A STATE IS A CORNER BADGE, NEVER A LINE ROUND THE PLATE. A ring in a state's
  * hue round a plate in the agent's own hue put two colours on a 32px mark and
@@ -4711,46 +5054,40 @@ a.crewlet-make-row__item:active {
   font-size: var(--font-size-sm);
 }
 
-/* ── kinds ─────────────────────────────────────────────────────────────── */
+/* ── the shape ────────────────────────────────────────────────────────── */
 
 /*
- * AN AGENT IS A SQUIRCLE, set in the mono face: what the engine runs, named
- * the way a handle is written.
- *
- * THE CORNER MOVES WITH THE BOX, at 0.29 of it (`AVATAR_CORNER_RATIO` in the
- * component, which the suite holds equal to this number): the approved
- * design's 7px at 24 and 9px at 30, as one proportion. It is computed here from
- * the size property every step and every numeric size sets, so there is ONE
- * ladder. There used to be two, a step table here and a numeric table in the
- * component, and they disagreed: `size={80}` drew a squarer badge than
- * `size="lg"` at half its width.
+ * ONE FACE SHAPE FOR PEOPLE AND AGENTS: a square with rounded corners, the
+ * corner two ninths of the side (8px on a 36px face), never under the xs
+ * radius on the smallest faces and never over the lg radius on the largest.
+ * A person was a circle and an agent a squircle, so a row of people and
+ * agents changed shape from face to face, and a list of members read as two
+ * lists. One shape lines every face up on the same square and lets what the
+ * face holds say who it is: a character on its hue, a picture, or initials
+ * set in the kind's own face (below).
  *
- * WHERE THE BROWSER DRAWS A SQUIRCLE, IT IS A WHOLE ONE. `corner-shape:
- * squircle` is a superellipse of exponent 4, which at a given radius reaches
- * much closer to the box's corner than a circular arc does: at the 45 degree
- * point it stands 0.159 of the radius in from each edge, against 0.293 for an
- * arc. Kept at 0.29 of the box, that corner would stand 0.046 of the box in,
- * half the design's depth and a nearly square badge. At half the box it stands
- * 0.0795 of the box in, against the design's 0.0849 (0.13px at 24px), with the
- * continuous curvature a squircle is for. So the corner is the circle token
- * there, and the fallback above is what every other browser draws.
+ * THE CORNER MOVES WITH THE BOX, computed here from the size property every
+ * step and every numeric size sets, so there is ONE ladder: `AVATAR_CORNER`
+ * in the component states the same ratio and clamp for a caller that has to
+ * round something else to match a face (ImageUpload, PresenceStack), and the
+ * suite holds the two equal. No step rule sets a corner.
  */
-.crewlet-avatar--agent {
-  border-radius: calc(var(--crewlet-avatar-size) * 0.29);
-  font-family: var(--font-family-mono);
+.crewlet-avatar {
+  border-radius: clamp(var(--radius-xs), calc(var(--crewlet-avatar-size) * 2 / 9), var(--radius-lg));
 }
 
-@supports (corner-shape: squircle) {
-  .crewlet-avatar--agent {
-    corner-shape: squircle;
-    border-radius: var(--radius-circle);
-  }
+/* ── kinds ─────────────────────────────────────────────────────────────── */
+
+/*
+ * The kind is said by the monogram's face: an agent's initials are set in the
+ * mono face, the way a handle is written, and a person's in the sans face. A
+ * character or a picture says it on its own.
+ */
+.crewlet-avatar--agent {
+  font-family: var(--font-family-mono);
 }
 
-/* A PERSON IS A CIRCLE, set in the sans face, the round badge every member list
-   a reader has used already speaks. */
 .crewlet-avatar--human {
-  border-radius: var(--radius-circle);
   font-family: var(--font-family-sans);
 }
 
@@ -4780,16 +5117,22 @@ a.crewlet-make-row__item:active {
 
 /* ── tones ─────────────────────────────────────────────────────────────── */
 
+/*
+ * A FACE'S OWN OUTLINE IS THE HAIRLINE (`--color-edge-hairline`), whatever it
+ * holds: the neutral badge, a seeded tint, a character's plate. A row of faces
+ * then reads as faces rather than as a row of framed boxes, where the strong
+ * hairline and a hue's line drew each face as a tile. A reader who asked for
+ * more contrast gets the control edge here, as the edge scale promises.
+ */
 .crewlet-avatar--fallback {
-  border: 1px solid transparent;
+  border: 1px solid var(--color-edge-hairline);
 }
 
-/* The design's badge: the raised rung with the strong hairline round it and
-   the secondary ink, so a badge on a card reads as a mark standing on it
-   rather than as a hole in it. */
+/* The design's badge: the raised rung inside the face's hairline and the
+   secondary ink, so a badge on a card reads as a mark standing on it rather
+   than as a hole in it. */
 .crewlet-avatar--neutral {
   background: var(--color-surface-elevated);
-  border-color: var(--color-border-strong);
   color: var(--color-text-secondary);
 }
 
@@ -4817,7 +5160,7 @@ a.crewlet-make-row__item:active {
  * plate's sides, a tall one its top and its foot, and none touches the curve.
  */
 .crewlet-avatar--character {
-  border: 1px solid transparent;
+  border: 1px solid var(--color-edge-hairline);
 }
 
 .crewlet-avatar__character {
@@ -4827,50 +5170,44 @@ a.crewlet-make-row__item:active {
   height: 74%;
 }
 
-/* The plate an agent's hue is drawn on: the hue's fill, its line round the
-   badge and the hue itself as the character's ink. The fill is published as
+/* The plate an agent's hue is drawn on: the hue's fill inside the face's
+   hairline, and the hue itself as the character's ink. The fill is published as
    `--crewlet-avatar-plate` and painted from it, because it is a TINT (12% of
    the hue over whatever the badge stands on), and a stack has to lay it over
    its own ground rather than over the badge behind it (AvatarStack.css). */
 .crewlet-avatar--hue-purple {
   --crewlet-avatar-plate: var(--color-node-purple-fill);
   background: var(--crewlet-avatar-plate);
-  border-color: var(--color-node-purple-line);
   color: var(--color-node-purple);
 }
 
 .crewlet-avatar--hue-cyan {
   --crewlet-avatar-plate: var(--color-node-cyan-fill);
   background: var(--crewlet-avatar-plate);
-  border-color: var(--color-node-cyan-line);
   color: var(--color-node-cyan);
 }
 
 .crewlet-avatar--hue-green {
   --crewlet-avatar-plate: var(--color-node-green-fill);
   background: var(--crewlet-avatar-plate);
-  border-color: var(--color-node-green-line);
   color: var(--color-node-green);
 }
 
 .crewlet-avatar--hue-amber {
   --crewlet-avatar-plate: var(--color-node-amber-fill);
   background: var(--crewlet-avatar-plate);
-  border-color: var(--color-node-amber-line);
   color: var(--color-node-amber);
 }
 
 .crewlet-avatar--hue-rose {
   --crewlet-avatar-plate: var(--color-node-rose-fill);
   background: var(--crewlet-avatar-plate);
-  border-color: var(--color-node-rose-line);
   color: var(--color-node-rose);
 }
 
 .crewlet-avatar--hue-blue {
   --crewlet-avatar-plate: var(--color-node-blue-fill);
   background: var(--crewlet-avatar-plate);
-  border-color: var(--color-node-blue-line);
   color: var(--color-node-blue);
 }
 
@@ -4884,7 +5221,7 @@ a.crewlet-make-row__item:active {
  * AN OUTLINE RATHER THAN THAT SHADOW PAIR, for three reasons. The gap is
  * TRANSPARENT, so the ring reads on whatever the badge stands on, where the
  * design's gap is the card's own fill and cuts a card-coloured band into any
- * other ground. An outline follows the corner, the squircle's included, in
+ * other ground. An outline follows the corner, the face's clamp included, in
  * every engine this package supports. And forced-colors mode keeps an outline
  * and drops every shadow, so the ring is still drawn for the readers who most
  * need a boundary.
@@ -4905,13 +5242,20 @@ a.crewlet-make-row__item:active {
 /*
  * THE FRAME is the face's own box, so a badge with a status takes exactly the
  * room one without takes: the corner badge hangs past it rather than growing
- * it, and a row lays out the same either way. The badge is 0.42 of the box,
- * never under 10px, which is the size its glyph stays a shape at.
+ * it, and a row lays out the same either way.
+ *
+ * THE BADGE WHERE A READER LOOKS FOR PRESENCE: under a third of the face (0.3
+ * of the box), hanging a twentieth of the box past its bottom-right corner,
+ * with the notch (a gap of the ground round it) kept. At 36px that is an 11px
+ * badge set 2px past the corner, the size and place of a presence dot, where
+ * a badge at 0.42 of the box read as a second face. It never drops under
+ * 10px, where its glyph stops being a shape, and always hangs at least a
+ * pixel past the corner.
  */
 .crewlet-avatar-frame {
-  --crewlet-avatar-status-size: max(10px, calc(var(--crewlet-avatar-size) * 0.42));
-  --crewlet-avatar-status-overhang: 2px;
-  --crewlet-avatar-status-gap: 1.5px;
+  --crewlet-avatar-status-size: max(10px, calc(var(--crewlet-avatar-size) * 0.3));
+  --crewlet-avatar-status-overhang: max(1px, calc(var(--crewlet-avatar-size) * 0.05));
+  --crewlet-avatar-status-gap: 2px;
   position: relative;
   display: inline-flex;
   flex: none;
@@ -5069,7 +5413,7 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
 }
 
 
-/* AvatarStack-7I3P7LCK.css */
+/* AvatarStack-KEHD3GWY.css */
 /*
  * Several badges as one mark (AvatarStack.tsx).
  *
@@ -5078,7 +5422,8 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
  * badges standing in front of each other rather than as one blot. The ring is
  * a SHADOW rather than a border, because it has to fall outside the badge
  * without moving it, and it is decoration: forced-colors mode drops it and the
- * badges' own hairlines still separate them.
+ * badges' own borders, which that mode paints in the system ink, still
+ * separate them.
  *
  * THE GROUND IS A VARIABLE because a stack stands on whatever it is put on,
  * and a cut-out in the sheet's colour on a card is a band of the wrong grey
@@ -5108,6 +5453,17 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
   box-shadow: 0 0 0 2px var(--crewlet-avatar-stack-ground);
 }
 
+/*
+ * THE RING IS THE ONLY EDGE A STACKED FACE NEEDS. A face's own hairline inside
+ * the ring drew each face as a framed tile, two edges a pixel apart, so a
+ * stacked face (a member, or the face a member wraps) draws its border in no
+ * colour. The border keeps its width, so the face keeps its box.
+ */
+.crewlet-avatar-stack > .crewlet-avatar-stack__member.crewlet-avatar,
+.crewlet-avatar-stack > .crewlet-avatar-stack__member > .crewlet-avatar {
+  border-color: transparent;
+}
+
 /*
  * A BADGE IN FRONT HIDES THE ONE BEHIND IT. A hue's plate is a tint, 12% of
  * the hue over whatever the badge stands on, and in a stack that is partly
@@ -5135,9 +5491,9 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
 }
 
 /*
- * THE COUNT OF THE REST. A PILL, where every badge is a squircle or a circle:
- * it is a number rather than somebody, and drawn in either kind's outline it
- * would read as one more agent or one more person. Otherwise it is the neutral
+ * THE COUNT OF THE REST. A PILL, where every face is a rounded square: it is
+ * a number rather than somebody, and drawn in a face's outline it would read
+ * as one more agent or one more person. Otherwise it is the neutral
  * badge exactly (the raised rung, the strong hairline, the secondary ink), in
  * the sans face with tabular figures so "+9" and "+12" sit alike.
  */
@@ -5805,7 +6161,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* BriefCard-VKTH3BSW.css */
+/* BriefCard-QCL7MVUV.css */
 /*
  * A brief inside the product's status card: the verdict in the head, then one
  * line on what the page is about, the ranked rows that wait on the reader, a
@@ -5922,6 +6278,32 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   margin-inline: calc(-1 * var(--spacing-3));
 }
 
+/*
+ * WHAT WAS SAID (a room's catch up): one point to a row, the sentence and its
+ * citation, the press that opens the message it came from, at the row's end.
+ * A quiet list with no markers, between the needs and the context.
+ */
+.crewlet-brief-card__points {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-brief-card__point {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: var(--spacing-3);
+  padding-block: var(--spacing-1);
+}
+
+.crewlet-brief-card__point-text {
+  color: var(--color-text-primary);
+}
+
 
 /* Button-GDEBGBX6.css */
 /*
@@ -9886,7 +10268,557 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* ChatThread-2KO3FZKQ.css */
+/* ChatDay-E3FF5HWF.css */
+/*
+ * 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;
+  }
+}
+
+
+/* ChatDivider-7ZNDL2PZ.css */
+/*
+ * 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;
+  }
+}
+
+
+/* ChatMessage-FH7VRVCH.css */
+/*
+ * 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;
+  }
+}
+
+
+/* ChatScale-L4SIHSKL.css */
+/*
+ * ONE SCALE FOR A CONVERSATION. Every part of a transcript reads from these:
+ * the message rows, their toolbar, reactions and thread line, the day's rule
+ * and pill, the New line and the link previews. A name, the words under it
+ * and the box they were typed in are one size, and everything around them
+ * (times, counts, the second lines of previews) is one step down. A surface
+ * that wants a denser or roomier transcript sets them once, on itself.
+ *
+ * A sheet of its own, imported by every part that reads it, so a consumer
+ * that imports one part (`@crewlethq/ui/ChatDay`) still gets the scale.
+ */
+:root {
+  /* The words: names, bodies and the message box, on one line height. */
+  --crewlet-chat-text: var(--font-size-sm);
+  --crewlet-chat-line: var(--font-line-height-normal);
+  /* Times, counts, reactions and second lines: one step down. */
+  --crewlet-chat-meta: var(--font-size-xs);
+  /* The row's side inset, the face column, the gap after it, and the space
+     between the pieces stacked under a message's words. */
+  --crewlet-chat-pad-x: var(--spacing-5);
+  --crewlet-chat-avatar: 36px;
+  --crewlet-chat-gap: var(--spacing-3);
+  --crewlet-chat-stack: 6px;
+  /* One width for every link preview, so a stack of them shares both edges. */
+  --crewlet-chat-card: 440px;
+  /* A day: the pill's height, the room above and below its rule, and how far
+     under the list's top edge the pill pins. A host with a bar floating over
+     the list's top (an unread banner) moves the pin down past it. */
+  --crewlet-chat-day-pill: 24px;
+  --crewlet-chat-day-gap: var(--spacing-5);
+  --crewlet-chat-day-pin: var(--spacing-3);
+  /* The hover toolbar: a medium control, big enough to aim at while the
+     pointer is passing, inside its inset and its hairline, twice. */
+  --crewlet-chat-toolbar-inset: var(--spacing-1);
+  --crewlet-chat-toolbar: calc(var(--size-control-md) + (var(--crewlet-chat-toolbar-inset) + 1px) * 2);
+  /* The ground the transcript is set on. A host that sets it on another fill
+     names that fill here, and everything lifted off the rows (the toolbar,
+     the day's pill, the open thread line) is filled with it. */
+  --crewlet-chat-ground: var(--color-surface-background);
+  /* A row that names the reader: a light wash of the warning hue. */
+  --crewlet-chat-mention: var(--color-feedback-warning-soft);
+}
+
+
+/* ChatThread-HAECJMP6.css */
 /*
  * A conversation as it grows: the scroller, the items a spacing step and a
  * half apart on the panel's 16px inset, and the Jump to latest pill in a row
@@ -9942,6 +10874,23 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   flex: none;
 }
 
+/*
+ * A SHORT TRANSCRIPT RESTS ON ITS FOOT (`rest="end"`), against the composer
+ * under it, as a conversation's newest messages always are, rather than
+ * under the top with an empty band between it and the box. The scroller is a
+ * column and the items take the room above them; a conversation's rows set
+ * their own spacing, so the items keep no gap.
+ */
+.crewlet-chat-thread--rest-end .crewlet-chat-thread__scroller {
+  display: flex;
+  flex-direction: column;
+}
+
+.crewlet-chat-thread--rest-end .crewlet-chat-thread__items {
+  margin-top: auto;
+  gap: 0;
+}
+
 /*
  * The pill, centred in a row of its own under the log. IN FLOW, NOT FLOATING:
  * laid over the scroller it covered the last lines of whatever was being read,
@@ -10446,6 +11395,117 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
+/* ChipField-D4CW6XFA.css */
+/*
+ * ChipField: chosen items as chips inside the field, before a bare text box.
+ * The chips and the box wrap as one line of words; the box takes whatever
+ * width the last line leaves, and a line of its own when that is too little.
+ */
+.crewlet-chip-field {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  box-sizing: border-box;
+  width: 100%;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  cursor: text;
+}
+
+/* A field like any other: the field's fill, boundary and corner. */
+.crewlet-chip-field--boxed {
+  min-height: var(--size-control-lg);
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid var(--color-border-field);
+  border-radius: var(--radius-md);
+  background-color: var(--color-surface-subtle);
+}
+
+/*
+ * ONE RING, the one every field in this package draws: an outline over the
+ * boundary, on the field rather than on the box inside it, because the
+ * field is what the reader sees as the control. The selector names the box
+ * rather than asking :focus-within, so tabbing to a chip's Remove control
+ * rings that control alone, not the field round it as well.
+ */
+.crewlet-chip-field--boxed:has(.crewlet-chip-field__input:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:where(:root[data-crewlet-focus='pointer']) .crewlet-chip-field--boxed:has(.crewlet-chip-field__input:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
+/*
+ * The address line at the top of a view: full width, a rule under it, and
+ * the view's own side inset (`--crewlet-chip-field-inset`, the chat's row
+ * inset by default). Its focus is a bar along the rule; the transparent
+ * outline is what forced colors, which drops the bar, draws instead.
+ */
+.crewlet-chip-field--bare {
+  gap: var(--spacing-2);
+  min-height: var(--size-shell-topbar);
+  padding: var(--spacing-2) var(--crewlet-chip-field-inset, var(--spacing-5));
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-chip-field--bare:has(.crewlet-chip-field__input:focus-visible) {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  box-shadow: inset 0 -2px 0 var(--color-focus);
+}
+
+.crewlet-chip-field__prefix {
+  flex: none;
+  color: var(--color-text-secondary);
+}
+
+/* The list lends its chips to the field's own line (ChipField.tsx spells its
+   role out, which a contents box can lose). */
+.crewlet-chip-field__chips {
+  display: contents;
+  list-style: none;
+}
+
+.crewlet-chip-field__chip {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-chip-field__input {
+  flex: 1;
+  min-width: 120px;
+  height: var(--size-control-md);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 var(--spacing-1);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+.crewlet-chip-field--bare .crewlet-chip-field__input {
+  padding-inline: 0;
+}
+
+.crewlet-chip-field__input::placeholder {
+  color: var(--color-text-tertiary);
+  opacity: 1;
+}
+
+.crewlet-chip-field.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+
 /* ChoiceButtons-T3GG6VLG.css */
 /*
  * One answer, sent with one press: a column of buttons as tall as a touch
@@ -12367,7 +13427,332 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* Composer-HQIMTMRC.css */
+/* CompactNav-CU2AQXBC.css */
+/*
+ * The compact rail: each place its glyph's tile over its name, in one column.
+ *
+ * A PLACE IS 48PX TALL: a 26px tile, its name under it and a breath. Fourteen
+ * places, two rules, and the rail's head and foot stand in a 900px window, so
+ * the column a reader folded the rail to see more of the page never scrolls
+ * on a laptop.
+ *
+ * Tokens only. The tile's sizes are component variables, so a surface that
+ * draws the compact rail at another width changes them in one place.
+ */
+
+.crewlet-compact-nav {
+  --crewlet-compact-nav-tile-width: 36px;
+  --crewlet-compact-nav-tile-height: var(--size-control-sm);
+  --crewlet-compact-nav-glyph: 17px;
+  width: 100%;
+  min-width: 0;
+}
+
+.crewlet-compact-nav__list {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin: 0;
+  padding: 0 var(--spacing-1);
+  list-style: none;
+}
+
+.crewlet-compact-nav__entry {
+  display: flex;
+  min-width: 0;
+}
+
+/* A place is a link or a button, and a folded group is a button: one look for
+   all three. The entry itself draws nothing; the tile is what lifts. */
+.crewlet-compact-nav__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--spacing-1) / 2);
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: calc(var(--spacing-1) - 1px) 0 var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* The ring is drawn on the tile (below), not round the whole entry. The
+   entry's own outline is transparent rather than none, so forced colours,
+   which paint a transparent outline in the system's ink, still draw one. */
+.crewlet-compact-nav__item:focus {
+  outline: 2px solid transparent;
+}
+
+.crewlet-compact-nav__tile {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--crewlet-compact-nav-tile-width);
+  height: var(--crewlet-compact-nav-tile-height);
+  border-radius: var(--radius-md);
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* A step larger than the full rail's 14px glyph: in the compact rail the
+   glyph is the place's name at a glance, and the word under it is the
+   caption. */
+.crewlet-compact-nav__tile > .crewlet-glyph {
+  width: var(--crewlet-compact-nav-glyph);
+  height: var(--crewlet-compact-nav-glyph);
+}
+
+.crewlet-compact-nav__item:hover .crewlet-compact-nav__tile,
+.crewlet-compact-nav__item[data-open] .crewlet-compact-nav__tile {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-compact-nav__item:hover .crewlet-compact-nav__label,
+.crewlet-compact-nav__item[data-open] .crewlet-compact-nav__label {
+  color: var(--color-text-primary);
+}
+
+/*
+ * WHERE THE READER IS: the full rail's own current row, drawn on the tile.
+ * Raised, the plain hairline as an OUTLINE (forced colours keep outlines and
+ * drop backgrounds), and the primary ink. After :hover, so the current tile
+ * shows its lift rather than the overlay. A folded group's tile is current
+ * (`aria-current="true"`) while one of its places is.
+ */
+.crewlet-compact-nav__item[aria-current] .crewlet-compact-nav__tile {
+  background: var(--color-surface-elevated);
+  outline: 1px solid var(--color-border-default);
+  outline-offset: -1px;
+  color: var(--color-text-primary);
+}
+
+.crewlet-compact-nav__item[aria-current] .crewlet-compact-nav__label {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* The ring is the tile's, after the current rule that draws its hairline on
+   the same property, so a focused current tile draws the ring. */
+.crewlet-compact-nav__item:focus-visible .crewlet-compact-nav__tile {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}
+
+.crewlet-compact-nav__label {
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 0 calc(var(--spacing-1) / 2);
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-tight);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A place the reader holds no access to keeps its name and its key, in the
+   quiet ink, as a locked group's rows do in the full rail. */
+.crewlet-compact-nav__item--locked:not([aria-current]):not(:hover) .crewlet-compact-nav__label,
+.crewlet-compact-nav__item--locked:not([aria-current]):not(:hover) .crewlet-compact-nav__tile {
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * THE FIGURE RIDES THE TILE'S TOP END CORNER, cut out of the rail by a ring of
+ * the rail's own ground, so it reads apart from the glyph under it. It is the
+ * one count badge size the whole chrome draws (`--size-badge`), the accent
+ * fill where it is waiting on the reader and the raised ground where it is
+ * only a tally.
+ */
+.crewlet-compact-nav__figure {
+  position: absolute;
+  top: calc(var(--spacing-1) * -1 - 1px);
+  right: calc(var(--spacing-2) * -1 + 1px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size-badge);
+  height: var(--size-badge);
+  box-sizing: border-box;
+  padding: 0 var(--size-badge-pad);
+  border: 2px solid var(--color-surface-frame);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-badge);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.crewlet-compact-nav__figure--badge {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+}
+
+/* A short rule between two runs of tiles, centred in the column. */
+.crewlet-compact-nav__separator {
+  display: flex;
+  justify-content: center;
+  padding: calc(var(--spacing-1) + var(--spacing-1) / 2) 0;
+}
+
+.crewlet-compact-nav__rule {
+  width: var(--spacing-6);
+  height: 1px;
+  background: var(--color-border-default);
+}
+
+/*
+ * THE FLYOUT: a folded group's places beside the rail, on the popover's rung.
+ * Its rows are the full rail's rows at the menu's step: the glyph, the name,
+ * and the figure at the end, so the places read as they do unfolded.
+ */
+.crewlet-compact-nav__flyout {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 208px;
+  max-width: min(320px, calc(100vw - var(--spacing-4)));
+  box-sizing: border-box;
+  padding: var(--spacing-1);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-family-sans);
+  animation: crewlet-compact-nav-flyout-in var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+/* Inside a LayerHost the coordinates are the host's own, so the flyout is
+   absolute within it rather than fixed against the window. */
+.crewlet-compact-nav__flyout--in-host {
+  position: absolute;
+}
+
+@keyframes crewlet-compact-nav-flyout-in {
+  from {
+    opacity: 0;
+    transform: translateX(calc(var(--spacing-1) * -1));
+  }
+}
+
+.crewlet-compact-nav__flyout-head {
+  padding: var(--spacing-1) var(--spacing-2);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+}
+
+/* A router's link is drawn by the caller; its wrapper stays out of the box tree. */
+.crewlet-compact-nav__link-slot {
+  display: contents;
+}
+
+.crewlet-compact-nav__link {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  height: var(--size-control-md);
+  padding: 0 var(--spacing-2);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  text-decoration: none;
+  outline: none;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-compact-nav__link:hover,
+.crewlet-compact-nav__link:focus-visible {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* The place the reader is on: the selected fill, the primary ink, a step
+   heavier. Declared after the hover so the selected fill holds under it. */
+.crewlet-compact-nav__link[aria-current='page'] {
+  background: var(--color-surface-selected);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-compact-nav__link:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-compact-nav__link--locked:not([aria-current]):not(:hover):not(:focus-visible) {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-compact-nav__link-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-compact-nav__link-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-compact-nav__link-figure {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  min-width: var(--size-badge);
+  height: var(--size-badge);
+  box-sizing: border-box;
+  padding: 0 var(--size-badge-pad);
+  border-radius: var(--radius-pill);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-badge);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.crewlet-compact-nav__link-figure--badge {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-compact-nav__tile,
+  .crewlet-compact-nav__link {
+    transition: none;
+  }
+
+  .crewlet-compact-nav__flyout {
+    animation: none;
+  }
+}
+
+
+/* Composer-ZEGHEAFE.css */
 /*
  * A message written in place: the field and its footer strip in one box. The
  * BOX takes the focus ring every field in the package draws (see Input.css):
@@ -12506,6 +13891,32 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   padding: var(--spacing-2) var(--spacing-3) 0;
 }
 
+/*
+ * THE FORMATTING ROW, along the box's top on the field's own inset less the
+ * small tool's own room round its glyph, so the first glyph starts on the
+ * words' line. It belongs to the field rather than to a strip of its own: no
+ * rule under it.
+ */
+.crewlet-composer__toolbar {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  padding: var(--spacing-1) var(--spacing-1) 0 calc(var(--spacing-3) - (var(--size-control-sm) - var(--font-size-xs)) / 2);
+}
+
+/*
+ * THE TOOLS AT THE FOOTER'S START, a tight row whose first glyph starts on
+ * the words' line, as the formatting row's does. The spacer after them puts
+ * the actions at the end.
+ */
+.crewlet-composer__tools {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  margin-inline-start: calc(-1 * (var(--size-control-sm) - var(--font-size-xs)) / 2);
+}
+
 /*
  * DISABLED, AS A FIELD IS: the whole box at the disabled field's 0.6 and the
  * not-allowed cursor, so it no longer reads as somewhere to type. Faded once:
@@ -12583,6 +13994,51 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   }
 }
 
+/*
+ * A CONVERSATION'S MESSAGE BOX (`appearance="chat"`), on the transcript's own
+ * scale (ChatMessage/ChatScale.css): the large corner on the transcript's
+ * ground with the row wash laid over it, a step lighter than the list, and a
+ * small shadow, so the box sits just above the messages, inside the edge
+ * scale's strong step, the edge a field draws. The words are set at the
+ * transcript's size on one line to start. The footer belongs to the field
+ * rather than standing as a strip under it: no rule and no ground of its own.
+ */
+.crewlet-composer--chat {
+  border-color: var(--color-edge-strong);
+  background:
+    linear-gradient(var(--color-fill-row), var(--color-fill-row)),
+    var(--crewlet-chat-ground);
+  box-shadow: var(--shadow-xs);
+}
+
+.crewlet-composer--chat .crewlet-composer__field {
+  min-height: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--crewlet-chat-text);
+  line-height: var(--crewlet-chat-line);
+}
+
+.crewlet-composer--chat .crewlet-composer__footer {
+  gap: 2px;
+  padding: var(--spacing-1);
+  padding-inline-start: var(--spacing-3);
+  border-top: 0;
+  background: transparent;
+}
+
+/* A tool whose menu or picker is open reads as held down. */
+.crewlet-composer--chat .crewlet-composer__tools [aria-expanded='true'] {
+  background: var(--color-surface-pressed);
+  color: var(--color-text-primary);
+}
+
+/* The formatting row's glyphs rest in the tertiary ink while the box is not
+   in use, so the row reads as part of the field rather than as a toolbar
+   competing with the conversation, and take their own ink once it is. */
+.crewlet-composer--chat:not(:focus-within) .crewlet-composer__toolbar :is(button, [role='button']):not(:hover) {
+  color: var(--color-text-tertiary);
+}
+
 
 /* ConflictNote-OP64JJ6T.css */
 /* ConflictNote: a refused write's sentence in the danger ink, with its glyph
@@ -12933,7 +14389,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* Count-ZJ6ID4ZU.css */
+/* Count-2HXBBYPO.css */
 /*
  * The count pill. One neutral look, deliberately: see the component doc for
  * why a count is never tinted.
@@ -12960,6 +14416,25 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   line-height: round(nearest, calc(var(--font-line-height-body) * 1em), 1px);
 }
 
+/*
+ * WHAT WAITS ON THE READER (`tone="attention"`): the accent pill every count
+ * of that kind is drawn as, wherever it stands, at the badge's own size: 16px
+ * tall and at least as wide, its figure at the badge step in the semibold
+ * weight. At 18px with an 11px figure such a badge read louder than the name
+ * beside it.
+ */
+.crewlet-count--attention {
+  box-sizing: border-box;
+  min-width: var(--size-badge);
+  height: var(--size-badge);
+  padding: 0 var(--size-badge-pad);
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+  font-size: var(--font-size-badge);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+
 
 /* CursorFlag-AJQJBUGY.css */
 /*
@@ -18663,6 +20138,72 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* EmojiPicker-FMWYN2WX.css */
+/*
+ * A searchable grid of emoji in a popover: the field, then each group under
+ * its quiet heading, eight to a row, in a scroller of its own.
+ */
+
+.crewlet-emoji-picker__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  width: 296px;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-2);
+}
+
+.crewlet-emoji-picker__scroll {
+  max-height: 240px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* A group's heading, in the meta register at the regular weight. */
+.crewlet-emoji-picker__group {
+  padding: var(--spacing-2) var(--spacing-1) var(--spacing-1);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.crewlet-emoji-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-emoji-picker-columns), minmax(0, 1fr));
+  gap: 2px;
+}
+
+.crewlet-emoji-picker__cell {
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  font-size: var(--font-size-lg);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.crewlet-emoji-picker__cell:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-emoji-picker__cell:focus-visible {
+  background: var(--color-surface-hover);
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-emoji-picker__none {
+  margin: var(--spacing-3) var(--spacing-1);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
+}
+
+
 /* EmptyState-7L4UAQBX.css */
 /*
  * The empty state.
@@ -20379,7 +21920,7 @@ a.crewlet-icon-btn {
 .crewlet-icon-tile--blue { --crewlet-icon-tile-fill: var(--color-node-blue-fill); --crewlet-icon-tile-ink: var(--color-node-blue-ink); }
 
 
-/* ImageUpload-OWI7CCG7.css */
+/* ImageUpload-IFXZROFZ.css */
 /*
  * ImageUpload, the click-to-upload affordance built on Avatar.
  *
@@ -20426,34 +21967,16 @@ a.crewlet-icon-btn {
   cursor: pointer;
 }
 
-/* The kind modifiers keep the trigger, the overlay and the Avatar outlines in
-   step. A person's picture is a circle. */
-.crewlet-image-upload--human .crewlet-image-upload__trigger,
-.crewlet-image-upload--human .crewlet-image-upload__overlay {
-  border-radius: var(--radius-circle);
-}
-
 /* THE SAME CORNER THE PICTURE INSIDE TAKES, which is why it is a variable
-   rather than a step: Avatar moves an agent badge's corner with its box, so a
-   trigger pinned to one step is rounder or squarer than the badge under it at
-   every size but one, and the badge's corners show through the overlay. */
-.crewlet-image-upload--agent .crewlet-image-upload__trigger,
-.crewlet-image-upload--agent .crewlet-image-upload__overlay {
+   rather than a step: Avatar moves a face's corner with its box, so a trigger
+   pinned to one step is rounder or squarer than the face under it at every
+   size but one, and the face's corners show through the overlay. Every face
+   is one shape, a person's and an agent's alike, so one rule serves both. */
+.crewlet-image-upload__trigger,
+.crewlet-image-upload__overlay {
   border-radius: var(--crewlet-image-upload-corner);
 }
 
-/* AND THE SAME SQUIRCLE, where the browser draws one, for the same reason:
-   Avatar.css states why its squircle is a whole one at the circle token, and
-   this is that rule for the two frames over the picture. The suite holds the
-   two blocks to one declaration list. */
-@supports (corner-shape: squircle) {
-  .crewlet-image-upload--agent .crewlet-image-upload__trigger,
-  .crewlet-image-upload--agent .crewlet-image-upload__overlay {
-    corner-shape: squircle;
-    border-radius: var(--radius-circle);
-  }
-}
-
 .crewlet-image-upload__trigger:disabled {
   cursor: default;
 }
@@ -20552,19 +22075,6 @@ a.crewlet-icon-btn {
   transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-/*
- * ON A PERSON'S CIRCLE THE BADGE SITS ON THE EDGE, where the circle crosses
- * its own diagonal: (1 - 1/sqrt(2)) / 2 of the size, 0.1464, in from each
- * side, less half the 24px badge. The six pixels out above are the agent
- * tile's, whose squircle corner reaches that far; a circle turns away sooner,
- * and at the default 80px the badge's middle stood 8px off the picture, so
- * the badge floated beside it rather than being pinned to it.
- */
-.crewlet-image-upload--human .crewlet-image-upload__remove {
-  top: calc(var(--crewlet-image-upload-size) * 0.1464 - 12px);
-  right: calc(var(--crewlet-image-upload-size) * 0.1464 - 12px);
-}
-
 .crewlet-image-upload:hover .crewlet-image-upload__remove,
 .crewlet-image-upload__remove:focus-visible {
   opacity: 1;
@@ -22731,6 +24241,164 @@ a.crewlet-icon-btn {
 }
 
 
+/* LinkCard-5I4MYU6I.css */
+/*
+ * LinkCard: what a link points at, unfurled under its message.
+ *
+ * AN UNFURL, NOT A CARD. No box and no fill: a slim bar on the left in the
+ * status's line colour (the medium edge with none), and the lines beside it
+ * in the dashboard's own type (the title in the primary ink, the small meta
+ * under it), so a preview reads as part of its message. One width for every
+ * preview (ChatScale.css), so a stack of them shares both edges.
+ */
+.crewlet-link-card {
+  --crewlet-link-card-bar: 3px;
+  --crewlet-link-card-tone: var(--color-edge-medium);
+  --crewlet-link-card-dot: var(--color-text-tertiary);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: min(100%, var(--crewlet-chat-card));
+  box-sizing: border-box;
+  padding: 2px 0 2px calc(var(--crewlet-link-card-bar) + var(--spacing-3));
+  border-radius: var(--radius-xs);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  text-decoration: none;
+}
+
+.crewlet-link-card::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: var(--crewlet-link-card-bar);
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-link-card-tone);
+}
+
+/* The bar takes the tone's line colour; the status dot, small enough to
+   carry it, the tone's full colour, so the status reads in both modes. */
+.crewlet-link-card--info {
+  --crewlet-link-card-tone: var(--color-feedback-info-line);
+  --crewlet-link-card-dot: var(--color-feedback-info);
+}
+
+.crewlet-link-card--success {
+  --crewlet-link-card-tone: var(--color-feedback-success-line);
+  --crewlet-link-card-dot: var(--color-feedback-success);
+}
+
+.crewlet-link-card--warning {
+  --crewlet-link-card-tone: var(--color-feedback-warning-line);
+  --crewlet-link-card-dot: var(--color-feedback-warning);
+}
+
+.crewlet-link-card--danger {
+  --crewlet-link-card-tone: var(--color-feedback-danger-line);
+  --crewlet-link-card-dot: var(--color-feedback-danger);
+}
+
+/* No box to ring over: the ring stands off the preview's words. */
+.crewlet-link-card:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/* The app it comes from: its mark and its name, small and quiet. */
+.crewlet-link-card__source {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-link-card__mark,
+.crewlet-link-card__face {
+  display: inline-flex;
+  flex: none;
+}
+
+/* The title in the primary ink at the regular weight, two lines at most;
+   under the pointer it takes the accent ink and an underline. */
+.crewlet-link-card__title {
+  display: -webkit-box;
+  max-width: 100%;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-regular);
+  overflow-wrap: anywhere;
+}
+
+/* THE TITLE ALONE IS UNDERLINED. The document's base underlines every link
+   under the pointer, and an underline on the link runs through all of its
+   lines (the source, the details, the owner), which no line inside can
+   take off again. */
+a.crewlet-link-card:hover {
+  text-decoration: none;
+}
+
+a.crewlet-link-card:hover .crewlet-link-card__title {
+  color: var(--color-brand-accent-ink);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.crewlet-link-card__code {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-link-card__meta {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Status and owner as words on one line: a dot in the status's colour, and
+   a small face with the owner's name. */
+.crewlet-link-card__fields {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-3);
+  margin-top: 2px;
+}
+
+.crewlet-link-card__status,
+.crewlet-link-card__owner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  white-space: nowrap;
+}
+
+.crewlet-link-card__dot {
+  width: 6px;
+  height: 6px;
+  flex: none;
+  border-radius: var(--radius-circle);
+  background: var(--crewlet-link-card-dot);
+}
+
+/* FORCED COLORS drops the bar's and the dot's backgrounds; a border is the
+   one edge the mode keeps. */
+@media (forced-colors: active) {
+  .crewlet-link-card::before {
+    border-left: var(--crewlet-link-card-bar) solid CanvasText;
+  }
+
+  .crewlet-link-card__dot {
+    border: 1px solid CanvasText;
+  }
+}
+
+
 /* LinkInterstitial-ET4MSVSV.css */
 /*
  * The destination, said twice: the host as the claim a reader decides on, in
@@ -24349,6 +26017,119 @@ a.crewlet-icon-btn {
 }
 
 
+/* MentionChip-W7MZZVRZ.css */
+/*
+ * A mention in a message's words: a chip in the line, in the info tone's
+ * light blue, or the warning tone where it names the reader.
+ */
+
+.crewlet-mention-chip {
+  display: inline;
+  padding: 0 2px;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: var(--color-feedback-info-soft);
+  color: var(--color-feedback-info-ink);
+  font: inherit;
+  font-weight: var(--font-weight-regular);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.crewlet-mention-chip--self,
+.crewlet-mention-chip--everyone {
+  background: var(--color-feedback-warning-soft);
+  color: var(--color-feedback-warning-ink);
+}
+
+button.crewlet-mention-chip {
+  cursor: pointer;
+}
+
+/* Under the pointer the fill takes the tone's next strength, its line step. */
+button.crewlet-mention-chip:hover {
+  background: var(--color-feedback-info-line);
+}
+
+button.crewlet-mention-chip--self:hover,
+button.crewlet-mention-chip--everyone:hover {
+  background: var(--color-feedback-warning-line);
+}
+
+button.crewlet-mention-chip:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 1px;
+}
+
+
+/* MentionMenu-4NAQ45S4.css */
+/*
+ * MentionMenu: the suggestions a composer opens on "@" or "#".
+ *
+ * The popover surface (the fill, hairline, corner and shadow of the emoji
+ * picker that opens from the same composer), as wide as the field but no
+ * wider than a list a reader scans: on a wide room the trailing word
+ * ("Working") stood a screen's width from the name it belongs to; a host
+ * moves that cap with `--crewlet-mention-menu-width` on any box round it.
+ * It is placed against the nearest positioned box round the field, above
+ * it, so it never covers what is being typed.
+ */
+.crewlet-mention-menu {
+  position: absolute;
+  bottom: calc(100% + var(--spacing-1));
+  left: 0;
+  z-index: var(--z-index-dropdown);
+  box-sizing: border-box;
+  width: min(100%, var(--crewlet-mention-menu-width, 560px));
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-subtle);
+  box-shadow: var(--shadow-xl);
+}
+
+.crewlet-mention-menu__label {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-1);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.crewlet-mention-menu__list {
+  max-height: 264px;
+  margin: 0;
+  padding: 0 var(--spacing-1) var(--spacing-1);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  list-style: none;
+}
+
+/* The panel's corner less its inset, so each row's curve runs parallel. */
+.crewlet-mention-menu__list > .crewlet-person-row {
+  --crewlet-person-row-radius: calc(var(--radius-lg) - var(--spacing-1));
+}
+
+.crewlet-mention-menu__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* The foot names keys, and a touch screen has none to press. */
+@media (hover: none) {
+  .crewlet-mention-menu__footer {
+    display: none;
+  }
+}
+
+
 /* Menu-I4SNXHOT.css */
 /*
  * The menu button's panel.
@@ -24743,6 +26524,82 @@ a.crewlet-icon-btn {
 }
 
 
+/* MessageActions-Q4F5UH3S.css */
+/*
+ * The tray a message shows on hover: the transcript's own ground ringed with
+ * the hairline and a small shadow, the large corner, and 30px tools inside
+ * the inset, so it reads as a soft tray of tools rather than a framed bar.
+ * Two classes, so the tray's own rules hold over Toolbar's in any bundle
+ * order.
+ */
+.crewlet-toolbar.crewlet-message-actions {
+  flex-wrap: nowrap;
+  gap: var(--crewlet-chat-toolbar-inset);
+  height: var(--crewlet-chat-toolbar);
+  box-sizing: border-box;
+  padding: var(--crewlet-chat-toolbar-inset);
+  border: 1px solid var(--color-edge-hairline);
+  border-radius: var(--radius-lg);
+  background: var(--crewlet-chat-ground);
+  box-shadow: var(--shadow-xs);
+}
+
+/* A tool whose menu or picker is open reads as held down, which is not the
+   accent fill a toggle that is on (Saved) draws. */
+.crewlet-message-actions .crewlet-icon-btn[aria-expanded='true'] {
+  background: var(--color-surface-pressed);
+  color: var(--color-text-primary);
+}
+
+.crewlet-message-actions__emoji {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-md);
+  height: var(--size-control-md);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  font-size: var(--font-size-md);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.crewlet-message-actions__emoji:hover {
+  background: var(--color-fill-soft);
+}
+
+.crewlet-message-actions__emoji:active {
+  background: var(--color-surface-pressed);
+}
+
+/* Held, as the tray's icon tools are: faded, no fill under the pointer, and
+   the reason in its hint. */
+.crewlet-message-actions__emoji[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.crewlet-message-actions__emoji[aria-disabled='true']:is(:hover, :active) {
+  background: transparent;
+}
+
+.crewlet-message-actions__emoji:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-message-actions__divider {
+  flex: none;
+  width: 1px;
+  height: var(--spacing-4);
+  margin: 0 var(--spacing-1);
+  background: var(--color-border-default);
+}
+
+
 /* MessageBubble-AHTXBO3X.css */
 /*
  * One message: the bubble on its writer's side, and what it carried and its
@@ -24972,7 +26829,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* Modal-FYQYEI3N.css */
+/* Modal-GKUOO7PZ.css */
 /*
  * The modal surface: the veil, the frame, and the three bands inside it.
  *
@@ -25260,13 +27117,32 @@ a.crewlet-icon-btn {
   animation: crewlet-modal-sheet-in var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
+/*
+ * A SHEET FROM THE START EDGE (`side="start"`): a navigation panel, pinned to
+ * the inline start and arriving from past it, with its edge and its shadow on
+ * its inline end, into the page it covers. The shadow is the sheet's own,
+ * mirrored by the token build, so a palette's sheet shadow reads the same way
+ * round on either side.
+ */
+.crewlet-modal-overlay--sheet.crewlet-modal-overlay--start {
+  justify-content: flex-start;
+}
+
+.crewlet-modal--sheet.crewlet-modal--start {
+  --crewlet-modal-sheet-from: -100%;
+  border-inline-start: none;
+  border-inline-end: 1px solid var(--color-border-default);
+  box-shadow: var(--shadow-sheet-start);
+}
+
 /*
  * The shell's one breakpoint, strictly under it as the shell switches. Below
  * it there is no content beside a sheet to keep in view, so the sheet takes
  * the whole width and its edge goes with it.
  */
 @media (width < 1024px) {
-  .crewlet-modal--sheet {
+  .crewlet-modal--sheet,
+  .crewlet-modal--sheet.crewlet-modal--start {
     width: 100%;
     border-inline: none;
   }
@@ -25289,6 +27165,11 @@ a.crewlet-icon-btn {
   --crewlet-modal-glyph-inset: calc((var(--size-control-md) - var(--font-size-sm)) / 2);
 
   display: flex;
+  /* The head and the foot keep their height and the body gives way: in the
+     frame's column a head that could shrink was squeezed under a long body
+     to the bar's height, and a wrapped title and subtitle ran over its
+     edges. */
+  flex-shrink: 0;
   align-items: center;
   gap: var(--spacing-3);
   padding: var(--spacing-4);
@@ -25509,6 +27390,7 @@ a.crewlet-icon-btn {
  */
 .crewlet-modal__footer {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--spacing-2);
@@ -27418,6 +29300,170 @@ a.crewlet-icon-btn {
 }
 
 
+/* PersonRow-V5GTPNVP.css */
+/*
+ * PersonRow: a person or an agent as one row of a list, as a button or as a
+ * listbox option. One design for every list of people.
+ */
+.crewlet-person-row {
+  /* The row's corner. A list inside a rounded panel sets it to the panel's
+     corner less the panel's inset, so the two curves run parallel. */
+  --crewlet-person-row-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--spacing-2);
+  border: 0;
+  border-radius: var(--crewlet-person-row-radius);
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  text-align: left;
+  list-style: none;
+  cursor: pointer;
+}
+
+/* One line, for a list that opens under a caret: the name, its detail after
+   it, and the trailing words at the end. */
+.crewlet-person-row--compact {
+  gap: var(--spacing-2);
+  min-height: var(--size-row-md);
+  padding-block: 0;
+}
+
+/*
+ * A ROW SHOWS THE HOVER OVERLAY OR THE CHOSEN TINT, NEVER BOTH: they are the
+ * same property on the same element, and the chosen row keeps its tint under
+ * the pointer.
+ */
+.crewlet-person-row:hover,
+.crewlet-person-row.is-highlighted {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-person-row.is-selected,
+.crewlet-person-row.is-selected:hover {
+  background: var(--color-brand-accent-soft);
+}
+
+/* The row the arrows are on, in a list a field owns: a bar on its start
+   edge, so it is found in a list whose chosen rows are tinted too. */
+.crewlet-person-row.is-highlighted {
+  box-shadow: inset 2px 0 0 var(--color-brand-accent);
+}
+
+.crewlet-person-row:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-person-row:disabled,
+.crewlet-person-row.is-disabled {
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+}
+
+/*
+ * One column for every face or glyph, so every name starts on one edge: a
+ * room's 16px glyph started its name a step left of the faces beside it.
+ */
+.crewlet-person-row__face {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size-control-md);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-person-row--compact .crewlet-person-row__face {
+  min-width: var(--size-control-sm);
+}
+
+.crewlet-person-row__text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-person-row__name {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-weight: var(--font-weight-regular);
+  white-space: nowrap;
+}
+
+.crewlet-person-row__detail {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-person-row--compact .crewlet-person-row__detail {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-person-row__meta {
+  flex: none;
+  margin-left: auto;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+/* The toggle's mark: a plus that is quiet until the row is pointed at, and a
+   check on the accent once the row is chosen. */
+.crewlet-person-row__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  margin-left: auto;
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-person-row__meta + .crewlet-person-row__mark {
+  margin-left: 0;
+}
+
+.crewlet-person-row:hover .crewlet-person-row__mark {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+.crewlet-person-row.is-selected .crewlet-person-row__mark {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+}
+
+/*
+ * FORCED COLORS repaints every background to Canvas, which took the chosen
+ * tint and the arrows' row with it. An outline is the one mark the mode
+ * keeps, in the system's own colour for exactly this.
+ */
+@media (forced-colors: active) {
+  .crewlet-person-row.is-selected,
+  .crewlet-person-row.is-highlighted {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}
+
+
 /* PinTile-OWS7JTHD.css */
 /*
  * PinTile: one pinned thing, a link with its facts.
@@ -27845,7 +29891,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* PresenceStack-ZV67BH4V.css */
+/* PresenceStack-2DTYRADY.css */
 /*
  * Who is here (PresenceStack.tsx), on the avatar stack's own geometry: the
  * overlap and the counted chip are the stack's, the overlap stepped out by
@@ -27875,12 +29921,10 @@ a.crewlet-icon-btn {
   font: inherit;
 }
 
-.crewlet-presence-stack > .crewlet-presence-stack__member--human {
-  border-radius: var(--radius-circle);
-}
-
-.crewlet-presence-stack > .crewlet-presence-stack__member--agent {
-  border-radius: var(--radius-sm);
+/* The face's own corner, which the component sets from Avatar's ladder: one
+   shape for people and agents. */
+.crewlet-presence-stack > .crewlet-presence-stack__member {
+  border-radius: var(--crewlet-presence-stack-corner);
 }
 
 button.crewlet-presence-stack__member {
@@ -28785,6 +30829,102 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* ReactionBar-XXI4V7XG.css */
+/*
+ * A message's reactions: one pill to an emoji, then the add pill. A pill at
+ * rest is a fill and no frame; the edge arrives under the pointer.
+ */
+
+.crewlet-reaction-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-reaction {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  min-width: 44px;
+  height: 24px;
+  box-sizing: border-box;
+  padding: 0 var(--spacing-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-pill);
+  background: var(--color-fill-soft);
+  color: var(--color-text-primary);
+  font: inherit;
+  font-size: var(--crewlet-chat-meta);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* The emoji is the pill's picture and the count its caption: at the count's
+   size the emoji read smaller than the number beside it. */
+.crewlet-reaction__emoji {
+  font-size: var(--font-size-md);
+}
+
+.crewlet-reaction__count {
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--font-weight-regular);
+}
+
+/* The pointed pill drops its fill and takes the strong edge. */
+.crewlet-reaction:hover {
+  border-color: var(--color-edge-strong);
+  background: transparent;
+}
+
+/* Yours: the accent's soft fill, its ink and a heavier count, ringed in the
+   accent, so it differs from the others by more than its hue. */
+.crewlet-reaction.is-mine {
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-reaction.is-mine:hover {
+  background: var(--color-brand-accent-soft-strong);
+}
+
+.crewlet-reaction.is-mine .crewlet-reaction__count {
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-reaction[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.crewlet-reaction:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The add pill: the glyph alone, in the quiet ink. */
+.crewlet-reaction.crewlet-reaction--add {
+  min-width: 32px;
+  padding: 0;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-reaction.crewlet-reaction--add[aria-expanded='true'] {
+  background: var(--color-surface-pressed);
+  color: var(--color-text-primary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-reaction {
+    transition: none;
+  }
+}
+
+
 /* ReadingPane-VLYOWMCM.css */
 /*
  * One item read in full, in one column.
@@ -33567,7 +35707,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SidePanel-VXKUKLOJ.css */
+/* SidePanel-BKWT6Q6Z.css */
 /*
  * A side panel and the frame that lays it beside the content or over it
  * (`SidePanel`, `SidePanelFrame`, and their artifact presets).
@@ -33658,6 +35798,42 @@ svg.crewlet-select__chevron {
   border-bottom: 1px solid var(--color-border-default);
 }
 
+/* With a subtitle the head holds one or two lines, so its height is a floor
+   rather than a height, and its controls stay on the first line. */
+.crewlet-side-panel__head--subtitled {
+  align-items: flex-start;
+  height: auto;
+  min-height: var(--crewlet-side-panel-head-height);
+  padding-block: calc((var(--crewlet-side-panel-head-height) - var(--size-control-sm)) / 2);
+  box-sizing: border-box;
+}
+
+/* The title and the subtitle on one baseline, the subtitle dropping under
+   the title when the two do not fit; the title shrinks to its own line and
+   is ellipsised there. Centred on the controls' line while it is one line. */
+.crewlet-side-panel__heading {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--spacing-2);
+  min-width: 0;
+  min-height: var(--size-control-sm);
+  align-content: center;
+}
+
+.crewlet-side-panel__heading > .crewlet-side-panel__title {
+  flex: 0 1 auto;
+}
+
+.crewlet-side-panel__subtitle {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-snug);
+}
+
 .crewlet-side-panel__icon {
   display: inline-flex;
   flex: none;
@@ -33813,7 +35989,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SidebarNav-VTQ3G4AE.css */
+/* SidebarNav-E7PZGGA6.css */
 /*
  * The rail's navigation.
  *
@@ -33903,6 +36079,61 @@ svg.crewlet-select__chevron {
   color: var(--color-text-tertiary);
 }
 
+/*
+ * A HEADING THAT FOLDS ITS GROUP (`collapsible`): the button is the heading's
+ * words and a chevron, the chevron centred in the glyph column (a nav glyph's
+ * 14px; the xs chevron is 12px) and the words on the label line, so the
+ * headings and the rows of a folded list stay one grid. It is the target
+ * floor tall, the head's own height, and as wide as its words, so the head's
+ * control keeps its own target at the end.
+ *
+ * THE RING IS DRAWN INSIDE ITS EDGE, because the words ellipsize and the box
+ * that cuts them would cut an outset ring on every side.
+ */
+.crewlet-nav-group__toggle {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  min-width: 0;
+  min-height: var(--size-target-min);
+  margin: 0;
+  padding: 0 var(--spacing-1) 0 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  font: inherit;
+  cursor: pointer;
+  transition: color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-nav-group__toggle:hover {
+  color: var(--color-text-primary);
+}
+
+.crewlet-nav-group__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The words take the button's ink, so the heading lifts as one. */
+.crewlet-nav-group__toggle > .crewlet-nav-group__label {
+  color: inherit;
+}
+
+.crewlet-nav-group__chevron {
+  display: inline-flex;
+  flex: none;
+  margin: 0 calc((14px - 12px) / 2);
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* Folded, the chevron points at the words it would open. */
+.crewlet-nav-group--collapsed .crewlet-nav-group__chevron {
+  transform: rotate(-90deg);
+}
+
 /* The heading's control. Pushed to the end whether or not the heading has
    words, and at the floor the heading stands at. */
 .crewlet-nav-group__action {
@@ -34148,13 +36379,16 @@ svg.crewlet-select__chevron {
  * somebody who cannot separate the hue at all: the filled pill is the signal,
  * the figure is the count.
  *
- * The design's 18px pill, at least as wide as it is tall so a single digit is
- * a round mark and not a lozenge, and following the density like the xs Tag
- * it matches. The label is the on-accent step, the primary action's own pair,
- * on every row alike, because the fill is opaque.
+ * The chrome's one count badge (`--size-badge`, 16px with a 10px figure), at
+ * least as wide as it is tall so a single digit is a round mark and not a
+ * lozenge, and following the density. The same pill is drawn on the compact
+ * rail's tiles and in its flyouts, so a count waiting for the reader is one
+ * mark wherever it is; at 18px with an 11px figure it read louder than the
+ * names beside it. The label is the on-accent step, the primary action's own
+ * pair, on every row alike, because the fill is opaque.
  */
 .crewlet-nav-item__badge {
-  --crewlet-nav-item-badge-size: calc(18px * var(--density, 1));
+  --crewlet-nav-item-badge-size: var(--size-badge);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -34163,11 +36397,11 @@ svg.crewlet-select__chevron {
   min-width: var(--crewlet-nav-item-badge-size);
   height: var(--crewlet-nav-item-badge-size);
   margin-left: auto;
-  padding: 0 calc(var(--spacing-1) + 1px);
+  padding: 0 var(--size-badge-pad);
   border-radius: var(--radius-pill);
   background: var(--color-brand-accent);
   color: var(--color-text-on-accent);
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-badge);
   font-weight: var(--font-weight-semibold);
   font-variant-numeric: tabular-nums;
   line-height: 1;
@@ -34245,8 +36479,75 @@ svg.crewlet-select__chevron {
   border-left-color: var(--color-border-strong);
 }
 
+/*
+ * THE DENSE LIST (`dense`): a list read in passing that runs long, a step
+ * denser than the application's navigation.
+ *
+ * Its rows stand at the 24px target floor, the gutter is halved so a row's
+ * highlight runs nearly from edge to edge (a long bar rather than a pill), and
+ * the row's pad grows by exactly what the gutter gave up, so every glyph and
+ * name stays on the line it was on, whatever the surface set the two tokens
+ * to. The glyph column is as wide as a small face (an `Avatar` at `xs`), so a
+ * face, a glyph and a group's count stand in one column and every name starts
+ * on one line. Names are set in the regular weight, a step lighter than the
+ * navigation's, which is what lets an unread row stand out by weight.
+ */
+.crewlet-sidebar-nav--dense {
+  --crewlet-nav-dense-pad: calc(var(--size-nav-row-pad) + var(--size-nav-gutter) - var(--spacing-1));
+  --crewlet-nav-dense-slot: 20px;
+  padding-right: var(--spacing-1);
+  padding-left: var(--spacing-1);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-item__row {
+  min-height: var(--size-target-min);
+  padding-right: var(--crewlet-nav-dense-pad);
+  padding-left: var(--crewlet-nav-dense-pad);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-group__head {
+  padding-right: calc(var(--crewlet-nav-dense-pad) - (var(--size-target-min) - 14px) / 2);
+  padding-left: var(--crewlet-nav-dense-pad);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-item__icon {
+  min-width: var(--crewlet-nav-dense-slot);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-group__chevron {
+  margin-right: calc((var(--crewlet-nav-dense-slot) - 12px) / 2);
+  margin-left: calc((var(--crewlet-nav-dense-slot) - 12px) / 2);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-item__children {
+  margin-left: var(--crewlet-nav-dense-pad);
+  padding-left: calc(var(--crewlet-nav-dense-slot) + var(--spacing-2) + var(--spacing-1) / 2 - var(--crewlet-nav-dense-pad) - 1px);
+}
+
+/*
+ * A ROW WITH NEWS (`unread`): its name a step heavier than its neighbours' and
+ * in the primary ink, which is the whole of the signal in a dense list whose
+ * names are regular. A muted row is never drawn unread (the component drops
+ * the class), so the two rules never meet.
+ */
+.crewlet-nav-item--unread > .crewlet-nav-item__head > .crewlet-nav-item__row {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+/*
+ * A MUTED ROW rests in the quiet ink, glyph and name together, and lifts as
+ * every row does: under the pointer, and while it is the row the reader is on.
+ */
+.crewlet-nav-item--muted > .crewlet-nav-item__head > .crewlet-nav-item__row:not([aria-current]):not(:hover) {
+  color: var(--color-text-tertiary);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-nav-group__action,
+  .crewlet-nav-group__toggle,
+  .crewlet-nav-group__chevron,
   .crewlet-nav-item__row,
   .crewlet-nav-item__chevron {
     transition: none;
@@ -34264,7 +36565,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Skeleton-7ZA5ETJM.css */
+/* Skeleton-GIXV3KK5.css */
 /*
  * Skeleton, the loading placeholder, in eight shapes:
  *   box           One large rectangle with a sweeping glow, for a hero area.
@@ -34347,10 +36648,12 @@ svg.crewlet-select__chevron {
 .crewlet-skeleton__line--label { height: 13px; width: 40%; margin-bottom: var(--spacing-2); }
 .crewlet-skeleton__line--value { height: 14px; width: 80%; }
 
+/* A face's placeholder takes a face's shape, the rounded square every Avatar
+   is drawn as: at 40px its corner is 8.9px, which the md step rounds to. */
 .crewlet-skeleton__avatar {
   width: 40px;
   height: 40px;
-  border-radius: var(--radius-circle);
+  border-radius: var(--radius-md);
   flex-shrink: 0;
 }
 
@@ -38687,7 +40990,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tag-JTJVZM2D.css */
+/* Tag-WLDOROB5.css */
 /*
  * The tag: a small pill naming a state, a category or a value.
  *
@@ -38992,6 +41295,30 @@ b.crewlet-switcher__match {
   --crewlet-tag-ink: var(--color-text-tertiary);
 }
 
+/*
+ * THE QUIET LABEL (`appearance="quiet"`): a seat's kind beside its name
+ * ("Agent"), a small filled mark with no boundary, so it reads as part of the
+ * name line rather than as a control. 16px tall with a step of room each side,
+ * the xs corner rather than a pill's round ends, and the label register at the
+ * regular weight. The neutral label sits on the soft fill under the secondary
+ * ink; a tone keeps its own tint and ink. It takes no size step: these rules
+ * come after the steps, at their specificity, so a step cannot reshape it.
+ */
+.crewlet-tag--quiet {
+  --crewlet-tag-height: calc(16px * var(--density, 1));
+  --crewlet-tag-pad: var(--spacing-1);
+  --crewlet-tag-edge: transparent;
+  gap: var(--spacing-1);
+  border-radius: var(--radius-xs);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-tag--neutral.crewlet-tag--quiet {
+  --crewlet-tag-fill: var(--color-fill-soft);
+  --crewlet-tag-ink: var(--color-text-secondary);
+}
+
 /* ── the interactive form ──────────────────────────────────────────────── */
 
 .crewlet-tag--actionable {
@@ -40117,9 +42444,9 @@ b.crewlet-switcher__match {
 }
 
 
-/* ThinkingIndicator-JVF52N7L.css */
+/* ThinkingIndicator-S7ZL2C77.css */
 /*
- * The assistant at work: the Assistant's mark, its spark turning, and a line
+ * Ask Crewlet at work: the Ask Crewlet mark, its spark turning, and a line
  * of status under a shimmer. See ThinkingIndicator.tsx for why it replaces a
  * caret and how it is announced.
  */
@@ -40128,12 +42455,20 @@ b.crewlet-switcher__match {
  * ONE LINE OF PROSE TALL, at every state: the mark alone, the mark with a
  * status line, and the line changing from one step to the next all keep the
  * same height, so the thread never moves while the assistant works.
+ *
+ * NEVER WIDER THAN ITS COLUMN. The status never wraps, so where the
+ * indicator is sized by its content (a flex column that starts its items on
+ * the start edge, as a message's footer does) a long status made it as wide
+ * as its words and widened the column with it, and a phone's transcript
+ * scrolled sideways. Held to its container, the status truncates as it was
+ * written to.
  */
 .crewlet-thinking {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
   min-width: 0;
+  max-width: 100%;
   min-height: calc(var(--font-size-compact) * var(--font-line-height-relaxed));
   font-family: var(--font-family-sans);
   font-size: var(--font-size-compact);
@@ -40141,7 +42476,7 @@ b.crewlet-switcher__match {
 }
 
 /*
- * THE SPARK TURNS A QUARTER, THEN RESTS. The Assistant's main spark
+ * THE SPARK TURNS A QUARTER, THEN RESTS. The Ask Crewlet mark's main spark
  * (data-motion="turn") makes a quarter turn about its own centre while its
  * companion (data-motion="twinkle") dims and shrinks, both on one timeline of
  * --motion-duration-spark (1.6s). The gesture runs from 20% to 70% of the
@@ -40313,6 +42648,99 @@ b.crewlet-switcher__match {
 }
 
 
+/* ThreadSummary-AGR4NDMD.css */
+/*
+ * The line under a message that has replies, and the working line under it.
+ */
+
+.crewlet-thread-summary-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  max-width: 100%;
+}
+
+/* No piece is wider than the column: a long working line truncates. */
+.crewlet-thread-summary-wrap > * {
+  max-width: 100%;
+}
+
+/* The faces sit on the content edge: the line's 1px edge and its inset are
+   taken back by the same amount outside it. */
+.crewlet-thread-summary {
+  --crewlet-thread-summary-inset: var(--spacing-1);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  max-width: 100%;
+  height: var(--size-control-md);
+  box-sizing: border-box;
+  margin-inline-start: calc((var(--crewlet-thread-summary-inset) + 1px) * -1);
+  padding: 0 var(--crewlet-thread-summary-inset);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-size: var(--font-size-compact);
+  line-height: 1;
+  text-align: start;
+  cursor: pointer;
+}
+
+/* Lifted onto the transcript's own ground inside a hairline, under the
+   pointer or the keyboard, and while the thread is open. */
+.crewlet-thread-summary:is(:hover, :focus-visible, .is-open) {
+  border-color: var(--color-edge-hairline);
+  background: var(--crewlet-chat-ground);
+}
+
+.crewlet-thread-summary:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-thread-summary__count {
+  color: var(--color-brand-accent-ink);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+}
+
+/* "Last reply 1h ago" and "View thread" share one cell, so the line keeps
+   its width when one gives way to the other under the pointer. */
+.crewlet-thread-summary__tail {
+  display: inline-grid;
+  min-width: 0;
+  padding-inline-end: var(--spacing-1);
+  white-space: nowrap;
+}
+
+.crewlet-thread-summary__last,
+.crewlet-thread-summary__view {
+  grid-area: 1 / 1;
+}
+
+.crewlet-thread-summary__last {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-thread-summary__view {
+  justify-self: end;
+  visibility: hidden;
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-thread-summary:is(:hover, :focus-visible, .is-open) .crewlet-thread-summary__last {
+  visibility: hidden;
+}
+
+.crewlet-thread-summary:is(:hover, :focus-visible, .is-open) .crewlet-thread-summary__view {
+  visibility: visible;
+}
+
+
 /* TileGrid-XOEJ4P52.css */
 /*
  * TileGrid: tiles on a fixed track count that folds by the grid's own width.