/* ShareOS — Share Ventures Design System 2.0.1
 * Canonical source: sharevc/design-system@77c19d40f8c4a75fdbc1a56d546eac9afa052308 */

@import url("./brand.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  scrollbar-color: var(--sv-gray-dark) transparent;
  scrollbar-width: thin;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  background: var(--sv-surface);
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--sv-ink);
  background: var(--sv-surface);
  font-family: var(--sv-font-sans);
  font-size: var(--sv-text-small);
  font-weight: 400;
  line-height: 1.5;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  border-radius: var(--sv-radius);
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sv-ink-secondary);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

::selection {
  color: var(--sv-ink);
  background: var(--sv-surface-dim);
}

.response-selection-actions {
  position: fixed;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border: 1px solid var(--sv-gray-xdark);
  box-shadow: none;
}

.response-selection-actions button {
  min-height: 32px;
  padding: 0 10px;
  color: inherit;
  font: inherit;
  font-size: var(--sv-text-caption);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.response-selection-actions button:hover,
.response-selection-actions button:focus-visible {
  color: var(--sv-inverse-ink);
  background: var(--sv-gray-xdark);
}

.icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.brand-mark {
  display: block;
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: calc(var(--sv-z-modal) + 1);
  top: var(--sv-space-4);
  left: 50%;
  min-height: 44px;
  padding: var(--sv-space-3) var(--sv-space-6);
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  font-weight: 500;
  text-decoration: none;
  transform: translate(-50%, calc(-100% - var(--sv-space-6)));
  transition: transform var(--sv-dur-fast) var(--sv-ease-out);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.app {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar-width, var(--sv-rail)) minmax(0, 1fr);
  width: 100%;
  /* Safari can leave a `svh` grid at its stale, chrome-expanded size after a
   * navigation, which pushes the final (composer) row below the clipped app.
   * `dvh` tracks browser chrome; the mobile override below also follows the
   * keyboard through VisualViewport. `vh` remains the older-browser fallback. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app.activity-open {
  grid-template-columns: var(--sidebar-width, var(--sv-rail)) minmax(0, 1fr) var(--sv-activity-rail);
}

/* Sidebar */

.sidebar {
  position: relative;
  z-index: var(--sv-z-nav);
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* see .main: implicit auto columns don't shrink */
  width: var(--sidebar-width, var(--sv-rail));
  min-width: 0;
  overflow: hidden;
}

.app.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.app.sidebar-collapsed.activity-open {
  grid-template-columns: 0 minmax(0, 1fr) var(--sv-activity-rail);
}

.app.sidebar-collapsed .sidebar {
  visibility: hidden;
  transform: translateX(-100%);
}

.sidebar-resize-handle {
  position: absolute;
  z-index: calc(var(--sv-z-nav) + 1);
  top: 0;
  bottom: 0;
  left: calc(var(--sidebar-width, var(--sv-rail)) - 4px);
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}

.sidebar-resize-handle::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: var(--sv-hairline-strong);
  content: "";
  opacity: 0;
  transition: opacity var(--sv-dur-fast) var(--sv-ease-out);
}

.sidebar-resize-handle:hover::after,
.sidebar-resize-handle:focus-visible::after,
.app.is-resizing-sidebar .sidebar-resize-handle::after { opacity: 1; }

.app.sidebar-collapsed .sidebar-resize-handle { display: none; }

.sidebar-head {
  container: sidebar-head / inline-size;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-3);
}

/* The rail is resizable down to 256px, and the wordmark cannot wrap or squeeze
 * (nowrap, and the S has a fixed ratio). Without a container query the brand
 * simply overflows *behind* the action icons at a narrow width, which is what a
 * compressed rail looked like. Below the width where both fit, the official S
 * stands alone — the same demotion the phone already uses, keyed to the rail
 * rather than the viewport. */
@container sidebar-head (max-width: 240px) {
  .brand .wordmark-text { display: none; }
}

.sidebar-head-actions { position: relative; display: flex; flex: none; gap: 2px; }
.sidebar-head-actions .icon-btn { width: 36px; height: 36px; flex-basis: 36px; }
.brand {
  display: flex;
  min-width: 0;
  /* Fail-safe for a rail narrower than any query anticipates: clip the mark
   * rather than let it slide under the header's controls. */
  overflow: hidden;
  color: var(--sv-black);
}

/* The wordmark inherits its ink. The header can render on either surface, so
 * bind white to the dark rail rather than leaving a white mark on light UI. */
.sv-dark .brand {
  color: var(--sv-white);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: inherit;
  background: transparent;
  border: var(--sv-hairline-w) solid transparent;
  transition:
    color var(--sv-dur-instant) var(--sv-ease-out),
    background-color var(--sv-dur-instant) var(--sv-ease-out),
    border-color var(--sv-dur-instant) var(--sv-ease-out);
}

.icon-btn:hover {
  color: var(--sv-ink);
  border-color: var(--sv-hairline);
}

@media (min-height: 600px) {
  .sidebar { grid-template-rows: var(--sv-space-16) auto minmax(0, auto) minmax(9rem, 1fr) var(--sv-space-16); }
  .sidebar-primary { min-height: 0; overflow-y: auto; }
}

/* Six destinations plus Compose use compact rows; search keeps the final full
   row. This preserves the primary Messaging/Mentions destinations
   without taking another chat-row worth of vertical space. */
.sidebar-primary-nav > :is([data-shell-view], #recents-btn) {
  grid-column: span 3;
  min-width: 0;
}

.sidebar-primary-nav > :is(#messages-btn, #mentions-btn, #artifacts-btn),
.sidebar-primary-nav > .sidebar-create {
  grid-column: span 4;
  min-width: 0;
}

.sidebar-primary-nav > :is([data-shell-view], #recents-btn, #messages-btn, #mentions-btn, #artifacts-btn) {
  justify-content: center;
}

.sidebar-primary-nav > :is([data-shell-view], #recents-btn) { padding-inline: 3px; }

.sidebar-primary-nav > :is([data-shell-view], #share-btn, #recents-btn, #messages-btn, #mentions-btn, #artifacts-btn) > span:not(.messages-badge, .sidebar-nav-count, .rail-count) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-primary-nav > :is(#messages-btn, #mentions-btn) .messages-badge {
  position: absolute;
  top: 1px;
  right: 2px;
  min-width: 14px;
  margin-left: 0;
  padding: 0 3px;
  font-size: var(--sv-text-micro);
}

.sidebar-search {
  grid-column: 1 / -1;
}

.sidebar-nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink-secondary);
  background: transparent;
  border: var(--sv-hairline-w) solid transparent;
  font-size: var(--sv-text-small);
  text-align: left;
}

.sidebar-nav-btn:hover,
.sidebar-nav-btn:focus-visible,
.sidebar-nav-btn.active {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
}

.sidebar-nav-btn.active { box-shadow: inset 2px 0 0 var(--sv-ink); }
.sidebar-nav-btn .icon { width: 18px; height: 18px; flex: 0 0 18px; }
.sidebar-nav-btn kbd { margin-left: auto; color: var(--sv-ink-tertiary); font-size: var(--sv-text-caption); }
.sidebar-nav-btn .messages-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  color: var(--sv-black);
  background: var(--sv-gray-light);
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-micro);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.new-chat-btn,
.auth-signout,
.auth-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-3);
  min-width: 160px;
  height: 48px;
  padding: 0 var(--sv-space-6);
  color: var(--sv-emphasis-ink);
  background: var(--sv-emphasis-surface);
  border: var(--sv-hairline-w) solid transparent;
  font-size: var(--sv-text-small);
  font-weight: 500;
  line-height: 1;
  transition:
    color var(--sv-dur-fast) var(--sv-ease-out),
    background-color var(--sv-dur-fast) var(--sv-ease-out),
    border-color var(--sv-dur-fast) var(--sv-ease-out);
}

.sidebar .new-chat-btn { width: 100%; }

/* One dominant creation action plus compact workspace shortcuts. */
.sidebar-create {
  display: block;
}

.sidebar-create .new-chat-btn {
  min-width: 0;
  height: 40px;
  justify-content: flex-start;
  padding: 0 var(--sv-space-3);
  font-size: var(--sv-text-small);
}

.sidebar-create .new-chat-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-section-head {
  gap: var(--sv-space-2);
  margin-top: var(--sv-space-3);
}

.sidebar-section-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  margin: -6px -6px -6px 0;
  background: transparent;
  border: var(--sv-hairline-w) solid transparent;
}
.sidebar-section-action .icon { width: 17px; height: 17px; }
.sidebar-section-action.is-spinning .icon { animation: sidebar-refresh-spin var(--workspace-spin) linear infinite; }
@keyframes sidebar-refresh-spin { to { transform: rotate(360deg); } }

/* Search in the rail is a real field, so a member types without opening
 * anything first. It keeps the .sidebar-nav-btn shape; only the interactive
 * part changes. */
.sidebar-search {
  cursor: text;
}

.sidebar-search .icon { flex: 0 0 auto; }

.sidebar-search input {
  min-width: 0;
  flex: 1 1 auto;
  /* The field is the row's tap target, so it fills the row's height rather
   * than sitting as a 24px text box inside it. */
  align-self: stretch;
  padding: 0;
  color: var(--sv-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
}
.sidebar-search input::-webkit-search-cancel-button { display: none; }

.sidebar-search-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 28px;
  padding: 0 var(--sv-space-1);
  color: var(--sv-ink-tertiary);
  background: transparent;
  border: 0;
}

.sidebar-search-open:hover,
.sidebar-search-open:focus-visible { color: var(--sv-ink); }
.sidebar-search-open kbd { font-size: var(--sv-text-caption); }
.sidebar-search-open .icon { display: none; width: 18px; height: 18px; }
/* Clearing text is a small, quiet act: the dialog-close X at full icon size
 * read as "close search". Same glyph and size as the Workboard clear. */
#chat-search-clear .icon { display: block; width: 14px; height: 14px; }

/* A phone has no ⌘K, and a thumb needs a real target. The shortcut hint gives
 * way to one search glyph on the trailing control, and the decorative leading
 * one stands down so the row still shows exactly one. */
@media (hover: none) and (pointer: coarse) {
  .sidebar-search > .icon { display: none; }
  /* The row's hairline is inside its 44px, so a stretched field would land at
   * 42. Grow the row rather than the target. */
  .sidebar-search { min-height: calc(44px + (var(--sv-hairline-w) * 2)); }
  .sidebar-search-open {
    width: 44px;
    height: 44px;
    margin-right: calc(var(--sv-space-3) * -1);
  }
  .sidebar-search-open kbd { display: none; }
  .sidebar-search-open .icon { display: block; }
}

.new-chat-btn .icon {
  width: 20px;
  height: 20px;
}

.new-chat-btn:hover,
.auth-signout:hover,
.auth-action:hover {
  color: var(--sv-ink);
  background: transparent;
  border-color: var(--sv-ink);
}

.sidebar-nav-btn:active,
.sidebar-create .new-chat-btn:active,
.sidebar-section-action:active { transform: scale(0.985); transition: transform var(--sv-dur-instant) var(--sv-ease-out); }

@media (prefers-reduced-motion: reduce) {
  .sidebar-nav-btn:active,
  .sidebar-create .new-chat-btn:active,
  .sidebar-section-action:active { transform: none; }
}

.sidebar-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: var(--sv-hairline-w) solid var(--sv-gray-xdark);
}

.sidebar-work-count {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.sidebar-work-panel[hidden] {
  display: none;
}

.session-rail {
  padding-bottom: var(--sv-space-2);
}

.sidebar-projects-head {
  margin-top: 0;
  border-top: 0;
}

@media (max-width: 700px) {
  .sidebar-primary-nav > :is([data-shell-view], #recents-btn, #messages-btn, #mentions-btn, #artifacts-btn),
  .sidebar-primary-nav .sidebar-create .new-chat-btn {
    min-height: 44px;
  }
}

/* A landscape phone or a window shortened by the software keyboard has less
 * room than the fixed header, actions, and profile footer need. Let the drawer
 * itself scroll in that case; otherwise its hidden overflow strands the project
 * list and profile below the viewport. */
@media (max-height: 420px) {
  .sidebar {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sidebar-head {
    position: sticky;
    z-index: 1;
    top: 0;
    background: var(--sv-surface);
    height: var(--sv-space-16);
  }
  .sidebar-scroll { overflow: visible; }
  .sidebar-foot { height: calc(var(--sv-space-16) + env(safe-area-inset-bottom)); }
}

/* A folder can hold folders. Depth is set on the row by web/app.js and the
   indent is clamped at four steps here: the rail is ~287px, so an unclamped
   tree would push the fifth level's name off it. Re-declared on every .project
   so a nested one recomputes from its own depth. */
.project {
  border-bottom: 0;
  --project-indent: calc(min(var(--project-depth, 0), 4) * 12px);
}

.project-row,
.thread-row {
  position: relative;
  display: flex;
  align-items: center;
  background: transparent;
}

.project-row,
.thread-row {
  transition: background-color var(--sv-dur-instant) var(--sv-ease-out), color var(--sv-dur-instant) var(--sv-ease-out);
}

.project-row {
  padding: 0 var(--sv-space-2) 0 calc(var(--sv-space-1) + var(--project-indent, 0px));
  font-weight: 500;
}

/* Reorder grip: reserved space at all times so revealing it on hover never
   shifts the row label. */
.project-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  flex: 0 0 20px;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  opacity: 0;
  cursor: grab;
  touch-action: none;
  transition: opacity var(--sv-dur-instant) var(--sv-ease-out);
}

.project-row:hover .project-drag,
.project-row:focus-within .project-drag,
.project.is-reordering .project-drag {
  opacity: 1;
}

.project-drag:focus-visible {
  opacity: 1;
  outline: var(--sv-hairline-w) solid var(--sv-hairline);
  outline-offset: -1px;
}

/* The row being dragged lifts out of the list; everything else keeps its own
   hairline so the drop position stays readable. */
.project.is-reordering {
  position: relative;
  z-index: 2;
  background: var(--sv-surface);
  box-shadow: none;
}

.project.is-reordering .project-row {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
}

.project.is-reordering .project-drag {
  cursor: grabbing;
}

/* A drag must not select row labels or hover-highlight rows it passes over. */
body.reordering-projects {
  cursor: grabbing;
  user-select: none;
}

body.reordering-projects .project-row:hover,
body.reordering-projects .thread-row:hover {
  color: var(--sv-ink-secondary);
  background: transparent;
}

body.reordering-projects .project.is-reordering .project-row {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
}

.thread-row {
  padding: 0 var(--sv-space-2) 0 calc(var(--sv-space-12) + var(--project-indent, 0px));
  font-weight: 400;
}

.thread-row[hidden], .project-chats-toggle[hidden] { display: none; }

.project-chats-toggle {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: var(--sv-space-2) var(--sv-space-2) var(--sv-space-2) calc(var(--sv-space-12) + var(--project-indent, 0px));
  border: 0;
  background: transparent;
  color: var(--sv-ink-secondary);
  font: inherit;
  font-size: var(--sv-text-small);
  text-align: left;
  cursor: pointer;
}

.project-chats-toggle:hover,
.project-chats-toggle:focus-visible {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
}

.chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--sv-space-6);
  transition: transform var(--sv-dur-fast) var(--sv-ease-out);
}

/* Live-agent status dot: a quiet ring when idle, a gentle accent pulse while a
   turn is in flight (including turns started in another tab or resumed after a
   restart). Sidebar rows and the thread header share the same mark. */
.status-dot {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  margin-right: var(--sv-space-2);
  border: 1px solid var(--sv-hairline-heavy);
  border-radius: var(--sv-radius);
  background: transparent;
  transition:
    background-color var(--sv-dur-fast) var(--sv-ease-out),
    border-color var(--sv-dur-fast) var(--sv-ease-out);
}

.status-dot.live {
  border-color: var(--workspace-working);
  background: var(--workspace-working);
  animation: status-breathe var(--workspace-pulse) ease-in-out infinite;
}

/* The halo is a pseudo-element so the dot itself never shifts layout. */
.status-dot.live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--workspace-working);
  border-radius: var(--sv-radius);
  animation: status-halo var(--workspace-pulse) var(--sv-ease-out) infinite;
}

/* Lit, but no longer breathing: the chat was working and its row is still the
   last thing anyone knows, but the pulse is the part that claims "this second"
   and nothing is confirming it. A hollow ring in the quiet ink, so it reads as
   an outstanding question rather than as green progress or as idle. */
.status-dot.live.unconfirmed {
  border-color: var(--sv-ink-tertiary);
  background: transparent;
  animation: none;
}

.status-dot.live.unconfirmed::after {
  content: none;
}

.project-row .status-dot {
  opacity: 0.55;
}

.project-row .status-dot.live {
  opacity: 1;
}

/* A chat row's marker is never faded by its state. Every row carries one, at
   full strength, and what a state changes is the ring colour, the fill and the
   glyph inside it — never whether there is a mark to read. Thread rows used to
   sit at 0.55 unless live or selected, which on a rail of ordinary chats read
   as no marker at all beside the rows that had one. */

/* The thread header's own dot is hidden while nothing is open; .status-dot sets
   a display, so this has to win over the UA's [hidden] rule for that to take. */
.status-dot[hidden] {
  display: none;
}

/* The running step's glyph is drawn inside the marker, centred on the box the
   dot already occupies, so a title keeps exactly the left edge it has when the
   chat is idle and nothing moves as work starts. The row's 3rem left padding
   absorbs the overhang. Green, quiet: the same accent the live dot spends. */
.thread-activity-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--workspace-working);
}

.thread-activity-icon .icon {
  width: 13px;
  height: 13px;
}

/* While the marker carries a glyph its own ring, fill and pulse step aside —
   the glyph is the state — but the box it occupies, and the space that box
   reserves on the row, are the ones an idle marker holds. */
.status-dot[data-step] {
  border-color: transparent;
  background: transparent;
  animation: none;
}

.status-dot[data-step]::after {
  content: none;
}


.thread-status {
  width: 7px;
  height: 7px;
  flex-basis: 7px;
  margin-right: var(--sv-space-1);
  border-color: var(--sv-hairline-strong);
}

@keyframes status-breathe {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

@keyframes status-halo {
  0% {
    opacity: 0.5;
    transform: scale(0.6);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.project-name,
.thread-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-name,
.thread-name {
  flex: 1 1 0;
}

.thread-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: normal;
}

/* What is running inside a project, on the project's own row. Quieter than the
   name in every way — tertiary ink, the rail's 11px, no weight — because the
   name is what the row is for and the chip is what it is doing. */
.project-activity {
  display: inline-grid;
  grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
  /* Takes the row's leftover width for its words, and shrinks a thousand times
     more readily than the name beside it: the chip gives up its last character
     before the name gives up its first. It stops at min-content, which — because
     the step's words are size-contained and ask for nothing — is exactly the
     glyph, the count and the clock. That is the floor: below it a rail cuts the
     name rather than the numbers. An expanded header's chip is the count alone,
     so its floor is the count. */
  flex: 1 1000 auto;
  min-width: min-content;
  /* Belt and braces for a browser without inline-size containment, where the
     floor above would be the whole sentence: whatever happens, the name keeps
     its share of the row. Never reached where containment works. */
  max-width: 59%;
  overflow: hidden;
  align-items: baseline;
  gap: 2px;
  margin-left: var(--sv-space-2);
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

/* With a chip beside it the name stops filling the row and sizes to its text,
   so the chip sits against the name rather than out at the rail's edge — and so
   the shrink above has a real content width to work against. */
.project-row:has(.project-activity) .project-name {
  flex: 0 1 auto;
}

/* The glyph is the one the chat's own row and the chip inside the conversation
   draw, at the rail's smaller scale, in the single accent this interface spends
   on live work. */
.project-activity-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  color: var(--workspace-working);
}

.project-activity-icon .icon {
  width: 12px;
  height: 12px;
}

/* The count and the clock are a few characters read as numbers, and a cut one
   is a lie rather than an abbreviation. What keeps them whole is the chip's
   min-content floor above; these two declare the same intent locally, so a
   later edit cannot quietly make them the parts that give. */
.project-activity-count,
.project-activity-elapsed {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* A zero basis, so the words ask for nothing and take only what the row has
   left over, and inline-size containment so the sentence inside contributes
   nothing to how narrow the chip may be asked to become. Together those are
   what make the chip's floor above the numbers rather than the sentence: the
   words vanish before the clock is clipped. */
.project-activity-text {
  flex: 1 1 0;
  min-width: 0;
  contain: inline-size;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The separator belongs to the join, not to either part: it is drawn only where
   a count and a status line actually meet, which is a collapsed header. An
   expanded one has no status element at all — see paintProjectHeaderChip, which
   builds the chip from the parts its rule names — so this selector has nothing
   to match there and no stray dot can trail the count. Both sides are guarded,
   so no arrangement of present and absent parts leads or dangles either. */
.project-activity-count:not(:empty) + .project-activity-text:not(:empty)::before {
  content: "· ";
}

/* A collapsed header between steps has a chat with no glyph and no clock, the
   same as that chat's own row does; an empty part takes no space and no gap
   rather than a blank one. This is not how an expanded header becomes
   count-only: nothing here is load-bearing for that, because an expanded header
   has no glyph, status or clock element to empty or hide in the first place. */
.project-activity-icon:empty,
.project-activity-count:empty,
.project-activity-text:empty,
.project-activity-elapsed:empty {
  display: none;
}
/* The name keeps the controls' --row-reserve below; on hover-capable rails the
   activity chip stays visible but may yield all of its width instead. */
@media (hover: hover) {
  .project-row:has(.project-activity).row-menu-open:not(:has(.inline-input)) .project-activity {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.thread-title-text,
.thread-live-status {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The row's second line: when this chat was last active, and which set it
   belongs to. Under the title, not beside it — the rail is ~287px wide and the
   title already yields --row-reserve to the action controls, so a stamp sharing
   its line would take a fifth of what is left of a long name. */
.thread-row-meta {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: baseline;
  gap: var(--sv-space-2);
}

.thread-row-stamp {
  flex: 0 0 auto;
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.thread-row.selected .thread-row-stamp,
.thread-row:hover .thread-row-stamp,
.thread-row:focus-within .thread-row-stamp {
  color: var(--sv-ink-secondary);
}

.thread-live-status {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  line-height: 1.2;
}

/* Reading what a chat is doing, on a rail ~287px wide: the step's words take
   whatever is left after the clock, and end in an ellipsis rather than wrapping
   the row onto a third line or pushing the rail wider. */
.thread-live-status.has-step {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 4px;
}

.thread-live-status-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The clock is the one part that is never cut: it is two or three characters,
   and a truncated duration is worse than none. */
.thread-live-elapsed {
  flex: 0 0 auto;
  color: var(--sv-ink-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.thread-row.selected .thread-live-elapsed,
.thread-row:hover .thread-live-elapsed {
  color: var(--sv-ink-secondary);
}

/* The open chat is always listed in the rail so its actions stay reachable,
   even when the rail is showing the other set. This names the set it is in. */
.thread-row-tag {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--sv-text-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The origin tag reads a shade brighter than the archived/active one: it is
   about where the work came from, not which set the rail is showing. */
.thread-row-source {
  flex: 0 0 auto;
  color: var(--sv-ink-secondary);
}

/* Picking chats to combine. The checkbox takes the place the row's actions held
   at the trailing edge, so the status marker keeps its own reserved leading slot
   and neither the mark nor the label moves as the rail arms; rows that cannot be
   a source stay legible but visibly out of play. */
.thread-pick {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0 0 0 var(--sv-space-2);
  accent-color: var(--sv-ink);
}

.thread-row[data-picked="true"] {
  color: var(--sv-ink);
  background: var(--sv-surface-dim);
}

.thread-row[data-picking="unavailable"] {
  opacity: 0.45;
}

/* Bar above the profile row while chats are being picked: what is selected, and
   the two ways out. It owns its own hairline so it reads as a mode, not a row. */
.merge-bar {
  display: grid;
  gap: var(--sv-space-2);
  padding: var(--sv-space-3);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
  background: var(--sv-surface-raised);
}

.merge-bar-summary {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  line-height: 1.35;
}

.merge-bar-actions {
  display: flex;
  gap: var(--sv-space-2);
}

/* The rail is ~287px: two full-size dialog buttons do not fit, and a control
   that overflows the rail cannot be pressed. */
.merge-bar .dialog-button {
  min-width: 0;
  height: 40px;
  flex: 1 1 0;
  padding: 0 var(--sv-space-2);
  font-size: var(--sv-text-small);
}

/* Any second line — the meta line (stamp, tag) or a live status — needs the
   taller row. The tag lives inside the meta line, so that selector covers it. */
.thread-row:has(.thread-row-meta),
.thread-row:has(.thread-live-status) {
  min-height: 58px;
}

/* Finished work reads quieter than work in play: one step down in ink, nothing
   moved and nothing hidden. Hover, focus and selection restore full contrast so
   a quiet chat is never harder to read than any other once you go to it. */
.thread-row[data-quiet="true"] .thread-title-text {
  color: var(--sv-ink-tertiary);
}

.thread-row[data-quiet="true"]:hover .thread-title-text,
.thread-row[data-quiet="true"]:focus-within .thread-title-text,
.thread-row[data-quiet="true"].selected .thread-title-text {
  color: inherit;
}

/* Unanswered is not progress; it must not borrow the working-green. */
.thread-live-status[data-phase="stalled"] { color: var(--sv-danger); }

.thread-row.selected .thread-live-status,
.thread-row:hover .thread-live-status {
  color: var(--sv-ink);
}

.thread-row.selected .thread-live-status[data-phase="stalled"],
.thread-row:hover .thread-live-status[data-phase="stalled"] {
  color: var(--sv-danger);
}

.row-actions {
  display: flex;
  /* Fixed-size targets that must never be pushed past the rail's edge: the row
   * label yields instead (it already truncates). */
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sv-dur-instant) var(--sv-ease-out);
}

.project-row:hover .row-actions,
.thread-row:hover .row-actions,
.project-row:focus-within .row-actions,
.thread-row:focus-within .row-actions {
  opacity: 1;
  pointer-events: auto;
}

/* Actions never participate in row layout. On devices without hover they are
   permanently visible; leaving them in the flex row made their invisible (or
   hidden) hit area consume the label, which read like a vertical line blocking
   text. Hover rows use the same ink as their parent; touch rows use the sidebar
   surface so the controls remain legible. */
.project-row .row-actions,
.thread-row .row-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding-left: var(--sv-space-2);
  background: var(--sv-gray-xdark);
}

/* An open menu keeps its row's controls visible even though the pointer has
   left the row for the menu. */
.project-row.row-menu-open .row-actions,
.thread-row.row-menu-open .row-actions {
  opacity: 1;
  pointer-events: auto;
}

/* How much room the controls take, declared once per row from the real slot
 * count (the read-only lock included) rather than guessed from nth-child. */
.project-row:has(.row-actions[data-count="1"]),
.thread-row:has(.row-actions[data-count="1"]) { --row-reserve: 44px; }
.project-row:has(.row-actions[data-count="2"]),
.thread-row:has(.row-actions[data-count="2"]) { --row-reserve: 84px; }
.project-row:has(.row-actions[data-count="3"]),
.thread-row:has(.row-actions[data-count="3"]) { --row-reserve: 116px; }

/* The controls are drawn over the row, so whenever they are visible the label
 * has to end before them: it truncates with an ellipsis (full text in the
 * tooltip) instead of disappearing under the icons. */
.project-row:is(:hover, :focus-within, .row-menu-open):not(:has(.inline-input)) .project-name,
.thread-row:is(:hover, :focus-within, .row-menu-open):not(:has(.inline-input)) .thread-name {
  margin-right: var(--row-reserve, 0px);
}

/* Renaming owns the whole row: the field needs the width more than the icons,
 * which would otherwise sit on top of the text being typed. */
.project-row:has(.inline-input) .row-actions,
.thread-row:has(.inline-input) .row-actions {
  opacity: 0;
  pointer-events: none;
}

@media (hover: none) {
  .project-row .row-actions,
  .thread-row .row-actions {
    background: var(--sv-surface);
  }

  /* Touch controls are permanently visible, so the reserve is permanent too. */
  .project-row:not(:has(.inline-input)) .project-name,
  .thread-row:not(:has(.inline-input)) .thread-name {
    margin-right: var(--row-reserve, 0px);
  }

  /* And on a touch rail the chip is what ends the row, so it takes the reserve
     instead — otherwise the name's margin pushes the chip under the controls. */
  .project-row:has(.project-activity):not(:has(.inline-input)) .project-name {
    margin-right: 0;
  }

  .project-row:has(.project-activity):not(:has(.inline-input)) .project-activity {
    margin-right: var(--row-reserve, 0px);
  }
}

/* Row overflow menu: named actions, anchored to the trigger and clamped to the
   viewport by script (the rail scrolls and can be the full screen width). */
.row-menu {
  position: fixed;
  z-index: calc(var(--sv-z-overlay) + 1);
  display: grid;
  min-width: 13.5rem;
  max-width: min(20rem, calc(100vw - 16px));
  padding: var(--sv-space-1);
  color: var(--sv-ink-secondary);
  --sv-danger: var(--sv-danger-inverse);
  --sv-attention: var(--sv-attention-inverse);
  background: var(--sv-black);
  border: var(--sv-hairline-w) solid var(--sv-gray-dark);
  box-shadow: none;
}

.row-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  width: 100%;
  min-height: 34px;
  padding: 0 var(--sv-space-3);
  color: var(--sv-gray-light);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--sv-text-caption);
  text-align: left;
  cursor: pointer;
}

.row-menu-item .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.row-menu-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-menu-item:hover,
.row-menu-item:focus-visible {
  color: var(--sv-white);
  background: var(--sv-gray-xdark);
  outline: none;
}

.row-menu-separator {
  height: var(--sv-hairline-w);
  margin: var(--sv-space-1) var(--sv-space-2);
  background: var(--sv-gray-dark);
}

/* The menu's own scope already selects dark-ground status colors. */
.row-menu-item.danger:hover,
.row-menu-item.danger:focus-visible {
  color: var(--sv-danger);
}

@media (hover: none) {
  .row-menu-item { min-height: 44px; }
}

.row-actions .icon-btn {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.row-actions .icon {
  width: 16px;
  height: 16px;
}

.row-actions .danger:hover {
  color: var(--sv-inverse-ink);
}

.threads {
  display: block;
}

.project:not(.open) .threads {
  display: none;
}

.threads-inner { border-top: 0; }

/* Subfolders live inside their parent's collapsible area, above its own chats,
   in their own container: the rail reorders chat rows against .threads-inner's
   first child every second, and mixing the two would shuffle folders under
   chats on the first repaint. */
.subprojects { display: block; }

.sidebar-empty {
  padding: var(--sv-space-8) var(--sv-space-6);
  font-size: var(--sv-text-small);
  line-height: 1.5;
}

.sidebar-empty p {
  margin: 0 0 var(--sv-space-4);
}

.sidebar-empty button {
  padding: 0;
  color: var(--sv-white);
  background: transparent;
  border-bottom: 1px solid currentColor;
  font-size: inherit;
  font-weight: 500;
}

.inline-input {
  width: 100%;
  height: 36px;
  min-width: 0;
  padding: 0 var(--sv-space-2);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline-max);
}

.sidebar-foot {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sv-space-2);
  min-width: 0;
  transition: background-color var(--sv-dur-fast) var(--sv-ease-out);
}

.sidebar-foot:hover,
.sidebar-foot:focus-within { background: var(--sv-surface-raised); }

/* Profile row: identity plus the per-viewer view switches (archived chats,
 * hidden workspaces), kept out of the primary nav. */
.profile-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--sv-space-2);
  min-width: 0;
  height: 52px;
  padding: 0 var(--sv-space-2);
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}

.profile-trigger:hover,
.profile-trigger:focus-visible,
.profile-trigger[aria-expanded="true"] { background: transparent; }

.profile-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--sv-ink-secondary);
  transform: rotate(-90deg);
  transition: transform var(--sv-dur-fast) var(--sv-ease-out);
}

.profile-trigger[aria-expanded="true"] .profile-chevron {
  transform: rotate(90deg);
}

.profile-menu {
  position: absolute;
  right: var(--sv-space-4);
  bottom: calc(100% + var(--sv-space-2));
  left: var(--sv-space-4);
  z-index: 5;
  display: grid;
  gap: 0;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: var(--sv-space-2);
  --sv-danger: var(--sv-danger-inverse);
  --sv-attention: var(--sv-attention-inverse);
  background: var(--sv-black);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  box-shadow: none;
}

.profile-menu[hidden] {
  display: none;
}

.profile-menu-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-3);
  margin-bottom: var(--sv-space-1);
  border-bottom: var(--sv-hairline-w) solid var(--sv-gray-xdark);
}

.profile-menu-identity strong,
.profile-menu-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu-identity strong { color: var(--sv-white); font-size: var(--sv-text-small); font-weight: 500; }
.profile-menu-identity span { color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); }

.profile-menu-group {
  display: grid;
  padding: var(--sv-space-2) 0;
}

.profile-menu-group[hidden] {
  display: none;
}

.profile-menu-group + .profile-menu-group {
  border-top: var(--sv-hairline-w) solid var(--sv-gray-xdark);
}

.profile-menu-heading {
  margin: 0;
  padding: 0 var(--sv-space-3) var(--sv-space-1);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  text-transform: none;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  width: 100%;
  height: 40px;
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  font-size: var(--sv-text-small);
  text-align: left;
  text-decoration: none;
}

.profile-menu-item:hover,
.profile-menu-item[aria-pressed="true"] {
  color: var(--sv-white);
  background: var(--sv-gray-xdark);
}

.profile-menu-item .icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.profile-menu-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  color: var(--sv-white);
}

.profile-avatar svg {
  display: block;
  height: 22px;
  width: auto;
  aspect-ratio: 828.3 / 933.4;
  fill: currentColor;
  stroke: none;
}

.profile-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
  line-height: 1.2;
}

.profile-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-name {
  color: var(--sv-white);
  font-size: var(--sv-text-small);
  font-weight: 500;
}

.profile-detail {
  overflow: hidden;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-button-slot,
#user-button {
  display: flex;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
}

.user-button-slot:empty,
#user-button:empty {
  display: none;
}

#user-button:empty + .profile-trigger { grid-column: 1 / -1; }

.user-button-slot .cl-userButtonAvatarBox,
.user-button-slot .cl-avatarBox,
#user-button .cl-userButtonAvatarBox,
#user-button .cl-avatarBox {
  width: 34px !important;
  height: 34px !important;
}

.sidebar-scrim {
  display: none;
}

/* Thread activity */

.activity-panel {
  position: relative;
  z-index: 1;
  display: none;
  grid-template-columns: minmax(0, 1fr); /* see .main: implicit auto columns don't shrink */
  min-width: 0;
  overflow: hidden;
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border-left: var(--sv-hairline-w) solid color-mix(in srgb, var(--sv-hairline) 72%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app.activity-open .activity-panel {
  display: grid;
}

.activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-4);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.activity-head h2 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
}

.activity-close-btn {
  display: none;
}

.activity-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.activity-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.assumptions-section,
.todos-section,
.agent-messages-section {
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.assumptions-section h3,
.todos-section h3,
.agent-messages-section h3,
.activity-section-heading {
  padding: var(--sv-space-4) var(--sv-space-6) var(--sv-space-2);
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

.assumptions-list {
  display: grid;
  gap: var(--sv-space-2);
  padding: 0 var(--sv-space-6) var(--sv-space-4) calc(var(--sv-space-6) + 1.25rem);
  margin: 0;
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  line-height: 1.45;
}

.assumptions-list li {
  padding-left: var(--sv-space-1);
  overflow-wrap: anywhere;
}

.assumptions-empty,
.todos-empty {
  padding: 0 var(--sv-space-6) var(--sv-space-4);
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
}

.todos-list {
  display: grid;
  gap: var(--sv-space-2);
  padding: 0 var(--sv-space-6) var(--sv-space-4);
  margin: 0;
  list-style: none;
}

.todos-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--sv-space-2);
  align-items: start;
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  line-height: 1.45;
  overflow-wrap: anywhere;
  position: relative;
}

/* Dependency depth reads as one cascade; flat lists carry no data-level. */
.todos-list li[data-level="1"] { margin-left: 0.85rem; }
.todos-list li[data-level="2"] { margin-left: 1.7rem; }
.todos-list li[data-level="3"] { margin-left: 2.55rem; }
.todos-list li[data-level="4"] { margin-left: 3.4rem; }

.todos-list li[data-level]:not([data-level="0"])::before {
  position: absolute;
  top: 0.55em;
  left: -0.6rem;
  width: 0.45rem;
  height: var(--sv-hairline-w);
  background: var(--sv-surface-dim);
  content: "";
}

.todo-body {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.todo-needs {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
}

.todos-list li.is-blocked .todo-text { color: var(--sv-ink-secondary); }
.todos-list li.is-blocked .todo-mark { border-style: dashed; }

.todo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-top: 0.22em;
  color: var(--sv-inverse-ink);
  font-size: var(--sv-text-micro);
  font-weight: 700;
  line-height: 1;
  border: var(--sv-hairline-w) solid var(--sv-hairline-heavy);
}

.todos-list li.is-done .todo-text { color: var(--sv-ink-secondary); text-decoration: line-through; }
.todos-list li.is-done .todo-mark { color: var(--sv-inverse-ink); background: var(--sv-inverse-surface); border-color: var(--sv-inverse-surface); }

/* Task graph: the same cascade as the to-dos, plus the states only a graph has
 * (needs a person, skipped) and the goal line. Running is shared: a checklist
 * row marked `- [>]` pulses the same way a running graph node does. */
.graph-section {
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.graph-section h3 {
  padding: var(--sv-space-4) var(--sv-space-6) var(--sv-space-2);
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

.graph-goal {
  padding: 0 var(--sv-space-6);
  margin: 0 0 var(--sv-space-1);
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.graph-status {
  padding: 0 var(--sv-space-6);
  margin: 0 0 var(--sv-space-3);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
}

.graph-list > li {
  display: block;
}

.graph-node > summary {
  list-style: none;
}

.graph-node > summary::-webkit-details-marker {
  display: none;
}

.graph-node-overview {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 16px;
  gap: var(--sv-space-2);
  align-items: start;
  min-height: 44px;
  padding: var(--sv-space-1) 0;
  cursor: pointer;
}

.graph-node-overview:focus-visible {
  outline: 2px solid var(--sv-ink-secondary);
  outline-offset: 3px;
}

.graph-node-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 20px;
  color: var(--sv-ink-secondary);
  transition: transform var(--sv-dur-fast) var(--sv-ease-out);
}

.graph-node-chevron .icon {
  width: 14px;
  height: 14px;
}

.graph-node[open] .graph-node-chevron {
  transform: rotate(90deg);
}

.graph-node-detail {
  display: grid;
  gap: var(--sv-space-3);
  padding: var(--sv-space-3) 0 var(--sv-space-3) calc(16px + var(--sv-space-2));
  margin-top: var(--sv-space-1);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
  color: var(--sv-ink);
}

.graph-node-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sv-space-2);
  padding: 0;
  margin: 0;
}

.graph-node-facts div {
  min-width: 0;
}

.graph-node-facts dt,
.graph-node-detail h4,
.graph-run h5 {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

.graph-node-facts dd {
  margin: 2px 0 0;
  font-size: var(--sv-text-caption);
  overflow-wrap: anywhere;
}

.graph-node-detail section {
  min-width: 0;
}

.graph-node-detail section > p,
.graph-node-detail section > ul {
  padding: 0;
  margin: var(--sv-space-1) 0 0;
  font-size: var(--sv-text-caption);
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.graph-node-detail section > ul {
  padding-left: 1rem;
}

.graph-node-detail section > ul > li {
  display: list-item;
}

.graph-execution {
  display: grid;
  gap: var(--sv-space-2);
}

.graph-run {
  display: grid;
  gap: var(--sv-space-1);
  padding: var(--sv-space-3);
  background: var(--sv-surface-dim);
}

.graph-run-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sv-space-2);
  font-size: var(--sv-text-caption);
}

.graph-run-head > span {
  color: var(--sv-ink-secondary);
  text-transform: capitalize;
}

.graph-run[data-status="failed"] .graph-run-head > span,
.graph-run[data-status="interrupted"] .graph-run-head > span,
.graph-run[data-status="needs_person"] .graph-run-head > span {
  color: var(--sv-ink);
  font-weight: 700;
}

.graph-run-meta,
.graph-run-copy,
.graph-execution-empty {
  padding: 0;
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.graph-run-copy {
  color: var(--sv-ink);
}

.graph-run h5 {
  margin-top: var(--sv-space-2);
}

.graph-tool-list {
  display: grid;
  gap: var(--sv-hairline-w);
  padding: 0;
  margin: 0;
  list-style: none;
  background: var(--sv-hairline);
}

.graph-tool-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sv-space-2);
  align-items: baseline;
  padding: var(--sv-space-2);
  background: var(--sv-surface-raised);
  font-size: var(--sv-text-caption);
}

.graph-tool-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.graph-tool-name::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--sv-space-2);
  background: var(--sv-hairline-heavy);
  border-radius: var(--sv-radius);
  vertical-align: 0.08em;
  content: "";
}

.graph-tool-list > li[data-status="running"] .graph-tool-name::before {
  background: var(--workspace-working);
  animation: graph-running var(--workspace-pulse) ease-in-out infinite;
}

.graph-tool-list > li[data-status="error"] .graph-tool-name::before {
  background: var(--sv-ink);
}

.graph-tool-status {
  color: var(--sv-ink-secondary);
  white-space: nowrap;
}

.graph-list li.is-running .graph-node-overview {
  padding-right: var(--sv-space-2);
  padding-left: var(--sv-space-2);
  margin-left: calc(-1 * var(--sv-space-2));
  background: color-mix(in srgb, var(--workspace-working) 10%, var(--sv-surface-raised));
  border-left: 2px solid var(--workspace-working);
}

.graph-list li.is-running .todo-mark,
.todos-list li.is-running .todo-mark {
  color: var(--sv-ink);
  border-color: var(--workspace-working);
  animation: graph-running var(--workspace-pulse) ease-in-out infinite;
}

.todos-list li.is-running .todo-text { font-weight: 600; }

.graph-live-signal {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.1rem var(--sv-space-2);
  color: var(--sv-ink);
  background: color-mix(in srgb, var(--workspace-working) 24%, var(--sv-surface-raised));
  border: var(--sv-hairline-w) solid color-mix(in srgb, var(--workspace-working) 60%, var(--sv-hairline));
  font-size: var(--sv-text-caption);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-caps);
  line-height: 1.3;
  text-transform: uppercase;
}

.graph-live-elapsed {
  color: var(--sv-ink);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@keyframes graph-running {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.graph-list li.is-needs-person .todo-mark {
  color: var(--sv-ink);
  border-color: var(--sv-ink);
  border-width: 2px;
}

.graph-list li.is-skipped .todo-text { color: var(--sv-ink-secondary); text-decoration: line-through; }
.graph-list li.is-skipped .todo-mark { border-style: dotted; }

.graph-artifacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-1) var(--sv-space-2);
  font-size: var(--sv-text-caption);
}

.graph-artifacts a,
.graph-artifacts span {
  color: var(--sv-ink-secondary);
  text-decoration: underline;
  text-decoration-color: var(--sv-hairline-heavy);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.graph-artifacts span { text-decoration-style: dotted; }

@media (prefers-reduced-motion: reduce) {
  .graph-list li.is-running .todo-mark,
  .todos-list li.is-running .todo-mark,
  .graph-tool-list > li[data-status="running"] .graph-tool-name::before { animation: none; }
  .graph-node-chevron,
  .activity-row-chevron,
  .activity-site-shot { transition: none; }
}

.agent-messages-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.agent-message {
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}

.agent-message-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: 44px;
  padding: var(--sv-space-3) var(--sv-space-6);
  cursor: pointer;
  list-style: none;
}

.agent-message-head::-webkit-details-marker { display: none; }

.agent-message-direction {
  padding: 2px 6px;
  color: var(--sv-ink);
  font-size: var(--sv-text-caption);
  font-weight: 700;
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  text-transform: uppercase;
}

.agent-message[data-direction="received"] .agent-message-direction {
  background: var(--sv-surface-sunken);
  border-color: var(--sv-hairline-heavy);
}

.agent-message-peer {
  overflow: hidden;
  font-size: var(--sv-text-small);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-message-exchange { margin: 0; }

.agent-message-head:focus-visible {
  outline: 2px solid var(--sv-ink-secondary);
  outline-offset: -2px;
}

.agent-message-exchange[open] .activity-row-chevron { transform: rotate(90deg); }

.agent-message-content {
  padding: var(--sv-space-3) var(--sv-space-6) var(--sv-space-4);
  color: var(--sv-ink);
  font-size: var(--sv-text-caption);
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
}

.agent-message-content strong {
  display: block;
  margin-bottom: var(--sv-space-1);
  font-size: var(--sv-text-small);
  text-transform: uppercase;
}

.agent-message-content p {
  margin: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.agent-message-content p + strong {
  margin-top: var(--sv-space-3);
}

/* The agent room (web/app/15-agent-room.js). One text size, like everything
 * else: what makes a room readable here is measure, leading, space between
 * turns, and a face and a name on every post. The rail row is the entry point;
 * the reading view below is the reading surface. */
.agent-room-head {
  row-gap: var(--sv-space-1);
  padding-bottom: var(--sv-space-2);
}

/* The closed row's quote: who spoke last and a clipped line of what they said,
 * so the rail says what the agents are discussing and not only how many times
 * they did. Wraps inside the rail rather than running off it. */
.agent-room-latest {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  color: var(--sv-ink-secondary);
  line-height: var(--sv-leading-body);
  overflow-wrap: anywhere;
}

.agent-room-latest-who {
  color: var(--sv-ink);
  font-weight: 600;
}

.agent-room-content {
  display: grid;
  gap: var(--sv-space-3);
}

.room-turn {
  display: grid;
  gap: var(--sv-space-1);
  min-width: 0;
}

/* One turn ends where the next speaker starts. */
.room-turn + .room-turn {
  padding-top: var(--sv-space-3);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}

.room-seat-avatar {
  width: 20px;
  height: 20px;
}

.room-turn-text {
  margin: 0;
  line-height: var(--sv-leading-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.room-turn-text + .room-turn-text {
  margin-top: var(--sv-space-2);
}

.agent-room-read {
  justify-self: start;
  max-width: 100%;
  min-height: 44px;
  padding: var(--sv-space-2) var(--sv-space-3);
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
  border: var(--sv-hairline-w) solid var(--sv-hairline-heavy);
  font: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

.agent-room-read:hover { background: var(--sv-surface-raised); }

.agent-room-read:focus-visible {
  outline: 2px solid var(--sv-ink-secondary);
  outline-offset: 2px;
}

.activity-item {
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.activity-summary {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: start;
  gap: var(--sv-space-3);
  padding: var(--sv-space-4) var(--sv-space-6);
  cursor: pointer;
  list-style: none;
}

.activity-summary::-webkit-details-marker { display: none; }

.activity-summary:focus-visible {
  outline: 2px solid var(--sv-ink-secondary);
  outline-offset: -2px;
}

.activity-tool-group {
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.activity-tool-summary {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: start;
  gap: var(--sv-space-3);
  padding: var(--sv-space-4) var(--sv-space-6);
  cursor: pointer;
  list-style: none;
}

.activity-tool-summary::-webkit-details-marker {
  display: none;
}

.activity-tool-summary:focus-visible {
  outline: 2px solid var(--sv-ink-secondary);
  outline-offset: -2px;
}

.activity-tool-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 32px;
  transition: transform var(--sv-dur-fast) var(--sv-ease-out);
}

.activity-tool-chevron .icon {
  width: 16px;
  height: 16px;
}

.activity-tool-group details[open] .activity-tool-chevron {
  transform: rotate(90deg);
}

.activity-tool-hint::before {
  content: "Expand to view";
}

.activity-tool-group details[open] .activity-tool-hint::before {
  content: "Hide details";
}

.activity-tool-list {
  padding: 0;
  margin: 0;
  background: var(--sv-surface);
  list-style: none;
}

.activity-tool-entry {
  border-top: var(--sv-hairline-w) solid color-mix(in srgb, var(--sv-hairline) 64%, transparent);
}

.activity-tool-entry-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: start;
  gap: var(--sv-space-3);
  padding: var(--sv-space-3) var(--sv-space-6) var(--sv-space-3)
    calc(var(--sv-space-6) + 32px + var(--sv-space-3));
  cursor: pointer;
  list-style: none;
}

.activity-tool-entry-summary::-webkit-details-marker { display: none; }

.activity-tool-entry-summary:focus-visible {
  outline: 2px solid var(--sv-ink-secondary);
  outline-offset: -2px;
}

.activity-tool-entry-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--sv-space-1);
}

.activity-tool-entry-title {
  overflow: hidden;
  color: var(--sv-ink);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-tool-entry-detail {
  overflow: hidden;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-tool-entry-detail.is-mono {
  font-family: var(--sv-font-mono);
  font-size: calc(var(--sv-text-caption) - 1px);
}

/* Why a call failed: the line a reader needs, without opening the row. */
.activity-tool-entry-reason {
  display: -webkit-box;
  overflow: hidden;
  color: var(--sv-ink);
  font-family: var(--sv-font-mono);
  font-size: calc(var(--sv-text-caption) - 1px);
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.activity-tool-entry-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  line-height: 1.3;
}

.activity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--sv-ink);
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
}

.activity-icon .icon {
  width: 16px;
  height: 16px;
}
.activity-icon .agent-orb { width: 20px; height: 20px; }

.activity-row-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 32px;
  color: var(--sv-ink-secondary);
  transition: transform var(--sv-dur-fast) var(--sv-ease-out);
}

.activity-row-chevron .icon { width: 14px; height: 14px; }
.activity-disclosure[open] > .activity-summary .activity-row-chevron,
.activity-tool-disclosure[open] > .activity-tool-entry-summary .activity-row-chevron {
  transform: rotate(90deg);
}

.activity-item[data-status="running"] .activity-icon,
.activity-tool-group[data-status="running"] .activity-icon {
  background: var(--sv-surface-sunken);
  border-color: var(--sv-hairline-heavy);
}

.activity-item-main {
  min-width: 0;
}

.activity-item-meta,
.activity-item-status {
  display: flex;
  align-items: center;
}

.activity-item-meta {
  justify-content: space-between;
  gap: var(--sv-space-2);
  margin-bottom: var(--sv-space-1);
}

.activity-kind,
.activity-time,
.activity-item-status {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  line-height: 1.3;
}

.activity-kind {
  overflow: hidden;
  letter-spacing: var(--sv-tracking-caps);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.activity-time {
  flex: 0 0 auto;
  font-weight: 400;
}

.activity-title {
  display: block;
  overflow: hidden;
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-summary:hover,
.activity-tool-entry-summary:hover,
.agent-message-head:hover {
  background: var(--sv-surface);
}

.activity-detail {
  display: -webkit-box;
  margin-top: var(--sv-space-1);
  overflow: hidden;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.activity-message {
  display: block;
  margin-top: var(--sv-space-1);
  overflow: hidden;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-expanded {
  display: grid;
  gap: var(--sv-space-3);
  padding: var(--sv-space-3) var(--sv-space-6) var(--sv-space-4)
    calc(var(--sv-space-6) + 32px + var(--sv-space-3));
  border-top: var(--sv-hairline-w) solid color-mix(in srgb, var(--sv-hairline) 64%, transparent);
}

.activity-expanded-meta,
.activity-expanded-section p,
.activity-outcome {
  padding: 0;
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.activity-expanded-section {
  display: grid;
  gap: var(--sv-space-1);
  min-width: 0;
}

.activity-expanded-section h4 {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

.activity-outcome {
  max-height: 20rem;
  overflow: auto;
  color: var(--sv-ink);
  font-family: inherit;
  white-space: pre-wrap;
}

.activity-site-preview {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  color: var(--sv-ink-secondary);
  background: var(--sv-surface-sunken);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  text-decoration: none;
}

.activity-site-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sv-space-3);
  font-size: var(--sv-text-caption);
  text-align: center;
  overflow-wrap: anywhere;
}

.activity-site-shot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity var(--sv-dur-fast) var(--sv-ease-out);
}

.activity-site-preview.has-shot .activity-site-shot { opacity: 1; }
.activity-site-preview.has-shot .activity-site-fallback { display: none; }

.activity-open-link {
  color: var(--sv-ink);
  font-size: var(--sv-text-caption);
  text-decoration: underline;
  text-decoration-color: var(--sv-hairline-heavy);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.activity-item-status {
  gap: 6px;
  margin-top: var(--sv-space-2);
}

.activity-status-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: var(--sv-gray-mid);
}

.activity-item[data-status="running"] .activity-status-dot {
  background: var(--workspace-working);
  animation: activity-pulse var(--workspace-pulse) ease-in-out infinite;
}

.activity-item[data-status="error"] .activity-status-dot {
  background: var(--sv-inverse-surface);
  outline: 1px solid var(--sv-hairline-max);
  outline-offset: 2px;
}

/* A coding run is a job, not a tool call: its card carries its own state word,
   its own clock, and the one control that opens its log. */
.activity-coding-status {
  flex-wrap: wrap;
  gap: var(--sv-space-2);
}

.activity-coding-status .activity-status-dot {
  margin-right: -2px;
}

.activity-coding-state {
  color: var(--sv-ink);
  font-weight: 500;
}

.activity-coding-elapsed,
.activity-coding-facts {
  color: var(--sv-ink-secondary);
  font-variant-numeric: tabular-nums;
}

.activity-item[data-coding-state="incomplete"] .activity-status-dot {
  background: var(--sv-surface);
  outline: 1px solid var(--sv-hairline-max);
  outline-offset: 1px;
}

.activity-coding-note {
  display: block;
  margin-top: var(--sv-space-1);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.activity-coding-inspect {
  display: block;
  margin-top: var(--sv-space-2);
}

.activity-coding-inspect-btn {
  padding: 2px 0;
  color: var(--sv-ink-secondary);
  font-family: inherit;
  font-size: var(--sv-text-caption);
  font-weight: 500;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
  background: none;
  border: 0;
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
  cursor: pointer;
}

.activity-coding-inspect-btn:hover {
  color: var(--sv-ink);
}

.activity-coding-inspect-btn:focus-visible {
  outline: 2px solid var(--sv-ink-secondary);
  outline-offset: 2px;
}

.activity-coding-log {
  max-height: 14rem;
  padding: var(--sv-space-2) var(--sv-space-3);
  margin: var(--sv-space-2) 0 0;
  overflow: auto;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  line-height: 1.45;
  white-space: pre-wrap;
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  overflow-wrap: anywhere;
}

.activity-tool-entry[data-status="running"] .activity-status-dot {
  background: var(--workspace-working);
  animation: activity-pulse var(--workspace-pulse) ease-in-out infinite;
}

.activity-tool-entry[data-status="error"] .activity-status-dot {
  background: var(--sv-inverse-surface);
  outline: 1px solid var(--sv-hairline-max);
  outline-offset: 2px;
}

@keyframes activity-pulse {
  50% {
    opacity: 0.35;
  }
}

.activity-empty {
  display: flex;
  min-height: 18rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sv-space-8) var(--sv-space-6);
  color: var(--sv-ink-secondary);
}

.activity-list:not(:empty) + .activity-empty {
  display: none;
}

.activity-empty p {
  margin: 0 0 var(--sv-space-2);
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  font-weight: 700;
}

.activity-empty span {
  max-width: 28ch;
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.5;
}

.activity-toggle-btn {
  position: relative;
}

.activity-count {
  position: absolute;
  top: 1px;
  /* Flush with the button box: a negative inset overhung the header's right
   * gutter on phones, where the gutter is 12px rather than 4rem. */
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  /* Cutout ring: matches the surface behind the badge so the count reads as
   * lifted off the header rather than welded to it. Follows the mode. */
  border: 2px solid var(--sv-surface);
  font-size: var(--sv-text-micro);
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.activity-toggle-btn.has-running .activity-count {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
}

.activity-scrim {
  display: none;
}

/* Side chat — the Context panel's third tab: a temporary conversation about
 * the open chat. Header (disclosure + Catch me up / Fork), log, composer. */

.side-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.side-chat[hidden] {
  display: none;
}

.side-chat-head {
  display: grid;
  gap: var(--sv-space-2);
  padding: var(--sv-space-2) var(--sv-space-4) var(--sv-space-3);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.side-chat-tag {
  padding: 0.0625rem var(--sv-space-1);
  margin-right: var(--sv-space-1);
  color: var(--sv-ink-secondary);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-caption);
  font-weight: 500;
}

.side-chat-note {
  margin: 0;
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
  line-height: 1.35;
}

.side-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-2);
}

.side-chat-action {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  min-height: var(--workspace-control-height, 32px);
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink);
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
  border-radius: var(--sv-radius);
  font: inherit;
  font-size: var(--sv-text-caption);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--sv-dur-instant) var(--sv-ease-out);
}

.side-chat-action .icon {
  width: 14px;
  height: 14px;
}

.side-chat-action:hover:not(:disabled) {
  background: var(--sv-surface-sunken);
}

.side-chat-action:disabled {
  color: var(--sv-ink-tertiary);
  cursor: default;
}

.side-chat-scroll {
  display: grid;
  align-content: start;
  gap: var(--sv-space-4);
  min-height: 0;
  padding: var(--sv-space-4) var(--sv-space-6);
  overflow-x: hidden;
  overflow-y: auto;
}

.side-chat-empty {
  margin: 0;
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
  line-height: 1.45;
}

.side-chat-turn {
  min-width: 0;
  font-size: var(--sv-text-caption);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.side-chat-question {
  padding: var(--sv-space-2) var(--sv-space-3);
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
  font-weight: 500;
  white-space: pre-wrap;
}

.side-chat-answer.md {
  font-size: var(--sv-text-caption);
}

.side-chat-answer.md > :first-child {
  margin-top: 0;
}

.side-chat-answer.md > :last-child {
  margin-bottom: 0;
}

.side-chat-coverage {
  padding-top: var(--sv-space-2);
  margin: var(--sv-space-2) 0 0;
  color: var(--sv-ink-tertiary);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--sv-text-caption);
}

.side-chat-pending {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  color: var(--sv-ink-secondary);
}

.side-chat-failure {
  padding: var(--sv-space-3);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
}

.side-chat-failure-text {
  margin: 0;
  color: var(--sv-ink-strong);
}

.side-chat-retry {
  padding: 0;
  margin-top: var(--sv-space-2);
  color: var(--sv-ink);
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.side-chat-composer {
  display: grid;
  gap: var(--sv-space-2);
  padding: var(--sv-space-3) var(--sv-space-6) var(--sv-space-4);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}

.side-chat-composer-row {
  display: flex;
  align-items: flex-end;
  gap: var(--sv-space-2);
  padding: var(--sv-space-2);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
}

.side-chat-composer textarea {
  flex: 1;
  min-width: 0;
  max-height: 140px;
  padding: 0;
  color: var(--sv-ink);
  background: none;
  border: 0;
  outline: none;
  font: inherit;
  font-size: var(--sv-text-body);
  line-height: 1.5;
  resize: none;
}

.side-chat-send {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border: 0;
  cursor: pointer;
}

.side-chat-send:disabled {
  color: var(--sv-ink-tertiary);
  background: var(--sv-surface-dim);
  cursor: default;
}

.side-chat-reset {
  justify-self: start;
  padding: 0;
  color: var(--sv-ink-secondary);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--sv-text-caption);
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
}

.side-chat-reset:hover:not(:disabled) {
  color: var(--sv-ink);
}

.side-chat-reset:disabled {
  color: var(--sv-ink-tertiary);
  cursor: default;
}

/* Phone: the Context panel is a full-screen overlay that follows the visual
 * viewport (--app-viewport-height), so the composer rides above the on-screen
 * keyboard without a jump. Mirrors SIDE_CHAT_PHONE_MEDIA in
 * web/app/13-catch-me-up.js — keep the two in step. */
@media (max-width: 760px) {
  .activity-panel .context-panel-tabs button,
  .side-chat-action,
  .side-chat-reset {
    min-height: 44px;
  }

  .side-chat-head,
  .side-chat-scroll,
  .side-chat-composer {
    padding-right: var(--sv-space-4);
    padding-left: var(--sv-space-4);
  }

  .side-chat-composer {
    padding-bottom: calc(var(--sv-space-2) + env(safe-area-inset-bottom, 0px));
  }

  .phone-keyboard .side-chat-composer {
    padding-bottom: var(--sv-space-2);
  }

  /* The text box is sized by its own line box, so padding (not a bare
   * min-height) keeps the caret on the row's axis beside a 44px Send. */
  .side-chat-composer textarea {
    min-height: 44px;
    padding: var(--sv-space-3) 0;
  }

  .side-chat-send {
    width: 44px;
    height: 44px;
  }
}

/* Main conversation */

.main {
  position: relative;
  display: grid;
  /* Rows-only templates still generate an implicit column, and that column is
   * auto-sized — so it floors at the widest child's min-content (the composer)
   * and refuses to shrink. On a zoomed-in phone (Safari page zoom shrinks the
   * effective viewport to ~220px) the whole shell rendered ~526px wide and got
   * clipped. Declaring the single column as minmax(0, 1fr) makes the grid track
   * the viewport instead of its contents. */
  grid-template-columns: minmax(0, 1fr);
  /* head, chat controls, conversation, pending decisions, queued follow-ups, composer. The
   * control dock sits under the header so steering reads before the transcript. The decision dock needs its own
   * track for the same reason as the queue: hiding it must not hand its height
   * to the composer on a phone. The queue needs its own
   * track: an unlisted row is auto-placed after the last named one, which put
   * the conversation into an implicit row on top of the composer and left the
   * queue's controls underneath the transcript, unclickable.
   *
   * The queue track sits between the conversation and the composer, not under
   * the header: an instruction the member just typed belongs next to the box
   * they typed it in, not as a banner over the transcript they are reading.
   *
   * The tracks are named explicitly rather than positional. `hidden` takes the
   * queue out of flow entirely, and with positional rows every later child then
   * shifted up a track: the composer inherited the conversation's 1fr and grew
   * to ~394px of chrome on a phone. */
  grid-template-rows:
    [head] var(--workspace-head-height, var(--sv-space-16))
    [pip-invite] auto
    [text-alerts-invite] auto
    [controls] auto
    [conversation] minmax(0, 1fr)
    [dock] auto
    [queue] auto
    [composer] auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--sv-ink);
}

.thread-head {
  grid-row: head;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-4);
  min-width: 0;
  padding: 0 var(--sv-gutter);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.thread-leading,
.thread-actions,
.thread-context-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.thread-leading {
  /* Take the slack: the title truncates, the action buttons never shrink. */
  flex: 1 1 auto;
  gap: var(--sv-space-3);
}

/* The live dot belongs to the title line, so it is a grid cell in that row
 * rather than a flex item nudged by a magic margin (which sat ~3px above the
 * title's cap axis on phones and read as a floating bullet). Centring on the
 * title's line box puts it exactly on the cap centre at every text size. */
.thread-heading {
  display: grid;
  /* The dot column is a fixed reservation, not auto: the title then keeps the
   * same indent whether or not the dot is rendered, so it does not jump
   * sideways when a turn starts. */
  grid-template-columns: calc(7px + var(--sv-space-2)) minmax(0, 1fr);
  grid-template-areas:
    "dot title"
    ".   sub";
  align-items: center;
  min-width: 0;
}

.thread-heading > .thread-status {
  grid-area: dot;
  margin-right: 0;
  justify-self: start;
}

.thread-heading > .thread-title {
  grid-area: title;
}

.thread-heading > .thread-subline {
  grid-area: sub;
}

/* Subtitle and turn status share one line instead of stacking a third row
 * (which grew the header and showed a second, duplicate live dot). */
.thread-subline {
  display: flex;
  align-items: baseline;
  gap: var(--sv-space-2);
  min-width: 0;
}

/* Who yields when the header runs out of room.
 *
 * The subline is where every header control's width is ultimately paid for, and
 * it was paid for in the wrong order: the workspace name and the turn's
 * duration kept their size while the turn's PHASE — the one perishable thing in
 * the header — was squeezed to nothing. At a docked Workboard on a 1280px
 * screen the "Working"/"Stopped" label was already down to 13px before this
 * panel existed. Shrink factors set the priority explicitly: the workspace name
 * goes first, then the meta ("· 5s · 1 tool"), and the phase keeps whatever is
 * left. */
.thread-subline .thread-context {
  flex: 0 100 auto;
}

.thread-title,
.thread-context {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-title {
  color: var(--sv-ink);
  font-weight: 700;
  line-height: 1.25;
}

.thread-context {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.25;
}

.thread-actions {
  /* Never let the action cluster be squeezed narrower than its buttons —
   * min-width:0 + intrinsic children pushed the last icon off-screen on phones. */
  flex: 0 0 auto;
  gap: var(--sv-space-1);
}

.thread-context-actions {
  display: flex;
  align-items: center;
  gap: var(--sv-space-1);
}

.thread-actions .icon-btn {
  color: var(--sv-ink);
}

/* The one trigger the chat's remaining actions live behind. It reads as pressed
 * while its menu is up, because the menu is body-anchored and a member who
 * loses track of which control opened it has nothing else to look at. */
.thread-more-btn[aria-expanded="true"] {
  border-color: var(--sv-hairline);
  background: var(--sv-surface-dim);
}

.share-thread-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-2);
  min-width: 96px;
  height: 40px;
  padding: 0 var(--sv-space-4);
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline-max);
  font-size: var(--sv-text-small);
  font-weight: 500;
  transition:
    color var(--sv-dur-fast) var(--sv-ease-out),
    background-color var(--sv-dur-fast) var(--sv-ease-out);
}

.share-thread-button .icon {
  width: 18px;
  height: 18px;
}

.share-thread-button:hover {
  color: var(--sv-ink);
  background: transparent;
}

.share-thread-button.active::after {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  background: var(--sv-ink);
  border: 1px solid var(--sv-hairline-max);
  content: "";
}

.share-thread-button:disabled {
  color: var(--sv-ink-secondary);
  background: var(--sv-surface-dim);
  border-color: var(--sv-hairline);
}

.share-thread-button.loading .icon {
  animation: share-button-pulse calc(var(--workspace-pulse) / 2) ease-in-out infinite alternate;
}

@keyframes share-button-pulse {
  to { opacity: 0.35; }
}

.sidebar-open-btn {
  display: none;
}

.app.sidebar-collapsed .sidebar-open-btn {
  display: inline-flex;
}

.messages {
  grid-row: conversation;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sv-space-12) var(--sv-gutter) var(--sv-space-16);
}

/* The reading column, and the thing the label lane is charged to. Docking the
 * Workboard takes 20rem off THIS element and nothing off the viewport — 514px
 * of column at a 1220px window, 717px at 1440px — so the lane has to tier off
 * the column, which no `@media` query can see. Inline-size containment makes
 * this a containing block for fixed descendants; that is safe here because
 * every overlay the transcript opens (row menu, response-selection toolbar,
 * toasts, the catch-up coach, the drop overlay) is appended to document.body,
 * never into the conversation. */
.messages-inner {
  container: transcript / inline-size;
  margin: 0 auto;
}

.msg,
.status-line,
.notice {
  width: 100%;
}

/* The line's last word (settleStatusLine): the turn's mark and total hold for
   a few seconds, then fade at the very end. The fade rides the delay, not the
   duration, so reduced motion still gets the seconds of reading time and
   merely skips the fade. */
.status-line[data-settled]:not([data-settled="stopped"]) {
  animation: status-settle var(--sv-dur-slow) var(--sv-ease-out) both;
  animation-delay: 5.4s;
}
.status-line[data-settled] .status-text { color: var(--sv-ink); font-weight: 500; }
.status-line[data-settled="done"] .status-activity-icon { color: var(--workspace-working); }
.status-line[data-settled="failed"] .status-activity-icon { color: var(--sv-danger); }

@keyframes status-settle {
  to { opacity: 0; }
}

.msg.assistant {
  display: grid;
  grid-template-columns: var(--sv-transcript-label) minmax(0, 1fr);
  gap: var(--sv-transcript-label-gap);
  padding-top: var(--sv-space-6);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}

.msg.user {
  display: flex;
  justify-content: flex-end;
}

.msg.user .bubble {
  padding: var(--sv-space-4) var(--sv-space-6);
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  font-size: var(--sv-text-small);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg.peer {
  display: grid;
  grid-template-columns: var(--sv-transcript-label) minmax(0, 1fr);
  gap: var(--sv-transcript-label-gap);
  padding: var(--sv-space-4) 0;
  background: var(--sv-surface-sunken);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.peer-role {
  display: flex;
  align-items: flex-start;
  gap: var(--sv-space-2);
  padding-left: var(--sv-space-4);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 500;
}

.peer-role .icon { width: 16px; height: 16px; }

.peer-message {
  max-width: 72ch;
  padding-right: var(--sv-space-4);
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  line-height: var(--sv-leading-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Share's half of a live call. Same two-column reading rhythm as an answer, but
 * deliberately not the answer treatment: no wordmark, no model receipt, and a
 * header that names what this is — a transcript, not something Share wrote. */
.msg.voice {
  display: grid;
  grid-template-columns: var(--sv-transcript-label) minmax(0, 1fr);
  gap: var(--sv-transcript-label-gap);
  padding-top: var(--sv-space-6);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}

.voice-role {
  display: flex;
  align-items: flex-start;
  gap: var(--sv-space-2);
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
  font-weight: 500;
}

.voice-role .icon { width: 16px; height: 16px; flex: none; }

.voice-message {
  max-width: 72ch;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  line-height: var(--sv-leading-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A pendant press: the press and the speech it carried, never the brief the
 * agent was handed around it. The speech window opens on demand. */
.msg.user .bubble.pendant-press { white-space: normal; }

.pendant-press-label {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  opacity: 0.8;
}

.pendant-press-label .icon { width: 14px; height: 14px; flex: none; }

.pendant-press > .pendant-press-transcript,
.pendant-press > .pendant-press-speech,
.pendant-press > .pendant-press-empty { margin-top: var(--sv-space-2); }

.pendant-press-transcript summary { cursor: pointer; }

.pendant-press-speech {
  white-space: pre-wrap;
  max-height: 40vh;
  overflow-y: auto;
}

.pendant-press-transcript[open] summary { margin-bottom: var(--sv-space-2); }

.msg-role {
  display: flex;
  align-items: center;
  color: var(--sv-ink);
}

/* Assistant attribution uses the composed brand mark, not a chip + "Share". */
.wordmark-role {
  font-size: 16px; /* design-system minimum for wordmark text */
}

/* Registered as a length so `72ch` resolves once, here, against the body's own
 * 17px and then inherits as that pixel value. An unregistered custom property
 * substitutes as text, so a 1.75em heading would re-resolve `ch` against its
 * own type and stretch past the measure. */
@property --sv-md-measure {
  syntax: "<length> | none";
  inherits: true;
  initial-value: none;
}

/* The reading measure moved to the prose children (below) so that a table can
 * use the whole message column. Capped here, a 5-column table got ~95px per
 * column and broke its headers mid-word. */
.msg.assistant .md {
  --sv-md-measure: 72ch;
  min-width: 0;
  max-width: none;
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  line-height: var(--sv-leading-body);
  overflow-wrap: anywhere;
}

.response-copy-button {
  color: var(--sv-ink-secondary);
}
.response-copy-button:hover { color: var(--sv-ink); }

/* ---------- Replying to an earlier message ---------- */

/* Per-message actions. Held back until the message is hovered or focused so a
   long thread stays a conversation, not a wall of buttons. Always visible on
   touch, where there is no hover to reveal them. */
.msg-actions {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--sv-space-1);
  margin-top: var(--sv-space-2);
  opacity: 0;
  transition: opacity var(--sv-dur-fast) var(--sv-ease-out);
}

.msg.user .msg-actions {
  justify-content: flex-end;
  width: min(72ch, 78%);
}

.msg:hover .msg-actions,
.msg:focus-within .msg-actions {
  opacity: 1;
}

/* A failed answer is not finished work: keep its recovery action visible
   instead of hiding it behind hover like the secondary copy/reply controls. */
.msg.failed .msg-actions { opacity: 1; }

.msg-retry-button {
  min-height: 32px;
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
  font-size: var(--sv-text-caption);
  font-weight: 500;
}
.msg-retry-button:hover:not(:disabled) { border-color: var(--sv-hairline-max); }
.msg-retry-button:disabled { color: var(--sv-ink-secondary); cursor: wait; }

.msg-action-btn {
  color: var(--sv-ink-secondary);
}
.msg-action-btn:hover { color: var(--sv-ink); }

/* The quoted turn above a reply: a hairline-led block, clickable to walk back
   to the original message. */
.msg-quote {
  display: block;
  width: 100%;
  margin: 0 0 var(--sv-space-3);
  padding: 0 0 0 var(--sv-space-3);
  color: inherit;
  background: none;
  border: 0;
  border-left: 2px solid var(--sv-hairline-strong);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.msg.assistant .msg-quote,
.msg.user .msg-quote {
  max-width: 72ch;
}

.msg-quote:hover { border-left-color: currentColor; }

.msg-quote-author {
  display: flex;
  align-items: center;
  gap: var(--sv-space-1);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.85;
}

.msg-quote-author .icon { width: 14px; height: 14px; }

/* Two lines of the quote is enough to identify the message; the rest is one
   click away in the original. */
.msg-quote-excerpt {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.45;
  opacity: 0.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.msg.user .msg-quote { border-left-color: var(--sv-hairline-strong); }


.msg-replying > .bubble,
.msg-replying > .md {
  box-shadow: none;
}

/* ---------- Who sent which prompt ----------

   Only rendered in chats with more than one writer. Name first, then the face,
   right-aligned against the bubble so the eye reads person → message. */
.msg-author {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sv-space-2);
  order: -1; /* above the bubble in the wrapping user row */
  width: 100%;
  margin-bottom: var(--sv-space-2);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  line-height: 1;
}

.msg-author-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The viewer's own turns are attributed but recede: the other people in the
   chat are the information. */
.msg-author.own { color: var(--sv-ink-tertiary); }

.msg-author-avatar {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.msg-author-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* Only a loaded photo covers the initials, so a failed request degrades to the
   initials rather than to an empty circle. */
.msg-author-avatar.has-photo img { opacity: 1; }
.msg-author-avatar.has-photo { color: transparent; }

/* A prompt that replaced an earlier, mistyped one. */
.msg-edited {
  display: block;
  margin-top: var(--sv-space-2);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  opacity: 0.6;
}

.msg-time {
  display: block;
  margin-top: var(--sv-space-2);
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1.2;
}

.msg.assistant > .msg-time,
.msg.peer > .msg-time {
  grid-column: 2;
}

.msg.user > .msg-time {
  width: min(72ch, 78%);
  text-align: right;
}

/* Editing a sent prompt: the bubble becomes the field, in place, at the same
   width, so the correction is made where the mistake is. */
.prompt-editor {
  display: flex;
  width: min(72ch, 78%);
  flex-direction: column;
  gap: var(--sv-space-2);
  padding: var(--sv-space-3) var(--sv-space-4);
  background: var(--sv-surface-sunken);
  border: var(--sv-hairline-w) solid var(--sv-hairline-max);
}

.msg.user .prompt-editor { margin-left: auto; }

.prompt-editor-input {
  width: 100%;
  max-height: 320px;
  padding: 0;
  color: var(--sv-ink);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: var(--sv-text-small);
  line-height: 1.55;
  resize: none;
}

.prompt-editor-input:focus { outline: none; }

.prompt-editor-actions {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
}

/* The opt-in to undo file changes made since the edited prompt. */
.prompt-editor-restore {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  cursor: pointer;
}

.prompt-editor-restore-input {
  margin: 0;
  accent-color: var(--sv-ink);
}

.prompt-editor-hint {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
}

.prompt-editor-btn {
  height: 30px;
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink);
  background: none;
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
  font: inherit;
  font-size: var(--sv-text-caption);
  cursor: pointer;
}

.prompt-editor-btn:hover { border-color: var(--sv-hairline-max); }

.prompt-editor-btn.primary {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border-color: var(--sv-hairline-max);
}

.msg-editing .msg-actions { opacity: 0; pointer-events: none; }

/* Composer chip: what the next message will be anchored to. */
.reply-context {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-width: 0;
  margin: 0 var(--sv-space-4) var(--sv-space-2);
  padding: var(--sv-space-2) var(--sv-space-2) var(--sv-space-2) var(--sv-space-3);
  color: var(--sv-ink);
  background: var(--sv-surface-dim);
  border-left: 2px solid var(--sv-hairline-max);
}

.reply-context > .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--sv-ink-secondary);
}

.reply-context-jump {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.reply-context-author {
  font-size: var(--sv-text-caption);
  font-weight: 500;
  line-height: 1.2;
}

.reply-context-excerpt {
  overflow: hidden;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply-context-clear {
  display: flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--sv-ink-secondary);
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.reply-context-clear:hover { color: var(--sv-ink); }

.contextual-next-move, .learning-receipts { grid-column: 2; }

/* On the last block, not on the container: an inline-block ::after on .md sits
   below the final paragraph and reads as an empty list item, not a caret. */
.md.streaming > :last-child::after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: var(--sv-space-2);
  background: currentColor;
  content: "";
  border-radius: 50%;
  vertical-align: 0.1em;
  animation: stream-breathe var(--workspace-pulse) ease-in-out infinite;
}

@keyframes stream-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .md.streaming > :last-child::after { animation: none; }
}

.msg-model {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  width: fit-content;
  margin-top: var(--sv-space-4);
  padding: 3px 7px;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-variant-numeric: tabular-nums;
}

.msg-model-logo {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.msg-model-logo-anthropic {
  -webkit-mask-image: url("/assets/anthropic.svg");
  mask-image: url("/assets/anthropic.svg");
}

.msg-model-logo-openai {
  -webkit-mask-image: url("/assets/openai.svg");
  mask-image: url("/assets/openai.svg");
}

.msg-model-logo-meta {
  background: #0467df;
  -webkit-mask-image: url("/assets/meta.svg");
  mask-image: url("/assets/meta.svg");
}

.msg-model-logo-google,
.msg-model-logo-remote {
  background: none;
  -webkit-mask: none;
  mask: none;
  object-fit: contain;
}

.status-line {
  display: grid;
  grid-template-columns: var(--sv-transcript-label) minmax(0, 1fr);
  gap: var(--sv-transcript-label-gap);
}

.status-chip {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-3);
  width: fit-content;
  min-height: 32px;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
}

.spinner {
  display: inline-block;
  width: 24px;
  height: 2px;
  flex: 0 0 24px;
  background: currentColor;
  transform-origin: left center;
  animation: progress-pulse var(--workspace-pulse) ease-in-out infinite;
}

@keyframes progress-pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scaleX(0.25);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

.notice {
  padding: var(--sv-space-4);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--sv-text-small);
  line-height: 1.5;
}

.notice-action {
  min-height: 2.75rem;
  padding: 0 var(--sv-space-4);
  margin-left: var(--sv-space-3);
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border: 0;
  font: inherit;
  cursor: pointer;
}

.notice-action:hover {
  background: var(--sv-gray-dark);
}

.loading-state,
.empty,
.thread-starter {
  width: min(100%, 64rem);
  margin: 0 auto;
}

/* The starter carries the operating overview, not a paragraph of prose, so it
   gets more of the desktop canvas than the conversation column's 64rem. */
.thread-starter {
  width: min(100%, 80rem);
}

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-3);
  min-height: 100%;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
}

.empty,
.thread-starter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.empty {
  justify-content: center;
  min-height: 100%;
  padding: var(--sv-space-16) 0;
}

.thread-starter {
  justify-content: flex-start;
  min-height: 0;
  padding: clamp(var(--sv-space-8), 6vh, var(--sv-space-16)) 0 var(--sv-space-12);
}

.empty h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--sv-ink);
  font-size: var(--sv-text-h1);
  font-weight: 400;
  line-height: var(--sv-leading-heading);
  letter-spacing: var(--sv-tracking-heading);
}

.empty p {
  max-width: 56ch;
  margin: var(--sv-space-6) 0 var(--sv-space-8);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-body);
  line-height: var(--sv-leading-body);
}

.suggestion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin-top: var(--sv-space-6);
  overflow: hidden;
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
}

.suggestion {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--sv-space-4);
  min-height: 92px;
  padding: var(--sv-space-5);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border-radius: var(--sv-radius);
  text-align: left;
  transition:
    color var(--sv-dur-fast) var(--sv-ease-out),
    background-color var(--sv-dur-fast) var(--sv-ease-out);
}

.suggestion:nth-child(odd) { border-right: var(--sv-hairline-w) solid var(--sv-hairline); }
.suggestion:nth-child(n + 3) { border-top: var(--sv-hairline-w) solid var(--sv-hairline); }

.suggestion:hover {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
}

.suggestion-icon {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 32px;
  height: 32px;
  color: inherit;
  background: transparent;
}

.suggestion-icon .icon {
  width: 24px;
  height: 24px;
}

.suggestion-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
  min-width: 0;
}

.suggestion-title {
  font-size: var(--sv-text-small);
  font-weight: 500;
  line-height: 1.25;
}

.suggestion-badge {
  display: inline-block;
  padding: 1px var(--sv-space-2);
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
  vertical-align: 2px;
  white-space: nowrap;
}

.suggestion-detail {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  font-weight: 400;
  line-height: 1.45;
}

.suggestion:hover .suggestion-detail {
  color: var(--sv-inverse-ink-secondary);
}

/* The chats working right now, above the actions.

   The card below asks what the fleet is doing; these rows are the part of that
   answer which is happening this second, and each one opens the chat it names.
   Quieter than a suggestion in every way — a caption-sized state, one line of
   what it is doing, one clock — because a running chat is a destination, not a
   proposition. Nothing running renders none of this: there is no empty state,
   no placeholder and no space held open for one. */
.starter-live {
  width: 100%;
  margin-top: var(--sv-space-6);
}

.starter-live-head {
  display: flex;
  align-items: baseline;
  gap: var(--sv-space-2);
  margin: 0 0 var(--sv-space-3);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

/* The count is read as a number and names the same fact as the project
   header's chip, so it is neither dimmed nor allowed to be cut. */
.starter-live-count {
  flex: 0 0 auto;
  color: var(--sv-ink);
  font-variant-numeric: tabular-nums;
}

.starter-live-scope {
  min-width: 0;
  overflow: hidden;
  color: var(--sv-ink-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.starter-live-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  overflow: hidden;
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
}

.starter-live-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--sv-space-4);
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: var(--sv-space-3) var(--sv-space-5);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border-radius: var(--sv-radius);
  text-align: left;
  transition:
    color var(--sv-dur-fast) var(--sv-ease-out),
    background-color var(--sv-dur-fast) var(--sv-ease-out);
}

.starter-live-row + .starter-live-row,
.starter-live-more { border-top: var(--sv-hairline-w) solid var(--sv-hairline); }

.starter-live-row:hover {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
}

.starter-live-row:focus-visible {
  outline: 2px solid var(--sv-ink-secondary);
  outline-offset: -2px;
}

/* The live word, with the dot the rail and the thread header already use — so
   the breathing mark, and its stand-down under prefers-reduced-motion and
   forced colors, are the ones this interface has already settled on rather
   than a second animation invented here. */
.starter-live-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.starter-live-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.starter-live-title {
  min-width: 0;
  overflow: hidden;
  font-size: var(--sv-text-small);
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.starter-live-action {
  display: flex;
  align-items: baseline;
  gap: var(--sv-space-2);
  min-width: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  line-height: 1.3;
}

.starter-live-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  color: var(--workspace-working);
}

.starter-live-icon .icon {
  width: 12px;
  height: 12px;
}

/* The words give first: a long command ellipsizes rather than pushing the
   clock off the row. */
.starter-live-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Between steps there is no action to name, and an empty span must take no
   space and no gap rather than leaving a stray separator behind. */
.starter-live-text:empty {
  display: none;
}

.starter-live-elapsed {
  flex: 0 0 auto;
  color: var(--sv-ink-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The separator belongs to the join, not to either side of it: a row between
   steps carries only its clock, and a leading "·" there is a dot with nothing
   on the other side of it. */
.starter-live-text:not(:empty) + .starter-live-elapsed::before {
  content: "· ";
}

.starter-live-row:hover .starter-live-state,
.starter-live-row:hover .starter-live-action,
.starter-live-row:hover .starter-live-elapsed {
  color: var(--sv-inverse-ink-secondary);
}

/* ---------- When nothing is confirming these rows any more ----------

   The rows stay: they are the only account of this workspace a member has, and
   removing them leaves less than nothing. What goes is the assertion — the
   state word says "Reconnecting", the mark stops breathing (.status-dot.live
   .unconfirmed above), the clocks stop where the evidence stopped, and this
   sentence in the heading says how long ago that was.

   Sentence case and normal tracking, against the caps of the heading it joins:
   the count beside it is a label, this is a thing being said. */
.starter-live-stale {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--sv-ink-tertiary);
  letter-spacing: normal;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

/* Everything the block still claims is a past reading, so it is spent as one:
   the words stay legible, the accents stand down. */
.starter-live[data-unconfirmed] .starter-live-count,
.starter-live[data-unconfirmed] .starter-live-state {
  color: var(--sv-ink-secondary);
}

.starter-live[data-unconfirmed] .starter-live-icon {
  color: var(--sv-ink-tertiary);
}

/* What the cap left out, said rather than dropped: a list that quietly stops at
   six reads as "this is all of it". */
.starter-live-more {
  margin: 0;
  padding: var(--sv-space-3) var(--sv-space-5);
  color: var(--sv-ink-tertiary);
  background: var(--sv-surface-raised);
  font-size: var(--sv-text-caption);
}

/* The new-chat starter's quieter peripheral view, below its live rows. */
.starter-peripheral {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-4);
  width: 100%;
  margin-top: var(--sv-space-5);
}

.starter-peripheral-note {
  margin: 0;
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
}

.starter-peripheral-head {
  margin: 0 0 var(--sv-space-2);
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

.starter-peripheral-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  overflow: hidden;
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
}

.starter-peripheral-row {
  display: flex;
  gap: var(--sv-space-4);
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: var(--sv-space-3) var(--sv-space-5);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border-radius: var(--sv-radius);
  text-align: left;
  transition: color var(--sv-dur-fast) var(--sv-ease-out), background-color var(--sv-dur-fast) var(--sv-ease-out);
}

.starter-peripheral-row + .starter-peripheral-row,
.starter-peripheral-more { border-top: var(--sv-hairline-w) solid var(--sv-hairline); }

.starter-peripheral-row:hover { color: var(--sv-inverse-ink); background: var(--sv-inverse-surface); }
.starter-peripheral-row:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: -2px; }

.starter-peripheral-state {
  flex: 0 0 auto;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.starter-peripheral-state:empty { display: none; }

.starter-peripheral-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.starter-peripheral-title {
  min-width: 0;
  overflow: hidden;
  font-size: var(--sv-text-small);
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.starter-peripheral-line {
  display: flex;
  align-items: baseline;
  gap: var(--sv-space-2);
  min-width: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  line-height: 1.3;
}

.starter-peripheral-detail {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.starter-peripheral-detail:empty { display: none; }
.starter-peripheral-time { flex: 0 0 auto; color: var(--sv-ink-tertiary); white-space: nowrap; }
.starter-peripheral-detail:not(:empty) + .starter-peripheral-time::before { content: "· "; }
.starter-peripheral-row:hover .starter-peripheral-state,
.starter-peripheral-row:hover .starter-peripheral-line,
.starter-peripheral-row:hover .starter-peripheral-time { color: var(--sv-inverse-ink-secondary); }

.starter-peripheral-more {
  margin: 0;
  padding: var(--sv-space-3) var(--sv-space-5);
  color: var(--sv-ink-tertiary);
  background: var(--sv-surface-raised);
  font-size: var(--sv-text-caption);
}

/* Markdown */

.md > * {
  max-width: var(--sv-md-measure);
}

/* The one child that is not prose: a grid wants columns, not a line length. */
.md > .table-wrap {
  max-width: 100%;
}

.md > * + * {
  margin-top: 0.8em;
}

.md > :first-child {
  margin-top: 0;
}

.md > :last-child {
  margin-bottom: 0;
}

.md h1,
.md h2,
.md h3,
.md h4 {
  margin-bottom: 0;
  color: var(--sv-ink);
  font-weight: 500;
  line-height: var(--sv-leading-heading);
  letter-spacing: var(--sv-tracking-heading);
}

.md h1 {
  font-size: var(--sv-text-h1);
}

.md h2 {
  font-size: var(--sv-text-h2);
}

.md h3 {
  font-size: var(--sv-text-h4);
}

.md h4 {
  font-size: 1em;
}

.md p {
  margin-bottom: 0;
}

.md ul,
.md ol {
  padding-left: 1.4em;
}

.md li + li {
  margin-top: 0.35em;
}

.md a {
  color: var(--sv-ink);
  text-decoration-color: currentColor;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--sv-dur-fast) var(--sv-ease-out);
}

.md a:hover {
  text-decoration-color: var(--sv-ink);
}

.md code {
  padding: 0.12em 0.3em;
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
  font-family: var(--sv-font-mono);
  font-size: 1em;
}

.md .codeblock {
  overflow: hidden;
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline-heavy);
}

.md .codebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 var(--sv-space-4);
  color: var(--sv-inverse-ink-secondary);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline-heavy);
  font-size: var(--sv-text-caption);
  font-weight: 400;
}

.code-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: 32px;
  padding: 0;
  color: var(--sv-inverse-ink);
  background: transparent;
  border-bottom: 1px solid transparent;
  font-size: var(--sv-text-caption);
}

.code-copy:hover,
.code-copy.copied {
  border-bottom-color: currentColor;
}

.code-copy .icon {
  width: 16px;
  height: 16px;
}

.md pre {
  margin: 0;
  padding: var(--sv-space-4);
  overflow-x: auto;
}

.md pre code {
  padding: 0;
  color: inherit;
  background: transparent;
  font-size: var(--sv-text-caption);
  line-height: 1.6;
}

.md blockquote {
  margin-left: 0;
  padding-left: var(--sv-space-4);
  color: var(--sv-ink-secondary);
  border-left: 1px solid var(--sv-hairline-max);
}

.md hr {
  margin: var(--sv-space-8) 0;
  border: 0;
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}

/* The wrapper is the sideways scroller. The table used to carry `display: block`
 * itself, which dropped it out of table layout, so `width: 100%` no longer meant
 * "fill the row" and the auto algorithm ran against a degenerate containing
 * block. */
.md .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Scroll shadows with nothing to tear down: the two `local` covers travel
   * with the content and hide the fixed `scroll` shadows at whichever edge has
   * nothing behind it. A streaming delta rewrites the message body wholesale,
   * so an observer parked on this node would be a leak per token. */
  background:
    linear-gradient(to right, var(--sv-surface) 45%, transparent) 0 0 / 1.5rem 100% no-repeat local,
    linear-gradient(to left, var(--sv-surface) 45%, transparent) 100% 0 / 1.5rem 100% no-repeat local,
    linear-gradient(to right, var(--sv-hairline-strong), transparent) 0 0 / 0.75rem 100% no-repeat scroll,
    linear-gradient(to left, var(--sv-hairline-strong), transparent) 100% 0 / 0.75rem 100% no-repeat scroll;
}

/* The wrapper is a focus stop so a wide table can be scrolled from the keyboard;
 * it has to say so when it is reached that way. */
.md .table-wrap:focus-visible {
  outline: 2px solid var(--sv-hairline-max);
  outline-offset: 2px;
}

.md .table-wrap > table {
  display: table;
  width: 100%;
  overflow: visible;
  border-collapse: collapse;
  table-layout: auto;
  /* --cols is the header count the renderer stamps on. Past six columns the
   * type steps down toward the caption size so more of the grid fits before the
   * wrapper has to scroll; anything narrower keeps the body size exactly. */
  font-size: clamp(
    var(--sv-text-caption),
    calc(var(--sv-text-small) + (6 - var(--cols, 6)) * 0.02rem),
    var(--sv-text-small)
  );
}

.md th,
.md td {
  /* No column collapses to a sliver: the wrapper scrolls instead. */
  min-width: 10ch;
  padding: var(--sv-space-3) var(--sv-space-4);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  /* Cancels the body's `overflow-wrap: anywhere`, which a cell inherits: it let
   * Chromium shrink a column below its longest word and break words
   * mid-character ("Demand generatio/n"). */
  overflow-wrap: break-word;
  word-break: normal;
  text-align: left;
  vertical-align: top;
}

/* A URL or an id is the one thing still allowed to break: whole, it would push
 * the table past its own floor and make every other column pay for it. */
.md td code,
.md td a {
  overflow-wrap: anywhere;
}

.md th {
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
  font-weight: 700;
}

.md .align-right { text-align: right; }
.md .align-center { text-align: center; }

/* A column the renderer read as figures: digit over digit, so the eye can
 * compare straight down it. */
.md .num {
  min-width: 6ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Only the figures hold their line. A multi-word header held on one line would
 * set the column's width for the whole table. */
.md td.num {
  white-space: nowrap;
}

/* Composer */

.composer-wrap {
  /* Pinned to its own named track: see .main. Without this, hiding the queue
   * moved every later child up a row and the composer took the conversation's
   * 1fr. The component's own look lives in workspace.css, section B. */
  grid-row: composer;
}

.mention-picker {
  position: absolute;
  z-index: var(--sv-z-nav);
  right: var(--sv-space-3);
  bottom: calc(100% - 4px);
  left: var(--sv-space-3);
  max-height: min(16rem, 45vh);
  overflow-y: auto;
  padding: var(--sv-space-2);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
}
.mention-picker[hidden] { display: none; }
.mention-option { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-height: 44px; padding: var(--sv-space-2) var(--sv-space-3); text-align: left; background: transparent; border: 0; }
.mention-option strong, .mention-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-option span { color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); }
.mention-option[aria-selected="true"], .mention-option:hover { background: var(--sv-surface-dim); }
.mention-manage { min-height: 40px; margin: 0 var(--sv-space-2) var(--sv-space-2); padding: 0 var(--sv-space-3); color: var(--sv-ink); background: transparent; border: var(--sv-hairline-w) solid var(--sv-hairline-strong); }
.mention-manage:hover, .mention-manage:focus-visible { border-color: var(--sv-hairline-max); }

/* Toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sv-space-6);
  z-index: 95;
  max-width: min(90vw, 34rem);
  transform: translateX(-50%);
  padding: var(--sv-space-3) var(--sv-space-4);
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline-max);
  font-size: var(--sv-text-small);
  line-height: 1.4;
}

.toast[hidden] {
  display: none;
}

/* Harness update: "updating" while the gateway restarts, "updated" plus a
   reload once the new build answers. Above the toast so they never overlap. */
.update-pill {
  left: auto;
  right: var(--sv-space-4);
  bottom: calc(var(--sv-space-6) + 3.5rem);
  z-index: var(--sv-z-toast);
  transform: none;
}

.message-popups {
  position: fixed;
  z-index: var(--sv-z-toast);
  top: var(--sv-space-4);
  right: var(--sv-space-4);
  display: grid;
  gap: var(--sv-space-2);
  width: min(calc(100vw - (var(--sv-space-4) * 2)), 22rem);
  pointer-events: none;
}

.message-popup {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sv-space-2) var(--sv-space-4);
  padding: var(--sv-space-4);
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  pointer-events: none;
  animation: message-popup-in var(--sv-dur-fast) var(--sv-ease-out);
}

.message-popup strong { padding-right: var(--sv-space-6); font-size: var(--sv-text-small); }
.message-popup p {
  grid-column: 1 / -1;
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--sv-inverse-ink-secondary);
  font-size: var(--sv-text-caption);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.message-popup-open {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 28px;
  padding: 0 6px;
  color: var(--sv-inverse-ink);
  background: transparent;
  border: 0;
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}
.message-popup-open::before {
  position: absolute;
  inset: -8px -6px;
  content: "";
}
.message-popup-open:hover,
.message-popup-open:focus-visible {
  background: rgb(255 255 255 / 0.1);
}
.message-popup-open,
.message-popup-dismiss { pointer-events: auto; }
.message-popup-dismiss {
  position: absolute;
  top: var(--sv-space-2);
  right: var(--sv-space-2);
  width: 32px;
  height: 32px;
  color: var(--sv-inverse-ink-secondary);
  background: transparent;
  font-size: 22px;
}
@keyframes message-popup-in { from { opacity: 0; transform: translateY(-8px); } }

/* A phone notification must not cover the control that opens navigation. Once
   the drawer is open it yields completely; the same notice returns unchanged
   when the drawer closes. */
@media (max-width: 900px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .message-popups {
    top: calc(var(--sv-space-16) + var(--sv-space-2));
  }

  .app.sidebar-open .message-popups {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .app.sidebar-open .message-popup {
    pointer-events: none;
  }
}

/* Lift clear of the composer when a thread is open. */
.app:has(#composer-wrap:not([hidden])) ~ .toast,
body:has(#composer-wrap:not([hidden])) .toast {
  bottom: 11rem;
}

/* Drag-and-drop overlay */

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sv-space-6);
  background: var(--sv-surface);
  backdrop-filter: none;
}

.drop-overlay[hidden] {
  display: none;
}

.drop-overlay-card {
  padding: var(--sv-space-6) var(--sv-space-8, 2rem);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline-max);
  outline: 2px solid var(--sv-ink);
  outline-offset: 4px;
  font-size: var(--sv-text-h4);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-heading);
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-2);
  padding: 0 var(--sv-space-4) var(--sv-space-3);
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  max-width: 100%;
  min-height: 30px;
  padding: 5px 7px 5px 9px;
  color: var(--sv-ink);
  background: var(--sv-surface-dim);
  font-size: var(--sv-text-caption);
  line-height: 1.2;
}

.attachment-chip img {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: cover;
  background: var(--sv-surface-raised);
}

.attachment-chip .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.attachment-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-chip.attachment-pdf {
  background: var(--sv-surface-sunken);
  border-left: 3px solid var(--sv-hairline-max);
}

.attachment-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: var(--sv-ink);
  border: 0;
  background: transparent;
  font-size: 19px;
  line-height: 1;
}

.attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  margin-left: auto;
  padding: 0;
  overflow: visible;
  color: var(--sv-ink);
  background: transparent;
  border: 0;
}

.attach-btn:hover { background: var(--sv-surface-dim); }

/* Zoomed-in phones (Safari page zoom / large accessibility text) can drive the
 * effective viewport under ~240px. The 20px gutter floor plus the fixed action
 * buttons no longer fit, so tighten the gutter rather than clip the composer. */
@media (max-width: 420px) {
  :root {
    --sv-gutter: clamp(0.75rem, 4vw, 4rem);
  }
}

/* Live call: a full-screen stage, not a panel. The call is the whole surface —
 * a cinematic dark room with one animated object (the S), the running
 * transcript beneath it, and exactly one green live indicator. */
.live-voice-stage {
  position: fixed;
  z-index: calc(var(--sv-z-modal) + 2);
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: var(--sv-space-6) var(--sv-gutter) var(--sv-space-8);
  overflow: hidden;
  background: var(--sv-black);
  animation: live-voice-enter var(--sv-dur-base) var(--sv-ease-out) both;
}
.live-voice-stage[hidden] { display: none; }
/* Everything behind the stage is inert while a call is up: no tabbing into a
 * composer you cannot see, no background scroll under it. */
body.is-calling .app { pointer-events: none; }
body.is-calling .live-voice-stage { pointer-events: auto; }

@keyframes live-voice-enter {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: none; }
}

.live-voice-bar {
  display: flex;
  align-items: center;
  gap: var(--sv-space-4);
  min-height: 32px;
}
.live-voice-state {
  display: inline-flex;
  flex: 0 1 auto;
  max-width: 100%;
  overflow-wrap: anywhere;
  align-items: center;
  gap: var(--sv-space-2);
  color: var(--sv-ink);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}
.live-voice-state::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--sv-radius);
  background: var(--sv-ink-tertiary);
}
.live-voice-state[data-kind="live"]::before { background: var(--workspace-working); }
.live-voice-state[data-kind="pending"]::before {
  background: var(--sv-ink-tertiary);
  animation: live-voice-pulse var(--workspace-pulse) ease-in-out infinite;
}
/* Errors read as a hollow marker plus the retry action, so the stage keeps to
 * the brand palette instead of introducing a red. */
.live-voice-state[data-kind="error"]::before {
  background: transparent;
  box-shadow: inset 0 0 0 var(--sv-hairline-w) var(--sv-ink);
}
.live-voice-state[data-kind="idle"]::before { background: var(--sv-ink-tertiary); opacity: 0.5; }
@keyframes live-voice-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.live-voice-thread {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Mic-input meter: the only proof the browser is actually hearing you. */
.live-voice-meter {
  flex: 0 0 clamp(60px, 14vw, 160px);
  height: 2px;
  background: var(--sv-hairline);
  opacity: 0;
  transition: opacity var(--sv-dur-fast) var(--sv-ease-out);
}
.live-voice-meter i { display: block; width: 0%; height: 100%; background: var(--sv-ink); transition: width var(--sv-dur-instant) linear; }
.live-voice-stage[data-active="true"] .live-voice-meter { opacity: 1; }

/* The avatar: one canvas, drawn from the official S geometry. No WebGL, no
 * video, no per-minute cost — it reacts to audio levels already in the page. */
.live-voice-figure {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: var(--sv-space-6) 0;
}
.live-voice-avatar {
  display: block;
  width: min(100%, 46vh);
  height: min(100%, 46vh);
  aspect-ratio: 1;
}
/* Camera preview: a picture-in-picture tile *inside* the figure band, never a
 * band of its own — the stage's four-row rhythm (bar / figure / transcript /
 * actions) is what keeps the controls reachable on a phone. Absolute so the
 * avatar stays centred whether the camera is on or off. */
.live-voice-preview {
  position: absolute;
  right: 0;
  bottom: var(--sv-space-2);
  display: grid;
  gap: var(--sv-space-2);
  justify-items: center;
  width: min(30vw, 180px);
  max-width: 40%;
}
.live-voice-preview[hidden] { display: none; }
.live-voice-preview video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--sv-gray-dark, var(--sv-surface));
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  object-fit: cover;
  /* You look at yourself in a mirror, not through a window. */
  transform: scaleX(-1);
}
.live-voice-preview-label {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  letter-spacing: var(--sv-tracking-caps);
  text-align: center;
  text-transform: uppercase;
}
/* Canvas-less browsers hide the avatar, not the band, once a preview is up:
 * the figure is the only place the tile can live. */
.live-voice-figure[data-avatar="off"] > .live-voice-avatar { display: none; }
.live-voice-figure[data-avatar="off"] > .live-voice-preview {
  position: static;
  width: min(100%, 46vh);
  max-width: 100%;
}

.live-voice-transcript {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-3);
  width: min(100%, 46rem);
  max-height: min(34vh, 20rem);
  margin: 0 auto;
  padding: var(--sv-space-2) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--sv-ink);
  font-size: var(--sv-text-body);
  line-height: var(--sv-leading-body);
  /* Older turns recede rather than being clipped mid-sentence. */
  mask-image: linear-gradient(to bottom, transparent, #000 var(--sv-space-8), #000 100%);
  scrollbar-width: none;
}
.live-voice-transcript::-webkit-scrollbar { width: 0; height: 0; }
.live-voice-transcript:empty { display: none; }
.live-voice-line { margin: 0; }
.live-voice-line span {
  display: block;
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}
.live-voice-line[data-final="false"] { color: var(--sv-ink-secondary); }
.live-voice-lookup {
  display: flex;
  align-items: baseline;
  gap: var(--sv-space-2);
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  font-style: italic;
}
.live-voice-lookup::before {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--sv-radius);
  background: var(--sv-ink-tertiary);
  content: "";
  transform: translateY(-2px);
}
.live-voice-lookup[data-state="running"]::before { animation: live-voice-pulse var(--workspace-pulse) ease-in-out infinite; }
.live-voice-lookup[data-state="done"]::before { background: var(--sv-ink); }
.live-voice-lookup[data-state="error"]::before {
  background: transparent;
  box-shadow: inset 0 0 0 var(--sv-hairline-w) var(--sv-ink);
}

.live-voice-actions {
  display: flex;
  justify-content: center;
  gap: var(--sv-space-3);
  padding-top: var(--sv-space-6);
}
.live-voice-end,
.live-voice-text {
  min-height: 48px;
  padding: 0 var(--sv-space-6);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-ink);
  font: inherit;
  font-size: var(--sv-text-small);
  font-weight: 500;
  transition:
    color var(--sv-dur-fast) var(--sv-ease-out),
    background-color var(--sv-dur-fast) var(--sv-ease-out);
}
.live-voice-text {
  border-color: var(--sv-hairline);
  color: var(--sv-ink-secondary);
}
.live-voice-text:hover { color: var(--sv-black); background: var(--sv-ink); }
.live-voice-end { color: var(--sv-black); background: var(--sv-ink); }
.live-voice-end:hover { color: var(--sv-ink); background: transparent; }
.live-voice-text[hidden] { display: none; }

/* Mute: the microphone reads before the word does. Padding is trimmed by the
 * width the glyph adds, so the control keeps the row's rhythm and the 48px
 * target the phone layout depends on. */
.live-voice-mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-2);
  padding-inline: var(--sv-space-5);
}
.live-voice-mute-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
/* Muted is a warning, not a preference: the struck-through microphone, the
 * word and the border all turn danger red. On this dark plate that is the
 * inverse variant — the light-mode red is unreadable here. */
.live-voice-mute[data-muted="true"] {
  color: var(--sv-danger-inverse);
  border-color: var(--sv-danger-inverse);
}
.live-voice-mute[data-muted="true"]:hover {
  color: var(--sv-black);
  background: var(--sv-danger-inverse);
}
.live-voice-state[data-muted="true"] { color: var(--sv-danger-inverse); }
.live-voice-state[data-muted="true"]::before { background: var(--sv-danger-inverse); }

/* Camera toggle: same geometry as mute so the row keeps its rhythm. A live
 * camera is a solid control rather than an outline — it reads as "on" without
 * spending the stage's one green, which belongs to the call-state dot. */
.live-voice-camera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-2);
  padding-inline: var(--sv-space-5);
}
.live-voice-camera-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
.live-voice-camera[data-camera="on"] {
  color: var(--sv-black);
  background: var(--sv-ink);
  border-color: var(--sv-ink);
}
.live-voice-camera[data-camera="on"]:hover {
  color: var(--sv-ink);
  background: transparent;
}
/* Starting the camera can sit behind a permission prompt; say so rather than
 * looking like a dead button. */
.live-voice-camera[data-camera="pending"] { opacity: 0.6; }

.voice-btn.is-recording {
  color: var(--sv-white);
  background: var(--sv-black);
}
.voice-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--sv-ink);
  font-size: var(--sv-text-caption);
  font-variant-numeric: tabular-nums;
}
.voice-status[hidden] { display: none; }
.voice-status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--sv-radius);
  background: var(--sv-danger);
  animation: voice-pulse var(--workspace-pulse) ease-in-out infinite;
}
.voice-status button {
  width: 22px;
  height: 22px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font-size: 20px;
  line-height: 1;
}
@keyframes voice-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .voice-status-dot { animation: none; } }
.attach-btn .icon {
  width: 22px;
  height: 22px;
  overflow: visible;
  stroke-width: 2;
}

.message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-2);
  margin-top: var(--sv-space-3);
}

.message-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 30px;
  padding: 6px 8px;
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--sv-text-caption);
}

/* An attachment the gateway will still serve: the same chip, now openable. */
a.message-attachment,
button.message-attachment {
  text-decoration: none;
  cursor: pointer;
}

/* A chip that opens the viewer is a button, so it must not inherit the
 * user-agent button box: same chip, same type, same colours as the inert one. */
button.message-attachment {
  font: inherit;
  font-size: var(--sv-text-caption);
  text-align: left;
}

a.message-attachment:hover,
a.message-attachment:focus-visible,
button.message-attachment:hover,
button.message-attachment:focus-visible {
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
  border-color: var(--sv-hairline-strong);
}

.message-attachment .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  stroke-width: 2;
}

.message-attachment .attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-attachment.attachment-image {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: stretch;
  width: min(100%, 216px);
  padding: 0;
  overflow: hidden;
}

.message-attachment.attachment-image img {
  display: block;
  width: 72px;
  height: 58px;
  object-fit: cover;
  background: var(--sv-surface-sunken);
}

/* An image chip painted before its bytes were read: the glyph holds the
   thumbnail's exact box, so the preview lands in place with no reflow. */
.message-attachment.attachment-image > .icon {
  box-sizing: border-box;
  width: 72px;
  height: 58px;
  flex: 0 0 72px;
  padding: 20px;
  background: var(--sv-surface-sunken);
}

.message-attachment.attachment-image .attachment-name {
  align-self: center;
  padding: 0 8px;
}

.message-attachment.attachment-pdf {
  border-left: 3px solid var(--sv-hairline-max);
}

/* An image shown in the chat. The box is fixed before the bytes arrive, so a
   streamed answer or a restored scroll position never moves when it paints. */
.message-attachment.attachment-thumb {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  width: min(100%, 360px);
  aspect-ratio: 4 / 3;
  max-height: 320px;
  margin: var(--sv-space-2) 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
}

.message-attachments .message-attachment.attachment-thumb { margin: 0; }

.attachment-thumb-frame {
  display: grid;
  place-items: center;
  min-height: 0;
  background: var(--sv-surface-sunken);
}

.attachment-thumb-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.message-attachment.attachment-thumb .attachment-name {
  padding: 6px 8px;
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}

.attachment-thumb-note {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

button.message-attachment.attachment-thumb:disabled {
  cursor: default;
}

@media (max-width: 600px) {
  .message-attachment.attachment-thumb { width: 100%; }
}

/* Artifacts a message links: one picture card each, so a page or a draft can
 * be found again by eye in a long thread. */
.message-artifacts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sv-space-2);
  max-width: 492px;
  margin-top: var(--sv-space-3);
}

.message-artifact {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.message-artifact:hover,
.message-artifact:focus-visible {
  color: var(--sv-ink);
  border-color: var(--sv-ink-secondary);
}

.message-artifact-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sv-surface-sunken);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.message-artifact-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sv-space-3);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  text-align: center;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Three lines at 1.3 fit the 16:9 frame of a 141px card; four lines at the
 * body line height did not, and the centered box cut off its first and last
 * line. Top-aligned, so text always starts at its first word. */
.message-artifact-fallback:has(.message-artifact-excerpt) {
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--sv-space-2);
}

.message-artifact-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.3;
  text-align: left;
}

.message-artifact-shot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity var(--sv-dur-fast) var(--sv-ease-out);
}

.message-artifact.has-shot .message-artifact-shot { opacity: 1; }
.message-artifact.has-shot .message-artifact-fallback { display: none; }

.message-artifact-text {
  display: grid;
  gap: 0;
  min-width: 0;
  padding: var(--sv-space-1) var(--sv-space-2) var(--sv-space-2);
}

/* The title is the one thing that tells two cards apart: two lines, never one
 * truncated line, and the full name on hover. */
.message-artifact-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--sv-text-caption);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.message-artifact-kind {
  overflow: hidden;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .message-artifacts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }
}

@media (max-width: 600px) {
  .message-attachment.attachment-image {
    grid-template-columns: 60px minmax(0, 1fr);
    width: min(100%, 190px);
  }

  .message-attachment.attachment-image img,
  .message-attachment.attachment-image > .icon {
    width: 60px;
    height: 48px;
    flex-basis: 60px;
  }
}

@media (max-width: 560px) {
  .live-voice-stage { padding: var(--sv-space-4) var(--sv-space-4) var(--sv-space-6); }
  .live-voice-bar { flex-wrap: wrap; row-gap: var(--sv-space-2); }
  .live-voice-meter { order: 3; flex-basis: 100%; }
  .live-voice-avatar { width: min(100%, 34vh); height: min(100%, 34vh); }
  /* Four controls wrap to two rows on a phone; the tile shrinks with them so
   * the figure band never pushes the transcript or the actions off-screen. */
  .live-voice-preview { width: min(34vw, 128px); bottom: 0; }
  .live-voice-preview-label { font-size: var(--sv-text-caption); }
  .live-voice-transcript { font-size: var(--sv-text-small); max-height: 30vh; }
  .live-voice-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--sv-space-4); }
  .live-voice-actions > button { width: 100%; min-width: 0; }
  .live-voice-end,
  .live-voice-text { min-height: 48px; flex: 1 1 auto; padding: 0 var(--sv-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .live-voice-state[data-kind="pending"]::before { animation: none; opacity: 1; }
  .live-voice-lookup[data-state="running"]::before { animation: none; }
  .live-voice-meter i { transition: none; }
}

/* Dialog */

.app-dialog {
  width: min(calc(100% - (var(--sv-space-6) * 2)), 30rem);
  max-width: none;
  padding: 0;
  color: var(--sv-ink);
  background: transparent;
  border: 0;
  opacity: 0;
  transform: translateY(var(--sv-space-4));
  transition:
    opacity var(--sv-dur-base) var(--sv-ease-out),
    transform var(--sv-dur-base) var(--sv-ease-out),
    display var(--sv-dur-base) allow-discrete,
    overlay var(--sv-dur-base) allow-discrete;
}

.app-dialog[open] {
  opacity: 1;
  transform: none;
}

@starting-style {
  .app-dialog[open] {
    opacity: 0;
    transform: translateY(var(--sv-space-4));
  }
}

.app-dialog::backdrop {
  background: rgb(0 0 0 / 0.6);
  opacity: 0;
  transition:
    opacity var(--sv-dur-base) var(--sv-ease-out),
    display var(--sv-dur-base) allow-discrete,
    overlay var(--sv-dur-base) allow-discrete;
}

.app-dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .app-dialog[open]::backdrop {
    opacity: 0;
  }
}

.dialog-card {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-4);
  padding: var(--sv-space-8);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline-max);
}
.chat-search-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-3); }
.chat-search-heading .icon-btn { color: var(--sv-ink); }
.chat-search-field { display: flex; align-items: center; gap: var(--sv-space-3); height: 50px; flex: 0 0 50px; padding: 0 var(--sv-space-4); border: var(--sv-hairline-w) solid var(--sv-hairline-max); }
.chat-search-field .icon { width: 19px; height: 19px; color: var(--sv-ink-secondary); }
.chat-search-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--sv-ink); background: transparent; font: inherit; font-size: var(--sv-text-small); }
/* The highlighted row's inset is a transparent border, not padding, so marking
 * a row active cannot change the width its text is laid out in — padding did,
 * and reflowed the row under the pointer mid-gesture. */
.chat-search-result { display: block; width: 100%; min-width: 0; padding: var(--sv-space-4) 0; color: inherit; background: transparent; border: 0 solid transparent; border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); border-left-width: var(--sv-space-3); border-right-width: var(--sv-space-3); text-align: left; }
.chat-search-result:hover, .chat-search-result.active { color: var(--sv-inverse-ink); background: var(--sv-inverse-surface); }
.chat-search-result-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sv-space-3); min-width: 0; font-size: var(--sv-text-small); font-weight: 500; }
.chat-search-result-title > span:first-child { min-width: 0; overflow-wrap: anywhere; }
/* The workspace name is context, never the identifier: it yields room to the
 * chat title rather than pushing it out of the row. */
.chat-search-result-project { flex: 0 1 auto; max-width: 45%; color: var(--sv-ink-secondary); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-search-result:hover .chat-search-result-project, .chat-search-result.active .chat-search-result-project { color: var(--sv-inverse-ink-secondary); }
.chat-search-result-snippet { display: block; margin-top: var(--sv-space-2); color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); line-height: 1.4; overflow-wrap: anywhere; }

/* New chat: project picker */
.project-picker-dialog { width: min(calc(100% - (var(--sv-space-6) * 2)), 34rem); }
.project-picker-card { gap: var(--sv-space-3); padding: var(--sv-space-6); }
.project-picker-results { max-height: min(50vh, 380px); overflow: auto; border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.project-picker-group { margin: var(--sv-space-4) 0 0; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); letter-spacing: 0.08em; text-transform: uppercase; }
.project-picker-group:first-child { margin-top: var(--sv-space-3); }
.project-picker-result .chat-search-result-snippet { margin-top: var(--sv-space-1); }
.project-picker-name { display: inline-flex; align-items: center; gap: var(--sv-space-2); min-width: 0; }
.project-picker-name .icon { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.7; }
.project-picker-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The folders above this one, so two same-named subfolders are one row each. */
.project-picker-path { color: var(--sv-ink-secondary); }
.project-picker-workspace { font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--sv-text-caption); }
.project-picker-note { margin: 0; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); }
.project-picker-card .dialog-actions { border-top: var(--sv-hairline-w) solid var(--sv-hairline); padding-top: var(--sv-space-4); }

/* People and messages: a focused workspace, not a full-page admin table. */
.messages-dialog { width: min(calc(100% - (var(--sv-space-6) * 2)), 64rem); }
.messages-dialog-card {
  gap: 0;
  height: min(calc(100vh - (var(--sv-space-6) * 2)), 46rem);
  height: min(calc(100dvh - (var(--sv-space-6) * 2)), 46rem);
  padding: 0;
  overflow: hidden;
  box-shadow: none;
}
.messages-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-4);
  min-height: 72px;
  padding: var(--sv-space-4) var(--sv-space-5);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}
.messages-dialog-head h2 { margin: 0; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.015em; }
.messages-dialog-head p { margin: 3px 0 0; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); }
.messages-layout { display: grid; grid-template-columns: 20rem minmax(0, 1fr); min-height: 0; flex: 1; }
.message-contacts { min-width: 0; overflow-y: auto; background: var(--sv-surface); border-right: var(--sv-hairline-w) solid var(--sv-hairline); }
.message-contact-list { display: grid; }
.message-contact {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  width: 100%;
  min-height: 60px;
  padding: 10px var(--sv-space-3);
  color: var(--sv-ink);
  background: transparent;
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
  text-align: left;
}
.message-contact:hover, .message-contact.selected { background: var(--sv-surface-raised); }
.message-contact.selected { box-shadow: inset 2px 0 var(--sv-ink); }
.message-contact-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.message-contact-top { display: flex; align-items: center; gap: var(--sv-space-2); min-width: 0; }
.message-contact-top strong { overflow: hidden; font-size: var(--sv-text-small); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.message-contact-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  overflow: visible;
  color: var(--sv-ink-secondary);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-micro);
  font-weight: 700;
  letter-spacing: .03em;
}
.message-contact-avatar.room { border-radius: var(--sv-radius); font-size: var(--sv-text-micro); font-weight: 500; }
.message-contact-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.message-online-dot { width: 8px; height: 8px; flex: none; background: var(--sv-gray-mid); border: 2px solid var(--sv-surface); border-radius: var(--sv-radius); }
.message-contact-avatar .message-online-dot { position: absolute; right: -1px; bottom: -1px; z-index: 1; width: 10px; height: 10px; }
.message-online-dot.online { background: var(--workspace-working); }
.message-contact-unread {
  min-width: 18px;
  margin-left: auto;
  padding: 0 5px;
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-micro);
  font-weight: 700;
  text-align: center;
}
.message-contact-preview { overflow: hidden; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
/* People rows carry presence as well as conversation: name + dot, context, and
 * when they were last on. A row nobody can message is still a real row — it is
 * presence — so it reads as text rather than an affordance. */
.person-row { position: relative; }
.person-row-when {
  align-self: flex-start;
  flex: none;
  margin-top: 2px;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}
.person-row.presence-only { cursor: default; }
.person-row.presence-only:hover { background: transparent; }
#people-online-list .message-online-dot { box-shadow: none; }
/* A column, not a fixed row grid: the reply banner, pending chips and room
 * context are all conditionally hidden, and a fixed template would hand the
 * thread an auto track and squeeze the composer off the screen. Every child is
 * intrinsic except the thread, which is the only scroller. */
.message-conversation { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sv-surface-raised); }
.message-conversation > * { flex: none; min-width: 0; }
.message-conversation-top { display: flex; align-items: stretch; min-width: 0; min-height: 60px; border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.message-conversation-head { display: flex; align-items: center; gap: var(--sv-space-3); min-width: 0; flex: 1; padding: var(--sv-space-2) var(--sv-space-4); overflow: hidden; }
.message-conversation-avatar { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; overflow: hidden; color: var(--sv-ink-secondary); background: var(--sv-surface); border: var(--sv-hairline-w) solid var(--sv-hairline-strong); border-radius: var(--sv-radius); font-size: var(--sv-text-micro); font-weight: 700; }
.message-conversation-avatar.room { border-radius: var(--sv-radius); font-size: var(--sv-text-micro); font-weight: 500; }
.message-conversation-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.message-conversation-copy { display: grid; gap: 1px; min-width: 0; }
.message-conversation-copy strong, .message-conversation-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-conversation-copy strong { font-size: var(--sv-text-small); font-weight: 500; }
.message-conversation-copy span { color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); }
.message-back-btn { display: none; flex: none; align-items: center; justify-content: center; width: 44px; color: var(--sv-ink); background: transparent; border: 0; border-right: var(--sv-hairline-w) solid var(--sv-hairline); cursor: pointer; }
.message-thread { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: var(--sv-space-3); padding: var(--sv-space-5); overflow-y: auto; overscroll-behavior: contain; background: var(--sv-surface); }
.direct-message { align-self: flex-start; max-width: min(76%, 34rem); padding: 10px var(--sv-space-3); background: var(--sv-surface-raised); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); }
.direct-message.outgoing { align-self: flex-end; color: var(--sv-inverse-ink); background: var(--sv-inverse-surface); }
.direct-message p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.direct-message > span { display: block; margin-top: var(--sv-space-1); color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); }
.direct-message.outgoing > span { color: var(--sv-inverse-ink-secondary); }
.message-context-link { display: inline-block; margin-top: var(--sv-space-2); color: inherit; font-size: var(--sv-text-caption); font-weight: 700; }
.direct-message.outgoing { border-color: var(--sv-inverse-surface); border-radius: var(--sv-radius); }
.message-composer { display: grid; gap: var(--sv-space-2); min-width: 0; padding: var(--sv-space-3) var(--sv-space-4); background: var(--sv-surface-raised); border-top: var(--sv-hairline-w) solid var(--sv-hairline); backdrop-filter: none; }
.message-composer textarea { display: block; width: 100%; min-height: 48px; max-height: 9rem; min-width: 0; resize: none; padding: var(--sv-space-3); color: var(--sv-ink); background: var(--sv-surface); border: var(--sv-hairline-w) solid var(--sv-hairline-strong); outline: 0; line-height: 1.4; }
.message-composer textarea::placeholder { color: var(--sv-ink-secondary); opacity: 1; }
.message-composer:focus-within textarea { border-color: var(--sv-hairline-max); }
.message-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-3); min-width: 0; }
.message-composer-tools { display: flex; align-items: center; gap: var(--sv-space-1); min-width: 0; }
.message-composer .dialog-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sv-space-2); min-width: 76px; height: 36px; flex: none; padding: 0 var(--sv-space-3); }
.message-composer .dialog-button .icon { width: 15px; height: 15px; }
.message-error { min-height: 1.25rem; margin: 0; padding: 0 var(--sv-space-3) var(--sv-space-2); color: var(--sv-danger); font-size: var(--sv-text-caption); }
.message-empty { margin: var(--sv-space-4); color: var(--sv-ink-secondary); font-size: var(--sv-text-small); line-height: 1.4; }

/* Rooms */
.message-rail-group + .message-rail-group { border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.message-rail-title {
  margin: 0;
  padding: var(--sv-space-3) var(--sv-space-3) var(--sv-space-2);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.message-room .message-contact-top strong::before { content: none; }
.group-message-author { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sv-space-1); font-size: var(--sv-text-caption); font-weight: 700; }
.room-person-avatar { display: inline-flex; width: 22px; height: 22px; flex: none; align-items: center; justify-content: center; overflow: hidden; color: var(--sv-inverse-ink); background: var(--sv-inverse-surface); border: 1px solid var(--sv-inverse-ink); border-radius: var(--sv-radius); font-size: var(--sv-text-micro); font-weight: 700; letter-spacing: .02em; line-height: 1; }
.room-participants { display: flex; flex: none; align-items: center; margin-left: auto; padding-left: var(--sv-space-2); }
.room-participants .room-person-avatar + .room-person-avatar { margin-left: -6px; }
.direct-message.outgoing .group-message-author { color: var(--sv-inverse-ink); }
.direct-message.outgoing .room-person-avatar { color: var(--sv-ink); background: var(--sv-surface-raised); border-color: var(--sv-hairline-max); }
.message-search-wrap { position: sticky; z-index: 4; top: 0; padding: var(--sv-space-3); background: var(--sv-surface); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); backdrop-filter: none; }
.message-search-wrap .chat-search-field { width: 100%; height: 42px; flex-basis: 42px; background: var(--sv-surface-raised); border-color: var(--sv-hairline-strong); }
.message-search-wrap .chat-search-field input { font-size: var(--sv-text-small); }
.message-search-results { position: absolute; z-index: 20; top: calc(100% - 2px); right: var(--sv-space-3); left: var(--sv-space-3); max-height: 18rem; overflow: auto; background: var(--sv-surface-raised); border: 1px solid var(--sv-hairline-strong); box-shadow: none; }
.message-search-result { width: 100%; min-height: 40px; padding: var(--sv-space-3); overflow: hidden; background: none; border: 0; border-bottom: 1px solid var(--sv-hairline); cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.room-context { display: flex; align-items: center; gap: var(--sv-space-2); min-width: 0; padding: var(--sv-space-2) var(--sv-space-4); color: var(--sv-ink-secondary); border-bottom: 1px solid var(--sv-hairline); font-size: var(--sv-text-caption); }
.room-context > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.room-context button, .room-context select, .message-action { min-height: 32px; }
.message-replying { padding: var(--sv-space-2) var(--sv-space-3); overflow: hidden; color: var(--sv-ink-secondary); background: var(--sv-surface); font-size: var(--sv-text-caption); text-overflow: ellipsis; white-space: nowrap; }
.message-parent-quote { display: block; width: 100%; margin-bottom: var(--sv-space-2); padding: var(--sv-space-2); overflow: hidden; color: inherit; background: color-mix(in srgb, currentColor 8%, transparent); border: 0; border-left: 3px solid currentColor; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.message-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--sv-space-2); }
.message-action { min-height: 28px; padding: 2px 8px; color: inherit; background: transparent; border: 1px solid color-mix(in srgb, currentColor 38%, transparent); cursor: pointer; font-size: var(--sv-text-caption); }
.message-action:hover, .message-action:focus-visible { border-color: currentColor; }
/* Reply stays in reach; the rest of the verbs are behind More so a bubble is a
 * message first and a toolbar second. */
.message-actions-more[hidden] { display: none; }
.message-actions-more { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.message-request-card, .message-work-card { display: grid; gap: 4px; margin-top: var(--sv-space-2); padding: var(--sv-space-3); color: var(--sv-ink); background: var(--sv-surface-raised); border: 1px solid var(--sv-hairline-strong); }
.message-highlight { outline: 3px solid var(--sv-ink); outline-offset: 2px; }
.message-deleted { color: var(--sv-ink-secondary); font-style: italic; }

/* Encryption, files, reactions, typing */
.message-lock { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 0 var(--sv-space-3); color: var(--sv-ink-secondary); background: transparent; border: 0; border-left: var(--sv-hairline-w) solid var(--sv-hairline); cursor: pointer; font-size: var(--sv-text-caption); letter-spacing: .02em; white-space: nowrap; }
.message-lock .icon { width: 13px; height: 13px; }
.message-lock[data-state="on"] { color: var(--sv-ink); font-weight: 500; }
.message-lock[data-state="off"] .icon, .message-lock[data-state="room"] .icon { opacity: .45; }
.message-security { padding: var(--sv-space-3) var(--sv-space-4); color: var(--sv-ink-secondary); background: var(--sv-surface); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); font-size: var(--sv-text-caption); }
.message-security p { margin: 0 0 var(--sv-space-2); }
.message-security h4 { margin: var(--sv-space-2) 0 4px; color: var(--sv-ink); font-size: var(--sv-text-small); letter-spacing: .08em; text-transform: uppercase; }
.message-security-note { color: var(--sv-ink-secondary); }
.message-device-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.message-device-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); min-width: 0; }
.message-device-list code { color: var(--sv-ink); font-size: var(--sv-text-caption); letter-spacing: .06em; }
.message-device-badge { padding: 1px 6px; color: var(--sv-inverse-ink); background: var(--sv-inverse-surface); font-size: var(--sv-text-caption); letter-spacing: .06em; text-transform: uppercase; }
.message-typing { padding: 0 var(--sv-space-4) var(--sv-space-2); color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); font-style: italic; }
.message-receipts { margin: 0; padding: 2px var(--sv-space-4); color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); text-align: right; }
.message-room-typing { margin: 0; padding: 2px var(--sv-space-4) var(--sv-space-2); color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); font-style: italic; }
.message-files { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); padding: var(--sv-space-2) var(--sv-space-3); border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.message-file-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 4px var(--sv-space-2); background: var(--sv-surface); border: 1px solid var(--sv-hairline-strong); font-size: var(--sv-text-caption); }
.message-file-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-file-chip .icon { width: 13px; height: 13px; flex: none; }
.message-file-remove { flex: none; min-width: 20px; min-height: 20px; padding: 0; color: inherit; background: none; border: 0; cursor: pointer; font-size: 14px; }
.message-file { margin-top: var(--sv-space-2); }
.message-file-label { display: flex; align-items: center; gap: var(--sv-space-2); width: 100%; min-width: 0; min-height: 36px; padding: var(--sv-space-2); color: inherit; background: color-mix(in srgb, currentColor 8%, transparent); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); cursor: pointer; text-align: left; }
.message-file-label strong { min-width: 0; overflow: hidden; font-size: var(--sv-text-caption); text-overflow: ellipsis; white-space: nowrap; }
.message-file-label .icon { width: 14px; height: 14px; flex: none; }
.message-file-meta { margin-left: auto; flex: none; font-size: var(--sv-text-caption); letter-spacing: .04em; opacity: .75; }
.message-file-preview { margin-top: var(--sv-space-2); }
.message-file-preview img { display: block; max-width: 100%; max-height: 18rem; }
.message-file-preview a { color: inherit; font-size: var(--sv-text-caption); font-weight: 700; }
.message-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--sv-space-2); }
.message-reaction { padding: 1px 6px; color: inherit; background: color-mix(in srgb, currentColor 10%, transparent); border: 1px solid transparent; cursor: pointer; font-size: var(--sv-text-caption); }
.message-reaction.mine { border-color: currentColor; }
.message-quote { display: block; width: 100%; margin-bottom: var(--sv-space-2); padding: var(--sv-space-2); overflow: hidden; color: inherit; background: color-mix(in srgb, currentColor 8%, transparent); border: 0; border-left: 3px solid currentColor; cursor: pointer; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sv-text-caption); }
.message-locked { color: inherit; font-size: var(--sv-text-caption); font-style: italic; opacity: .8; }
.share-card {
  display: flex;
  gap: var(--sv-space-2);
  align-items: flex-start;
  margin-top: var(--sv-space-2);
  padding: var(--sv-space-2) var(--sv-space-3);
  color: inherit;
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  text-decoration: none;
}
.share-card:hover { border-color: var(--sv-hairline-max); }
.direct-message.outgoing .share-card { color: var(--sv-inverse-ink); background: transparent; border-color: color-mix(in srgb, var(--sv-inverse-ink) 40%, transparent); }
.direct-message.outgoing .share-card:hover { border-color: var(--sv-inverse-ink); }
.share-card .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; opacity: 0.75; }
.share-card-body { display: grid; gap: 2px; min-width: 0; }
.share-card-title { overflow: hidden; font-size: var(--sv-text-small); text-overflow: ellipsis; white-space: nowrap; }
/* A long pages host must truncate rather than widen the card. */
.share-card-meta { overflow: hidden; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); text-overflow: ellipsis; white-space: nowrap; }
.direct-message.outgoing .share-card-meta { color: var(--sv-inverse-ink-secondary); }
.message-pending { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); padding: var(--sv-space-2) var(--sv-space-3) 0; }
.message-pending-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  max-width: 18rem;
  padding: 2px var(--sv-space-2);
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--sv-text-caption);
}
.message-pending-chip .icon { width: 13px; height: 13px; flex: none; }
.message-pending-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-pending-remove { padding: 0 2px; color: var(--sv-ink-secondary); background: none; border: 0; cursor: pointer; font-size: 14px; line-height: 1; }
.message-pending-remove:hover { color: var(--sv-ink); }
.message-share-actions { display: flex; gap: var(--sv-space-1); }
.message-share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  min-height: 32px;
  padding: var(--sv-space-1) var(--sv-space-2);
  color: var(--sv-ink-secondary);
  background: transparent;
  border: var(--sv-hairline-w) solid transparent;
  cursor: pointer;
  font-size: var(--sv-text-caption);
  font-weight: 500;
}
.message-share-btn:hover, .message-share-btn:focus-visible { color: var(--sv-ink); background: var(--sv-surface); border-color: var(--sv-hairline); }
.message-share-btn .icon { width: 13px; height: 13px; }

/* Browser-notification opt-in, in the Messages header */
.messages-head-actions { display: flex; align-items: center; gap: var(--sv-space-2); flex: none; }
.message-notify-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  min-height: 32px;
  padding: var(--sv-space-1) var(--sv-space-3);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
  cursor: pointer;
  font-size: var(--sv-text-caption);
  font-weight: 500;
  white-space: nowrap;
}
.message-notify-btn:hover:not(:disabled) { border-color: var(--sv-hairline-max); }
.message-notify-btn.on { color: var(--sv-ink); background: var(--sv-surface); border-color: var(--sv-hairline-strong); }
.message-notify-btn.on .icon { color: var(--workspace-working); }
.message-notify-btn:disabled { color: var(--sv-ink-secondary); cursor: not-allowed; }
/* Blocked reads as unavailable but stays pressable: the press is where the
 * viewer is told the browser refused and how to undo it. */
.message-notify-btn.blocked { color: var(--sv-ink-secondary); }
.message-notify-btn .icon { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Share picker (chat or artifact into a room) */
.share-picker-dialog { width: min(calc(100% - (var(--sv-space-6) * 2)), 34rem); }
.share-picker-card { gap: var(--sv-space-3); padding: var(--sv-space-6); }
.share-picker-results { display: grid; max-height: min(50vh, 380px); overflow: auto; border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.share-picker-row {
  display: flex;
  gap: var(--sv-space-2);
  align-items: flex-start;
  padding: var(--sv-space-3) var(--sv-space-2);
  background: none;
  border: 0;
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
  cursor: pointer;
  text-align: left;
}
.share-picker-row:hover { background: var(--sv-surface); }
.share-picker-row .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; opacity: 0.7; }
.share-picker-body { display: grid; gap: 2px; min-width: 0; }
.share-picker-body strong { overflow: hidden; font-size: var(--sv-text-small); text-overflow: ellipsis; white-space: nowrap; }
.share-picker-body span { color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); }

/* The fixed 18rem directory rail leaves too little room for a useful thread in
 * a compact window. Use the phone's proven one-pane navigation without also
 * applying its denser controls to tablets and small desktop windows. */
@media (max-width: 900px) {
  .messages-dialog { width: 100%; max-height: none; margin: 0; }
  .messages-dialog .messages-dialog-card { width: 100vw; height: 100svh; padding: 0; border: 0; }
  .messages-layout { grid-template-columns: minmax(0, 1fr); }
  .messages-layout[data-pane="conversation"] > .message-contacts { display: none; }
  .messages-layout[data-pane="list"] > .message-conversation { display: none; }
  .message-contacts { border-right: 0; }
  .message-back-btn { display: inline-flex; }
}

@media (max-width: 700px) {
  .messages-dialog-head { min-height: 64px; padding: var(--sv-space-3) var(--sv-space-4); }
  .message-contact { min-height: 60px; padding: 10px var(--sv-space-3); }
  .person-row-when { transform: none; }
  .message-contact-top { align-items: center; }
  .message-popup { margin-top: env(safe-area-inset-top); }
  .message-rail-title { padding: var(--sv-space-2); }
  .message-share-btn span { display: none; }
  .message-share-btn { min-height: 40px; min-width: 40px; justify-content: center; padding: 0; }
  /* Keep the opt-in tappable but let the header keep its close button. */
  .message-notify-btn { min-width: 40px; min-height: 40px; justify-content: center; padding: 0 var(--sv-space-2); }
  .message-notify-btn span { display: none; }
  .message-composer { padding: var(--sv-space-2) var(--sv-space-3) max(var(--sv-space-2), env(safe-area-inset-bottom)); }
  .message-composer textarea { min-height: 46px; }
  .message-composer .dialog-button { width: 40px; min-width: 40px; height: 40px; padding: 0; }
  .message-composer .dialog-button span { display: none; }
  .message-composer-tools { gap: 2px; }
  /* Two rows of chrome under the thread is one too many when the keyboard is
   * up; the error line only claims space when it says something. */
  .message-error:empty { display: none; min-height: 0; }
  .message-pending-chip { max-width: 100%; }
  .messages-dialog-head p { display: none; }
  /* Search belongs to the list pane on a phone: in a conversation it was
   * spending 67px of the thread's height on a field nobody is using. */
  .message-search-wrap { padding: var(--sv-space-2) var(--sv-space-3); }
  .message-search-results { right: var(--sv-space-3); left: var(--sv-space-3); }
  .message-conversation-head, .room-context, .message-thread { min-width: 0; max-width: 100%; }
  /* Room purpose and its controls scroll rather than eating the thread. */
  .room-context { max-height: 5.5rem; flex-wrap: wrap; padding: var(--sv-space-2); overflow-y: auto; }
  .room-context button, .room-context select, .message-action, .message-parent-quote { min-height: 40px; }
  .message-action { padding: 2px 10px; font-size: var(--sv-text-caption); }
  .direct-message, .share-card, .message-request-card, .message-work-card { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  /* The lock label is the one piece of chrome that must survive a narrow head:
   * truncate the words, never the icon. */
  .message-lock { padding: 0 var(--sv-space-2); }
  .message-lock span { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; }
  .message-security { max-height: 9rem; overflow-y: auto; }
  .message-files { padding: var(--sv-space-2); }
  .message-file-chip { max-width: 100%; min-height: 32px; }
  .message-file, .message-file-label, .message-reaction, .message-quote { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .message-file-label { min-height: 44px; }
  .message-reaction { min-height: 32px; padding: 2px 10px; }
  .message-file-remove { min-width: 32px; min-height: 32px; }
}

@media (hover: hover) and (pointer: fine) {
  .direct-message .message-actions {
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--sv-dur-instant) var(--sv-ease-out), transform var(--sv-dur-instant) var(--sv-ease-out);
  }
  .direct-message:hover .message-actions,
  .direct-message:focus-within .message-actions { opacity: 1; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .message-search-wrap,
  .message-composer { background: var(--sv-surface-raised); backdrop-filter: none; }
}
.chat-search-result:hover .chat-search-result-snippet, .chat-search-result.active .chat-search-result-snippet { color: var(--sv-inverse-ink-secondary); }
.chat-search-empty { padding: var(--sv-space-6) 0; color: var(--sv-ink-secondary); font-size: var(--sv-text-small); }

.dialog-card h2 {
  margin: 0;
  font-size: var(--sv-text-h3);
  font-weight: 500;
  line-height: var(--sv-leading-heading);
  letter-spacing: var(--sv-tracking-heading);
}

.dialog-card > p {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  line-height: 1.5;
}

.dialog-card > p:empty {
  display: none;
}

.dialog-field {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  font-weight: 500;
}

.dialog-field input,
.dialog-field select {
  width: 100%;
  height: 48px;
  padding: 0 var(--sv-space-4);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--sv-text-small);
  font-weight: 400;
  transition: border-color var(--sv-dur-fast) var(--sv-ease-out);
}

.dialog-field input:focus,
.dialog-field select:focus {
  border-color: var(--sv-hairline-max);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sv-space-3);
  margin-top: var(--sv-space-2);
}

.dialog-button {
  min-width: 112px;
  height: 48px;
  padding: 0 var(--sv-space-6);
  color: var(--sv-ink);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline-max);
  font-size: var(--sv-text-small);
  font-weight: 500;
  transition:
    color var(--sv-dur-fast) var(--sv-ease-out),
    background-color var(--sv-dur-fast) var(--sv-ease-out),
    border-color var(--sv-dur-fast) var(--sv-ease-out);
}

.dialog-button:hover {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
}

.dialog-button.primary,
.dialog-button.primary.danger {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
}

.dialog-button.primary:hover,
.dialog-button.primary.danger:hover {
  color: var(--sv-ink);
  background: transparent;
}

.dialog-button:disabled,
.dialog-button:disabled:hover {
  color: var(--sv-ink-secondary);
  background: var(--sv-surface-dim);
  border-color: var(--sv-hairline);
}

.share-dialog {
  width: min(calc(100% - (var(--sv-space-6) * 2)), 42rem);
}

.share-dialog-card {
  gap: var(--sv-space-6);
  border-top: 4px solid var(--sv-hairline-max);
}

.share-dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sv-space-4);
}
.share-dialog-heading > div:first-child { min-width: 0; }
.share-dialog-heading h2 { overflow-wrap: anywhere; }

.share-dialog-heading .icon-btn {
  margin: 0;
  color: var(--sv-ink);
}

.share-close-icon {
  width: 20px;
  height: 20px;
}

.share-dialog-kicker {
  margin: 0 0 var(--sv-space-2);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-caps);
  line-height: 1;
  text-transform: uppercase;
}

.share-dialog-copy {
  max-width: 62ch;
}

.share-audience-field {
  display: grid;
  gap: var(--sv-space-2);
  margin: var(--sv-space-5) 0;
  padding: var(--sv-space-4);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
}

.share-audience-field legend { padding: 0 var(--sv-space-1); font-weight: 700; }
.share-audience-field label { display: flex; align-items: baseline; gap: var(--sv-space-2); font-size: var(--sv-text-small); }
.share-audience-field small { color: var(--sv-ink-secondary); }
.share-audience-field textarea { width: 100%; resize: vertical; padding: var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline-max); background: var(--sv-surface); font: inherit; }
.share-audience-field textarea:disabled { opacity: .5; }

.share-link-field {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  font-weight: 500;
}

.share-link-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.share-link-control input {
  min-width: 0;
  height: 48px;
  padding: 0 var(--sv-space-4);
  color: var(--sv-ink);
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline-max);
  border-right: 0;
  font-family: var(--sv-font-mono);
  font-size: var(--sv-text-caption);
}

.share-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-2);
}

.share-copy-button .icon {
  width: 18px;
  height: 18px;
}

.share-dialog-meta,
.share-dialog-status {
  min-height: 1.25rem;
  margin-top: calc(var(--sv-space-4) * -1) !important;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption) !important;
}

.share-dialog-status {
  color: var(--sv-ink) !important;
  font-weight: 500;
}

.share-dialog-actions {
  justify-content: space-between;
  padding-top: var(--sv-space-4);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}

.dialog-button.danger-quiet {
  color: var(--sv-ink);
  border-color: var(--sv-hairline-strong);
}

.dialog-button.danger-quiet:hover {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border-color: var(--sv-hairline-max);
}

/* Sign-in */

.auth-screen {
  position: fixed;
  z-index: calc(var(--sv-z-modal) + 1);
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: max(2rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  color: var(--sv-ink);
  background: var(--sv-surface);
}

.auth-card {
  flex: none;
  width: min(100%, 22.5rem);
  max-width: 100%;
  /* Auto margins center a short form and collapse when the keyboard or zoom
   * makes it taller than the viewport, keeping its first field reachable. */
  margin: auto;
  padding: 0;
  color: var(--sv-ink);
}

.auth-brand {
  margin-bottom: 2rem;
  text-align: center;
}

.auth-brand .wordmark {
  font-size: 1.25rem;
}

.auth-title {
  margin: 0;
  color: var(--sv-ink);
  font-size: clamp(1.375rem, 4vw, 1.625rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-align: center;
}

.auth-tagline {
  margin: .625rem 0 2rem;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  line-height: 1.5;
  text-align: center;
}

.auth-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 3rem;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

#clerk-signin {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

/* The Clerk widget ships its own fixed-ish card width; let it track our card
 * instead of overflowing it on narrow/zoomed viewports. */
#clerk-signin .cl-rootBox,
#clerk-signin .cl-cardBox,
#clerk-signin .cl-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

#clerk-signin .cl-card {
  padding: 0;
}

.auth-fallback,
.auth-blocked {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  line-height: 1.5;
}

/* The blocked notice follows the rendered widget and needs the gap. The
 * fallback replaces that widget, so the tagline's own margin is the gap —
 * anything more and the card is back to being mostly empty. */
.auth-blocked {
  padding-top: var(--sv-space-4);
}

.auth-fallback p,
.auth-blocked p {
  margin: 0 0 var(--sv-space-6);
}

.auth-blocked strong {
  color: var(--sv-ink);
  font-weight: 700;
}

.auth-signout {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
}

/* The card's own action: the shared ink button, full width so it reads as the
 * card's affordance and stays a real target on a phone. */
.auth-fallback .auth-action {
  width: 100%;
}

/* Share-sent sign-in code: a quiet secondary action under Clerk's form that opens
 * an inline two-step form. Its controls match Clerk's flattened ones (brand.css). */
.auth-code {
  margin-top: var(--sv-space-4);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  line-height: 1.5;
  text-align: center;
}

.auth-code-toggle {
  min-height: 44px;
  padding: 0 var(--sv-space-2);
  color: var(--sv-ink-secondary);
  background: none;
  border: 0;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.auth-code-toggle:hover { color: var(--sv-ink); }

.auth-code-panel {
  display: grid;
  gap: var(--sv-space-3);
  margin-top: var(--sv-space-2);
  text-align: left;
}

.auth-code-step {
  display: grid;
  gap: var(--sv-space-3);
}

.auth-code-label {
  color: var(--sv-ink);
  font-weight: 500;
}

.auth-code-input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--sv-space-4);
  color: var(--sv-ink);
  background: var(--sv-surface);
  border: 1px solid var(--sv-ink);
  border-radius: var(--sv-radius);
  font-family: var(--sv-font-sans);
  font-size: 1rem;
}

.auth-code-digits {
  font-family: var(--sv-font-mono);
  font-size: 1.25rem;
  letter-spacing: .3em;
}

.auth-code .auth-action {
  width: 100%;
  border-radius: var(--sv-radius);
}

.auth-code :is(.auth-code-input, .auth-action, .auth-code-toggle):focus-visible {
  outline: 2px solid var(--sv-ink-secondary);
  outline-offset: 2px;
}

.auth-code .auth-action:disabled { opacity: .6; cursor: progress; }

.auth-code-sent,
.auth-code-status {
  margin: 0;
}

.auth-code-status:empty { display: none; }

.auth-code-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--sv-space-4);
}

/* Responsive
 *
 * The Workboard becomes an overlay through 1400px so the conversation never
 * pays for both a full sidebar and a 320px activity rail at laptop widths.
 * The sidebar has its own narrower width cap plus a touch-tablet clause: a
 * landscape iPad can be desktop-wide but cannot operate the resize handle.
 * app.js mirrors both query lists — keep the two in step. */

@media (max-width: 1400px) {
  .app.activity-open {
    grid-template-columns: var(--sv-rail) minmax(0, 1fr);
  }

  .app.sidebar-collapsed.activity-open {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .activity-panel,
  .app.activity-open .activity-panel {
    position: fixed;
    z-index: var(--sv-z-overlay);
    inset: 0 0 0 auto;
    display: grid;
    width: min(100%, calc(var(--sv-activity-rail) + var(--sv-space-12)));
    visibility: hidden;
    transform: translateX(100%);
    transition:
      transform var(--sv-dur-base) var(--sv-ease-inout),
      visibility 0s linear var(--sv-dur-base);
  }

  .app.activity-open .activity-panel {
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .activity-close-btn {
    display: inline-flex;
  }

  .activity-scrim {
    position: fixed;
    z-index: calc(var(--sv-z-overlay) - 1);
    inset: 0;
    display: block;
    visibility: hidden;
    background: transparent;
    opacity: 0;
    transition:
      opacity var(--sv-dur-base) var(--sv-ease-out),
      visibility 0s linear var(--sv-dur-base);
  }

  .app.activity-open .activity-scrim {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
}

@media (hover: none) {
  .sidebar :is(.session-row, .project-row, .thread-row) .row-actions {
    background: var(--sv-surface);
    box-shadow: none;
  }
}

@media (max-width: 900px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .app,
  .app.sidebar-collapsed {
    display: block;
  }

  .sidebar-resize-handle { display: none; }

  .sidebar,
  .app.sidebar-collapsed .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--sv-z-overlay);
    visibility: visible;
    transform: translateX(-100%);
    transition: transform var(--sv-dur-base) var(--sv-ease-inout);
  }

  .app.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* One scrolling column: fixed navigation takes what it needs and the chat
   * browser gets the remainder. Inner scrollers hand scrolling up rather than
   * trapping it. */
  .sidebar,
  .app.sidebar-collapsed .sidebar {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sidebar-head,
  .sidebar-primary,
  .sidebar-foot { flex: none; }

  .sidebar-primary { min-height: auto; overflow: visible; }

  .sidebar-head {
    position: sticky;
    top: 0;
    z-index: 1;
    height: var(--sv-space-16);
  }

  .sidebar-scroll { flex: 1 0 auto; overflow: visible; }

  .sidebar-foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    height: calc(var(--sv-space-16) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sidebar-scrim {
    position: fixed;
    z-index: calc(var(--sv-z-overlay) - 1);
    inset: 0;
    display: block;
    visibility: hidden;
    background: rgb(0 0 0 / 0.6);
    opacity: 0;
    transition:
      opacity var(--sv-dur-base) var(--sv-ease-out),
      visibility 0s linear var(--sv-dur-base);
  }

  .app.sidebar-open .sidebar-scrim {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  .main {
    width: 100%;
  }

  .sidebar-open-btn,
  .app.sidebar-collapsed .sidebar-open-btn {
    display: inline-flex;
  }

  .messages {
    padding-top: var(--sv-space-8);
  }
}

@media (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .activity-panel,
  .app.activity-open .activity-panel {
    background: var(--sv-surface-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 600px) {
  .sidebar-head-actions .icon-btn { width: 44px; height: 44px; flex-basis: 44px; }
  /* The destinations that moved into the account menu (Shared links, Venture
     pipeline, Artifacts) keep the rail's thumb-sized floor there. */
  .profile-menu-item { min-height: 44px; }

  /* The rest of the drawer, measured at 40px and 32px: ShareOS home and Search
   * chats are full-width rows a thumb still missed vertically, and New project
   * was a 32px square. The drawer is the only way to another chat on a phone,
   * so everything in it has to be hittable. */
  .sidebar-nav-btn { height: 44px; }

  .sidebar-section-action {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    margin: 0 calc(var(--sv-space-1) * -1) 0 0;
  }

  .scheduled-group,
  .scheduled-row {
    min-height: 44px;
  }

  /* Desktop-sized gaps are the cheapest width in the header: the space between
   * the title half and the action half, and the space around the sidebar
   * control, together bought back 12px for the title on a 360px screen. */
  .thread-head {
    gap: var(--sv-space-2);
    padding: 0 var(--sv-space-3);
  }

  .thread-leading {
    gap: var(--sv-space-2);
  }

  .activity-panel,
  .app.activity-open .activity-panel {
    width: 100%;
  }

  .activity-head {
    padding: 0 var(--sv-space-3) 0 var(--sv-space-4);
  }

  .activity-close-btn {
    display: inline-flex;
  }

  .assumptions-list {
    padding-right: var(--sv-space-4);
    padding-left: calc(var(--sv-space-4) + 1.25rem);
  }

  .assumptions-empty,
  .todos-empty {
    padding-right: var(--sv-space-4);
    padding-left: var(--sv-space-4);
  }

  .todos-list {
    padding-right: var(--sv-space-4);
    padding-left: var(--sv-space-4);
  }

  .graph-section h3,
  .graph-goal,
  .graph-status {
    padding-right: var(--sv-space-4);
    padding-left: var(--sv-space-4);
  }

  .activity-summary,
  .activity-tool-summary {
    padding: var(--sv-space-4);
  }

  .activity-tool-entry-summary,
  .activity-expanded {
    padding-right: var(--sv-space-4);
    padding-left: calc(var(--sv-space-4) + 32px + var(--sv-space-3));
  }

  .agent-message-head {
    padding-right: var(--sv-space-4);
    padding-left: var(--sv-space-4);
  }

  .agent-message-content {
    padding-right: var(--sv-space-4);
    padding-left: var(--sv-space-4);
  }

  .thread-context {
    display: none;
  }

  /* The subtitle is the separator's left-hand side. With it hidden the pill's
   * leading "·" was an orphan bullet at the start of the line. */
  .turn-status::before {
    display: none;
  }

  .messages {
    padding: var(--sv-space-8) var(--sv-gutter) var(--sv-space-12);
  }

  .msg.assistant,
  .msg.voice {
    display: block;
    padding-top: var(--sv-space-4);
  }

  .voice-role { margin-bottom: var(--sv-space-2); }

  /* One step tighter, so more columns fit before the wrapper has to scroll.
   * No sticky header row: the wrapper has no max-height, so `position: sticky`
   * would have nothing to stick against and would ship as a no-op. */
  .md th,
  .md td {
    padding: var(--sv-space-2) var(--sv-space-3);
  }

  /* Phones have no hover. Copy, reply and edit must be discoverable without
     guessing that an ordinary message has a second tap behavior. */
  .msg-actions { grid-column: auto; opacity: 1; }
  .msg.actions-open .msg-actions, .msg:focus-within .msg-actions { opacity: 1; }
  .msg.user .msg-actions,
  .msg.user > .msg-time { width: 92%; }
  .msg-retry-button { min-height: 40px; }
  .reply-context-clear { width: 40px; height: 40px; flex-basis: 40px; }

  .msg.peer { display: block; }
  .peer-role { margin-bottom: var(--sv-space-3); }
  .peer-message { padding: 0 var(--sv-space-4); }

  .msg-role {
    margin-bottom: var(--sv-space-4);
  }

  .msg-model {
    grid-column: auto;
  }

  .msg.user .bubble {
    width: 92%;
    padding: var(--sv-space-4);
  }

  .prompt-editor { width: 92%; }
  .prompt-editor-actions { flex-wrap: wrap; }
  .prompt-editor-hint { flex-basis: 100%; }
  .prompt-editor-btn { min-height: 40px; flex: 1 1 auto; }
  .prompt-editor-restore { min-height: 40px; }

  .status-line {
    display: block;
  }

  .empty,
  .thread-starter {
    justify-content: flex-start;
    padding: var(--sv-space-16) 0;
  }

  .empty h2 {
    font-size: var(--sv-text-h2);
  }

  .suggestion-grid {
    grid-template-columns: 1fr;
    margin-top: var(--sv-space-5);
  }

  .suggestion:nth-child(odd) { border-right: 0; }
  .suggestion:nth-child(n + 2) { border-top: var(--sv-hairline-w) solid var(--sv-hairline); }

  /* Two columns of a 390px row left the chat's name a few characters wide, so
     the state stacks above the chat it belongs to rather than competing with
     it for the line. */
  .starter-live-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sv-space-1);
    align-items: start;
    padding: var(--sv-space-4);
  }

  .starter-peripheral-row {
    flex-direction: column;
    gap: var(--sv-space-1);
    align-items: start;
    padding: var(--sv-space-4);
  }

  .suggestion {
    min-height: 96px;
    padding: var(--sv-space-4);
  }

  /* Discarding a recording is a 22px x while the recording is running: the one
   * control in the bar a thumb could not hit. The bar has ~50px of slack at
   * 360px even mid-recording, so this costs nothing. */
  .voice-status button {
    width: 44px;
    height: 44px;
  }

  /* Staged files: removing one was an 18px x, so the chip grows with its
   * control. Chips are only on screen while something is waiting to be sent, so
   * none of this height lands in the resting composer. */
  .attachment-chip {
    min-height: 44px;
    padding: var(--sv-space-1) var(--sv-space-1) var(--sv-space-1) var(--sv-space-3);
  }

  .attachment-chip button {
    width: 44px;
    height: 44px;
  }

  /* Reached by typing "@" in the composer, so it is a composer control too. */
  .mention-manage {
    min-height: 44px;
  }

  .dialog-card {
    padding: var(--sv-space-6);
  }

  .dialog-actions {
    flex-direction: column-reverse;
  }

  .dialog-button {
    width: 100%;
  }

  /* The phone header used to hide four of its own icon actions to stop
   * overflowing, which made Fork and Feedback simply absent there. The chat's
   * actions are one labelled menu now, so the same width fits with nothing
   * dropped: no display rules here, and the overflow trigger is a full 44px
   * target from the base .icon-btn. */
  .thread-context-actions {
    gap: 0;
  }

  /* On a phone the pill's detail ("· 9m waiting") is not information anyone
   * acts on, and it was the thing keeping the phase name at zero width. Hidden
   * rather than clipped — textContent still carries it — so "Working" /
   * "Unanswered" always has room to be read. */
  .turn-status-meta {
    display: none;
  }

  .thread-subline .turn-status {
    min-width: 4rem;
  }

  /* The pill was 40x40 on a phone and 93x40 at 430px: the one control in the
   * header a thumb missed. Height is the only axis it was short on. */
  .share-thread-button {
    min-width: 0;
    height: 44px;
  }

  .share-link-control {
    grid-template-columns: 1fr;
  }

  .share-link-control input {
    border-right: var(--sv-hairline-w) solid var(--sv-hairline-max);
    border-bottom: 0;
  }

  .share-dialog-actions {
    flex-direction: column-reverse;
  }
}

/* Phones: the Share pill goes icon-only so the thread title keeps enough room
 * to be readable rather than a truncated stub.
 *
 * 600px, not 420px: at 430 the pill kept its label and took 93px of the row,
 * leaving the title 98px against its 140px floor. Every width the phone header
 * rules already cover has the same shortage, so it takes the same breakpoint. */
@media (max-width: 600px) {
  .share-thread-button span {
    display: none;
  }

  .share-thread-button {
    gap: 0;
    width: 44px;
    padding: 0;
  }
}

@media (max-width: 359px) {
  .brand .wordmark-text {
    display: none;
  }
}

/* Deep zoom: the sidebar rail is only as wide as the viewport, and on touch
 * devices a row's action buttons are permanently visible (see the hover:none
 * block). At this width even two 32px targets crowd the label, so tighten them
 * and shrink the reserve to match. */
@media (max-width: 300px) {
  .row-actions .icon-btn {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .project-row:has(.row-actions[data-count="1"]),
  .thread-row:has(.row-actions[data-count="1"]) { --row-reserve: 32px; }
  .project-row:has(.row-actions[data-count="2"]),
  .thread-row:has(.row-actions[data-count="2"]) { --row-reserve: 60px; }
  .project-row:has(.row-actions[data-count="3"]),
  .thread-row:has(.row-actions[data-count="3"]) { --row-reserve: 88px; }

  /* At this width the title truncates to a stub like "S…", which is noise next
   * to the controls. The full title is still the document title and is shown
   * on the thread row in the sidebar. */
  .thread-title {
    display: none;
  }

  /* With the title gone the dot would keep its own (now empty) heading row and
   * float above the status line. Collapse the grid to one row so it stays on
   * the axis of whatever text remains. */
  .thread-heading {
    grid-template-areas: "dot sub";
  }
}

@media (hover: none) {
  .msg-actions { opacity: 1; }
  .row-actions {
    opacity: 1;
    pointer-events: auto;
  }

  /* The whole project row is the disclosure target, so its decorative marks
   * can tighten on touch and leave the label at least half the rail. */
  .project-row .chevron { width: var(--sv-space-5); flex-basis: var(--sv-space-5); margin-right: 0; }
  .project-row .status-dot { margin-right: var(--sv-space-1); }

  /* Two controls at most, so each can be a real finger target instead of the
     32px a seven-icon row forced. Must follow the base .row-actions .icon-btn
     rule — equal specificity, source order wins. */
  .row-actions .icon-btn {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  /* No hover to reveal it on touch, and a finger needs a real target. */
  .project-drag {
    width: 28px;
    height: 44px;
    flex-basis: 28px;
    opacity: 1;
  }
}

/* A row's own actions were 40px squares on a phone: the controls that rename,
 * archive and delete a chat, and the ones most often missed. This block has to
 * sit after the `hover: none` one above — equal specificity, so source order
 * decides, which is the same trap the comment there names. Bounded below at
 * 301px because the deep-zoom block further up deliberately trades these targets
 * for label width on a viewport that has none to spare.
 *
 * The reorder grip stays 28x44 rather than joining them. A 351px rail has no
 * spare width: the extra 16px comes straight out of the project name, which is
 * held above half the rail, and the only way to buy it back is
 * to move "New chat in project" into the row's overflow menu — a web/app.js
 * change, not a stylesheet one. The grip is still a full-height edge strip.
 *
 * The cluster's own left padding goes for the same reason: with the reserve
 * equal to the buttons, the label ends exactly where they begin and their 14px
 * of internal padding is the gutter. */
@media (min-width: 301px) and (max-width: 600px) {
  /* Matches the two-class selector that sets this padding, or it loses. */
  .project-row .row-actions,
  .thread-row .row-actions {
    padding-left: 0;
  }

  .row-actions .icon-btn {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .project-row:has(.row-actions[data-count="1"]),
  .thread-row:has(.row-actions[data-count="1"]) { --row-reserve: 44px; }
  .project-row:has(.row-actions[data-count="2"]),
  .thread-row:has(.row-actions[data-count="2"]) { --row-reserve: 88px; }
  .project-row:has(.row-actions[data-count="3"]),
  .thread-row:has(.row-actions[data-count="3"]) { --row-reserve: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sv-dur-instant: 1ms;
    --sv-dur-fast: 1ms;
    --sv-dur-base: 1ms;
    --sv-dur-slow: 1ms;
    --sv-dur-cine: 1ms;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .activity-panel {
    background: var(--sv-surface-raised);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .project-row,
  .thread-row,
  .notice,
  .suggestion,
  .composer,
  .dialog-field input {
    border-color: currentColor;
  }

  .activity-panel {
    background: var(--sv-surface-raised);
    border-color: var(--sv-hairline-max);
  }
}

@media (forced-colors: active) {
  .thread-row.selected {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }

  .spinner {
    background: CanvasText;
  }

  .status-dot {
    border-color: CanvasText;
  }

  /* Chromium forces even an authored transparent border to CanvasText. Keep
     the marker's reserved box unpainted, then return its icon to system colour
     adjustment so the glyph still follows the member's contrast palette. */
  .status-dot[data-step] {
    forced-color-adjust: none;
    border-color: transparent;
    background: transparent;
  }

  .status-dot[data-step] > * {
    forced-color-adjust: auto;
    color: CanvasText;
  }

  /* Forced-colour adjustment suppresses CSS backgrounds, including the solid
     paint behind this monochrome mask. Its explicit system colour remains
     legible without restoring the status dot's authored paint. */
  .status-dot[data-step] .harness-logo {
    forced-color-adjust: none;
    background: CanvasText;
  }

  /* Not under a live step's mark: the dot stands aside for it (.status-dot[data-step]). */
  .status-dot.live:not([data-step]) {
    background: Highlight;
    border-color: Highlight;
  }

  /* Still a mark, and still distinguishable from a confirmed one: hollow where
     the live dot is filled. Forced colors is where "it looks dimmer" stops
     being a signal, so the difference has to be shape, not tone. */
  .status-dot.live.unconfirmed {
    background: Canvas;
    border-color: CanvasText;
  }
}

/* ---------- Multi-member workspaces ---------- */

.workspace-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-2);
  padding: var(--sv-space-4) var(--sv-space-3) var(--sv-space-2);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.workspace-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  opacity: 0.8;
  font-size: var(--sv-text-caption);
  letter-spacing: var(--sv-tracking-caps);
}

.workspace-badge .icon {
  width: 13px;
  height: 13px;
}

.project-readonly .project-name {
  color: var(--sv-ink-secondary);
}

.row-lock {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sv-space-2);
  color: var(--sv-ink-secondary);
}

.row-lock .icon {
  width: 14px;
  height: 14px;
}

.readonly-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-4);
  padding: var(--sv-space-4) var(--sv-gutter);
  background: var(--sv-surface-sunken);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}

.readonly-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-1);
  font-size: var(--sv-text-small);
  line-height: 1.45;
}

.readonly-copy strong {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  font-size: var(--sv-text-caption);
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

.readonly-copy strong .icon {
  width: 14px;
  height: 14px;
}

.readonly-copy span {
  color: var(--sv-ink-secondary);
}

.readonly-action {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  flex: none;
  height: 40px;
  padding: 0 var(--sv-space-4);
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline-max);
  font-size: var(--sv-text-small);
  font-weight: 500;
  transition:
    color var(--sv-dur-fast) var(--sv-ease-out),
    background-color var(--sv-dur-fast) var(--sv-ease-out);
}

.readonly-action:hover {
  color: var(--sv-ink);
  background: transparent;
}

.readonly-action .icon {
  width: 18px;
  height: 18px;
}

/* A chat the pendant opened, said once at the top of its transcript. Quieter
 * than the fork note beneath it: provenance, not an instruction. */
.source-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  margin-bottom: var(--sv-space-3);
  padding: 4px var(--sv-space-3);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  line-height: 1.3;
}

.source-chip .icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.fork-note {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  margin-bottom: var(--sv-space-4);
  padding: var(--sv-space-3) var(--sv-space-4);
  color: var(--sv-ink-secondary);
  background: var(--sv-surface-sunken);
  border-left: 2px solid var(--sv-hairline-heavy);
  font-size: var(--sv-text-small);
  line-height: 1.45;
}

.fork-note .icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* The way back out of a note that names another chat. Inline with the copy, and
   a real 44px target on touch rather than an underlined word. */
.fork-note-action {
  min-height: 44px;
  flex: none;
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline-max);
  font-size: var(--sv-text-caption);
  font-weight: 500;
}

.fork-note-action:hover {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
}

/* A turn carried in from another chat: labelled above the bubble, on the same
   side the bubble sits, so a scrolled-to line still names its own chat. */
.msg-merged-from {
  display: flex;
  align-items: center;
  gap: var(--sv-space-1);
  margin-bottom: var(--sv-space-1);
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
  line-height: 1.3;
}

.msg.user .msg-merged-from {
  justify-content: flex-end;
}

.msg-merged-from .icon {
  width: 13px;
  height: 13px;
  flex: none;
}

@media (max-width: 640px) {
  .readonly-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .readonly-action {
    justify-content: center;
  }
}

/* Persistent turn receipts — the WebUI equivalent of Discord reactions. */
.msg.user {
  flex-wrap: wrap;
}

.msg-receipt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sv-space-2);
  width: min(72ch, 78%);
  margin-top: var(--sv-space-2);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.2;
}

.receipt-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border: 1px solid currentColor;
  border-radius: var(--sv-radius);
}

.msg-receipt[data-tone="live"] .receipt-dot {
  color: var(--workspace-working);
  background: var(--workspace-working);
  animation: status-breathe var(--workspace-pulse) ease-in-out infinite;
}
.msg-receipt[data-tone="done"] .receipt-dot { color: var(--workspace-working); background: var(--workspace-working); }
.msg-receipt[data-tone="wait"] .receipt-dot { color: var(--sv-ink-secondary); background: var(--sv-gray-dark); }
.msg-receipt[data-tone="attention"] .receipt-dot { color: var(--sv-attention); background: var(--sv-attention); }
.msg-receipt[data-tone="error"] .receipt-dot { color: var(--sv-danger); background: var(--sv-danger); }
.msg-receipt[data-phase="stalled"] .receipt-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--sv-danger);
}
.receipt-meta::before { content: "·"; margin-right: var(--sv-space-2); }

.turn-status {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sv-space-2);
  min-width: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}
.turn-status::before {
  content: "·";
  color: var(--sv-ink-tertiary);
}
.turn-status-label {
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--sv-ink);
  text-overflow: ellipsis;
}
/* The detail, not the state: how long and how many tools yield before the
 * phase name does. Without overflow:hidden here its min-content width was
 * un-shrinkable, so the label absorbed every pixel of the squeeze alone. */
.turn-status-meta {
  flex: 0 100 auto;
  overflow: hidden;
  color: var(--sv-ink-secondary);
  text-overflow: ellipsis;
}
.turn-status-meta::before { content: "·"; margin-right: var(--sv-space-2); }

.status-dot[data-phase="input"] { border-color: var(--sv-attention); background: var(--sv-attention); }
.status-dot[data-phase="error"] { border-color: var(--sv-danger); background: var(--sv-danger); }
/* Unanswered: the member is owed a reply nobody delivered. Hollow, not filled,
   so it reads as an outstanding debt rather than a finished state. */
.status-dot[data-phase="stalled"] { border-color: var(--sv-danger); background: transparent; }
.status-dot[data-phase="done"] { border-color: var(--workspace-working); }

@media (max-width: 700px) {
  .msg-receipt { width: min(88%, 72ch); }
}

/* ---------- Shared links audit panel ---------- */
.shares-dialog-card {
  width: min(58rem, 100%);
  max-height: min(85vh, 60rem);
  overflow-y: auto;
}

.shares-list { display: grid; gap: var(--sv-space-4); margin-top: var(--sv-space-5); }

/* ---------- Mentions inbox ---------- */
.mentions-dialog-card {
  width: min(46rem, 100%);
  max-height: min(85vh, 56rem);
  overflow-y: auto;
}

.mentions-head-actions {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
}

.mentions-list {
  display: grid;
  gap: var(--sv-space-3);
  margin: var(--sv-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.mention-row {
  min-width: 0;
  padding: var(--sv-space-4);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
}

/* A resolved mention stays legible — it is history, not noise — and only
 * recedes, so Restore always has something to point at. */
.mention-row.is-resolved { border-color: var(--sv-hairline); opacity: 0.62; }

.mention-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sv-space-2);
}

.mention-who {
  margin: 0;
  min-width: 0;
  font-size: var(--sv-text-body);
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.mention-when,
.mention-where,
.mention-preview,
.mention-empty {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

.mention-when { white-space: nowrap; }
.mention-where { margin-top: var(--sv-space-1); overflow-wrap: anywhere; }
.mention-preview { margin-top: var(--sv-space-2); color: var(--sv-ink); overflow-wrap: anywhere; }
.mention-empty { padding: var(--sv-space-4) 0; }

/* The urgent-tag invitation: someone needed this person off-platform and could
   not reach them. Marked out from the row's own copy so it reads as the system
   explaining itself, not as part of the message. */
.mention-urgent-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-2);
  margin-top: var(--sv-space-3);
  padding: var(--sv-space-3);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-sunken);
}

.mention-urgent-why {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  overflow-wrap: anywhere;
}

.mention-urgent-invite .dialog-button {
  height: 36px;
  padding: 0 var(--sv-space-3);
  font-size: var(--sv-text-caption);
}

.mention-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-2);
  margin-top: var(--sv-space-3);
}

.mention-row-actions .dialog-button {
  height: 36px;
  padding: 0 var(--sv-space-3);
  font-size: var(--sv-text-caption);
}

@media (max-width: 600px) {
  /* Row actions share the phone width instead of extending it. */
  .mention-row-actions { flex-wrap: nowrap; }
  .mention-row-actions .dialog-button { flex: 1 1 0; min-width: 0; white-space: nowrap; }
  .mentions-head-actions .dialog-button { padding: 0 var(--sv-space-3); }
}

/* ---------- Hidden workspaces dialog ---------- */

.hidden-list {
  display: grid;
  gap: var(--sv-space-3);
  margin-top: var(--sv-space-5);
  max-height: min(60vh, 480px);
  overflow: auto;
}

.hidden-row {
  display: flex;
  align-items: center;
  gap: var(--sv-space-4);
  padding-bottom: var(--sv-space-3);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.hidden-row-copy { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.hidden-row-name { font-weight: 500; }
.hidden-row > button {
  flex: 0 0 auto;
  min-width: 0;
  height: 40px;
  padding: 0 var(--sv-space-4);
  font-size: var(--sv-text-caption);
  white-space: nowrap;
}

.hidden-row-meta {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden-sublist {
  display: grid;
  gap: var(--sv-space-2);
  margin: calc(var(--sv-space-2) * -1) 0 0;
  padding: 0 0 0 var(--sv-space-4);
  list-style: none;
}

.hidden-sublist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-3);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
}

.hidden-sublist-action {
  padding: 0;
  color: var(--sv-ink);
  background: transparent;
  border-bottom: 1px solid currentColor;
  font-size: inherit;
}

@media (max-width: 600px) {
  .hidden-row { align-items: flex-start; flex-direction: column; gap: var(--sv-space-2); }
  .hidden-row-meta { white-space: normal; }
}

/* ---------- Project info dialog ---------- */

.project-info-dialog { width: min(calc(100% - (var(--sv-space-6) * 2)), 34rem); }
.project-info-card { gap: var(--sv-space-5); max-height: min(80vh, 640px); overflow: auto; }

.pi-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-3); min-width: 0; }

.pi-section-title {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

.pi-member-list,
.pi-repo-list,
.pi-artifact-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}

.pi-member,
.pi-repo,
.pi-artifact {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  padding: var(--sv-space-3) 0;
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.pi-empty {
  padding: var(--sv-space-3) 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.pi-member-email {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--sv-text-small);
}

.pi-member-role {
  flex: 0 0 auto;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

.pi-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.pi-remove-btn:hover { color: var(--sv-ink); }
.pi-remove-btn .icon { width: 16px; height: 16px; }
.pi-remove-btn:disabled { opacity: 0.4; cursor: default; }

/* "Open the chat this file came from": one icon, the same 30px target as the
 * row's other control, so a narrow file row never grows a second column of
 * labels it cannot fit. */
.pi-file-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.pi-file-source:hover { color: var(--sv-ink); }
.pi-file-source .icon { width: 16px; height: 16px; }

.pi-file-asset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  white-space: nowrap;
  cursor: pointer;
}
.pi-file-asset input { width: 14px; height: 14px; margin: 0; accent-color: var(--sv-black); }

.pi-repo-link,
.pi-artifact-link {
  display: grid;
  /* One shrinkable column: without it the auto track sizes to the longest
   * filename or source title, and the name and meta lines run out under the
   * row's own controls instead of ellipsing. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* A library row that opens the viewer is a button; it must read as the same row
 * as one that downloads, not as a form control. */
button.pi-repo-link {
  justify-items: start;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pi-artifact-link:hover .pi-artifact-title { text-decoration: underline; }
.pi-repo-link:hover .pi-repo-slug { text-decoration: underline; }

.pi-repo-slug {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sv-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--sv-text-small);
  font-weight: 500;
}

.pi-repo-meta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

.pi-artifact-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--sv-text-small);
  font-weight: 500;
}

.pi-artifact-meta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

.pi-invite-form,
.pi-repo-form,
.pi-artifact-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-3); min-width: 0; }

.pi-invite-row {
  display: flex;
  gap: var(--sv-space-2);
}

.pi-invite-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.pi-invite-row select { flex: 0 0 auto; width: auto; }

.pi-invite-form input,
.pi-invite-form select,
.pi-repo-form input,
.pi-artifact-form input,
.pi-artifact-form select {
  height: 42px;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--sv-text-small);
}
.pi-invite-form input:focus,
.pi-invite-form select:focus,
.pi-repo-form input:focus,
.pi-artifact-form input:focus,
.pi-artifact-form select:focus { border-color: var(--sv-hairline-max); outline: 0; }

.pi-invite-row .dialog-button { flex: 0 0 auto; height: 42px; padding: 0 var(--sv-space-4); }

/* The file picker is the one input the platform draws itself: without this it
 * arrives as OS chrome next to the house buttons. */
#pi-file-input {
  display: flex;
  align-items: center;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  cursor: pointer;
}
#pi-file-input::file-selector-button {
  height: 28px;
  margin-right: var(--sv-space-3);
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  font: inherit;
  font-size: var(--sv-text-caption);
  cursor: pointer;
}
#pi-file-input::file-selector-button:hover { border-color: var(--sv-hairline-max); }

.pi-welcome-opt {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}
.pi-welcome-opt input { width: 15px; height: 15px; accent-color: var(--sv-black); }

.pi-section-note {
  margin: calc(var(--sv-space-2) * -1) 0 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

.pi-context-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-3); min-width: 0; }

.pi-context-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 96px;
  max-height: 40vh;
  padding: var(--sv-space-3);
  resize: vertical;
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--sv-text-small);
  line-height: 1.5;
}
.pi-context-form textarea:focus { border-color: var(--sv-hairline-max); outline: 0; }
.pi-context-form textarea::placeholder { color: var(--sv-ink-secondary); opacity: 1; }
.pi-context-form textarea[readonly] { background: var(--sv-surface-sunken); resize: none; }

.pi-context-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-3);
}

.pi-context-count { color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); }
.pi-context-row .dialog-button { flex: 0 0 auto; height: 42px; padding: 0 var(--sv-space-4); }

/* A labelled field inside a pi-context-form. The form's grid gap is sized for
 * standalone controls, so a label glued to its own input pulls the gap back. */
.pi-field-label {
  margin-bottom: calc(var(--sv-space-1) - var(--sv-space-3));
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}
.pi-field-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--sv-text-small);
}
.pi-field-input:focus { border-color: var(--sv-hairline-max); outline: 0; }
.pi-field-input::placeholder { color: var(--sv-ink-secondary); opacity: 1; }
.pi-field-input[readonly] { background: var(--sv-surface-sunken); }
.pi-field-error { margin: 0; color: var(--sv-danger); font-size: var(--sv-text-caption); }
.pi-field-buttons { display: flex; gap: var(--sv-space-2); }

.pi-agent-list {
  display: grid;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius-md);
}
.pi-agent-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sv-space-3);
  align-items: start;
  padding: var(--sv-space-3);
  border-top: 1px solid var(--sv-hairline);
  cursor: pointer;
}
.pi-agent-group {
  padding: var(--sv-space-2) var(--sv-space-3);
  border-top: 1px solid var(--sv-hairline);
  background: var(--sv-surface-sunken);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pi-agent-list > :first-child { border-top: 0; }
.pi-agent-option:hover { background: var(--sv-surface-sunken); }
.pi-agent-option input { margin-top: 3px; accent-color: var(--sv-black); }
.pi-agent-option strong, .pi-agent-option span { display: block; }
.pi-agent-option span { margin-top: 2px; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); line-height: 1.35; }
.pi-custom-agent summary { color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); cursor: pointer; }
.pi-custom-agent[open] summary { margin-bottom: var(--sv-space-3); }
.pi-custom-agent input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 var(--sv-space-3);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius-md);
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
}

@media (max-width: 600px) {
  .pi-invite-row { flex-wrap: wrap; }
  .pi-invite-row input { flex-basis: 100%; }
}

.shares-item {
  padding: var(--sv-space-4);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
}

.shares-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sv-space-3);
}

.shares-item h3 {
  margin: 0 0 var(--sv-space-1);
  font-size: var(--sv-text-body);
  font-weight: 500;
  line-height: 1.25;
}

.shares-item-meta,
.shares-item-recipients,
.shares-item-summary,
.shares-item-empty {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

.shares-item-actions { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }
.shares-item-actions .dialog-button { height: 36px; padding: 0 var(--sv-space-3); font-size: var(--sv-text-caption); }

.shares-item-recipients { margin-top: var(--sv-space-2); overflow-wrap: anywhere; }

/* Personal API tokens (web/app/28-api-tokens.js) */
.api-token-create { display: grid; gap: var(--sv-space-2); margin: var(--sv-space-4) 0; }
.api-token-create-row { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }
.api-token-create-row .pi-field-input { flex: 1 1 12rem; min-width: 0; }
.api-token-new { display: grid; gap: var(--sv-space-2); margin-bottom: var(--sv-space-4); padding: var(--sv-space-4); border: var(--sv-hairline-w) solid var(--sv-hairline-max); }
.api-token-new[hidden] { display: none; }
.api-token-warning { margin: 0; color: var(--sv-ink); font-weight: 500; }
.api-token-value { display: block; padding: var(--sv-space-2) var(--sv-space-3); overflow-wrap: anywhere; color: var(--sv-ink); background: var(--sv-surface-sunken); border: var(--sv-hairline-w) solid var(--sv-hairline-strong); font-family: var(--sv-font-mono); font-size: var(--sv-text-caption); user-select: all; }
/* ---------- Track: a chat's place in the ShareOS Core plan (web/app/39a-track.js) ----------
 * One dropdown (.track-select, a popover listbox), linked-item cards (.track-card, a Goal → Milestone → Task
 * lineage each) and the step-by-step picker (.track-stage, steps slide sideways). Tokens only; status green is
 * --workspace-working; rows are 44px tall; phones get a full-height sheet. */
.props-row.track { gap: var(--sv-space-3); }
.props-core-empty { margin: 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta, var(--sv-text-caption)); }
.props-core-empty[hidden], .track-cards[hidden], .props-core-picker-panel[hidden], .track-search[hidden], .track-select-search[hidden], .track-card-why[hidden] { display: none; }

/* Buttons: secondary (hairline), primary (the emphasis pair), quiet (no frame), small (in a row). */
.track-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sv-space-1); height: var(--workspace-control-height, 32px); padding: 0 var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline-strong); border-radius: var(--sv-radius); background: transparent; color: var(--sv-ink); font: inherit; font-size: var(--workspace-ui-text); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: transform var(--sv-dur-instant) var(--sv-ease-out), background-color var(--sv-dur-fast) var(--sv-ease-out), color var(--sv-dur-fast) var(--sv-ease-out), border-color var(--sv-dur-fast) var(--sv-ease-out), opacity var(--sv-dur-fast) var(--sv-ease-out); }
.track-btn .icon { width: 14px; height: 14px; }
.track-btn:hover { background: var(--workspace-hover, var(--sv-surface-sunken)); }
.track-btn:active { transform: scale(.97); }
.track-btn:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 2px; }
.track-btn.quiet { padding: 0 var(--sv-space-2); border-color: transparent; color: var(--sv-ink-secondary); }
.track-btn.quiet:hover { color: var(--sv-ink); }
.track-btn.small { height: 28px; padding: 0 var(--sv-space-2); font-size: var(--workspace-ui-meta); }
.track-btn:disabled { cursor: default; opacity: .6; transform: none; }
.track-btn:disabled:hover { background: transparent; }
.track-btn.primary, .track-btn.primary:disabled:hover { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); border-color: var(--sv-emphasis-surface); }
.track-btn.primary:hover { opacity: .85; }
.track-btn.primary:disabled { opacity: .55; }

/* People: a photo when the directory knows the person, initials otherwise. */
.track-avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; overflow: hidden; border-radius: 50%; background: var(--sv-surface-dim); color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.track-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.track-avatar.is-agent { overflow: visible; background: transparent; }
.track-card-by { display: inline-flex; align-items: center; gap: var(--sv-space-1); min-width: 0; }
.track-avatar.is-agent > * { width: 100%; height: 100%; }
.track-person { display: inline-flex; align-items: center; gap: var(--sv-space-1); min-width: 0; max-width: 100%; }
.track-person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The plan code, decoded on hover. */
.track-origin { flex: none; display: inline-flex; align-items: center; padding: 0 var(--sv-space-1); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 999px; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); font-weight: 500; line-height: 1.4; white-space: nowrap; cursor: help; }
.track-origin[data-origin="new"] { border-color: color-mix(in srgb, var(--workspace-working) 45%, transparent); color: var(--workspace-working); }
.track-stream { color: var(--sv-ink-secondary); }
.track-code { flex: none; display: inline-block; max-width: 100%; padding: 1px var(--sv-space-1); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 4px; color: var(--sv-ink-secondary); font-family: var(--sv-font-mono); font-size: var(--workspace-ui-meta); font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.3; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }

/* Titles clamp to two lines, the whole text in the tooltip; meta is 13px secondary ink. */
.track-title, .track-row-title, .track-focus-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-width: 0; color: var(--sv-ink); font-size: var(--workspace-ui-text); font-weight: 500; line-height: var(--workspace-ui-leading); overflow-wrap: anywhere; }
.track-node-meta, .track-row-meta, .track-focus-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1) var(--sv-space-3); min-width: 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); }
.track-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-hairline-strong); }
.track-dot[data-tone="good"] { background: var(--workspace-working); }
.track-dot[data-tone="bad"] { background: var(--sv-danger); }

/* Linked-item cards. */
.track-cards { display: grid; gap: var(--sv-space-2); min-width: 0; }
.track-card { overflow: hidden; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 12px; background: var(--sv-surface-raised); transition: height var(--sv-dur-base) var(--sv-ease-inout), opacity var(--sv-dur-base) var(--sv-ease-inout), margin var(--sv-dur-base) var(--sv-ease-inout), border-width var(--sv-dur-base) var(--sv-ease-inout); }
.track-card[data-enter] { animation: workspace-surface-enter var(--sv-dur-base) var(--sv-ease-out) both; }
.track-card.is-leaving { opacity: 0; margin-bottom: calc(-1 * var(--sv-space-2)); border-width: 0; pointer-events: none; }
.track-lineage { display: grid; padding: var(--sv-space-3) var(--sv-space-3) var(--sv-space-2); }
.track-node { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 var(--sv-space-2); padding: var(--sv-space-1) 0; }
.track-node-rail { position: relative; display: grid; justify-items: center; align-content: start; padding-top: 7px; }
/* The thin connector from one node's dot to the next node's dot. */
.track-node:not(:last-child) .track-node-rail::after { content: ""; position: absolute; left: 50%; top: 17px; bottom: -15px; width: var(--sv-hairline-w); margin-left: calc(-.5 * var(--sv-hairline-w)); background: var(--sv-hairline-strong); }
.track-node-body { display: grid; gap: 2px; min-width: 0; }
.track-node-kind { color: var(--sv-ink-tertiary); font-size: var(--workspace-ui-meta); letter-spacing: var(--sv-tracking-caps); text-transform: uppercase; line-height: 1.2; }
.track-node-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1) var(--sv-space-2); min-width: 0; }
.track-node:not(:last-child) .track-title { font-weight: 400; }
.track-node.is-pending .track-title { color: var(--sv-ink-secondary); font-weight: 400; animation: track-shimmer var(--workspace-pulse) var(--sv-ease-inout) infinite alternate; }
.track-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); padding: var(--sv-space-2) var(--sv-space-3); border-top: var(--sv-hairline-w) solid var(--sv-hairline); color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.track-card-actions { display: inline-flex; gap: var(--sv-space-1); margin-left: auto; }
.track-card-why { margin: 0; padding: 0 var(--sv-space-3) var(--sv-space-3); color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); }
.track-pill { display: inline-flex; align-items: center; gap: var(--sv-space-1); height: 22px; padding: 0 var(--sv-space-2); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 11px; background: transparent; color: var(--sv-ink-secondary); font: inherit; font-size: var(--workspace-ui-meta); line-height: 1; white-space: nowrap; transition: opacity var(--sv-dur-fast) var(--sv-ease-out), transform var(--sv-dur-instant) var(--sv-ease-out); }
button.track-pill { cursor: pointer; }
button.track-pill:active { transform: scale(.97); }
button.track-pill:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 2px; }
.track-pill[data-tone="review"] { border-color: var(--sv-attention); color: var(--sv-attention); }
.track-pill .icon { width: 12px; height: 12px; }
.track-pill.is-settling { animation: track-pill-settle var(--sv-dur-cine) var(--sv-ease-out) both; }
@keyframes track-pill-settle { 0% { opacity: 0; } 20%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes track-shimmer { from { opacity: .45; } to { opacity: 1; } }

/* The picker. */
.props-core-picker { display: grid; gap: var(--sv-space-3); min-width: 0; }
.track-open { justify-self: start; }
.props-core-picker-panel { display: grid; gap: var(--sv-space-3); min-width: 0; }
.track-head { display: flex; align-items: center; gap: var(--sv-space-2); min-width: 0; }
.track-head .track-select { flex: 1 1 12rem; min-width: 0; }
.track-tool { flex: none; }
.track-status { margin: 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.track-status:empty { display: none; }
.track-stage { display: grid; min-width: 0; overflow: hidden; transition: height var(--sv-dur-base) var(--sv-ease-inout); }
.track-step { grid-area: 1 / 1; display: grid; align-content: start; gap: var(--sv-space-2); min-width: 0; transition: transform var(--sv-dur-base) var(--sv-ease-inout), opacity var(--sv-dur-base) var(--sv-ease-inout); }
.track-step[data-enter="forward"] { transform: translateX(24px); opacity: 0; }
.track-step[data-enter="back"] { transform: translateX(-24px); opacity: 0; }
.track-step.is-out { pointer-events: none; transition-duration: var(--sv-dur-fast); }
.track-step.is-out[data-leave="forward"] { transform: translateX(-24px); opacity: 0; }
.track-step.is-out[data-leave="back"] { transform: translateX(24px); opacity: 0; }
.track-search, .track-select-search { display: block; width: 100%; min-width: 0; height: 36px; padding: 0 var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface); color: var(--sv-ink); font: inherit; font-size: var(--workspace-ui-text); }
.track-search:focus, .track-select-search:focus { outline: 0; border-color: var(--sv-hairline-strong); }
.track-search::placeholder, .track-select-search::placeholder { color: var(--sv-ink-secondary); opacity: 1; }
/* Rows size to their content: with a capped height, a grid stretches or squeezes auto rows to fit, and a wrapped
 * two-line title spills over the next row. max-content rows plus start alignment keep each row whole and scroll. */
.track-list { display: grid; grid-auto-rows: max-content; align-content: start; min-width: 0; max-height: 22rem; overflow-y: auto; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 12px; background: var(--sv-surface-raised); }
.track-list[data-settle] { animation: track-fade-in var(--sv-dur-fast) var(--sv-ease-out) both; }
@keyframes track-fade-in { from { opacity: 0; } to { opacity: 1; } }
.track-group { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: var(--sv-space-2); margin: 0; padding: var(--sv-space-3) var(--sv-space-3) var(--sv-space-1); background: var(--sv-surface-raised); color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); font-weight: 500; }
.track-group-count { color: var(--sv-ink-tertiary); font-weight: 400; }
.track-row { display: flex; flex: none; align-items: center; gap: var(--sv-space-2); width: 100%; min-height: 44px; margin: 0; padding: var(--sv-space-2) var(--sv-space-3); border: 0; border-top: var(--sv-hairline-w) solid var(--sv-hairline); background: transparent; color: var(--sv-ink); font: inherit; text-align: left; transition: background-color var(--sv-dur-fast) var(--sv-ease-out), transform var(--sv-dur-instant) var(--sv-ease-out); }
.track-row:first-child, .track-group + .track-row { border-top: 0; }
button.track-row { cursor: pointer; }
button.track-row:hover, button.track-row:focus-visible { background: var(--workspace-hover, var(--sv-surface-sunken)); }
button.track-row:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: -2px; }
button.track-row:active { transform: scale(.985); }
.track-row-body { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.track-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1) var(--sv-space-2); min-width: 0; }
.track-row-end { display: inline-flex; flex: none; align-items: center; gap: var(--sv-space-1); color: var(--sv-ink-tertiary); }
.track-row-chevron, .track-row-check { width: 16px; height: 16px; }
.track-row-check { color: var(--sv-ink); }
.track-empty { margin: 0; padding: var(--sv-space-4) var(--sv-space-3); color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.track-crumbs { display: flex; align-items: center; gap: var(--sv-space-1); min-width: 0; }
.track-back { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--sv-radius); background: transparent; color: var(--sv-ink-secondary); cursor: pointer; transition: background-color var(--sv-dur-fast) var(--sv-ease-out), color var(--sv-dur-fast) var(--sv-ease-out), transform var(--sv-dur-instant) var(--sv-ease-out); }
.track-back .icon { width: 18px; height: 18px; }
.track-back:hover, .track-back:focus-visible { color: var(--sv-ink); background: var(--workspace-hover, var(--sv-surface-sunken)); }
.track-back:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 2px; }
.track-back:active { transform: scale(.97); }
.track-trail { display: flex; align-items: center; gap: var(--sv-space-1); min-width: 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.track-trail-part { min-width: 0; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-trail-part[aria-current] { color: var(--sv-ink); }
.track-trail-sep { flex: none; color: var(--sv-ink-tertiary); }
.track-focus { display: grid; gap: var(--sv-space-2); padding: var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 12px; background: var(--sv-surface-raised); }
.track-focus-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); min-width: 0; }
.track-focus-title { flex: 1 1 12rem; -webkit-line-clamp: 3; }
.track-focus-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); }
.track-focus > .track-btn { justify-self: start; }
.track-skeleton { padding: var(--sv-space-2) 0; }
.track-skeleton-row { display: flex; align-items: center; gap: var(--sv-space-2); min-height: 44px; padding: 0 var(--sv-space-3); }
.track-skeleton-dot, .track-skeleton-text { display: block; border-radius: 4px; background: var(--sv-surface-dim); animation: track-shimmer var(--workspace-pulse) var(--sv-ease-inout) infinite alternate; }
.track-skeleton-dot { width: 8px; height: 8px; border-radius: 50%; }
.track-skeleton-text { flex: 1 1 60%; height: 10px; }
.track-skeleton-text.short { flex-basis: 20%; }

/* The dropdown: a trigger and a popover listbox in the top layer, grown from the trigger's corner. */
.track-select { position: relative; min-width: 0; }
.track-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-2); width: 100%; min-width: 0; height: 36px; padding: 0 var(--sv-space-2) 0 var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline-strong); border-radius: var(--sv-radius); background: var(--sv-surface-raised); color: var(--sv-ink); font: inherit; font-size: var(--workspace-ui-text); font-weight: 500; text-align: left; cursor: pointer; transition: transform var(--sv-dur-instant) var(--sv-ease-out), background-color var(--sv-dur-fast) var(--sv-ease-out), border-color var(--sv-dur-fast) var(--sv-ease-out); }
.track-select-trigger:hover { background: var(--workspace-hover, var(--sv-surface-sunken)); }
.track-select-trigger:active { transform: scale(.97); }
.track-select-trigger:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 2px; }
.track-select-trigger.is-empty { color: var(--sv-ink-secondary); font-weight: 400; }
.track-select-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-select-chevron { flex: none; width: 16px; height: 16px; color: var(--sv-ink-secondary); transform: rotate(90deg); transition: transform var(--sv-dur-fast) var(--sv-ease-out); }
.track-select-trigger[aria-expanded="true"] .track-select-chevron { transform: rotate(-90deg); }
.track-select-pop { position: fixed; inset: auto; z-index: var(--sv-z-modal); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--sv-space-1); width: auto; height: auto; margin: 0; padding: var(--sv-space-1); overflow: hidden; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 12px; background: var(--sv-surface-raised); color: var(--sv-ink); box-shadow: var(--workspace-panel-shadow); opacity: 0; transform: scale(.96); transform-origin: top left; transition: opacity var(--sv-dur-fast) var(--sv-ease-out), transform var(--sv-dur-fast) var(--sv-ease-out), display var(--sv-dur-fast) allow-discrete, overlay var(--sv-dur-fast) allow-discrete; }
.track-select-pop:not([data-open]) { display: none; }
.track-select-pop[data-open] { opacity: 1; transform: none; }
@starting-style { .track-select-pop[data-open] { opacity: 0; transform: scale(.96); } }
.track-select-pop[data-placement="above"] { transform-origin: bottom left; }
.track-select-list { display: grid; min-width: 0; overflow-y: auto; outline: 0; }
.track-select-option { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-2); min-height: 36px; padding: var(--sv-space-1) var(--sv-space-3); border-radius: 7px; font-size: var(--workspace-ui-text); cursor: pointer; }
.track-select-option.is-active { background: var(--workspace-hover, var(--sv-surface-sunken)); }
.track-select-option[aria-selected="true"] { font-weight: 500; }
.track-select-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-select-check { flex: none; width: 16px; height: 16px; }
.track-select-empty { margin: 0; padding: var(--sv-space-2) var(--sv-space-3); color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }

@media (max-width: 760px) {
  /* Track is a full-height sheet on a phone. */
  .app-dialog.props-dialog { width: 100%; max-width: none; height: var(--app-viewport-height, 100dvh); max-height: var(--app-viewport-height, 100dvh); margin: 0; inset-inline: 0; }
  .app-dialog.props-dialog > .dialog-card { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .track-head { flex-wrap: wrap; }
  .track-head .track-select { flex-basis: 100%; }
  .track-btn, .track-select-trigger, .track-search, .track-back, .track-pill { min-height: 44px; }
  .track-btn.small { height: 44px; }
  .track-list { max-height: none; }
  .track-select-option { min-height: 44px; }
  .track-select-search { height: 44px; font-size: max(1rem, 16px); }
  .track-search { height: 44px; font-size: max(1rem, 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .track-card, .track-card[data-enter], .track-pill, .track-stage, .track-step, .track-list[data-settle], .track-select-pop, .track-select-chevron, .track-btn, .track-row, .track-back, .track-select-trigger, .track-skeleton-dot, .track-skeleton-text, .track-node.is-pending .track-title { animation: none; transition: none; }
}
.shares-item-summary { margin-top: var(--sv-space-4); color: var(--sv-ink); font-weight: 500; }
.shares-item-empty { margin-top: var(--sv-space-4); }

.share-access-list {
  display: grid;
  gap: var(--sv-space-1);
  margin: var(--sv-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.share-access {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sv-space-3);
  padding: var(--sv-space-2) 0;
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--sv-text-caption);
}

.share-access-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.share-access-badge {
  padding: 2px var(--sv-space-2);
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
  font-size: var(--sv-text-caption);
}

.share-access.denied .share-access-badge { color: var(--sv-inverse-ink); background: var(--sv-inverse-surface); }
.share-access-when { color: var(--sv-ink-secondary); white-space: nowrap; }

@media (max-width: 600px) {
  .share-access { grid-template-columns: minmax(0, 1fr) auto; }
  .share-access-when { grid-column: 1 / -1; }
  /* Keep the three actions on one row instead of a tall stack. */
  .shares-item-head { flex-direction: column; }
  .shares-item-actions { width: 100%; flex-wrap: nowrap; }
  .shares-item-actions .dialog-button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 var(--sv-space-1);
    white-space: nowrap;
    font-size: var(--sv-text-caption);
  }
}

/* Artifact gallery: real page captures, squared surfaces, tokens only. */
.artifacts-dialog { width: min(calc(100% - (var(--sv-space-6) * 2)), 68rem); }
.artifacts-dialog-card {
  gap: var(--sv-space-4);
  padding: var(--sv-space-6);
  max-height: min(86vh, 52rem);
}

/* ---------- Attachment viewer ---------- */

/* The dialog box, not only its card: without this the generic 30rem dialog
   width clipped the viewer to half its card. */
.attachment-viewer-dialog { width: min(96vw, 60rem); }

.attachment-viewer-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--sv-space-4);
  width: 100%;
  max-width: 96vw;
  height: min(88vh, 48rem);
  padding: var(--sv-space-5);
}

.attachment-viewer-bar {
  display: flex;
  align-items: flex-start;
  gap: var(--sv-space-4);
  justify-content: space-between;
}

.attachment-viewer-heading { min-width: 0; }
.attachment-viewer-heading h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--sv-text-body);
}

.attachment-viewer-meta {
  margin: 2px 0 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

.attachment-viewer-actions {
  display: flex;
  gap: var(--sv-space-1);
  flex: 0 0 auto;
  align-items: center;
}

.attachment-viewer-stage {
  display: grid;
  place-items: center;
  gap: var(--sv-space-3);
  min-height: 0;
  overflow: auto;
  background: var(--sv-gray-xdark);
}

.attachment-viewer-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.attachment-viewer-doc {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--sv-surface);
}

.attachment-viewer-glyph {
  width: 32px;
  height: 32px;
  color: var(--sv-inverse-ink-secondary);
}

.attachment-viewer-note {
  margin: 0;
  padding: 0 var(--sv-space-5);
  color: var(--sv-inverse-ink-secondary);
  font-size: var(--sv-text-small);
  text-align: center;
}

@media (max-width: 600px) {
  .attachment-viewer-dialog { width: 100vw; }
  .attachment-viewer-card {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    padding: var(--sv-space-4);
  }
}

.artifacts-filter {
  display: flex;
  gap: var(--sv-space-2);
  flex: 0 0 auto;
  overflow-x: auto;
  padding-bottom: var(--sv-space-1);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.artifact-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  flex: 0 0 auto;
  height: 32px;
  padding: 0 var(--sv-space-3);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  color: var(--sv-ink-secondary);
  background: transparent;
  font: inherit;
  font-size: var(--sv-text-caption);
  white-space: nowrap;
  cursor: pointer;
}

.artifact-filter-btn span {
  color: var(--sv-ink-tertiary);
  font-variant-numeric: tabular-nums;
}

.artifact-filter-btn:hover { border-color: var(--sv-hairline-max); color: var(--sv-ink); }

.artifact-filter-btn.is-active {
  border-color: var(--sv-hairline-max);
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
}

.artifact-filter-btn.is-active span { color: var(--sv-inverse-ink-secondary); }

.artifacts-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sv-space-4);
  overflow: auto;
  padding-bottom: var(--sv-space-2);
}

.artifacts-empty {
  grid-column: 1 / -1;
  margin: var(--sv-space-8) 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  text-align: center;
}

.artifact-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  background: var(--sv-surface-raised);
  transition: border-color var(--sv-dur-instant) var(--sv-ease-out);
}

.artifact-card:hover { border-color: var(--sv-hairline-max); }

/* 1280x800 capture, so the frame matches the shot's aspect ratio exactly. */
.artifact-preview {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
  background: var(--sv-surface-sunken);
}

.artifact-preview-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sv-space-4);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  text-align: center;
  overflow-wrap: anywhere;
}

.artifact-shot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity var(--sv-dur-fast) var(--sv-ease-out);
}

.artifact-card.has-shot .artifact-shot { opacity: 1; }
.artifact-card.has-shot .artifact-preview-fallback { display: none; }

.artifact-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
  flex: 1 1 auto;
  padding: var(--sv-space-3) var(--sv-space-4) var(--sv-space-4);
}

.artifact-card-title {
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.artifact-card-title:hover { text-decoration: underline; }

.artifact-card-meta {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artifact-card-foot {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  margin-top: auto;
  padding-top: var(--sv-space-2);
  min-width: 0;
}

.artifact-card-kind {
  flex: 0 0 auto;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

/* Every chat that made the artifact, on a line of its own above the type and
 * delete control (and below the title in a project-info row or the reader).
 * The chips wrap rather than scroll, so a long title or a revealed list never
 * pushes the footer past its card. */
.artifact-card-sources {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-1) var(--sv-space-3);
  min-width: 0;
}
.artifact-card-foot { flex-wrap: wrap; }
.artifact-card-foot > .artifact-card-sources { order: -1; }

.artifact-card-source {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sv-ink-secondary);
  font: inherit;
  font-size: var(--sv-text-caption);
  text-align: left;
  text-decoration: underline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.artifact-card-source:hover { color: var(--sv-ink); }

.artifact-card-sources-more {
  flex: 0 0 auto;
  padding: 0 var(--sv-space-1);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  background: transparent;
  color: var(--sv-ink-secondary);
  font: inherit;
  font-size: var(--sv-text-caption);
  cursor: pointer;
}

.artifact-card-sources-more:hover { color: var(--sv-ink); border-color: currentColor; }

.pi-artifact { flex-wrap: wrap; }
/* In the reader the chats share the status line and ellipsize rather than add
 * a line above the preview, until "+N" asks for the rest. */
.artifact-reader-meta { display: flex; align-items: baseline; gap: var(--sv-space-1) var(--sv-space-3); min-width: 0; margin: 0 0 var(--sv-space-1); }
.artifact-reader-meta > .artifact-reader-status { flex: 0 0 auto; margin: 0; }
.artifact-reader-meta > .artifact-reader-sources { flex: 0 1 auto; flex-wrap: nowrap; }
.artifact-reader-meta:has(> .artifact-reader-sources[data-expanded]),
.artifact-reader-meta > .artifact-reader-sources[data-expanded] { flex-wrap: wrap; }

.artifact-card-delete {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  margin-left: auto;
  padding: 0;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  cursor: pointer;
}
.artifact-card-delete:hover,
.artifact-card-delete:focus-visible { color: var(--sv-danger); border-color: currentColor; }
.artifact-card-delete:disabled { opacity: .45; cursor: wait; }
.artifact-card-delete .icon { width: 14px; height: 14px; }

@media (max-width: 600px) {
  .artifacts-dialog-card { padding: var(--sv-space-4); }
  .artifacts-gallery { grid-template-columns: 1fr; }
}

/* Artifact gallery search */
.artifacts-search {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  height: 40px;
  padding: 0 var(--sv-space-3);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  background: var(--sv-surface-raised);
}
.artifacts-search:focus-within { border-color: var(--sv-hairline-max); }
.artifacts-search-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--sv-gray-mid); stroke-width: 1.8; stroke-linecap: round; }
#artifacts-search-input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--sv-ink); font: inherit; font-size: var(--sv-text-small); }
#artifacts-search-input::placeholder { color: var(--sv-ink-tertiary); }
#artifacts-search-clear { border: 0; padding: 0; background: transparent; color: var(--sv-ink-secondary); font: inherit; font-size: var(--sv-text-caption); cursor: pointer; }
#artifacts-search-clear:hover { color: var(--sv-ink); text-decoration: underline; }

/* Venture pipeline */

.venture-card {
  gap: var(--sv-space-4);
  width: min(100%, 44rem);
  max-height: min(90vh, 54rem);
  overflow-y: auto;
}

/* A concept is a memo: give it real room, but never so much that the submit
 * button falls below the fold on a phone. */
.venture-card textarea {
  width: 100%;
  min-height: min(20rem, 34vh);
  max-height: 60vh;
  padding: var(--sv-space-3) var(--sv-space-4);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font: inherit;
  font-size: var(--sv-text-small);
  font-weight: 400;
  line-height: var(--sv-leading-body);
  resize: vertical;
}

.venture-card textarea:focus {
  border-color: var(--sv-hairline-max);
  outline: none;
}

.venture-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sv-space-4);
}

/* Intake is one text box; naming and placement are opt-in. */
.venture-options {
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
  padding-top: var(--sv-space-3);
}

.venture-options > summary {
  cursor: pointer;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

.venture-options > summary:hover { color: var(--sv-ink); }

.venture-options[open] > summary { margin-bottom: var(--sv-space-3); }

.venture-options .dialog-field { margin-bottom: var(--sv-space-3); }

.venture-hint {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sv-space-3);
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

.venture-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.venture-count.is-near-limit { color: var(--sv-ink); }

.venture-row-concept.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.venture-row-concept-block {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-1);
  min-width: 0;
}

.venture-concept-toggle {
  padding: 0;
  color: var(--sv-ink-strong);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--sv-text-caption);
  text-decoration: underline;
  cursor: pointer;
}

.venture-concept-toggle:hover { color: var(--sv-ink); }

.venture-error:empty { display: none; }

.venture-error {
  margin: 0;
  color: var(--sv-danger);
  font-size: var(--sv-text-caption);
}

.venture-head-actions {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
}
@media (max-width: 600px) {
  .venture-list-dialog .share-dialog-heading { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; }
  .venture-head-actions { display: contents; }
  #ventures-dialog-close { grid-column: 2; grid-row: 1; }
  #ventures-add-btn { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}

.venture-stage-filter {
  display: flex;
  gap: var(--sv-space-2);
  flex: 0 0 auto;
  overflow-x: auto;
  padding-bottom: var(--sv-space-1);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.venture-filter-chip {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink-secondary);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font: inherit;
  font-size: var(--sv-text-caption);
  white-space: nowrap;
  cursor: pointer;
}

.venture-filter-chip:hover { border-color: var(--sv-hairline-max); color: var(--sv-ink); }

.venture-filter-chip[aria-pressed="true"] {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border-color: var(--sv-hairline-max);
}

.venture-list {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-4);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.venture-empty {
  margin: 0;
  padding: var(--sv-space-8) 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
}

.venture-row {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-3);
  padding: var(--sv-space-5);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
}

.venture-row-head {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  flex-wrap: wrap;
}

.venture-row-name {
  margin: 0;
  color: var(--sv-ink);
  font-size: var(--sv-text-h4);
  font-weight: 500;
  line-height: var(--sv-leading-heading);
}

.venture-rename {
  margin-left: var(--sv-space-2);
  padding: 0;
  border: 0;
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
  background: none;
  color: var(--sv-ink-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--sv-text-caption);
  font-weight: 400;
  vertical-align: middle;
}

.venture-rename:hover { color: var(--sv-ink); border-bottom-color: var(--sv-hairline-max); }

.venture-stage-chip {
  padding: 2px var(--sv-space-3);
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  font-size: var(--sv-text-caption);
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

.venture-score {
  margin-left: auto;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-variant-numeric: tabular-nums;
}

.venture-row-meta {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

.venture-row-meta strong {
  color: var(--sv-ink);
  font-weight: 500;
}

.venture-row-concept {
  margin: 0;
  color: var(--sv-ink-strong);
  font-size: var(--sv-text-small);
  line-height: var(--sv-leading-body);
}

.venture-facts {
  display: grid;
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
  gap: var(--sv-space-2) var(--sv-space-4);
  margin: 0;
  font-size: var(--sv-text-caption);
}

.venture-facts dt {
  color: var(--sv-ink-tertiary);
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

.venture-facts dd {
  margin: 0;
  color: var(--sv-ink-strong);
  line-height: 1.5;
}

.venture-links {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  flex-wrap: wrap;
}

.venture-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--sv-space-3);
  color: var(--sv-ink);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--sv-text-caption);
  text-decoration: none;
  cursor: pointer;
}

.venture-link:hover {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border-color: var(--sv-hairline-max);
}

.venture-link-button { font: inherit; font-size: var(--sv-text-caption); }

.venture-pending {
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
}

@media (max-width: 600px) {
  .venture-form-row { grid-template-columns: minmax(0, 1fr); }
  .venture-card textarea { min-height: min(11rem, 26vh); }
  .venture-hint { flex-direction: column; gap: var(--sv-space-1); }
  .venture-concept-toggle { min-height: 44px; }
  .venture-facts { grid-template-columns: minmax(0, 1fr); gap: var(--sv-space-1); }
  .venture-facts dd { margin-bottom: var(--sv-space-2); }
  .venture-head-actions { flex-wrap: wrap; }
  .venture-options > summary { min-height: 44px; display: flex; align-items: center; }
  .venture-rename { min-height: 44px; margin-left: 0; display: inline-flex; align-items: center; }
  .venture-link { min-height: 44px; }
  .venture-filter-chip { min-height: 44px; }
}

/* ---------- ShareOS home: nav badge + activity rows ---------- */

.hud-nav-btn {
  position: relative;
}

.hud-nav-btn .messages-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  color: var(--sv-black);
  background: var(--sv-gray-light);
  border: 1px solid var(--sv-emphasis-ink);
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-micro);
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.hud-nav-btn.has-live {
  color: var(--sv-white);
  box-shadow: inset 0 -2px 0 var(--sv-ink);
}

.hud-subhead {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

/* A named group inside "Needs you". The rule above it is what stops a review
 * queue from reading as one more unanswered chat. */
.hud-subhead {
  padding: var(--sv-space-3) var(--sv-space-4) var(--sv-space-2);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}

.harness-fix { border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.harness-fix .hud-row { border-bottom: 0; }

.hud-list {
  min-width: 0;
  overflow-y: auto;
}

.hud-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  gap: var(--sv-space-3);
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: var(--sv-space-3) var(--sv-space-4);
  color: var(--sv-ink);
  background: transparent;
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
  text-align: left;
}

.hud-row:hover,
.hud-row:focus-visible,
.hud-row.is-active {
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
  outline-offset: -3px;
}

.hud-row[data-tone="received"],
.hud-row[data-tone="working"],
.hud-row[data-tone="writing"] {
  box-shadow: inset 2px 0 0 currentColor;
}

.hud-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--sv-ink-secondary);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
}

.hud-row:hover .hud-row-icon,
.hud-row:focus-visible .hud-row-icon,
.hud-row.is-active .hud-row-icon {
  color: var(--sv-ink);
  border-color: var(--sv-hairline-strong);
}

.hud-row-icon .icon {
  width: 16px;
  height: 16px;
}

.hud-row-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hud-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sv-space-3);
  min-width: 0;
}

.hud-row-top strong {
  min-width: 0;
  overflow: hidden;
  font-size: var(--sv-text-small);
  font-weight: 500;
  text-overflow: ellipsis;
}

.hud-row-meta {
  flex: 0 0 auto;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-variant-numeric: tabular-nums;
}

.hud-row-context,
.hud-row-detail {
  overflow: hidden;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-row:hover .hud-row-meta,
.hud-row:hover .hud-row-context,
.hud-row:hover .hud-row-detail,
.hud-row:focus-visible .hud-row-meta,
.hud-row:focus-visible .hud-row-context,
.hud-row:focus-visible .hud-row-detail,
.hud-row.is-active .hud-row-meta,
.hud-row.is-active .hud-row-context,
.hud-row.is-active .hud-row-detail {
  color: var(--sv-ink-secondary);
}

.hud-row-arrow {
  color: var(--sv-ink-secondary);
}

.hud-row-arrow .icon {
  width: 16px;
  height: 16px;
}

.hud-empty {
  padding: var(--sv-space-6) var(--sv-space-4);
  margin: 0;
  color: var(--sv-gray-mid);
  font-size: var(--sv-text-caption);
  font-weight: 400;
}

@media (max-width: 700px) {
  .hud-row {
    min-height: 64px;
  }
}

@media (forced-colors: active) {
  .hud-row {
    border-color: CanvasText;
  }

  .hud-row:hover,
  .hud-row:focus-visible,
  .hud-row.is-active {
    color: Canvas;
    background: CanvasText;
  }
}

/* ---------- ShareOS Home ---------- */

.shareos-home {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* The rail keeps orientation and chat navigation visible while the canvas
 * carries the larger Inbox, Work and Chats views. */
.sidebar-primary { flex: none; }
.sidebar-create { margin-top: 0; }
.sidebar-scroll[hidden] { display: none !important; }
.workspace-browser { min-height: 55vh; }
.workspace-browser-head {
  display: grid;
  grid-template-columns: auto minmax(12rem, 24rem);
  gap: var(--sv-space-3);
  align-items: center;
  margin-bottom: var(--sv-space-4);
}
.workspace-browser-head input { padding: 0 var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline-strong); color: var(--sv-ink); }
#workspace-browser-tree .project { margin-bottom: var(--sv-space-1); }

.shareos-home-hero {
  position: relative;
  margin: var(--sv-space-8) auto var(--sv-space-8);
}

/* The task leads the entry surface: heading only, no mark. */
.shareos-home-head {
  text-align: left;
}

.shareos-home-head .shareos-home-heading {
  margin: 0;
}

.shareos-home-heading,
.shareos-home-form,
.shareos-home-status {
  position: relative;
  z-index: 1;
}

.shareos-home-heading {
  min-width: 0;
  text-wrap: balance;
  color: var(--sv-ink);
}

.shareos-home-quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-2);
  margin-top: var(--sv-space-3);
  position: relative;
  z-index: 1;
}

.shareos-home-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: 44px;
  padding: 0 var(--sv-space-4);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font: inherit;
  font-size: var(--sv-text-small);
  cursor: pointer;
}

.shareos-home-quick-btn .icon { width: 16px; height: 16px; }

.shareos-home-quick-btn:hover {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border-color: var(--sv-hairline-max);
}

.shareos-home-status {
  margin-top: var(--sv-space-4);
  padding: var(--sv-space-4) var(--sv-space-5);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--sv-text-small);
  color: var(--sv-ink-secondary);
}

.shareos-home-decision-msg {
  margin: 0 0 var(--sv-space-4);
  font-size: var(--sv-text-small);
  font-weight: 500;
  color: var(--sv-ink);
}

/* The instant acknowledgement for a prompt submitted before its chat exists
   (the root prompt's status panel, and a project landing page under the
   composer). The receipt inside it is the transcript's own .msg-receipt, so the
   dot, its tone and its stand-down under reduced motion are the ones this
   interface has already settled on rather than a second live mark. */
.prompt-sending {
  display: grid;
  gap: var(--sv-space-2);
}

.project-home-sending {
  margin-top: var(--sv-space-3);
  padding: var(--sv-space-4) var(--sv-space-5);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
}

.prompt-sending-text {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  line-height: 1.45;
}

.prompt-sending .msg-receipt {
  width: auto;
  margin-top: 0;
}

.shareos-home-workspace {
  display: grid;
  margin: 0 auto var(--sv-space-8);
}

.shareos-home-zone,
.shareos-home-chats {
  min-width: 0;
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}

.shareos-home-zone {
  display: flex;
  flex-direction: column;
}

.shareos-home-zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shareos-home-zone-head h2 {
  margin: 0;
}

.shareos-home-zone-count {
  font-variant-numeric: tabular-nums;
}

/* Home is the chat database. Rows stay flat; secondary properties move through
 * the existing editor instead of hundreds of native selects. */
.home-chat-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.home-chat-toolbar label {
  display: flex;
  gap: var(--sv-space-2);
  align-items: center;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  white-space: nowrap;
}

.home-chat-toolbar input,
.home-chat-toolbar select {
  max-width: 100%;
  padding: 0 var(--sv-space-2);
  color: var(--sv-ink);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font: inherit;
  font-size: var(--sv-text-caption);
}

.home-chat-toolbar input:focus,
.home-chat-toolbar select:focus {
  outline: none;
}

.home-chat-toolbar input {
  flex: 1 1 16rem;
  min-width: 0;
}

.home-chat-table-wrap {
  max-width: 100%;
  overflow-x: hidden;
}

.home-chat-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--sv-text-caption);
}

.home-chat-table caption {
  caption-side: top;
  padding: var(--sv-space-6) 0;
  text-align: left;
}

.home-chat-table th,
.home-chat-table td {
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.home-chat-table thead th {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
}

.home-chat-group th {
  padding-top: var(--sv-space-4);
  font-weight: 500;
}

.home-chat-name {
  width: 44%;
  min-width: 0;
}

.home-chat-workspace {
  width: 20%;
}

.home-chat-activity-cell {
  width: 18%;
}

.home-chat-updated {
  width: 10%;
}

.home-chat-table .home-chat-actions {
  width: 4.5rem;
  text-align: right;
}

.home-chat-open {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 36px;
  padding: var(--sv-space-1) 0;
  color: var(--sv-ink);
  text-align: left;
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.home-chat-properties-btn {
  min-height: 36px;
  padding: 0 var(--sv-space-2);
  color: var(--sv-ink-secondary);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font: inherit;
  cursor: pointer;
}

.home-chat-properties-btn:hover,
.home-chat-properties-btn:focus-visible {
  color: var(--sv-ink);
  border-color: var(--sv-hairline-max);
}

.home-chat-open:hover .home-chat-title,
.home-chat-open:focus-visible .home-chat-title {
  text-decoration: underline;
}

.home-chat-title,
.home-chat-meta,
.home-chat-mobile-meta,
.home-chat-workspace,
.home-chat-updated {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-chat-meta,
.home-chat-mobile-meta,
.home-chat-updated {
  color: var(--sv-ink-secondary);
}

.home-chat-mobile-meta {
  display: none;
}

.home-chat-activity {
  display: inline-flex;
  max-width: 10rem;
  padding: 2px var(--sv-space-2);
  overflow: hidden;
  color: var(--sv-ink-secondary);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-chat-activity[data-tone="input"],
.home-chat-activity[data-tone="error"],
.home-chat-activity[data-tone="stalled"],
.home-chat-activity[data-tone="stopped"] {
  color: var(--sv-ink);
  border-color: var(--sv-red, var(--sv-danger));
}

.home-chat-activity[data-tone="working"],
.home-chat-activity[data-tone="writing"],
.home-chat-activity[data-tone="received"] {
  color: var(--sv-ink);
  border-color: var(--workspace-working);
}

/* Rows on the light home surface */
.shareos-home .hud-row {
  color: var(--sv-ink);
  border-bottom-color: var(--sv-hairline);
}

.shareos-home .hud-row-icon {
  color: var(--sv-ink-secondary);
  border-color: var(--sv-hairline);
}

.shareos-home .hud-row-meta,
.shareos-home .hud-row-context,
.shareos-home .hud-row-detail {
  color: var(--sv-ink-secondary);
}

.shareos-home .hud-row:hover .hud-row-meta,
.shareos-home .hud-row:hover .hud-row-context,
.shareos-home .hud-row:hover .hud-row-detail,
.shareos-home .hud-row:focus-visible .hud-row-meta,
.shareos-home .hud-row:focus-visible .hud-row-context,
.shareos-home .hud-row:focus-visible .hud-row-detail {
  color: var(--sv-ink-secondary);
}

.shareos-home .hud-empty {
  color: var(--sv-ink-tertiary);
}

/* The home is the light surface, so the HUD's dark-on-dark subhead colours have
 * to be restated against page tokens rather than inherited. */
.shareos-home .hud-subhead {
  padding: var(--sv-space-4) 0 var(--sv-space-2);
  color: var(--sv-ink-secondary);
  border-top-color: var(--sv-hairline);
}
.shareos-home .harness-fix { border-bottom-color: var(--sv-hairline); }


/* Phone: single column, 44 px touch targets */
@media (max-width: 640px) {

  .shareos-home-head {
    margin-bottom: var(--sv-space-4);
  }


  .shareos-home .hud-row {
    min-height: 44px;
  }
  .home-chat-toolbar input,
  .home-chat-toolbar select,
  .home-chat-open,
  .home-chat-properties-btn {
    min-height: 44px;
  }

  .home-chat-workspace,
  .home-chat-updated,
  .home-chat-table thead th:nth-child(2),
  .home-chat-table thead th:nth-child(4) {
    display: none;
  }

  .home-chat-name {
    width: auto;
  }

  .home-chat-activity-cell {
    width: 30%;
  }

  .home-chat-table .home-chat-actions {
    width: 3.25rem;
    padding-right: 0;
  }

  .home-chat-mobile-meta {
    display: block;
  }

  .home-chat-title {
    display: -webkit-box;
    line-height: 1.25;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .home-chat-table th,
  .home-chat-table td {
    padding-inline: var(--sv-space-1);
  }

  .home-chat-activity {
    max-width: 100%;
  }
}

@media (forced-colors: active) {
  .shareos-home-form,
  .shareos-home-status {
    border-color: CanvasText;
  }

  .shareos-home-send,
  .shareos-home-bar .composer-icon-btn {
    border: 1px solid ButtonText;
  }
}

/* ---------- Answer cards (poll-style questions) ---------- */

/* A question the agent puts to a member renders as a card with one-tap
 * answers. Chat placement matches the assistant text column; the compact
 * variant is used in DMs and the attention queue. */
.ask-card {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-3);
  max-width: 72ch;
  margin-top: var(--sv-space-4);
  padding: var(--sv-space-4) var(--sv-space-5);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-left: 3px solid var(--sv-ink);
  border-radius: var(--sv-radius);
}

.sv-dark .ask-card { background: var(--sv-surface-raised); }

.ask-head { display: flex; align-items: center; gap: var(--sv-space-2); }

.ask-kicker {
  font-size: var(--sv-text-caption);
  font-weight: 500;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
  color: var(--sv-ink-secondary);
}

.ask-question {
  margin: 0;
  font-size: var(--sv-text-body);
  line-height: 1.4;
  font-weight: 500;
}

.ask-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-2);
}

.ask-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 min(100%, 10.5rem);
  min-width: 0;
  min-height: 44px;
  padding: var(--sv-space-3) var(--sv-space-4);
  text-align: left;
  color: var(--sv-ink);
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--sv-dur-fast) var(--sv-ease-out),
    background var(--sv-dur-fast) var(--sv-ease-out);
}

.ask-option:hover:not(:disabled) { border-color: var(--sv-ink); background: var(--sv-surface-raised); }
.ask-option:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.ask-option:disabled { cursor: default; opacity: 0.72; }

.ask-option-label { font-size: var(--sv-text-small); font-weight: 500; }
.ask-option-detail { font-size: var(--sv-text-caption); color: var(--sv-ink-secondary); }

/* The chosen answer is state, not an action, so it is marked in ink. Green is
 * reserved for the one live action on the card (Send answer). */
.ask-option.is-chosen {
  border-color: var(--sv-ink);
  box-shadow: inset 3px 0 0 var(--sv-ink);
  background: var(--sv-surface-raised);
  font-weight: 500;
  opacity: 1;
}

.ask-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-2);
}

.ask-free,
.ask-send,
.ask-skip {
  align-self: flex-start;
  min-height: 44px;
  padding: var(--sv-space-2) var(--sv-space-4);
  color: var(--sv-ink);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  font: inherit;
  font-size: var(--sv-text-caption);
  cursor: pointer;
}

.ask-skip {
  color: var(--sv-ink-secondary);
  background: transparent;
  border: var(--sv-hairline-w) solid transparent;
}

.ask-send {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border-color: var(--sv-inverse-surface);
  font-weight: 500;
}

.ask-free:hover,
.ask-skip:hover { color: var(--sv-ink); border-color: var(--sv-ink); }
.ask-send:disabled,
.ask-skip:disabled { opacity: 0.5; cursor: default; }
.ask-free:focus-visible,
.ask-send:focus-visible,
.ask-skip:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }

.ask-card.is-answered { border-left-color: var(--sv-hairline); }
.ask-card.is-answered .ask-kicker { color: var(--sv-ink-tertiary); }

/* Approval cards (src/permissions.ts): a decision about an action the agent
 * wants to take, not an answer to a question — so they must not read as an
 * ask card. Amber accent, the exact command in a code box, two buttons. */
.approval-card {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-3);
  max-width: 72ch;
  margin-top: var(--sv-space-4);
  padding: var(--sv-space-4) var(--sv-space-5);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-left: 4px solid var(--sv-attention);
  border-radius: var(--sv-radius);
}
.approval-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sv-space-2); }
.approval-kicker {
  font-size: var(--sv-text-caption);
  font-weight: 700;
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
  color: var(--sv-attention);
}
.approval-tool,
.approval-cost {
  font-size: var(--sv-text-caption);
  color: var(--sv-ink-secondary);
  padding: 1px 8px;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
}
.approval-cost { font-weight: 500; color: var(--sv-ink); }
.approval-summary { margin: 0; font-size: var(--sv-text-body); line-height: 1.4; font-weight: 500; }
.approval-command {
  margin: 0;
  padding: var(--sv-space-2) var(--sv-space-3);
  font-size: var(--sv-text-small);
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  white-space: pre-wrap;
  word-break: break-word;
}
.approval-reason { margin: 0; font-size: var(--sv-text-caption); color: var(--sv-ink-secondary); }
.approval-actions { display: flex; gap: var(--sv-space-2); }
.approval-approve,
.approval-deny {
  min-height: 40px;
  padding: var(--sv-space-2) var(--sv-space-5);
  border-radius: var(--sv-radius);
  font: inherit;
  font-size: var(--sv-text-small);
  font-weight: 500;
  cursor: pointer;
}
.approval-approve { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); border: var(--sv-hairline-w) solid var(--sv-emphasis-surface); }
.approval-deny { color: var(--sv-ink); background: transparent; border: var(--sv-hairline-w) solid var(--sv-hairline); }
.approval-approve:hover:not(:disabled) { background: var(--sv-emphasis-surface); border-color: var(--sv-emphasis-surface); opacity: .85; }
.approval-deny:hover:not(:disabled) { border-color: var(--sv-ink); }
.approval-approve:disabled,
.approval-deny:disabled { cursor: default; opacity: 0.55; }
.approval-approve:focus-visible,
.approval-deny:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.approval-card.is-decided { border-left-color: var(--sv-hairline); }
.approval-card.is-decided .approval-kicker { color: var(--sv-ink-secondary); }
.approval-card.is-approved .approval-approve { opacity: 1; }
.approval-card.is-denied .approval-deny { opacity: 1; border-color: var(--sv-ink); }

.ask-card-compact {
  grid-column: auto;
  max-width: none;
  margin-top: var(--sv-space-2);
  padding: var(--sv-space-3);
  gap: var(--sv-space-2);
  border-radius: var(--sv-radius);
}

.ask-card-compact .ask-question { font-size: var(--sv-text-small); }
.ask-card-compact .ask-option { flex: 1 1 min(100%, 11rem); padding: var(--sv-space-2) var(--sv-space-3); }

/* The card must sit outside the row button (a button cannot nest buttons), so
 * the queue row and its answers are wrapped instead. */
.hud-need { display: flex; flex-direction: column; }

/* The question box is a second target for the chat it came from, so the whole
 * wrapper reads as openable. The answer controls keep their own cursor and
 * their own clicks. */
.hud-need.is-openable { cursor: pointer; }
.hud-need.is-openable:hover .ask-card { border-color: var(--sv-hairline-heavy); }
.hud-need.is-openable .ask-option,
.hud-need.is-openable .ask-free,
.hud-need.is-openable .ask-send,
.hud-need.is-openable .ask-skip { cursor: pointer; }
.hud-need.is-openable .ask-option:disabled { cursor: default; }

@media (max-width: 640px) {
  .ask-card,
  .approval-card { padding: var(--sv-space-3) var(--sv-space-4); }
  .ask-option { flex: 1 1 100%; }
}

/* Harness feedback — reported from the chat it happened in */

.feedback-nudge {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  margin: 0 0 var(--sv-space-3);
  padding: var(--sv-space-3) var(--sv-space-4);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-left: 2px solid var(--sv-hairline-heavy);
}

.feedback-nudge[hidden] { display: none; }

.feedback-nudge > .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--sv-ink-secondary);
}

.feedback-nudge-copy {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--sv-text-caption);
  line-height: var(--sv-leading-body);
}

.feedback-nudge-action {
  flex: 0 0 auto;
  padding: var(--sv-space-1) var(--sv-space-3);
  min-height: 32px;
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline-max);
  font: inherit;
  font-size: var(--sv-text-caption);
  cursor: pointer;
}

.feedback-nudge-action:hover { background: var(--sv-gray-xdark); }

.feedback-nudge-dismiss {
  flex: 0 0 auto;
  width: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--sv-text-body);
  cursor: pointer;
}

.feedback-nudge-dismiss:hover { color: var(--sv-ink); }

.feedback-card {
  gap: var(--sv-space-4);
  width: min(100%, 38rem);
  max-height: min(90vh, 48rem);
  overflow-y: auto;
}

.feedback-card textarea {
  width: 100%;
  min-height: min(11rem, 26vh);
  padding: var(--sv-space-3) var(--sv-space-4);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font: inherit;
  font-size: var(--sv-text-small);
  line-height: var(--sv-leading-body);
  resize: vertical;
}

.feedback-card textarea:focus { border-color: var(--sv-hairline-max); outline: none; }

.feedback-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-2);
}

.feedback-kind {
  padding: var(--sv-space-2) var(--sv-space-3);
  min-height: 44px;
  color: var(--sv-ink-secondary);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font: inherit;
  font-size: var(--sv-text-caption);
  cursor: pointer;
}

.feedback-kind:hover { color: var(--sv-ink); border-color: var(--sv-hairline-max); }

.feedback-kind[aria-checked="true"] {
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  border-color: var(--sv-hairline-max);
}

.feedback-evidence {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  line-height: var(--sv-leading-body);
}

/* Provenance and its one control share a row: on a 390x844 phone this dialog has
   exactly enough height for the kinds, the box, the evidence line, the opt-out
   and the actions, so a second stacked row pushes Send below the fold. */
.feedback-draft-bar {
  display: flex;
  gap: var(--sv-space-3);
  align-items: center;
  justify-content: space-between;
}

.feedback-draft-note {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  line-height: var(--sv-leading-body);
}

/* Quiet: the draft is the suggestion, not this control. Still a real tap target,
   because on a phone this is how a member refuses the draft. */
.feedback-draft-clear {
  flex: none;
  padding: 0 var(--sv-space-2);
  min-height: 44px;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--sv-text-caption);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.feedback-draft-clear:hover { color: var(--sv-ink); }

.feedback-context-opt {
  display: flex;
  gap: var(--sv-space-2);
  align-items: flex-start;
  min-height: 44px;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  line-height: var(--sv-leading-body);
  cursor: pointer;
}

.feedback-context-opt input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  accent-color: var(--sv-black);
  flex: none;
}

.feedback-context-opt input:disabled { cursor: not-allowed; }

.feedback-error:empty { display: none; }

.feedback-error {
  margin: 0;
  color: var(--sv-danger);
  font-size: var(--sv-text-caption);
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-3);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.feedback-row {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
  padding: var(--sv-space-4);
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
}

.feedback-row-head {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  flex-wrap: wrap;
}

.feedback-state {
  padding: 2px var(--sv-space-2);
  font-size: var(--sv-text-caption);
  letter-spacing: var(--sv-tracking-caps);
  text-transform: uppercase;
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
}

.feedback-state[data-state="shipped"] { background: var(--sv-inverse-surface); }
.feedback-state[data-state="pending"] { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.feedback-state[data-state="declined"] { color: var(--sv-ink-secondary); background: var(--sv-surface-sunken); }

.feedback-row-text {
  margin: 0;
  color: var(--sv-ink-strong);
  font-size: var(--sv-text-small);
  line-height: var(--sv-leading-body);
}

.feedback-row-meta {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

.feedback-row-meta a { color: var(--sv-ink); }

.feedback-row-retry {
  align-self: flex-start;
  padding: 0;
  border: 0;
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
  background: none;
  color: var(--sv-ink-secondary);
  font: inherit;
  font-size: var(--sv-text-caption);
  cursor: pointer;
}

.feedback-row-retry:hover { color: var(--sv-ink); border-bottom-color: var(--sv-hairline-max); }

.profile-menu-count {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--sv-inverse-ink);
  background: var(--sv-inverse-surface);
  padding: 0 var(--sv-space-2);
  font-size: var(--sv-text-caption);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .feedback-nudge { flex-wrap: wrap; }
  .feedback-nudge-copy { flex: 1 1 100%; order: 2; }
  .feedback-nudge-action { order: 3; }
}
/* ShareOS audit remediation: resilient home density and an actual member theme. */
.hud-row-top strong { flex:1 1 auto; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; line-height:1.2; }
/* Theme roles live in brand.css; inverse transcript plates retain their ink. */
/* Text on an inverse plate follows the plate, not the page. */
.theme-dark .toast,
.theme-dark .message-popup,
.theme-dark .direct-message.outgoing,
.theme-dark .chat-search-result:hover,
.theme-dark .chat-search-result.active { color: var(--sv-inverse-ink); }

/* Dialog backdrops and scrims stay black in both modes. */
.theme-dark dialog::backdrop { background: rgb(0 0 0 / 0.72); }

/* ---------- When a message was sent ----------
 * Two readings per message: the clock time in the bubble, and a day heading
 * over each run so nobody subtracts dates to tell tonight from last month.
 * Role tokens only, so dark mode and the inverse (outgoing) plate follow. */
.message-day {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  margin: var(--sv-space-2) 0 0;
  padding: var(--sv-space-2) 0;
  background: var(--sv-surface);
}
.message-day::after {
  flex: 1;
  height: var(--sv-hairline-w);
  background: var(--sv-hairline);
  content: "";
}
.message-day:first-child { margin-top: 0; }
.message-day-label {
  flex: none;
  color: var(--sv-ink);
  font-size: var(--sv-text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.message-day-age {
  flex: none;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  letter-spacing: 0.02em;
}
.message-day-age:empty { display: none; }

.message-meta { display: block; }
.message-time { font-variant-numeric: tabular-nums; }
.message-meta-extra { font-variant-numeric: tabular-nums; }
/* Every room post and DM ends with its own time, under what it says: a member
 * scrolling back matches it against the time they remember. Always shown. */
.direct-message > .message-meta {
  margin-top: var(--sv-space-1);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 400;
}
.direct-message.outgoing > .message-meta { color: var(--sv-inverse-ink-secondary); }

/* Rail rows: the preview truncates, the time never does. */
.message-contact-line { display: flex; align-items: baseline; gap: var(--sv-space-2); min-width: 0; }
.message-contact-line .message-contact-preview { min-width: 0; flex: 1; }
.message-contact-when {
  flex: none;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* A search hit is read outside its conversation, so it carries its own day. */
.message-search-result { display: flex; align-items: baseline; gap: var(--sv-space-2); }
.message-search-result-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-search-result-when {
  flex: none;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .message-contact-line { gap: var(--sv-space-1); }
}
.venture-row-concept-block{align-items:stretch}.venture-row-concept{width:100%;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word}

/* Fix review: the sheet an Issue fixer row opens. One decision, on the diff. */
.fix-review-dialog{width:min(calc(100% - (var(--sv-space-6) * 2)),56rem)}
.fix-review-card{gap:0;max-height:min(86vh,52rem);padding:0;overflow:hidden;display:flex;flex-direction:column}
.fix-review-card .share-dialog-heading{flex:0 0 auto;padding:var(--sv-space-5) var(--sv-space-5) var(--sv-space-4);border-bottom:1px solid var(--sv-hairline)}
.fix-review-body{flex:1 1 auto;min-height:0;padding:var(--sv-space-5);overflow-y:auto}
.fix-review-facts{display:grid;grid-template-columns:minmax(8rem,auto) minmax(0,1fr);gap:var(--sv-space-2) var(--sv-space-5);margin:0;font-size:var(--sv-text-caption)}
.fix-review-facts dt{color:var(--sv-ink-tertiary);letter-spacing:var(--sv-tracking-caps);text-transform:uppercase}
.fix-review-facts dd{margin:0;overflow-wrap:anywhere}
.fix-review-facts a{color:inherit}
.fix-review-section{margin-top:var(--sv-space-5);padding-top:var(--sv-space-4);border-top:1px solid var(--sv-hairline)}
.fix-review-section h3{margin:0 0 var(--sv-space-2);color:var(--sv-ink-tertiary);font-size:var(--sv-text-caption);font-weight:500;letter-spacing:var(--sv-tracking-caps);text-transform:uppercase}
.fix-review-copy{margin:0;line-height:var(--sv-leading-body);overflow-wrap:anywhere}
.fix-review-note{margin:var(--sv-space-3) 0 0;color:var(--sv-ink-secondary);font-size:var(--sv-text-caption)}
.fix-review-files{display:flex;flex-direction:column;gap:var(--sv-space-1);margin:0 0 var(--sv-space-3);padding:0;list-style:none;font-size:var(--sv-text-caption)}
.fix-review-files li{display:flex;gap:var(--sv-space-3)}
.fix-review-files em{flex:0 0 1.5rem;color:var(--sv-ink-tertiary);font-style:normal}
.fix-review-files span{min-width:0;overflow-wrap:anywhere}
.fix-review-diff,.fix-review-pre{margin:0;max-height:26rem;padding:var(--sv-space-3);overflow:auto;background:var(--sv-surface-sunken);border:1px solid var(--sv-hairline);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size: var(--sv-text-caption);line-height:1.5;white-space:pre}
.fix-review-diff span{display:block}
.fix-review-diff .is-add{color:var(--workspace-working-ink)}
.fix-review-diff .is-del{color:var(--sv-danger)}
.fix-review-diff .is-hunk,.fix-review-diff .is-file{color:var(--sv-ink-tertiary)}
.fix-review-actions{flex:0 0 auto;padding:var(--sv-space-4) var(--sv-space-5) var(--sv-space-5);border-top:1px solid var(--sv-hairline)}
.fix-review-promise{margin:0 0 var(--sv-space-3);color:var(--sv-ink-secondary);font-size:var(--sv-text-caption);line-height:1.5}
.fix-review-feedback{box-sizing:border-box;display:block;width:100%;min-height:76px;margin-bottom:var(--sv-space-3);padding:var(--sv-space-3);resize:vertical;color:inherit;background:transparent;border:1px solid var(--sv-hairline-heavy);font:inherit;font-size:var(--sv-text-caption)}
.fix-review-buttons{display:flex;flex-wrap:wrap;gap:var(--sv-space-2)}
.fix-review-buttons button{min-height:44px;padding:0 var(--sv-space-4);color:var(--sv-ink);background:transparent;border:1px solid var(--sv-hairline-heavy);font:inherit;font-size:var(--sv-text-caption);cursor:pointer}
.fix-review-buttons .fix-review-approve{color:var(--sv-inverse-ink);background:var(--sv-inverse-surface);border-color:var(--sv-inverse-surface);font-weight:500}
.fix-review-buttons button:disabled{cursor:not-allowed;opacity:.5}
.fix-review-buttons button:focus-visible,.fix-review-feedback:focus-visible{outline:2px solid var(--sv-ink-secondary);outline-offset:2px}
.fix-review-error{margin:0;padding:0 var(--sv-space-5);color:var(--sv-danger);font-size:var(--sv-text-caption)}
.fix-review-error:empty{display:none}
@media (max-width: 600px){.fix-review-dialog{width:100%;max-height:none;margin:0}.fix-review-card{width:100vw;height:100svh;max-height:none}.fix-review-body,.fix-review-actions{padding:var(--sv-space-4)}.fix-review-facts{grid-template-columns:1fr;gap:var(--sv-space-1)}.fix-review-facts dd{margin-bottom:var(--sv-space-2)}.fix-review-buttons button{flex:1 1 8rem}}

/* Fix-review summary first: activity opens as an answer, not a code review. */
.fix-review-summary{padding:var(--sv-space-4);background:var(--sv-surface-raised);border:1px solid var(--sv-hairline)}
.fix-review-summary h3{margin:0 0 var(--sv-space-3);font-size:var(--sv-text-caption);font-weight:500;letter-spacing:var(--sv-tracking-caps);text-transform:uppercase}
.fix-review-summary p{margin:0 0 var(--sv-space-3);line-height:var(--sv-leading-body);overflow-wrap:anywhere}
.fix-review-summary p:last-child{margin-bottom:0}
.fix-review-summary strong{font-weight:500}
.fix-review-details{margin-top:var(--sv-space-4);border-top:1px solid var(--sv-hairline)}
.fix-review-details>summary{min-height:44px;display:flex;align-items:center;color:var(--sv-ink-secondary);font-size:var(--sv-text-caption);cursor:pointer;user-select:none}
.fix-review-details>summary:focus-visible{outline:2px solid var(--sv-ink-secondary);outline-offset:2px}
.fix-review-detail-content{padding-bottom:var(--sv-space-2)}
.fix-review-actions[hidden]{display:none}

/* A running fix is a four-card vertical kanban, not a fake completed summary. */
.fix-progress{margin-top:var(--sv-space-5)}
.fix-progress>h3{margin:0 0 var(--sv-space-3);font-size:var(--sv-text-caption);font-weight:500;letter-spacing:var(--sv-tracking-caps);text-transform:uppercase}
.fix-progress-board{display:flex;flex-direction:column;gap:var(--sv-space-2);margin:0;padding:0;list-style:none}
.fix-progress-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sv-space-3);min-height:58px;padding:var(--sv-space-3) var(--sv-space-4);border:1px solid var(--sv-hairline);background:var(--sv-surface-raised)}
.fix-progress-card strong{font-weight:500}
.fix-progress-card span{color:var(--sv-ink-secondary);font-size:var(--sv-text-caption)}
.fix-progress-card[data-state=done]{border-left:4px solid var(--workspace-working)}
.fix-progress-card[data-state=active]{border-color:var(--sv-ink);border-left:4px solid var(--sv-ink)}
.fix-progress-card[data-state=stalled]{border-color:var(--sv-danger);border-left:4px solid var(--sv-danger)}
.fix-progress-card[data-state=queued]{opacity:.58}
.fix-review-buttons .fix-review-remove{color:var(--sv-danger);border-color:var(--sv-danger)}

/* The agent room's reading view: the whole room at a reading measure, with
 * its own scroll (web/app/15-agent-room.js). Placed with the other dialog
 * skins — after `.app-dialog` and `.dialog-card`, whose width and padding it
 * replaces at the same specificity. */
.agent-room-dialog { width: min(calc(100% - (var(--sv-space-6) * 2)), 46rem); }

.agent-room-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(86vh, 52rem);
  padding: 0;
  overflow: hidden;
}

.agent-room-card .share-dialog-heading {
  flex: 0 0 auto;
  padding: var(--sv-space-5) var(--sv-space-5) var(--sv-space-4);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.agent-room-participants {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-2) var(--sv-space-4);
  padding: var(--sv-space-3) var(--sv-space-5);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}

.agent-room-participants:empty { display: none; }

.room-seat {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-width: 0;
}

.room-seat-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.agent-room-reader {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--sv-space-5);
  overflow-y: auto;
}

.room-reader-column {
  display: grid;
  gap: var(--sv-space-5);
  max-width: 62ch;
  margin: 0 auto;
  min-width: 0;
}

.room-reader-column .room-turn { gap: var(--sv-space-2); }

.room-reader-column .room-turn + .room-turn { padding-top: var(--sv-space-5); }

.room-reader-empty {
  margin: 0;
  color: var(--sv-ink-secondary);
}

@media (max-width: 600px) {
  .agent-room-dialog {
    width: 100%;
    max-height: none;
    margin: 0;
  }

  .agent-room-card {
    width: 100vw;
    height: 100svh;
    max-height: none;
  }

  .agent-room-participants,
  .agent-room-reader { padding: var(--sv-space-4); }
}


/* Catch up on what changed: the return nudge, the boundary it points at, and
   the one-time coach mark for the control that answers it. */
.catch-up-nudge{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--sv-space-3);width:min(100%,64rem);margin:0 auto var(--sv-space-3);padding:var(--sv-space-2) var(--sv-space-3);background:var(--sv-surface-raised);border:var(--sv-hairline-w) solid var(--sv-hairline);border-left:2px solid var(--sv-hairline-heavy)}
.catch-up-nudge-icon{width:18px;height:18px;flex:0 0 18px;color:var(--sv-ink-secondary)}
/* One line, always: the bar says what is new, the conversation says the rest. */
.catch-up-nudge-copy{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;color:var(--sv-ink);font-size:var(--sv-text-caption);line-height:var(--sv-leading-body);white-space:nowrap;text-overflow:ellipsis}
.catch-up-nudge-action{flex:0 0 auto;min-height:32px;padding:var(--sv-space-1) var(--sv-space-3);color:var(--sv-inverse-ink);background:var(--sv-inverse-surface);border:var(--sv-hairline-w) solid var(--sv-hairline-max);font:inherit;font-size:var(--sv-text-caption);cursor:pointer}
.catch-up-nudge-action:hover{background:var(--sv-gray-xdark)}
.catch-up-nudge-dismiss{flex:0 0 auto;width:32px;min-height:32px;padding:0;color:var(--sv-ink-secondary);background:transparent;border:0;font:inherit;font-size:var(--sv-text-body);line-height:1;cursor:pointer}
.catch-up-nudge-dismiss:hover{color:var(--sv-ink)}
.catch-up-nudge-action:focus-visible,.catch-up-nudge-dismiss:focus-visible{outline:2px solid var(--sv-ink-secondary);outline-offset:2px}

/* The boundary itself: a rule with a word on it, quiet enough to scroll past. */
.catch-up-divider{display:flex;align-items:center;gap:var(--sv-space-3);width:100%;margin:var(--sv-space-4) 0}
.catch-up-divider::before,.catch-up-divider::after{content:"";flex:1 1 auto;height:var(--sv-hairline-w);background:var(--sv-hairline)}
.catch-up-divider-label{flex:0 0 auto;color:var(--sv-ink-tertiary);font-size:var(--sv-text-caption);letter-spacing:var(--sv-tracking-caps);text-transform:uppercase}

/* A chat that moved on without this viewer, painted on the row's own dot so no
   row ever carries two markers. A live turn keeps its green dot: what is
   happening now outranks what was missed, and .live/[data-phase] opt out here. */
.thread-row[data-unseen=true] .status-dot:not(.live)[data-phase=idle]{border-color:var(--sv-emphasis-surface);background:var(--sv-emphasis-surface);opacity:1}
.thread-row[data-unseen=true] .thread-title-text{color:var(--sv-ink);font-weight:500}

/* A hint, not a modal: no backdrop, no trap, and it never reaches the composer. */
/* The arrow is what makes this a pointer rather than a floating note: a rotated
   square, half of it tucked behind the card so only the tip shows. */

@media (max-width: 600px){
  .catch-up-nudge{gap:var(--sv-space-2);padding:var(--sv-space-2)}
  .catch-up-nudge-action{min-height:44px;padding:0 var(--sv-space-3)}
  .catch-up-nudge-dismiss{width:44px;min-height:44px;min-width:44px}
}

/* ---------- Chat properties and triage ----------
   Property tags sit in the same row-meta line as Pendant/Merged, so a row can
   carry them without a second line; the rail truncates, never widens. */
.thread-row-prop{opacity:.85}

.props-form{display:grid;gap:var(--sv-space-4);margin-top:var(--sv-space-5)}
.props-row{display:grid;gap:var(--sv-space-2);min-width:0}
.props-label{color:var(--sv-ink-secondary);font-size:var(--sv-text-caption);letter-spacing:var(--sv-tracking-caps);text-transform:uppercase}
.props-choices{display:flex;flex-wrap:wrap;gap:var(--sv-space-2);min-width:0}
.props-choice{min-height:36px;max-width:100%;padding:0 var(--sv-space-3);overflow:hidden;color:var(--sv-ink);background:transparent;border:var(--sv-hairline-w) solid var(--sv-hairline-strong);font:inherit;font-size:var(--sv-text-caption);text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.props-choice:hover,.props-choice:focus-visible{border-color:var(--sv-hairline-max)}
.props-choice[data-chosen=true]{color:var(--sv-inverse-ink);background:var(--sv-inverse-surface);border-color:var(--sv-hairline-max)}
.props-artifact{overflow:hidden;color:var(--sv-ink);font-size:var(--sv-text-caption);text-overflow:ellipsis;white-space:nowrap}
.props-error{margin:var(--sv-space-3) 0 0;color:var(--sv-red,var(--sv-danger));font-size:var(--sv-text-caption)}
.props-error[hidden]{display:none}
@media (max-width: 600px){
  .props-choice{min-height:44px}
}

/* Live turn activity: a calm, chronological trace in the conversation. The
 * trace names real work only; Workboard continues to hold full tool detail. */
.status-line[data-live-steps="1"] {
  align-content: start;
  column-gap: var(--sv-transcript-label-gap);
  row-gap: 0;
  padding-top: 0;
  border-top: 0;
}
.turn-trace-head {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 0.35em;
  width: min(100%, 42rem);
  min-width: 0;
  margin-bottom: var(--sv-space-5);
  padding: 0;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  font-size: var(--sv-text-small);
  font-family: inherit;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: color var(--sv-dur-instant) var(--sv-ease-out);
}
.turn-trace-head:hover { color: var(--sv-ink); }
.turn-trace-head:active { color: var(--sv-ink-secondary); }
.turn-trace-head:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 4px; }
.turn-trace-heading { display: inline-flex; flex: 0 0 auto; gap: 0.35em; white-space: nowrap; }
.turn-trace-rule {
  height: var(--sv-hairline-w);
  min-width: var(--sv-space-8);
  margin-left: var(--sv-space-3);
  flex: 1 1 auto;
  background: var(--sv-hairline);
}
.turn-trace-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--sv-ink-tertiary);
  transform: rotate(90deg);
  transition: transform var(--sv-dur-base) var(--sv-ease-out), color var(--sv-dur-instant) var(--sv-ease-out);
}
.turn-trace-chevron .icon { width: 15px; height: 15px; }
.status-line[data-trace-collapsed="1"] .turn-trace-chevron { transform: rotate(0); }
.turn-trace-content {
  grid-column: 2;
  display: grid;
  width: min(100%, 42rem);
  max-height: 32rem;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transform-origin: top;
  transition:
    max-height var(--sv-dur-base) var(--sv-ease-out),
    opacity var(--sv-dur-fast) var(--sv-ease-out),
    transform var(--sv-dur-base) var(--sv-ease-out);
}
.turn-trace-content > * { grid-column: 1; }
.status-line[data-trace-collapsed="1"] .turn-trace-content {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
.turn-trace-note {
  width: min(100%, 66ch);
  margin: var(--sv-space-1) 0 var(--sv-space-5);
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.turn-trace-note[hidden] { display: none; }
.status-chip { min-width: 0; }
.status-text,
.status-elapsed { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-elapsed { color: var(--sv-ink-tertiary); font-variant-numeric: tabular-nums; }

/* A live label pulses through opacity, never gradient-filled text. */
.status-shimmer { color: var(--sv-ink-secondary); animation: status-shimmer var(--workspace-pulse) var(--sv-ease-out) infinite; }
@keyframes status-shimmer { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .status-shimmer { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: currentColor; animation: none; }
}

/* ---------- A status line nothing is confirming ----------

   The shimmer's whole job is to say "this is current". When it stops being
   current the shimmer comes off — with exactly the escape reduced motion uses,
   because a background-clip:text label with the animation stopped and the fill
   still transparent renders invisible, which is worse than the lie it replaced.
   The step it names stays on screen; the sentence below says what it is. */
.status-line[data-unconfirmed="1"] .status-shimmer {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--sv-ink-secondary);
  animation: none;
}

.status-stale-note {
  margin: var(--sv-space-1) 0 0;
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
  line-height: var(--sv-leading-body);
}

/* A stopped clock, wherever it is drawn: the number stays readable (it is the
   last measurement anyone has) and stops being spent as a live accent. */
.thread-live-status[data-unconfirmed="1"],
.project-activity[data-unconfirmed="1"],
.activity-status-label[data-unconfirmed="1"],
.activity-coding-elapsed[data-unconfirmed="1"],
.graph-live-elapsed[data-unconfirmed="1"] {
  color: var(--sv-ink-tertiary);
  font-style: italic;
}

/* One disclosure owns Workboard activity. Tool glyphs name the action before
 * a reader opens its detail, rather than asking a chevron to carry meaning. */
.activity-all-group > details { border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.activity-all-summary {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: start;
  gap: var(--sv-space-3);
  padding: var(--sv-space-4) var(--sv-space-6);
  cursor: pointer;
  list-style: none;
}
.activity-all-summary::-webkit-details-marker { display: none; }
.activity-all-summary:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: -2px; }
.activity-all-group > details[open] > .activity-all-summary .activity-row-chevron { transform: rotate(90deg); }
.activity-all-list { padding: 0; margin: 0; list-style: none; border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.activity-all-list > .activity-item:last-child,
.activity-all-list > .activity-tool-group:last-child { border-bottom: 0; }

.status-activity-icon,
.activity-tool-entry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.status-activity-icon {
  width: 16px;
  height: 16px;
  color: var(--sv-ink-secondary);
  animation: turn-tool-breathe var(--workspace-pulse) ease-in-out infinite;
  transform-origin: center;
}
.status-activity-icon .icon { width: 16px; height: 16px; }
.activity-tool-entry-copy { position: relative; }
.activity-tool-entry-icon { position: absolute; top: 1px; left: calc(-1 * (32px + var(--sv-space-3))); width: 16px; height: 16px; color: var(--sv-ink-secondary); }
.activity-tool-entry-icon .icon { width: 16px; height: 16px; }
/* A coding run's harness mark in a glyph slot. `.icon` keeps the slot's size;
 * the mark paints in currentColor, so it follows the row's status ink and both
 * themes exactly as the line icon it replaces. Third-party logos are exempt
 * artwork (docs/design-system.md), but none of these needs a colour to read. */
.icon.harness-logo {
  flex: none;
  background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.harness-logo-claude { -webkit-mask-image: url("/assets/harness-logos/claude.svg"); mask-image: url("/assets/harness-logos/claude.svg"); }
/* Codex carries the OpenAI mark (developers.openai.com/codex). */
.harness-logo-codex { -webkit-mask-image: url("/assets/openai.svg"); mask-image: url("/assets/openai.svg"); }
/* OMP runs carry the Share S: SharePi is the ShareOS core interface (Hamet Watt, 2026-10-07). */
.harness-logo-omp { -webkit-mask-image: url("/assets/share-symbol.svg"); mask-image: url("/assets/share-symbol.svg"); }
.harness-logo-opencode { -webkit-mask-image: url("/assets/harness-logos/opencode.svg"); mask-image: url("/assets/harness-logos/opencode.svg"); }
.harness-logo-crush { -webkit-mask-image: url("/assets/harness-logos/crush.svg"); mask-image: url("/assets/harness-logos/crush.svg"); }
.harness-logo-goose { -webkit-mask-image: url("/assets/harness-logos/goose.svg"); mask-image: url("/assets/harness-logos/goose.svg"); }
.harness-logo-dsh { -webkit-mask-image: url("/assets/harness-logos/dsh.svg"); mask-image: url("/assets/harness-logos/dsh.svg"); }
.status-chip { max-width: 100%; }
.status-text { min-width: 0; }

.turn-steps-recent {
  display: grid;
  gap: var(--sv-space-2);
  width: 100%;
  margin: 0 0 var(--sv-space-3);
  padding: 0;
  list-style: none;
}
.turn-step {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: 30px;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  line-height: 1.4;
  animation: turn-trace-arrive var(--sv-dur-fast) var(--sv-ease-out) both;
}
.turn-step-icon { display: inline-flex; align-self: center; color: var(--sv-ink-secondary); }
.turn-step-icon .icon { width: 14px; height: 14px; }
.turn-step-icon .agent-orb { width: 20px; height: 20px; }
.turn-step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-step-label.is-mono { font-family: var(--sv-font-mono); }
.turn-step-time { color: var(--sv-ink-tertiary); font-size: var(--sv-text-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes turn-trace-arrive {
  from { opacity: 0; transform: translateY(-4px) scale(0.995); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes turn-tool-breathe {
  0%, 100% { opacity: 0.62; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1); }
}
/* A refused step (mutation gate, permission deny): why, so a delayed turn is
   an explanation and not an opaque stall. Maintainer-only, like the trail. */
.turn-step[data-status="error"] .turn-step-label,
.turn-step[data-status="error"] .turn-step-icon { color: var(--sv-attention); }
.turn-step-why {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--sv-attention);
  font-size: var(--sv-text-caption);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Agent runs outlive the turn that started them. This line stays in the
   conversation until they finish, so an answered turn cannot read as finished
   work while subagents are still running. */
.agent-work-line {
  display: grid;
  grid-template-columns: var(--sv-transcript-label) minmax(0, 1fr);
  gap: 0 var(--sv-transcript-label-gap);
  width: 100%;
  margin-top: var(--sv-space-6);
}
.agent-work-body {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-3);
  min-width: 0;
  max-width: 100%;
  min-height: 28px;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
}
.agent-work-icon { display: inline-flex; flex: 0 0 auto; }
.agent-work-icon .icon { width: 16px; height: 16px; }
.agent-work-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-work-elapsed { color: var(--sv-ink-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* What the running step last said. One line, clipped: the conversation is not
   a log viewer, and the full text stays in Workboard. Indented under the label
   rather than under its icon, by exactly the icon column, so the two lines read
   as one item on both the grid layout and the phone's stacked one. */
.status-step-note,
.agent-work-note {
  grid-column: 2;
  overflow: hidden;
  margin: 0;
  padding-left: calc(16px + var(--sv-space-3));
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-line[data-live-steps="1"] .status-chip {
  min-height: 36px;
  font-size: var(--sv-text-small);
}
.status-line[data-live-steps="1"] .status-step-note {
  grid-column: auto;
  margin-bottom: 0;
  line-height: 1.45;
}
.status-step-note[hidden],
.agent-work-note[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .turn-step,
  .status-activity-icon { animation: none; }
  .turn-trace-content,
  .turn-trace-chevron { transition-duration: 1ms; }
}

/* ---------- The label lane, charged to the reading column ----------
 *
 * The five rows above share one two-column rhythm: a label lane, then the
 * answer. At 8rem + 24px that lane is a constant 152px indent holding a ~93px
 * wordmark, so ~59px of it is always empty — and it is taken from the
 * transcript column, not the window. Docking the Workboard (20rem) leaves the
 * column 514px at a 1220px viewport and 717px at 1440px, where the lane was
 * spending 20–30% of the reading measure on nothing. The prose is capped at
 * 72ch (792px), so in every docked case the answer is column-limited, never
 * measure-limited: the lane costs the reader words.
 *
 * These have to be container queries. The viewport does not change when the
 * rail docks, so no `@media` rule can see the column that actually shrank.
 * They sit after all five base rules on purpose: `@container` adds no
 * specificity, so source order is what makes them win.
 */

/* Tier A. 6.5rem is 104px — still clear of the nowrap wordmark — and the gap
 * drops a step: 124px of indent instead of 152. */
@container transcript (max-width: 1023px) {
  .msg.assistant,
  .msg.peer,
  .msg.voice,
  .status-line,
  .agent-work-line {
    --sv-transcript-label: 6.5rem;
    --sv-transcript-label-gap: var(--sv-space-5);
  }
}

/* Tier B. Below ~840px of column, keeping any lane at all would leave the
 * answer under ~62ch, so the label goes above the text and the body starts on
 * the same left edge as the composer and the message divider. The phone block
 * at 600px says the same thing for four of these five rows and keeps its own
 * tighter top padding; what it never named is the fifth — the agent-work line,
 * which therefore kept its full 152px lane on a 390px screen. A phone column
 * is always in this tier, so that is fixed here rather than there. */
@container transcript (max-width: 839px) {
  .msg.assistant,
  .msg.peer,
  .msg.voice,
  .status-line,
  .agent-work-line {
    display: block;
  }

  .turn-trace-head,
  .turn-trace-content { grid-column: auto; }

  .msg-role { margin-bottom: var(--sv-space-4); }
  .voice-role { margin-bottom: var(--sv-space-2); }
  .peer-role { margin-bottom: var(--sv-space-3); }
  /* The peer block keeps its own inset: with the lane gone, `padding-right`
   * alone would sit its text hard against the sunken plate's left edge. */
  .peer-message { padding: 0 var(--sv-space-4); }
}

/* A pending decision has one canonical card in the transcript. When that card
   scrolls offscreen, this compact reminder points back to it without cloning
   the question's controls or changing the transcript's layout. */
.decision-dock {
  grid-row: dock;
  z-index: 2;
  overflow: visible;
  padding: 7px var(--sv-gutter);
  background: var(--sv-surface);
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}
.decision-dock[hidden] { display: none; }
.decision-dock-card {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  width: min(100%, 58rem);
  min-height: 48px;
  margin: 0 auto;
  padding: 7px 8px 7px 12px;
  background: var(--sv-surface-raised);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  box-shadow: none;
}
.decision-dock-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sv-space-2);
  min-width: 0;
  flex: 1;
}
.decision-dock-kicker {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.decision-dock-question {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.decision-dock-controls {
  display: flex;
  align-items: center;
  gap: var(--sv-space-1);
  flex: none;
}
.decision-dock-show {
  min-height: 34px;
  padding: 0 10px;
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  font: inherit;
  font-size: var(--sv-text-caption);
  font-weight: 500;
  cursor: pointer;
}
.decision-dock-show:hover { border-color: var(--sv-hairline-strong); }
.decision-dock-show:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 2px; }
.decision-dock-dismiss {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--sv-radius);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.decision-dock-dismiss:hover { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.decision-dock-dismiss:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 2px; }

@media (max-width: 600px) {
  .workspace-browser-head { grid-template-columns: 1fr; }
  .shareos-home { overflow-x: hidden; }
  .shell-inline-action, .workspace-browser-head input { min-height: 44px; }
  .decision-dock-card { min-height: 52px; padding-block: 4px; }
  .decision-dock-kicker { display: none; }
  .decision-dock-copy { grid-template-columns: minmax(0, 1fr); }
  .decision-dock-show,
  .decision-dock-dismiss { min-height: 44px; }
  .decision-dock-dismiss { width: 44px; height: 44px; }
}

/* ---------- What's happening in this project ----------

   The inline summary a second click on an expanded project header reveals.
   Inline is the whole point: it sits in the rail between the header and the
   chats it describes, so reading it costs no focus and closes no other view.
   Deliberately NOT a dialog, an overlay or anything positioned out of flow —
   a popup here would undo the one this surface just lost. */
.project-pulse {
  position: static;
  padding: var(--sv-space-3) var(--sv-space-4) var(--sv-space-3) var(--sv-space-8);
  border-bottom: 1px solid var(--sv-hairline);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  line-height: 1.45;
}

.project-pulse-headline {
  margin: 0;
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  line-height: 1.4;
}

.project-pulse-note {
  margin: var(--sv-space-1) 0 0;
  color: var(--sv-ink-tertiary);
}

.project-pulse-facts {
  margin: var(--sv-space-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

/* Label, then the number, then whatever names it. The number gets its own
   column so a column of counts stays scannable at a glance. */
.project-pulse-fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sv-space-2);
  align-items: baseline;
}

.project-pulse-fact-label { color: var(--sv-ink-tertiary); }

.project-pulse-fact-value {
  color: var(--sv-ink);
  font-variant-numeric: tabular-nums;
}

/* The chats behind a count, on the row's second line: the rail is narrow and
   the names matter less than the number they explain. */
.project-pulse-fact-detail {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--sv-ink-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A workspace nobody has touched in a week reads as quiet, not as broken. */
.project-pulse-fact[data-stale="true"] .project-pulse-fact-value { color: var(--sv-ink-tertiary); }

.project-pulse-topics {
  margin: var(--sv-space-2) 0 0;
  overflow: hidden;
  color: var(--sv-ink-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Scheduled tasks ---------- */

.scheduled-dialog { width: min(calc(100% - (var(--sv-space-6) * 2)), 44rem); }

.scheduled-dialog-card {
  max-height: min(86vh, 48rem);
  gap: var(--sv-space-4);
  padding: var(--sv-space-6);
}

.scheduled-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
}

.scheduled-row {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  width: 100%;
  min-height: 34px;
  padding: 6px var(--sv-space-2);
  color: var(--sv-ink);
  background: transparent;
  border: var(--sv-hairline-w) solid transparent;
  border-radius: var(--sv-radius);
  font: inherit;
  font-size: var(--sv-text-small);
  text-align: left;
  cursor: pointer;
}

.scheduled-row:hover,
.scheduled-row:focus-visible,
.scheduled-row.selected { background: var(--sv-surface-raised); }

.scheduled-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--sv-ink-tertiary);
  border-radius: var(--sv-radius);
}

.scheduled-row[data-running=true] .scheduled-dot {
  border-color: var(--sv-emphasis-surface);
  background: var(--sv-emphasis-surface);
}

.scheduled-row[data-paused=true] .scheduled-title { color: var(--sv-ink-tertiary); }

.scheduled-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheduled-new {
  flex: 0 0 auto;
  padding: 2px 8px;
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  line-height: 1.4;
}

.scheduled-failed { color: var(--sv-danger); }

.schedule-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-2);
  margin-bottom: var(--sv-space-3);
  padding: var(--sv-space-2) var(--sv-space-3);
  color: var(--sv-ink-secondary);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-small);
  line-height: 1.3;
}

.schedule-bar-copy {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-2);
  min-width: 0;
}

.schedule-bar-copy .icon { width: 14px; height: 14px; }
.schedule-bar-state { color: var(--sv-ink-tertiary); }
.schedule-bar-state::before { content: "·"; margin-right: var(--sv-space-2); }
.schedule-bar-state.failed { color: var(--sv-danger); }

.schedule-bar-actions { display: inline-flex; gap: var(--sv-space-1); }

.schedule-bar-btn {
  padding: 3px 10px;
  color: var(--sv-ink);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  font: inherit;
  font-size: var(--sv-text-caption);
  cursor: pointer;
}

.schedule-bar-btn:hover,
.schedule-bar-btn:focus-visible { background: var(--sv-surface-raised); }


.scheduled-group {
  display: flex;
  align-items: center;
  gap: var(--sv-space-1);
  width: 100%;
  padding: var(--sv-space-2) var(--sv-space-2) var(--sv-space-1);
  color: var(--sv-ink-tertiary);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--sv-text-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.scheduled-group:hover,
.scheduled-group:focus-visible { color: var(--sv-ink-secondary); }

.scheduled-group .chevron {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  margin: 0;
}

.scheduled-group .chevron .icon { width: 12px; height: 12px; }
.scheduled-group.open .chevron { transform: rotate(90deg); }

.scheduled-group-count {
  margin-left: auto;
  font-weight: 500;
  letter-spacing: 0;
}

.scheduled-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.scheduled-row[data-kind] { align-items: flex-start; }
.scheduled-row[data-kind] .scheduled-dot { margin-top: 5px; }

.scheduled-meta {
  overflow: hidden;
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scheduled-row.static { cursor: default; }
.scheduled-row.static:hover { background: transparent; }

/* Host rows carry what the box can prove: a filled dot is a healthy timer, a
   red one failed or degraded, a red ring is stale, a plain ring is unknown. */
.scheduled-dot[data-status=healthy] {
  border-color: var(--sv-ink-tertiary);
  background: var(--sv-ink-tertiary);
}

.scheduled-dot[data-status=failed],
.scheduled-dot[data-status=degraded] {
  border-color: var(--sv-danger);
  background: var(--sv-danger);
}

.scheduled-dot[data-status=stale] { border-color: var(--sv-danger); }

.scheduled-empty {
  margin: 0;
  padding: var(--sv-space-1) var(--sv-space-2) var(--sv-space-2);
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
}

/* A task's chat opens on the task: what it runs, when next, what it has done. */

.task-panel {
  display: grid;
  gap: var(--sv-space-4);
  margin-bottom: var(--sv-space-5);
  padding: var(--sv-space-4) var(--sv-space-5);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
}

.task-panel-block { display: grid; gap: var(--sv-space-2); }

.task-panel-heading {
  margin: 0;
  color: var(--sv-ink-tertiary);
  font-size: var(--sv-text-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.task-panel-prompt {
  margin: 0;
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  line-height: 1.5;
  white-space: pre-wrap;
}

.task-panel-prompt.clipped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

.task-panel-more,
.task-chip {
  padding: 3px 10px;
  color: var(--sv-ink);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  font: inherit;
  font-size: var(--sv-text-caption);
  cursor: pointer;
}

.task-panel-more { justify-self: start; }
.task-panel-more:hover,
.task-chip:hover,
.task-chip:focus-visible { background: var(--sv-surface-raised); }

.task-panel-next,
.task-panel-empty,
.task-panel-hint {
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
}

.task-panel-chips { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }

.task-runs {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-run {
  display: flex;
  align-items: baseline;
  gap: var(--sv-space-2);
  padding: 4px var(--sv-space-2);
  margin: 0 calc(-1 * var(--sv-space-2));
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-small);
}

.task-run.has-target { cursor: pointer; }
.task-run.has-target:hover,
.task-run.has-target:focus-visible { background: var(--sv-surface-raised); }

.task-run-dot {
  flex: 0 0 8px;
  align-self: center;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--sv-ink-tertiary);
  border-radius: var(--sv-radius);
}

.task-run[data-state=ok] .task-run-dot { background: var(--sv-ink-tertiary); }
.task-run[data-state=failed] .task-run-dot { border-color: var(--sv-danger); background: var(--sv-danger); }
.task-run[data-state=running] .task-run-dot { border-color: var(--sv-emphasis-surface); background: var(--sv-emphasis-surface); }
.task-run-when { flex: 0 0 auto; color: var(--sv-ink-secondary); }
.task-run-outcome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-run[data-state=failed] .task-run-outcome { color: var(--sv-danger); }
.task-run-took { flex: 0 0 auto; color: var(--sv-ink-tertiary); }

@media (max-width: 600px) {
  .schedule-bar-copy { flex: 1 1 100%; }
  .schedule-bar-actions { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
  .schedule-bar-btn { flex: 1 1 6rem; min-width: 0; min-height: 44px; }
  .task-panel,
  .task-panel-block,
  .task-runs,
  .task-run { min-width: 0; }
  .task-panel-more,
  .task-chip { min-height: 44px; }
  .task-run {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    min-height: 44px;
  }
  .task-run-dot { grid-column: 1; grid-row: 1 / span 2; }
  .task-run-when { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .task-run-outcome { grid-column: 2 / -1; grid-row: 2; }
  .task-run-took { grid-column: 3; grid-row: 1; min-width: 0; white-space: nowrap; }
}

/* The detail dialog behind every non-task row. */

#scheduled-detail-dialog { width: min(560px, calc(100vw - 32px)); }
.scheduled-detail-card { width: 100%; }

.scheduled-detail-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sv-space-2) var(--sv-space-4);
  margin: var(--sv-space-3) 0 0;
  font-size: var(--sv-text-small);
}

.scheduled-detail-facts dt { color: var(--sv-ink-tertiary); }
.scheduled-detail-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.scheduled-detail-facts .scheduled-detail-pre { white-space: pre-wrap; }
.scheduled-detail-facts .task-runs { margin: 0; }

/* A subagent's own subagents, inside its opened row: depth reads as depth. */
.activity-children {
  padding: 0;
  margin: 0;
  background: var(--sv-surface);
  border-top: var(--sv-hairline-w) solid color-mix(in srgb, var(--sv-hairline) 64%, transparent);
  list-style: none;
}

.activity-children > .activity-item {
  border-bottom: 0;
}

.activity-children > .activity-item + .activity-item {
  border-top: var(--sv-hairline-w) solid color-mix(in srgb, var(--sv-hairline) 64%, transparent);
}

.activity-children .activity-summary {
  padding-left: calc(var(--sv-space-6) + 32px + var(--sv-space-3));
}

.activity-children .activity-expanded {
  padding-left: calc(var(--sv-space-6) + 2 * (32px + var(--sv-space-3)));
}

.activity-children-count {
  color: var(--sv-ink);
}

/* The steps a subagent reported, oldest first, each with the time it began. */
.activity-trail {
  display: grid;
  gap: 2px;
  max-height: 16rem;
  padding: 0;
  margin: 0;
  overflow: auto;
  list-style: none;
}

.activity-trail-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sv-space-2);
  align-items: baseline;
  font-size: var(--sv-text-caption);
  line-height: 1.4;
}

.activity-trail-step .activity-time {
  font-variant-numeric: tabular-nums;
}

.activity-trail-line {
  color: var(--sv-ink);
  font-weight: 400;
  overflow-wrap: anywhere;
}


/* Shared shell spacing and interaction. Identity tokens live in brand.css. */

:root { --sv-rail: 19rem; }


body {
  letter-spacing: -0.006em;
}

button,
[role="button"],
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
[role="button"] {
  touch-action: manipulation;
}

button:active:not(:disabled),
[role="button"]:active {
  transform: scale(0.975);
  transition-duration: var(--sv-dur-instant) !important;
}

.app {
  background: var(--sv-surface);
}

.sidebar {
  border-right: 0;
}

.sidebar-head {
  padding: 0 var(--sv-space-4) 0 var(--sv-space-5);
}

.sidebar-head-actions .icon-btn {
  color: var(--sv-ink-secondary);
  border-radius: var(--sv-radius);
}

.sidebar-head-actions .icon-btn:hover {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border-color: transparent;
}

.sidebar-primary-nav {
  margin-bottom: var(--sv-space-3);
}

.sidebar-primary-nav > :is([data-shell-view]) {
  grid-column: span 4;
  order: -3;
}

.sidebar-primary-nav .sidebar-create .new-chat-btn .icon {
  display: block;
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}

.sidebar-primary-nav > :is([data-shell-view], #recents-btn, #messages-btn, #mentions-btn, #artifacts-btn) {
  height: 42px;
  gap: 5px;
  padding: 0 4px;
  border-radius: var(--sv-radius);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}

.sidebar-primary-nav > :is([data-shell-view], #recents-btn, #messages-btn, #mentions-btn, #artifacts-btn) .icon {
  display: block;
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}

.sidebar-search {
  margin-top: 2px;
}

.sidebar-search input::placeholder {
  color: var(--sv-ink-secondary);
  opacity: 1;
}

.sidebar-search kbd {
  color: var(--sv-ink-secondary);
  border-color: rgb(255 255 255 / 0.14);
  border-radius: var(--sv-radius);
}

.sidebar-empty {
  color: var(--sv-ink-secondary);
}

.sidebar-foot {
  border-top-color: rgb(255 255 255 / 0.09);
}

.profile-trigger:hover,
.profile-trigger[aria-expanded="true"] {
  background: rgb(255 255 255 / 0.09);
}

.main {
  background: var(--sv-surface);
}

.thread-head {
  min-height: var(--sv-space-16);
  padding-inline: clamp(1rem, 3vw, 2.25rem);
  background: var(--sv-surface);
  border-bottom-color: color-mix(in srgb, var(--sv-hairline) 72%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.thread-head .icon-btn,
.thread-context-actions .icon-btn {
  border-radius: var(--sv-radius);
}

.thread-head .icon-btn:hover,
.thread-context-actions .icon-btn:hover {
  background: var(--sv-surface-raised);
  border-color: var(--sv-hairline);
  box-shadow: none;
}

.thread-title {
  font-size: var(--sv-text-small);
  letter-spacing: -0.012em;
}

.messages {
  padding-top: clamp(2rem, 6vh, 4.5rem);
  scroll-behavior: auto;
}

.messages-inner {
  width: min(100%, 58rem);
}


.msg + .msg,
.msg + .status-line,
.msg + .notice,
.status-line + .msg,
.notice + .msg {
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
}

.msg.assistant,
.msg.voice {
  border-top-color: color-mix(in srgb, var(--sv-hairline) 70%, transparent);
}

.msg.user .bubble {
  border-radius: var(--sv-radius);
  box-shadow: none;
}

.msg.peer {
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
}

.shareos-home {
  min-height: 100%;
  padding-bottom: var(--sv-space-12);
}

.shareos-home-hero,
.shareos-home-workspace {
  width: min(calc(100% - (var(--sv-gutter) * 2)), 62rem);
}

.shareos-home-hero {
  margin-top: clamp(3rem, 9vh, 6.5rem);
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.shareos-home-head {
  margin-bottom: 0;
}

.shareos-home-heading {
  max-width: none;
  font-size: var(--sv-text-h1);
  font-weight: 500;
  line-height: var(--sv-leading-heading);
  letter-spacing: var(--sv-tracking-heading);
}

.shareos-home-description {
  max-width: 44rem;
  margin: var(--sv-space-4) 0 0;
  color: var(--sv-ink-secondary);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.012em;
}

.shareos-home-workspace {
  gap: var(--sv-space-6);
  flex: 0 0 auto;
  align-content: start;
}

.shareos-home-zone,
.shareos-home-chats {
  padding: var(--sv-space-6);
  background: var(--sv-surface-raised);
  border: 1px solid color-mix(in srgb, var(--sv-hairline) 82%, transparent);
  border-radius: var(--sv-radius);
  box-shadow: none;
}

.shareos-home-zone-head {
  margin-bottom: var(--sv-space-4);
}

.shareos-home-zone-head h2 {
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  font-weight: 700;
  letter-spacing: -0.014em;
}

.shareos-home-zone-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding-inline: 8px;
  color: var(--sv-ink-secondary);
  background: var(--sv-surface-sunken);
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-micro);
}

.home-empty-state {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: var(--sv-space-4);
  align-items: center;
  min-height: 96px;
  padding: var(--sv-space-5);
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
  border: 1px solid color-mix(in srgb, var(--sv-hairline) 70%, transparent);
  border-radius: var(--sv-radius);
}

.home-empty-state[hidden] {
  display: none;
}

.home-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--sv-ink);
  background: transparent;
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
}

.home-empty-icon .icon {
  width: 19px;
  height: 19px;
}

.home-empty-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.home-empty-copy strong,
.home-table-empty-title {
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
  font-weight: 700;
}

.home-empty-copy span,
.home-table-empty-copy {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
  line-height: 1.45;
}

.home-empty-action,
.shell-inline-action {
  min-height: 40px;
  padding: 0 var(--sv-space-4);
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: 1px solid var(--sv-hairline-strong);
  border-radius: var(--sv-radius);
  box-shadow: none;
  font: inherit;
  font-size: var(--sv-text-caption);
  font-weight: 500;
  white-space: nowrap;
}

.home-empty-action:hover,
.shell-inline-action:hover,
.shell-inline-action:focus-visible {
  background: var(--sv-ink);
  border-color: var(--sv-ink);
  color: var(--sv-surface-raised);
}

.shareos-home .hud-row {
  min-height: 76px;
  margin-top: var(--sv-space-2);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  transition:
    background var(--sv-dur-fast) var(--sv-ease-out),
    border-color var(--sv-dur-fast) var(--sv-ease-out),
    box-shadow var(--sv-dur-fast) var(--sv-ease-out),
    transform var(--sv-dur-fast) var(--sv-ease-out);
}

.shareos-home .hud-row:hover,
.shareos-home .hud-row:focus-visible {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border-color: var(--sv-hairline-strong);
  box-shadow: none;
  transform: translateY(-1px);
}

.shareos-home .hud-row:hover .hud-row-icon,
.shareos-home .hud-row:focus-visible .hud-row-icon {
  color: var(--sv-ink);
  border-color: var(--sv-hairline-strong);
}

.shareos-home .hud-row:hover :is(.hud-row-meta, .hud-row-context, .hud-row-detail),
.shareos-home .hud-row:focus-visible :is(.hud-row-meta, .hud-row-context, .hud-row-detail) {
  color: var(--sv-ink-secondary);
}

.home-chat-toolbar {
  gap: var(--sv-space-2);
}

.home-chat-toolbar input,
.home-chat-toolbar select,
.workspace-browser-head input {
  min-height: 42px;
  padding-inline: var(--sv-space-4);
  background: var(--sv-surface);
  border-color: var(--sv-hairline);
  border-radius: var(--sv-radius);
}

.home-chat-toolbar input:focus,
.home-chat-toolbar select:focus,
.workspace-browser-head input:focus {
  border-color: var(--sv-ink-secondary);
  box-shadow: none;
}

.home-chat-table-wrap {
  margin-top: var(--sv-space-5);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
}

.home-chat-table th,
.home-chat-table td {
  padding: var(--sv-space-3);
}

.home-chat-table thead th {
  background: var(--sv-surface-sunken);
}

.home-chat-table tr:last-child td {
  border-bottom: 0;
}

.home-chat-table caption.mention-empty {
  display: grid;
  justify-items: center;
  gap: var(--sv-space-2);
  padding: var(--sv-space-12) var(--sv-space-5);
  margin: 0;
  text-align: center;
}

.home-chat-table caption .home-empty-action {
  margin-top: var(--sv-space-3);
}

.home-chat-properties-btn,
.home-chat-activity {
  border-radius: var(--sv-radius);
}

.app-dialog::backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dialog-card {
  border-radius: var(--sv-radius);
  box-shadow: none;
}

.toast,
.message-popup {
  border-radius: var(--sv-radius);
  box-shadow: none;
}

.activity-panel {
  border-left-color: color-mix(in srgb, var(--sv-hairline) 78%, transparent);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .composer-icon-btn,
  .icon-btn,
  .sidebar-nav-btn,
  .new-chat-btn,
  .home-empty-action,
  .shell-inline-action {
    transition:
      color var(--sv-dur-instant) var(--sv-ease-out),
      background-color var(--sv-dur-instant) var(--sv-ease-out),
      border-color var(--sv-dur-instant) var(--sv-ease-out),
      box-shadow var(--sv-dur-fast) var(--sv-ease-out),
      transform var(--sv-dur-instant) var(--sv-ease-out);
  }
}

@media (max-width: 900px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .sidebar,
  .app.sidebar-collapsed .sidebar {
    width: min(calc(100vw - 1rem), 23rem);
    border-radius: var(--sv-radius);
    box-shadow: none;
  }

  .sidebar-head {
    -webkit-backdrop-filter: none;
  }

  .sidebar-foot {
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 640px) {
  :root {
    --sv-gutter: 1rem;
  }

  .thread-head {
    min-height: 4rem;
    padding-inline: 0.75rem;
  }

  .sidebar-search,
  .sidebar-search input {
    min-height: 44px;
  }

  .messages {
    padding-top: var(--sv-space-6);
  }

  .shareos-home {
    padding-bottom: var(--sv-space-6);
  }

  .shareos-home-hero {
    margin-top: var(--sv-space-8);
    margin-bottom: var(--sv-space-6);
  }

  .shareos-home-heading {
    font-size: var(--sv-text-h1);
  }

  .shareos-home-description {
    font-size: var(--sv-text-small);
  }

  .shareos-home-workspace {
    gap: var(--sv-space-4);
  }

  .shareos-home-zone,
  .shareos-home-chats {
    padding: var(--sv-space-4);
    border-radius: var(--sv-radius);
  }

  .home-empty-state {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: var(--sv-space-4);
  }

  .home-empty-action {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }

  .home-chat-table-wrap {
    border: 0;
    border-radius: var(--sv-radius);
  }

  .home-chat-table caption.mention-empty {
    padding-inline: 0;
  }

}

/* Short phones cannot spend three labeled rows on utility navigation and still
 * keep the selected conversation reachable. The six destinations share one
 * icon row here, while the creation and search actions keep their full labels. */
@media (max-width: 640px) and (max-height: 640px) {
  .sidebar,
  .app.sidebar-collapsed .sidebar {
    overflow: hidden;
  }

  .sidebar-primary-nav > :is([data-shell-view], #share-btn, #recents-btn, #messages-btn, #mentions-btn, #artifacts-btn) {
    grid-column: span 2;
    order: -3;
    min-width: 44px;
  }

  .sidebar-primary-nav > :is([data-shell-view], #share-btn, #recents-btn, #messages-btn, #mentions-btn, #artifacts-btn) > span:not(.messages-badge, .sidebar-nav-count, .rail-count) {
    display: none;
  }

  .sidebar-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .thread-head,
  .sidebar-head,
  .sidebar-foot {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .shareos-home-zone,
  .shareos-home-chats,
  .home-empty-state,
  .composer {
    border-color: var(--sv-hairline-max);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  button:active:not(:disabled),
  [role="button"]:active,
  .shareos-home .hud-row:hover,
  .shareos-home .hud-row:focus-visible {
    transform: none;
  }
}

/* At deep zoom the compact targets declared by the base stylesheet must win
 * over its later generic touch rule; otherwise the actions take most of the
 * rail and leave project names as two-word stubs. */
@media (max-width: 300px) and (hover: none) {
  .row-actions .icon-btn {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .project-row:has(.row-actions[data-count="1"]),
  .thread-row:has(.row-actions[data-count="1"]) { --row-reserve: 32px; }
  .project-row:has(.row-actions[data-count="2"]),
  .thread-row:has(.row-actions[data-count="2"]) { --row-reserve: 60px; }
  .project-row:has(.row-actions[data-count="3"]),
  .thread-row:has(.row-actions[data-count="3"]) { --row-reserve: 88px; }
}

/* Workspace navigation: the same ShareOS typography as the content. */

.sidebar,
.thread-head,
.activity-panel,
.profile-menu,
.composer-bar,
.goal-progress {
  font-family: var(--sv-font-sans);
}

.sidebar {
  grid-template-rows: 4rem auto minmax(0, 1fr) 4.25rem;
  background: var(--sv-surface);
  box-shadow: none;
}

.theme-dark .sidebar { background: var(--sv-surface); }

.sidebar-head {
  padding-inline: 14px 10px;
  border-bottom: 0;
}

.sidebar-primary {
  padding: 6px 8px 8px;
  overflow: visible;
}

.sidebar-primary-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  margin: 0;
}

.sidebar-primary-nav > .sidebar-create,
.sidebar-primary-nav > [data-shell-view],
.sidebar-primary-nav > :is(#recents-btn, #messages-btn, #mentions-btn, #artifacts-btn),
.sidebar-primary-nav > .sidebar-search {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  order: initial;
}

.sidebar-primary-nav .sidebar-create .new-chat-btn,
.sidebar-primary-nav > [data-shell-view],
.sidebar-primary-nav > :is(#recents-btn, #messages-btn, #mentions-btn, #artifacts-btn),
.sidebar-search {
  min-height: 36px;
  height: 36px;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 10px;
  border-radius: var(--sv-radius);
  font-size: var(--sv-text-caption);
  font-weight: 500;
}

.sidebar-primary-nav .sidebar-create .new-chat-btn {
  color: var(--sv-ink);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.sidebar-primary-nav .sidebar-create .new-chat-btn:hover,
.sidebar-primary-nav .sidebar-create .new-chat-btn:focus-visible,
.sidebar-primary-nav > [data-shell-view]:hover,
.sidebar-primary-nav > [data-shell-view]:focus-visible,
.sidebar-primary-nav > [data-shell-view].active,
.sidebar-primary-nav > :is(#recents-btn, #messages-btn, #mentions-btn, #artifacts-btn):hover,
.sidebar-primary-nav > :is(#recents-btn, #messages-btn, #mentions-btn, #artifacts-btn):focus-visible {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border-color: transparent;
  box-shadow: none;
}

.sidebar-primary-nav > [data-shell-view] {
  color: var(--sv-ink-secondary);
}

.sidebar-primary-nav > :is(#recents-btn, #messages-btn, #mentions-btn, #artifacts-btn) {
  color: var(--sv-ink-secondary);
}

.sidebar-primary-nav :is(.new-chat-btn, [data-shell-view], #recents-btn, #messages-btn, #mentions-btn, #artifacts-btn) .icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.sidebar-search {
  margin: 0;
  color: var(--sv-ink-secondary);
  background: transparent;
  border-color: transparent;
}

.sidebar-search:hover,
.sidebar-search:focus-within {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border-color: transparent;
}

.sidebar-search input { min-height: 34px; }
.sidebar-search kbd { margin-left: auto; }

.sidebar-scroll {
  margin: 0;
  padding: 6px 8px 18px;
  background: transparent;
  border: 0;
  border-radius: var(--sv-radius);
}

.sidebar-work-panel {
  margin-top: 10px;
}

.sidebar-work-panel:first-child { margin-top: 2px; }

.sidebar-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 0 8px;
  color: var(--sv-ink-secondary);
  border: 0;
  font-size: var(--sv-text-caption);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.sidebar-section-tools {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sidebar-section-label {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
}

.project-disclosure {
  position: relative;
  padding: 0;
  color: inherit;
  background: transparent !important;
  border: 0;
  border-radius: var(--sv-radius);
}

.project-disclosure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  background: transparent;
  border-radius: var(--sv-radius);
  content: "";
  transform: translate(-50%, -50%);
  transition: background-color var(--sv-dur-fast) var(--sv-ease-out);
}

.project-disclosure .icon { position: relative; z-index: 1; }

@media (hover: hover) {
  .project-disclosure:hover::before { background: rgb(255 255 255 / 0.09); }
}

.project-disclosure:focus-visible::before,
.project-disclosure:active::before { background: rgb(255 255 255 / 0.09); }

.project.open > .project-row .project-disclosure { transform: none; }
.project[data-kind="category"].open > .project-row .project-disclosure .icon { transform: rotate(90deg); }

.project-row > .row-lock { flex: 0 0 auto; padding: 0 4px 0 0; }

.sidebar-section-action {
  width: 28px;
  height: 28px;
  color: var(--sv-ink-secondary);
  border-radius: var(--sv-radius);
}

.sidebar-section-action:hover,
.sidebar-section-action:focus-visible {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
}

.sidebar-work-count {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-micro);
}

.workspace-group {
  min-height: 26px;
  padding-inline: 8px;
  color: var(--sv-ink-secondary);
  border: 0;
  font-size: var(--sv-text-caption);
}

.project-row,
.thread-row,
.session-row,
.pinned-row {
  margin: 1px 0;
  border: 0;
  border-radius: var(--sv-radius);
}

.project-row,
.thread-row {
  min-height: 36px;
}

.project-row {
  padding-right: 6px;
  color: var(--sv-ink);
  font-size: var(--sv-text-small);
}

.thread-row {
  min-height: 38px;
  padding-right: 6px;
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
}

.project-row:hover,
.thread-row:hover,
.project-row:focus-within,
.thread-row:focus-within,
.project-row.selected,
.thread-row.selected,
.session-row:hover,
.session-row:focus-within,
.session-row.selected,
.pinned-row:hover,
.pinned-row:focus-within {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  box-shadow: none;
}

.project-row.selected,
.thread-row.selected,
.session-row.selected {
  background: rgb(255 255 255 / 0.12);
  box-shadow: inset 2px 0 0 var(--sv-ink);
}

.project-row.selected .project-name,
.thread-row.selected .thread-title-text { font-weight: 500; }

.project-drag {
  width: 28px;
  flex-basis: 28px;
}

.project-drag .icon { width: 13px; height: 13px; }
.chevron { width: 18px; height: 28px; flex-basis: 18px; margin-right: 2px; }
.chevron .icon { width: 13px; height: 13px; }

.thread-row-meta {
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
}

.thread-row-tag,
.thread-row-prop {
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  padding: 0;
}

.pinned-list { display: grid; }

.pinned-row {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 38px;
  color: var(--sv-ink-secondary);
}

.pinned-open {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 4px 8px;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
}

.pinned-open > .icon { width: 15px; height: 15px; }
.pinned-title { overflow: hidden; font-size: var(--sv-text-small); text-overflow: ellipsis; white-space: nowrap; }
.pinned-meta { color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); white-space: nowrap; }
.pinned-row .row-actions { border-radius: var(--sv-radius); }
.pinned-row:hover .row-actions,
.pinned-row:focus-within .row-actions,
.pinned-row.row-menu-open .row-actions { opacity: 1; pointer-events: auto; }

.sidebar-foot {
  padding: 6px 8px;
  border-top: 1px solid rgb(255 255 255 / 0.07);
}

.profile-trigger { min-height: 52px; border-radius: var(--sv-radius); }

.activity-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 22px;
}

.activity-view-tabs button,
.context-panel-tabs button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--sv-radius);
  font: inherit;
  font-size: var(--sv-text-caption);
  font-weight: 500;
}

.activity-view-tabs button:hover,
.activity-view-tabs button:focus-visible,
.activity-view-tabs button[aria-selected="true"],
.context-panel-tabs button:hover,
.context-panel-tabs button:focus-visible,
.context-panel-tabs button[aria-selected="true"] {
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
}

.activity-view-tabs button[aria-selected="true"],
.context-panel-tabs button[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--sv-hairline); }

.project-home {
  width: min(calc(100% - (var(--sv-gutter) * 2)), 66rem);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 6rem) 0 5rem;
}

.project-home-hero { margin-bottom: 26px; }
.project-home-title { margin: 0; font-size: var(--sv-text-h1); font-weight: 500; letter-spacing: var(--sv-tracking-heading); line-height: 1; }
.project-home-summary { margin: 14px 0 0; color: var(--sv-ink-secondary); font-size: var(--sv-text-small); }
.project-home-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.project-home-action { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; color: var(--sv-ink); background: var(--sv-surface-raised); border: 1px solid var(--sv-hairline); border-radius: var(--sv-radius); font: inherit; font-size: var(--sv-text-small); font-weight: 500; box-shadow: none; }
.project-home-action .icon { width: 15px; height: 15px; }
.project-home-action.primary { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); border-color: var(--sv-emphasis-surface); }
.project-home-action:hover { transform: translateY(-1px); box-shadow: none; }

.project-home-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: end;
  gap: 8px;
  margin-bottom: 24px;
  padding: 10px;
  background: var(--sv-surface-raised);
  border: 1px solid var(--sv-hairline-strong);
  border-radius: var(--sv-radius);
  box-shadow: none;
}

.project-home-composer:focus-within { border-color: var(--sv-ink); outline: 2px solid var(--sv-ink-secondary); outline-offset: 2px; }
.project-home-composer textarea { width: 100%; min-height: 48px; max-height: 160px; padding: 9px 10px; resize: vertical; color: var(--sv-ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: var(--sv-text-small); line-height: 1.45; }
.project-home-send { display: grid; place-items: center; width: 38px; height: 38px; color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); border: 0; border-radius: var(--sv-radius); }
.project-home-send:disabled { opacity: 0.35; }

.project-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.project-home-card { overflow: hidden; background: var(--sv-surface-raised); border: 1px solid var(--sv-hairline); border-radius: var(--sv-radius); box-shadow: none; }
.project-home-resources { grid-column: 1 / -1; }
.project-home-card-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 15px; border-bottom: 1px solid var(--sv-hairline); }
.project-home-card h2 { margin: 0; font-size: var(--sv-text-small); font-weight: 700; }
.project-home-count { min-width: 23px; padding: 3px 7px; color: var(--sv-ink-secondary); background: var(--sv-surface-sunken); border-radius: var(--sv-radius); font-size: var(--sv-text-micro); text-align: center; }
.project-home-search { display: flex; align-items: center; gap: 8px; margin: 12px 14px; padding: 7px 9px; color: var(--sv-ink-tertiary); border: 1px solid var(--sv-hairline); border-radius: var(--sv-radius); }
.project-home-search:focus-within { border-color: var(--sv-ink); outline: 2px solid var(--sv-ink-secondary); outline-offset: 2px; }
.project-home-search > .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.project-home-search input { width: 100%; min-width: 0; padding: 0; color: var(--sv-ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: var(--sv-text-small); }
.project-home-chat { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 14px; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 6px 14px; color: var(--sv-ink-secondary); background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--sv-hairline) 65%, transparent); font: inherit; text-align: left; }
.project-home-chat:last-child { border-bottom: 0; }
.project-home-chat:hover,.project-home-chat:focus-visible { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.project-home-chat > .icon { width: 13px; height: 13px; }
.project-home-chat-title { overflow: hidden; color: var(--sv-ink); font-size: var(--sv-text-small); text-overflow: ellipsis; white-space: nowrap; }
.project-home-chat-meta { color: var(--sv-ink-tertiary); font-size: var(--sv-text-caption); white-space: nowrap; }
.project-home-more { width: 100%; min-height: 40px; padding: 8px 14px; color: var(--sv-ink-secondary); background: var(--sv-surface-sunken); border: 0; border-top: 1px solid var(--sv-hairline); font: inherit; font-size: var(--sv-text-caption); font-weight: 500; }
.project-home-more:hover,.project-home-more:focus-visible { color: var(--sv-ink); }
.project-home-resource { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 50px; padding: 8px 15px; color: var(--sv-ink); border-bottom: 1px solid color-mix(in srgb, var(--sv-hairline) 65%, transparent); text-decoration: none; }
.project-home-resource:last-child { border-bottom: 0; }
.project-home-resource:hover,.project-home-resource:focus-visible { background: var(--sv-surface-sunken); }
.project-home-resource > .icon { width: 16px; height: 16px; color: var(--sv-ink-secondary); }
.project-home-resource-copy { display: grid; gap: 2px; min-width: 0; }
.project-home-resource-copy strong,.project-home-resource-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-home-resource-copy strong { font-size: var(--sv-text-small); font-weight: 500; }
.project-home-resource-copy span { color: var(--sv-ink-tertiary); font-size: var(--sv-text-caption); }
.project-home-empty { margin: 0; padding: 22px 15px; color: var(--sv-ink-tertiary); font-size: var(--sv-text-caption); }

.activity-toggle-btn {
  width: auto;
  min-width: 42px;
  flex-basis: auto;
  gap: 7px;
  padding: 0 10px;
  border-radius: var(--sv-radius);
}
.context-toggle-label { font-size: var(--sv-text-caption); font-weight: 500; }
.activity-toggle-btn .activity-count { position: static; min-width: 16px; height: 16px; padding: 0 3px; border: 0; border-radius: var(--sv-radius); line-height: 16px; }

.activity-panel { grid-template-rows: 4rem auto minmax(0, 1fr); }
.activity-head { padding: 0 12px 0 18px; }
.context-panel-kicker { margin: 0 0 2px; color: var(--sv-ink-tertiary); font-size: var(--sv-text-caption); letter-spacing: 0.06em; text-transform: uppercase; }
.activity-head h2 { font-size: var(--sv-text-small); }
.context-panel-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--sv-hairline); }
.context-panel-tabs button { min-height: 32px; padding-inline: 8px; }
.context-files { min-height: 0; overflow: auto; padding-bottom: 24px; }
.context-resource-section { padding: 16px 14px; border-bottom: 1px solid var(--sv-hairline); }
.context-resource-section h3 { margin: 0 0 10px; color: var(--sv-ink-tertiary); font-size: var(--sv-text-small); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.context-resource-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 12px; align-items: center; gap: 8px; min-height: 43px; margin: 2px 0; padding: 6px 8px; color: var(--sv-ink); border-radius: var(--sv-radius); text-decoration: none; }
.context-resource-row:hover,.context-resource-row:focus-visible { background: var(--sv-surface-sunken); }
.context-resource-row > .icon { width: 14px; height: 14px; color: var(--sv-ink-secondary); }
.context-resource-copy { display: grid; gap: 2px; min-width: 0; }
.context-resource-copy strong,.context-resource-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-resource-copy strong { font-size: var(--sv-text-small); font-weight: 500; }
.context-resource-copy span { color: var(--sv-ink-tertiary); font-size: var(--sv-text-caption); }
.context-resource-empty { margin: 0; color: var(--sv-ink-tertiary); font-size: var(--sv-text-caption); line-height: 1.45; }
.context-resource-empty-page { padding: 24px 18px; }

.goal-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, 22%) 14px;
  align-items: center;
  gap: 10px;
  width: min(100%, 58rem);
  min-height: 40px;
  margin: 0 auto 8px;
  padding: 6px 10px 6px 12px;
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: 1px solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  box-shadow: none;
  text-align: left;
}
.goal-progress[hidden] { display: none; }
.goal-progress:hover,.goal-progress:focus-visible { border-color: var(--sv-hairline-strong); box-shadow: none; }
.goal-progress-copy { display: flex; min-width: 0; gap: 8px; align-items: baseline; }
.goal-progress-label { overflow: hidden; font-size: var(--sv-text-caption); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.goal-progress-meta { flex: none; color: var(--sv-ink-tertiary); font-size: var(--sv-text-caption); }
.goal-progress-track { height: 3px; overflow: hidden; background: var(--sv-surface-dim); border-radius: var(--sv-radius); }
.goal-progress-track span { display: block; width: 0; height: 100%; background: var(--workspace-working); border-radius: inherit; transition: width var(--sv-dur-base) var(--sv-ease-out); }
.goal-progress > .icon { width: 12px; height: 12px; transform: rotate(-90deg); }

@media (max-width: 760px) {
  .project-row,
  .thread-row,
  .session-row,
  .pinned-row,
  .session-open,
  .sidebar-primary-nav .sidebar-create .new-chat-btn,
  .sidebar-primary-nav > [data-shell-view],
  .sidebar-primary-nav > :is(#recents-btn, #messages-btn, #mentions-btn, #artifacts-btn),
  .sidebar-search,
  .activity-view-tabs button { min-height: 44px; }
  .project-home { width: calc(100% - 2rem); padding-top: 2rem; }
  .project-home-grid { grid-template-columns: minmax(0, 1fr); }
  .project-home-resources { grid-column: auto; }
  .project-home-chat-meta { display: none; }
  .goal-progress { grid-template-columns: minmax(0, 1fr) 14px; }
  .goal-progress-track { display: none; }
  .goal-progress-copy { display: grid; gap: 1px; }
  .context-toggle-label { display: none; }
  .sidebar-search,
  .sidebar-search input,
  .sidebar-section-action,
  .project-disclosure { min-height: 44px; }
  .project-row .project-disclosure.chevron {
    width: 44px;
    min-width: 44px;
    height: 44px;
    flex: 0 0 44px;
    transform: none;
  }
  .project-row .project-disclosure.chevron .icon {
    transition: transform var(--sv-dur-fast) var(--sv-ease-out);
  }
  .project[data-kind="category"].open > .project-row .project-disclosure.chevron .icon { transform: rotate(90deg); }
}

/* The mobile drawer has opaque pinned chrome. On a short screen the frequent
   destinations condense into predictable rows so Projects still receives at
   least one usable chat-row height. */
@media (max-width: 900px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .sidebar-head,
  .sidebar-foot {
    background: var(--sv-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .theme-dark .sidebar-head,
  .theme-dark .sidebar-foot { background: var(--sv-surface); }
}

@media (max-width: 640px) and (max-height: 640px) {
  .sidebar,
  .app.sidebar-collapsed .sidebar {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .sidebar-primary-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
  .sidebar-primary-nav > .sidebar-create,
  .sidebar-primary-nav > [data-shell-view] { grid-column: span 3; }
  .sidebar-primary-nav > :is(#recents-btn, #messages-btn, #mentions-btn, #artifacts-btn) { grid-column: span 2; }
  .sidebar-primary-nav > .sidebar-search { grid-column: 1 / -1; }

  .sidebar-primary-nav > :is(#share-btn, #recents-btn, #messages-btn, #mentions-btn, #artifacts-btn) {
    justify-content: center;
    padding-inline: 0;
  }
  .sidebar-primary-nav > :is(#share-btn, #recents-btn, #messages-btn, #mentions-btn, #artifacts-btn) > span:not(.messages-badge, .sidebar-nav-count, .rail-count) {
    display: none;
  }

  .sidebar-scroll {
    min-height: 48px;
    flex: 1 0 auto;
    overflow: visible;
  }
}

/* Keyboard-aware mobile surfaces. dvh follows browser chrome, but an on-screen
   keyboard can cover it; these values follow the actual visible rectangle. */
@media (max-width: 900px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .app {
    top: var(--app-viewport-top, 0px);
    height: var(--app-viewport-height, 100dvh);
  }
  .main { height: 100%; min-height: 0; }
  .sidebar,
  .app.sidebar-collapsed .sidebar,
  .activity-panel {
    top: var(--app-viewport-top, 0px);
    bottom: auto;
    height: var(--app-viewport-height, 100dvh);
    max-height: var(--app-viewport-height, 100dvh);
  }
  .app-dialog {
    inset-block: var(--app-viewport-top, 0px) calc(100% - var(--app-viewport-top, 0px) - var(--app-viewport-height, 100dvh));
    max-height: calc(var(--app-viewport-height, 100dvh) - 24px);
    margin-block: auto;
  }
  .app-dialog > .dialog-card {
    max-height: calc(var(--app-viewport-height, 100dvh) - 24px);
    overflow-y: auto;
  }
  .app-dialog :is(input, textarea, select) { font-size: max(1rem, 16px); }
  .messages-dialog {
    bottom: auto;
    margin-block: 0;
    max-height: var(--app-viewport-height, 100dvh);
  }
  .messages-dialog > .messages-dialog-card {
    height: var(--app-viewport-height, 100dvh);
    max-height: var(--app-viewport-height, 100dvh);
    overflow: hidden;
  }
}

@media (max-width: 600px) {
  .messages { padding-block: var(--sv-space-4); }
  .msg + .msg,
  .msg + .status-line,
  .msg + .notice,
  .status-line + .msg,
  .notice + .msg { margin-top: var(--sv-space-4); }
  .msg-action-btn, .response-copy-button { min-width: 44px; min-height: 44px; }
}

.dialog-error, .project-home-error { color: var(--sv-danger); }
.project-home-error { margin: 0 0 var(--sv-space-4); }

/* Follow-ups read as compact chat messages within the same working turn. */
.msg.user { flex-direction: column; align-items: flex-end; }
.msg.user .bubble { width: fit-content; max-width: 78%; }
.msg.user[data-steering] { margin-top: 12px; }
.msg-steering-note { margin-top: 6px; color: var(--sv-ink-tertiary); font-size: var(--sv-text-caption); }
@media (max-width: 640px) { .msg.user .bubble { max-width: 92%; } }

.msg.user[data-steering] { position: relative; }
.msg.user[data-steering] .msg-actions { position: absolute; right: 160px; bottom: 0; width: auto; margin-top: 0; }

.thread-row-snippet,
.session-snippet {
  display: block;
  font-size: var(--workspace-sidebar-meta, 11px);
  color: var(--sv-ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.thread-row:hover .thread-row-snippet,
.thread-row.selected .thread-row-snippet,
.session-row:hover .session-snippet,
.session-row.selected .session-snippet {
  color: var(--sv-inverse-ink-secondary);
}