@signalcore/ui 1.0.0-beta.2 → 1.0.0-beta.4

package/src/styles.css

@@ -633,6 +633,45 @@
   line-height: 1.375;
 }
 
+/* Several actions waiting for the person's leave, in one card: a row for each, its box ticked
+   and what it would take under it, editable; one button at the foot. */
+.sc-chat__requests > ul {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-chat__ask {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--_space) * 2.5);
+  padding: calc(var(--_space) * 3) calc(var(--_space) * 4);
+}
+
+.sc-chat__ask + .sc-chat__ask {
+  border-top: 1px solid var(--_line);
+}
+
+.sc-chat__ask > .sc-check > span {
+  font-weight: var(--_font-weight-medium);
+  line-height: 1.375;
+}
+
+.sc-chat__ask-fields {
+  display: grid;
+  gap: calc(var(--_space) * 2.5);
+  padding-left: calc(var(--_space) * 6.5);
+}
+
+.sc-chat__requests > footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: calc(var(--_space) * 3) calc(var(--_space) * 4);
+  border-top: 1px solid var(--_line);
+}
+
 /* On a person's page, in place of the approval card: what waits for the business's yes, a quiet
    line under the steps; the person has nothing to press. */
 .sc-chat__confirming {
@@ -675,6 +714,124 @@
   height: 14px;
 }
 
+/* Where the agent put what it showed apart: a quiet line in its reply, its glyph and words, that
+   opens it again; the one open reads in the ink. */
+.sc-chat__placed {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--_space) * 2);
+  align-self: flex-start;
+  margin: calc(var(--_space) * 2) 0 0;
+  padding: 2px 0;
+  border: 0;
+  background: none;
+  color: var(--_muted);
+  font: inherit;
+  font-size: var(--_font-size-sm);
+  text-align: left;
+  white-space: normal;
+  cursor: pointer;
+}
+
+.sc-chat__placed:hover {
+  color: var(--_fg);
+}
+
+.sc-chat__placed:hover > span {
+  text-decoration: underline;
+  text-decoration-color: var(--_line-hover);
+  text-underline-offset: 3px;
+}
+
+.sc-chat__placed:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 2px;
+}
+
+.sc-chat__placed--open {
+  color: var(--_fg);
+}
+
+.sc-chat__placed > svg {
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+}
+
+/* A surface apart: its title and close over it, the surface scrolling under them. A panel stands
+   at the chat's right edge, the conversation beside it (under it, where the chat is narrow); a
+   modal over the page, on a dimmed backdrop. */
+.sc-placed {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  color: var(--_fg);
+  background: var(--_surface);
+}
+
+.sc-placed__head {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 10px 10px 16px;
+  border-bottom: 1px solid var(--_hair);
+}
+
+.sc-placed__title {
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--_font-size);
+  font-weight: var(--_font-weight-bold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-placed__title::first-letter {
+  text-transform: uppercase;
+}
+
+.sc-placed__body {
+  flex: 1;
+  min-height: 0;
+  padding: 16px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.sc-placed--panel {
+  position: absolute;
+  inset: 0 0 0 auto;
+  z-index: 2;
+  width: min(440px, 100%);
+  border-left: 1px solid var(--_line);
+}
+
+/* The conversation beside an open panel: what is left of the chat's width (none, where the panel
+   takes it all). */
+.sc-chat--placed {
+  padding-right: min(440px, 100%);
+}
+
+.sc-placed--modal {
+  width: min(600px, calc(100vw - 32px));
+  max-height: min(720px, calc(100dvh - 48px));
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--_line);
+  border-radius: var(--_radius);
+  box-shadow: var(--_shadow-overlay);
+}
+
+.sc-placed--modal[open] {
+  display: flex;
+}
+
+.sc-placed--modal::backdrop {
+  background: rgb(0 0 0 / 0.32);
+}
+
 /* Where who answers the conversation changed: the same quiet line, what changed and why centred
    between the hairlines (a long reason wraps there), and when, quieter still. */
 .sc-chat__handover {
@@ -2149,99 +2306,532 @@ button.sc-tile__main:focus-visible {
   color: var(--_fg);
   font-size: var(--_font-size-sm);
   font-weight: var(--_font-weight-medium);
-  text-align: right;
-}
-
-.sc-chart--line {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+  text-align: right;
+}
+
+.sc-chart--line {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sc-chart__top,
+.sc-chart__ends {
+  color: var(--_subtle);
+  font-size: var(--_font-size-xs);
+}
+
+.sc-chart__ends {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.sc-chart__plot {
+  position: relative;
+  height: 160px;
+  touch-action: pan-y;
+}
+
+.sc-chart__plot > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.sc-chart__wash {
+  stop-color: var(--_chart);
+  stop-opacity: 0.1;
+}
+
+.sc-chart__axis {
+  stroke: var(--_line);
+  stroke-width: 1px;
+  vector-effect: non-scaling-stroke;
+}
+
+.sc-chart__line {
+  fill: none;
+  stroke: var(--_chart);
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.sc-chart__dot {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--_surface);
+  border-radius: var(--_radius-full);
+  background: var(--_chart);
+  pointer-events: none;
+  translate: -50% -50%;
+}
+
+.sc-chart__tip {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  display: flex;
+  gap: 8px;
+  padding: 4px 8px;
+  border: 1px solid var(--_line);
+  border-radius: calc(var(--_radius) - 4px);
+  background: var(--_surface);
+  box-shadow: var(--_shadow-raised);
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.sc-chart__tip > strong {
+  color: var(--_fg);
+  font-weight: var(--_font-weight-medium);
+}
+
+.sc-chart__data {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* A calendar: its days one under another, each its weekday and number at the left of its events
+   (today's in the accent), an empty day a single quiet line; wide enough, the week stands as
+   seven columns. Each event its hours in figures that line up, its title, a quiet line of detail;
+   one to open or press lights under the pointer. */
+.sc-agenda {
+  min-width: 0;
+  container-type: inline-size;
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-agenda__days {
+  display: flex;
+  flex-direction: column;
+}
+
+.sc-agenda__day {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 12px;
+  padding: 10px 0;
+}
+
+.sc-agenda__day + .sc-agenda__day {
+  border-top: 1px solid var(--_hair);
+}
+
+.sc-agenda--day .sc-agenda__day {
+  grid-template-columns: minmax(0, 1fr);
+  padding: 0;
+}
+
+.sc-agenda__date {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0;
+  font-weight: var(--_font-weight);
+  line-height: 1.2;
+}
+
+.sc-agenda__weekday {
+  color: var(--_subtle);
+  font-size: var(--_font-size-xs);
+  text-transform: capitalize;
+}
+
+.sc-agenda__number {
+  color: var(--_fg);
+  font-size: var(--_font-size-lg);
+  font-weight: var(--_font-weight-medium);
+}
+
+.sc-agenda__day--today .sc-agenda__weekday,
+.sc-agenda__day--today .sc-agenda__number {
+  color: var(--_accent);
+}
+
+.sc-agenda__events {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-agenda__event {
+  display: grid;
+  grid-template-columns: calc(var(--_font-size) * 7) minmax(0, 1fr);
+  gap: 12px;
+  align-items: baseline;
+  width: 100%;
+  margin: 0 -8px;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: var(--_inner);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  box-sizing: content-box;
+}
+
+:is(a, button).sc-agenda__event {
+  cursor: pointer;
+  transition: background-color 0.12s;
+}
+
+:is(a, button).sc-agenda__event:hover:not(:disabled) {
+  background: var(--_wash);
+}
+
+:is(a, button).sc-agenda__event:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: -2px;
+}
+
+button.sc-agenda__event:disabled {
+  cursor: default;
+}
+
+.sc-agenda__time {
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
+}
+
+.sc-agenda__time > span {
+  white-space: nowrap;
+}
+
+.sc-agenda__what {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sc-agenda__title {
+  overflow-wrap: anywhere;
+  font-weight: var(--_font-weight-medium);
+}
+
+.sc-agenda__detail,
+.sc-agenda__empty {
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
+}
+
+.sc-agenda__empty {
+  margin: 0;
+  padding: 2px 0;
+  color: var(--_subtle);
+}
+
+.sc-agenda__day--empty {
+  align-items: center;
+}
+
+@container (min-width: 680px) {
+  .sc-agenda:not(.sc-agenda--day) > .sc-agenda__days {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    border: 1px solid var(--_hair);
+    border-radius: var(--_inner);
+  }
+
+  .sc-agenda:not(.sc-agenda--day) .sc-agenda__day {
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    gap: 8px;
+    min-height: 140px;
+    padding: 10px;
+    border-top: 0;
+  }
+
+  .sc-agenda:not(.sc-agenda--day) .sc-agenda__day + .sc-agenda__day {
+    border-left: 1px solid var(--_hair);
+  }
+
+  .sc-agenda:not(.sc-agenda--day) .sc-agenda__event {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
+    margin: 0 -6px;
+    padding: 4px 6px;
+  }
+
+  .sc-agenda:not(.sc-agenda--day) .sc-agenda__time {
+    font-size: var(--_font-size-xs);
+  }
+
+  .sc-agenda:not(.sc-agenda--day) .sc-agenda__empty {
+    display: none;
+  }
+}
+
+/* A timeline: a hairline down the left, a dot on it for each thing (hollow, or filled in its
+   tone), its title with where it stands in a quiet word at its right, when under it, a line
+   about it. */
+.sc-timeline {
+  --_rail: 7px;
+
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sc-timeline__item {
+  --_dot: var(--_line-hover);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
+  gap: 10px;
+  padding-bottom: 14px;
+}
+
+.sc-timeline__item:last-child {
+  padding-bottom: 0;
+}
+
+.sc-timeline__item::before {
+  content: "";
+  position: absolute;
+  top: 14px;
+  bottom: -2px;
+  left: var(--_rail);
+  width: 1px;
+  background: var(--_line);
+}
+
+.sc-timeline__item:last-child::before {
+  display: none;
+}
+
+.sc-timeline__item--info {
+  --_dot: var(--_accent);
+}
+
+.sc-timeline__item--success {
+  --_dot: var(--_success);
+}
+
+.sc-timeline__item--warning {
+  --_dot: var(--_warning);
+}
+
+.sc-timeline__item--danger {
+  --_dot: var(--_danger);
+}
+
+.sc-timeline__dot {
+  width: 9px;
+  height: 9px;
+  margin: 6px 0 0 3px;
+  border: 2px solid var(--_dot);
+  border-radius: var(--_radius-full);
+  background: var(--_surface);
+}
+
+[class*="sc-timeline__item--"] > .sc-timeline__dot {
+  background: var(--_dot);
+}
+
+.sc-timeline__body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sc-timeline__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0;
+}
+
+.sc-timeline__title {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-weight: var(--_font-weight-medium);
+}
+
+.sc-timeline__status {
+  flex-shrink: 0;
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
+}
+
+.sc-timeline__when {
+  color: var(--_subtle);
+  font-size: var(--_font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-timeline__text {
+  margin: 2px 0 0;
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
+}
+
+/* A board: its columns side by side on a sunken ground, scrolling across inside their own box
+   when they don't fit, each its title and count over its cards; a card lifts a hair off the
+   column, a moving one fades where it was, and the column it would land in lights. */
+.sc-board {
+  display: grid;
+  grid-auto-columns: minmax(200px, 1fr);
+  grid-auto-flow: column;
+  gap: 8px;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity;
+}
+
+.sc-board__column {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid transparent;
+  border-radius: var(--_inner);
+  background: var(--_sunken);
+  scroll-snap-align: start;
+}
+
+.sc-board__column--over {
+  border-color: color-mix(in srgb, var(--_accent) 40%, transparent);
+  background: var(--_picked);
+}
+
+.sc-board__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin: 0;
+  padding: 0 2px;
+  font-size: var(--_font-size-sm);
+  font-weight: var(--_font-weight-medium);
 }
 
-.sc-chart__top,
-.sc-chart__ends {
+.sc-board__count {
   color: var(--_subtle);
-  font-size: var(--_font-size-xs);
+  font-weight: var(--_font-weight);
+  font-variant-numeric: tabular-nums;
 }
 
-.sc-chart__ends {
+.sc-board__cards {
   display: flex;
-  justify-content: space-between;
-  gap: 12px;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.sc-chart__plot {
+.sc-board__card {
   position: relative;
-  height: 160px;
-  touch-action: pan-y;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 12px;
+  border: 1px solid var(--_line);
+  border-radius: var(--_inner);
+  background: var(--_surface);
+  box-shadow: var(--_shadow);
 }
 
-.sc-chart__plot > svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
+.sc-board__card[draggable="true"] {
+  padding-right: 36px;
+  cursor: grab;
 }
 
-.sc-chart__wash {
-  stop-color: var(--_chart);
-  stop-opacity: 0.1;
+.sc-board__card--dragging {
+  opacity: 0.45;
 }
 
-.sc-chart__axis {
-  stroke: var(--_line);
-  stroke-width: 1px;
-  vector-effect: non-scaling-stroke;
+.sc-board__card-title {
+  overflow-wrap: anywhere;
+  font-weight: var(--_font-weight-medium);
 }
 
-.sc-chart__line {
-  fill: none;
-  stroke: var(--_chart);
-  stroke-width: 2px;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  vector-effect: non-scaling-stroke;
+.sc-board__card-subtitle {
+  color: var(--_muted);
+  font-size: var(--_font-size-sm);
 }
 
-.sc-chart__dot {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  border: 2px solid var(--_surface);
-  border-radius: var(--_radius-full);
-  background: var(--_chart);
-  pointer-events: none;
-  translate: -50% -50%;
+.sc-board__card-meta {
+  margin-top: 4px;
+  color: var(--_muted);
+  font-size: var(--_font-size-xs);
+  font-variant-numeric: tabular-nums;
 }
 
-.sc-chart__tip {
-  position: absolute;
-  bottom: calc(100% + 4px);
-  display: flex;
-  gap: 8px;
-  padding: 4px 8px;
-  border: 1px solid var(--_line);
-  border-radius: calc(var(--_radius) - 4px);
-  background: var(--_surface);
-  box-shadow: var(--_shadow-raised);
-  color: var(--_muted);
+.sc-board__empty {
+  margin: 0;
+  padding: 2px;
+  color: var(--_subtle);
   font-size: var(--_font-size-sm);
-  white-space: nowrap;
-  pointer-events: none;
 }
 
-.sc-chart__tip > strong {
+.sc-board__move {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--_inner) - 2px);
+  background: none;
+  color: var(--_subtle);
+  cursor: pointer;
+}
+
+.sc-board__move:hover,
+.sc-board__move[aria-expanded="true"] {
+  background: var(--_wash);
   color: var(--_fg);
-  font-weight: var(--_font-weight-medium);
 }
 
-.sc-chart__data {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
+.sc-board__move:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 0;
+}
+
+.sc-board__move > svg {
+  width: 15px;
+  height: 15px;
+}
+
+.sc-board__menu {
+  display: flex;
+  flex-direction: column;
+  min-width: 160px;
+  padding: 4px;
+}
+
+.sc-board__menu > p {
+  margin: 0;
+  padding: 4px 8px 6px;
+  color: var(--_subtle);
+  font-size: var(--_font-size-xs);
 }
 
 /* A note: its tone's mark and the words on a wash of it, edged by it. */
@@ -5172,6 +5762,23 @@ button.sc-attachment__main:focus-visible {
   color: var(--_fg);
 }
 
+/* A host's block this page doesn't draw: its words in a quiet hairline box where it would be. */
+.sc-surface__host {
+  padding: 12px 14px;
+  border: 1px solid var(--_line);
+  border-radius: var(--_inner);
+  background: var(--_surface);
+  color: var(--_muted);
+}
+
+.sc-surface__host > :first-child {
+  margin-top: 0;
+}
+
+.sc-surface__host > :last-child {
+  margin-bottom: 0;
+}
+
 /* An automation that is not there any more: a quiet line in a dashed box where it would be. */
 .sc-automation--gone {
   margin: 0;
@@ -6427,6 +7034,158 @@ button.sc-attachment__main:focus-visible {
   outline-offset: -2px;
 }
 
+/* Over the chat, one line: the way to the person's threads (a dot when another has something
+   for them) and, at its end, their tasks. */
+.sc-space__bar {
+  display: flex;
+  flex-shrink: 0;
+  align-items: stretch;
+  border-bottom: 1px solid var(--_line);
+}
+
+.sc-space__bar > .sc-space__threads,
+.sc-space__bar > .sc-space__tasks {
+  width: auto;
+  border-bottom: 0;
+}
+
+.sc-space__bar > .sc-space__tasks:not(:only-child) {
+  margin-left: auto;
+  text-align: right;
+}
+
+/* The way to the person's threads; a dot when another thread has something for them. */
+.sc-space__threads {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: calc(var(--_space) * 1.5);
+  width: 100%;
+  padding: calc(var(--_space) * 2) calc(var(--_space) * 3.5);
+  border: 0;
+  border-bottom: 1px solid var(--_line);
+  background: transparent;
+  color: var(--_muted);
+  font: inherit;
+  font-size: var(--_font-size-xs);
+  font-weight: var(--_font-weight-medium);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color 0.12s,
+    color 0.12s;
+}
+
+.sc-space__threads:hover {
+  background: var(--_wash);
+  color: var(--_fg);
+}
+
+.sc-space__threads:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: -2px;
+}
+
+.sc-space__dot,
+.sc-threads__dot {
+  flex-shrink: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: var(--_radius-full);
+  background: var(--_accent);
+}
+
+/* The person's threads in the chat's place: the way back, their title and another to start, then
+   each by its title with what is unread. */
+.sc-threads {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sc-threads__head {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: calc(var(--_space) * 1.5);
+  padding: calc(var(--_space) * 2) calc(var(--_space) * 3);
+  border-bottom: 1px solid var(--_line);
+}
+
+.sc-threads__title {
+  flex: 1;
+  margin: 0;
+  font-size: var(--_font-size);
+  font-weight: var(--_font-weight-bold);
+}
+
+.sc-threads__list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: calc(var(--_space) * 1.5);
+  list-style: none;
+}
+
+.sc-threads__item {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--_space) * 2);
+  width: 100%;
+  padding: calc(var(--_space) * 2.5) calc(var(--_space) * 2.5);
+  border: 0;
+  border-radius: var(--_radius);
+  background: transparent;
+  color: var(--_fg);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.12s;
+}
+
+.sc-threads__item:hover {
+  background: var(--_wash);
+}
+
+.sc-threads__item:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: -2px;
+}
+
+.sc-threads__item--current {
+  background: var(--_wash);
+  font-weight: var(--_font-weight-medium);
+}
+
+.sc-threads__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-threads__badge {
+  flex-shrink: 0;
+  min-width: 20px;
+  padding: 1px calc(var(--_space) * 1.5);
+  border-radius: var(--_radius-full);
+  background: var(--_accent);
+  color: var(--_accent-fg);
+  font-size: var(--_font-size-xs);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--_font-weight-medium);
+  text-align: center;
+}
+
+.sc-threads__empty {
+  margin: 0;
+  padding: calc(var(--_space) * 4) calc(var(--_space) * 3.5);
+  color: var(--_muted);
+}
+
 /* The tasks in the chat's place: the way back and their title, then each as an automation
    reads, a hairline between them. */
 .sc-tasks {