/* ShareOS workspace. Product-specific geometry and motion; brand.css remains
 * the shared identity. Color belongs to status, selection stays neutral. */

/* Keep the laid-out workspace private until its initial route has painted. */
.workspace-starting .app { visibility: hidden; }
.workspace-starting .skip-link { visibility: hidden; }
.startup-loading .auth-card > :not(shareos-loading) { display:none; }
.auth-screen.workspace-ready { pointer-events:none; animation:workspace-splash-exit var(--sv-dur-base) var(--sv-ease-out) forwards; }
@keyframes workspace-splash-exit { to { opacity:0; transform:scale(1.03); } }

/* Pip uses the same controls in-page and in Document Picture-in-Picture. */
.pip-context-panel {
  position: fixed;
  z-index: 40;
  right: 24px;
  bottom: 24px;
  width: min(320px, calc(100vw - 32px));
  max-height: calc(var(--app-viewport-height, 100dvh) - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--sv-hairline);
  border-radius: 12px;
  background: var(--sv-surface);
  color: var(--sv-ink);
  box-shadow: var(--workspace-panel-shadow);
  font: 400 var(--sv-text-body)/1.5 var(--sv-font-sans);
}
.pip-context-panel[hidden], .pip-context-panel [hidden] { display: none; }
.pip-context-panel * { box-sizing: border-box; }
.pip-context-panel > * { flex-shrink: 0; }
.pip-context-head { display: flex; gap: 10px; align-items: center; position: sticky; top: -12px; z-index: 1; margin: -12px -12px 0; padding: 8px 12px; border-bottom: 1px solid var(--sv-hairline); background: var(--sv-surface); }
.pip-context-head > div:nth-child(2) { flex: 1; min-width: 0; }
.pip-context-panel .pip-context-art { position: static; width: 32px; height: 32px; flex: 0 0 32px; }
.pip-context-art .pip-sprite { width: 32px; height: 32px; }
.pip-context-panel p { margin: 0; overflow-wrap: anywhere; color: var(--sv-ink-secondary); }
.pip-context-panel strong { font-weight: 500; }
.pip-context-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pip-work-panel > .pip-context-actions { padding: 12px; border-top: 1px solid var(--sv-hairline); }
.pip-context-panel :is(button, select, textarea), .pip-context-actions button {
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--sv-hairline);
  border-radius: 8px;
  font: inherit;
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
}
.pip-context-panel :is(button, select), .pip-context-actions button { cursor: pointer; }
.pip-context-panel :is(button, select, textarea):focus-visible, .pip-context-actions button:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: -2px; }
.pip-context-panel :disabled { cursor: default; opacity: .55; }
.pip-context-panel textarea { display: block; resize: vertical; width: 100%; min-width: 0; min-height: 44px; max-height: 120px; }
.pip-context-panel form { display: flex; align-items: flex-end; gap: 6px; }
.pip-context-panel form button { flex: 0 0 44px; }
.pip-context-head button { padding: 8px; }
.pip-context-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pip-context-primary button:first-child:not([hidden]) { grid-column: 1 / -1; background: var(--sv-ink); color: var(--sv-surface); }
.pip-context-primary #pip-context-share, .pip-context-primary #pip-context-stop { grid-column: 1 / -1; }
.pip-context-state { line-height: 1.4; }
.pip-context-state p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pip-context-activity { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pip-context-panel details { border-top: 1px solid var(--sv-hairline); }
.pip-context-panel summary { min-height: 44px; cursor: pointer; padding: 8px 0; }
.pip-context-panel summary span:first-child { display: inline-block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.pip-context-panel summary span:last-child { display: block; color: var(--sv-ink-secondary); }
.pip-context-more { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.pip-context-more select { width: 100%; }
.pip-context-panel summary:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
#pip-context-send { background: var(--sv-ink); color: var(--sv-surface); }
#pip-context-source[data-sharing="true"] { color: var(--workspace-working-ink); }
.pip-context-panel :is(video, img) { display: block; width: 100%; max-height: 100px; object-fit: contain; border: 1px solid var(--sv-hairline); border-radius: 8px; background: var(--sv-surface-sunken); }
.pip-context-panel .pip-context-lifetime { border-top: 1px solid var(--sv-hairline); padding-top: 8px; }
body.pip-window { display: block; width: 100%; min-width: 0; height: 100dvh; margin: 0; overflow: auto; background: var(--sv-surface); }
.pip-window .pip-context-panel { position: static; width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 760px) { .pip-context-panel { right: 16px; bottom: calc(16px + 100dvh - var(--app-viewport-height, 100dvh) - var(--app-viewport-top, 0px)); } }
@media (prefers-reduced-motion: reduce) { .pip-context-panel *, .pip-context-panel *::before { animation: none !important; transition: none !important; } }
@media print { .pip-context-panel { display: none; } }

/* The weekly prompt belongs to Activity's scroller. It never reserves a
 * shell row or moves the heading; suggestions expand only on request. */
#pip-reminder-slot { margin: 0 auto; }
.pip-reminder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  margin: 0 0 16px;
  border: 1px solid var(--sv-hairline);
  border-radius: 8px;
  background: var(--sv-surface-raised);
  color: var(--sv-ink-secondary);
  font: 400 var(--sv-text-body)/1.5 var(--sv-font-sans);
}
.pip-reminder[hidden], #pip-reminder-slot:empty { display: none; }
#pip-reminder-details { min-width: 0; }
#pip-reminder-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  list-style: none;
  cursor: pointer;
}
#pip-reminder-toggle::-webkit-details-marker { display: none; }
.pip-reminder-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pip-reminder-art { flex: 0 0 24px; }
#pip-reminder-art svg { display: block; width: 24px; height: 24px; }
#pip-reminder-art * { animation: none !important; }
#pip-reminder-toggle > .icon { flex: 0 0 16px; width: 16px; height: 16px; margin-left: auto; transition: transform var(--sv-dur-base) var(--sv-ease-inout); }
#pip-reminder-details[open] #pip-reminder-toggle > .icon { transform: rotate(90deg); }
#pip-reminder-chats { padding: 0 12px 4px; }
.pip-reminder-chat { display: flex; flex-direction: column; min-height: 44px; padding: 8px 0; color: var(--sv-ink); text-decoration: none; border-top: 1px solid var(--sv-hairline); }
.pip-reminder-chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pip-reminder-meta { color: var(--sv-ink-secondary); overflow-wrap: anywhere; }
.pip-reminder-chat:hover .pip-reminder-chat-title { text-decoration: underline; }
#pip-reminder-dismiss { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--sv-ink-secondary); cursor: pointer; }
#pip-reminder-dismiss .icon { width: 16px; height: 16px; }
#pip-reminder-dismiss:hover { background: var(--sv-surface-sunken); }
.pip-reminder :is(a, button, summary):focus-visible { outline: 2px solid var(--sv-ink); outline-offset: -2px; }
@media print { .pip-reminder { display: none; } }

:root {
  --sv-surface: #ffffff;
  --sv-surface-raised: #fafafa;
  --sv-surface-sunken: #f3f3f3;
  --sv-surface-dim: #e8e8e8;
  --sv-hairline: #dedede;
  --sv-hairline-strong: #a0a0a0;
  --sv-ink-secondary: #616161;
  --sv-ink-tertiary: #686868;
  --sv-radius: 8px;
  --sv-rail: 17.5rem;
  --sv-dur-instant: 100ms;
  --sv-dur-fast: 160ms;
  --sv-dur-base: 240ms;
  /* Continuous motion: one period per meaning, on every surface. Reduced motion removes it. */
  --workspace-pulse: 1.6s;  /* live and working indicators, shimmer, loading sweep */
  --workspace-ping: 2.6s;   /* something is waiting on a person */
  --workspace-spin: 1s;     /* rotating progress */
  --sv-ease-inout: cubic-bezier(.22, .68, 0, 1);
  --workspace-sidebar: #f5f5f5;
  --workspace-hover: #ededed;
  --workspace-selected: #e5e5e5;
  --workspace-bubble: #f3f3f3;
  --workspace-working: #218547;
  --workspace-working-ink: #1a743e;
  --workspace-attention: #9c6042;
  --sv-attention: var(--workspace-attention);
  --workspace-panel-shadow: 0 8px 32px rgb(0 0 0 / .10);
  --workspace-reading-width: 52rem;
  /* Work shell density (2026-09-25 revamp, MonoCode / T3 Code reference): chrome
   * reads at 14px with 13px metadata so a long session list stays scannable;
   * the transcript keeps the 16px reading size. Hierarchy = weight + ink first. */
  --workspace-ui-text: 0.875rem;
  --workspace-ui-meta: 0.8125rem;
  --workspace-ui-leading: 1.35;
  --workspace-row-height: 52px;
  --workspace-control-height: 32px;
  --workspace-sidebar-text: var(--workspace-ui-text);
  --workspace-sidebar-meta: var(--workspace-ui-meta);
}

:root.theme-dark {
  --sv-surface: #202020;
  --sv-surface-raised: #262626;
  --sv-surface-sunken: #2b2b2b;
  --sv-surface-dim: #383838;
  --sv-ink: #f5f5f5;
  --sv-ink-strong: #f5f5f5;
  --sv-ink-secondary: #b4b4b4;
  --sv-ink-tertiary: #a6a6a6;
  --sv-hairline: #414141;
  --sv-hairline-strong: #737373;
  --workspace-sidebar: #181818;
  --workspace-hover: #292929;
  --workspace-selected: #333333;
  --workspace-bubble: #303030;
  --workspace-working: #4bd18a;
  --workspace-working-ink: #4bd18a;
  --workspace-attention: #d6a080;
  --sv-attention: var(--workspace-attention);
  --workspace-panel-shadow: 0 8px 32px rgb(0 0 0 / .24);
}

/* The old rail declared its own dark palette even in light mode. Restore the
 * page's roles locally so every nested menu and hover uses the selected theme. */
.sidebar.sv-dark {
  --sv-surface: var(--workspace-sidebar);
  --sv-surface-raised: #ffffff;
  --sv-surface-sunken: var(--workspace-hover);
  --sv-surface-dim: var(--workspace-selected);
  --sv-ink: #252525;
  --sv-ink-secondary: #616161;
  --sv-ink-tertiary: #686868;
  --sv-hairline: #dedede;
  --sv-hairline-heavy: #737373;
  --sv-emphasis-surface: #252525;
  --sv-emphasis-ink: #ffffff;
  --sv-danger: #b42318;
  --sv-attention: var(--workspace-attention);
  /* Selection is one solid plate, so status colour inside it is read on that
   * plate and not on the rail: the pairs swap with the theme, because the
   * plate is dark on a light rail and light on a dark one. */
  --rail-plate: var(--sv-emphasis-surface);
  --rail-plate-ink: var(--sv-emphasis-ink);
  --rail-plate-working: #4bd18a;
  --rail-plate-attention: #d6a080;
  /* The keyboard hint on the New chat plate is the only rail ink painted ON the
   * inverse surface; brand.css's `.sv-dark` pairs it with a dark gray meant for
   * light plates, which would read at 3.4:1 on black. */
  --sv-inverse-ink-secondary: var(--sv-gray-light);
  /* The rail carries `sv-dark` for historical reasons and is a LIGHT surface in
   * light mode, so brand.css's dark glass values have to be restated here with
   * the light ones — the same reason --sv-attention is restated above. */
  --sv-glass-tint: rgb(255 255 255 / 0.66);
  --sv-glass-tint-raised: rgb(255 255 255 / 0.86);
  --sv-glass-tint-sunken: rgb(0 0 0 / 0.05);
  --sv-glass-rim: rgb(255 255 255 / 0.85);
  --sv-glass-rim-lo: rgb(0 0 0 / 0.07);
  --sv-glass-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 10px 26px rgb(0 0 0 / 0.09);
  --sv-glass-shadow-lift: 0 1px 2px rgb(0 0 0 / 0.10), 0 16px 34px rgb(0 0 0 / 0.14);
  --sv-on-attention: #ffffff;
  color: var(--sv-ink);
  background: var(--workspace-sidebar);
  border-right-color: var(--sv-hairline);
}
.theme-dark .sidebar.sv-dark {
  --sv-surface-raised: #262626;
  --sv-ink: #f5f5f5;
  --sv-ink-secondary: #b4b4b4;
  --sv-ink-tertiary: #a6a6a6;
  --sv-hairline: #414141;
  --sv-hairline-heavy: #a0a0a0;
  --sv-emphasis-surface: #f5f5f5;
  --sv-emphasis-ink: #202020;
  /* Light enough to be the one lit row, short of the white slab a dark rail
   * glares with (scripts/web-dark-theme-smoke.mjs grades large light plates). */
  --rail-plate: #c4c4c4;
  --rail-plate-ink: #1e1e1e;
  /* Status text on the light plate needs 4.5:1 against #c4c4c4 (the light-theme status inks reach only 3.3 and 2.9). */
  --rail-plate-working: #11562d;
  --rail-plate-attention: #6e3d24;
  --sv-danger: var(--sv-danger-inverse);
  --sv-attention: var(--workspace-attention);
  --sv-glass-tint: rgb(255 255 255 / 0.07);
  --sv-glass-tint-raised: rgb(255 255 255 / 0.13);
  --sv-glass-tint-sunken: rgb(0 0 0 / 0.30);
  --sv-glass-rim: rgb(255 255 255 / 0.16);
  --sv-glass-rim-lo: rgb(0 0 0 / 0.42);
  --sv-glass-shadow: 0 1px 2px rgb(0 0 0 / 0.30), 0 10px 26px rgb(0 0 0 / 0.34);
  --sv-glass-shadow-lift: 0 1px 2px rgb(0 0 0 / 0.36), 0 16px 34px rgb(0 0 0 / 0.46);
  --sv-on-attention: #000000;
}

/* Degradation: one door for both. A member who asked for less transparency, and
 * an engine with no backdrop-filter, get today's solid surfaces — the material
 * is redefined at the token, so no rule below needs a second code path. */
@media (prefers-reduced-transparency: reduce) {
  :root, :root.theme-dark, .sidebar.sv-dark, .theme-dark .sidebar.sv-dark {
    --sv-glass-tint: var(--sv-surface);
    --sv-glass-tint-raised: var(--sv-surface-raised);
    --sv-glass-tint-sunken: var(--sv-surface-sunken);
    --sv-glass-blur: none;
    --sv-glass-blur-lift: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root.theme-dark, .sidebar.sv-dark, .theme-dark .sidebar.sv-dark {
    --sv-glass-tint: var(--sv-surface);
    --sv-glass-tint-raised: var(--sv-surface-raised);
    --sv-glass-tint-sunken: var(--sv-surface-sunken);
    --sv-glass-blur: none;
    --sv-glass-blur-lift: none;
  }
}

.icon { stroke-linecap: round; stroke-linejoin: round; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
  outline-color: var(--sv-ink-secondary);
}
button { touch-action: manipulation; }
:where(.app button, .app [role="button"], .pip-context-panel button) {
  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),
    opacity var(--sv-dur-instant) var(--sv-ease-out),
    transform var(--sv-dur-instant) var(--sv-ease-out);
}
:where(.app button:not(:disabled), .app [role="button"]:not([aria-disabled="true"]), .pip-context-panel button:not(:disabled)):active {
  transform: scale(.97);
}
.sidebar-resize-handle::after { background: var(--sv-hairline-strong); }
.sidebar-head { padding-inline: 18px 10px; }
.sidebar :is(.brand, .profile-name, .profile-menu-identity strong, .sidebar-empty button) { color: var(--sv-ink); }
.sidebar .profile-menu-item { color: var(--sv-ink-secondary); }
.sidebar .profile-menu-item[aria-pressed="true"] { color: var(--sv-ink); background: var(--workspace-selected); }
/* The legacy :is() selectors contain IDs, so even Activity's attribute match
   inherits their specificity. Give every destination one authoritative row:
   32px dense rows, secondary ink and an immediate inverse selection plate.
   Keep the geometry hook for the navigation controller, but do not paint it. */
#sidebar .sidebar-primary-nav > .sidebar-nav-btn {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  width: 100%;
  min-height: var(--workspace-control-height);
  height: var(--workspace-control-height);
  justify-content: flex-start;
  gap: 8px;
  padding: 0 8px;
  color: var(--sv-ink-secondary);
  background: transparent;
  border-color: transparent;
  border-radius: var(--sv-radius);
  box-shadow: none;
  transition: none;
}
#sidebar .sidebar-primary-nav > .sidebar-nav-btn:is(:hover, :focus-visible) {
  color: var(--sv-ink);
  background: var(--workspace-hover);
}
/* Inverse navigation plates settle immediately: travelling plates leave their
   labels on the wrong contrast pair during a destination change. */
#sidebar .sidebar-primary-nav > .sidebar-nav-btn.active {
  color: var(--rail-plate-ink);
  background: var(--rail-plate);
  transition: none;
}
.sidebar-nav-lozenge {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--nav-lozenge-w, 100%);
  max-width: calc(100% - var(--nav-lozenge-x, 0px));
  height: var(--nav-lozenge-h, 40px);
  border-radius: var(--sv-radius);
  background: transparent;
  box-shadow: none;
  opacity: 0;
  /* Vertical travel is the move; x stays 0 in the single-column rail and only
   * carries the two-column layout of a very short phone. */
  transform: translate(var(--nav-lozenge-x, 0px), var(--nav-lozenge-y, 0px));
  pointer-events: none;
  transition:
    transform var(--sv-dur-base) var(--sv-ease-inout),
    width var(--sv-dur-base) var(--sv-ease-inout),
    height var(--sv-dur-base) var(--sv-ease-inout),
    opacity var(--sv-dur-fast) var(--sv-ease-out);
}
.sidebar-nav-lozenge[data-visible="true"] { opacity: 1; }
/* First paint, and reduced motion, place it rather than animate it there. */
.sidebar-nav-lozenge[data-settle="jump"] { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-nav-lozenge { transition: none; }
}
/* ---- Sidebar counts (rail columns slice) -----------------------------------
 * One style for every count in the rail (`.rail-count`): a 20px badge, a 20px
 * circle for one digit and a pill that widens by its digits only, one size,
 * weight and figure style, all ending on one right edge. Only a count waiting
 * on the member is filled: `.is-waiting` the emphasis pair, `.is-attention`
 * --sv-attention with its paired ink. Totals stay plain secondary ink. On the
 * selection plate the fills swap to the plate's own pairs. */
#sidebar .rail-count,
#sidebar .sidebar-primary-nav .rail-count {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  margin: 0 0 0 auto;
  padding: 0 6px;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  font: 500 var(--workspace-ui-meta) / 20px var(--sv-font-sans);
  font-variant-numeric: normal;
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
}
#sidebar .rail-count[hidden] { display: none; }
#sidebar .rail-count.is-waiting { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); }
#sidebar .rail-count.is-attention { color: var(--sv-on-attention); background: var(--sv-attention); }
#sidebar .sidebar-nav-btn.active .rail-count { color: inherit; }
#sidebar .sidebar-nav-btn.active .rail-count.is-waiting { color: var(--rail-plate); background: var(--rail-plate-ink); }
#sidebar .sidebar-nav-btn.active .rail-count.is-attention { color: var(--rail-plate); background: var(--rail-plate-attention); }
/* Section totals end where the destinations' counts do: those rows inset their
 * content by an 8px padding and a 1px border. */
#sidebar .sidebar-work-panel > .sidebar-section-head { padding-right: 9px; }
/* Short phones show the rail icon-only: the total stays, beside its icon. */
@media (max-width: 640px) and (max-height: 640px) {
  #sidebar .sidebar-primary-nav .sidebar-nav-count { margin-left: 0; }
}
.sidebar .brand .wordmark { font-size: 18px; }

/* ---- The command row -----------------------------------------------------
 * New chat and Search are one compact row above the destinations and outside
 * every scroll owner: its own non-scrolling block in the desktop grid, and
 * `sticky` under the sticky head where the whole rail is one scroller.
 * New chat is a secondary 32px button (2026-09-25 revamp) — the emphasis pair
 * is reserved for Send; Search is a quiet sunken field with its ⌘K hint. */
#sidebar {
  /* Later legacy skins still declare the old four-row rail. Keep the command
   * row and primary destinations intrinsic so the chat/project browser, not
   * either command surface, remains the flexible scroll owner. */
  grid-template-rows: 4rem auto auto minmax(9rem, 1fr) 4.25rem;
}
.sidebar-command-dock {
  position: sticky;
  z-index: 3;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  gap: 6px;
  padding: 4px 10px 8px;
  background: var(--workspace-sidebar);
  transition: box-shadow var(--sv-dur-fast) var(--sv-ease-out);
}
/* Every level in the row's grid/flex chain must be allowed to shrink. Native
 * search fields otherwise contribute their intrinsic width to the grid's
 * automatic minimum and make the whole rail wider than its assigned track. */
.sidebar-command-dock > *,
#sidebar .sidebar-command-dock .sidebar-search,
#sidebar .sidebar-command-dock .sidebar-search input {
  min-width: 0;
}
/* A hairline appears only once scrolled content passes beneath it. */
.sidebar-command-dock.is-lifted { box-shadow: 0 1px 0 var(--sv-hairline); }
#sidebar .sidebar-command-dock :is(.new-chat-btn, .sidebar-search) {
  box-sizing: border-box;
  min-height: var(--workspace-control-height);
  height: var(--workspace-control-height);
  margin: 0;
  border-radius: 8px;
  font: 400 var(--workspace-ui-text) / 1.35 var(--sv-font-sans);
}
#sidebar .sidebar-command-dock .new-chat-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 8px;
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  border: 1px solid var(--sv-hairline);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: none;
}
#sidebar .sidebar-command-dock .new-chat-btn:is(:hover, :focus-visible) {
  color: var(--sv-ink);
  background: var(--workspace-hover);
  border-color: var(--sv-hairline);
  box-shadow: none;
}
#sidebar .sidebar-command-dock .new-chat-btn:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 1px; }
#sidebar .sidebar-command-dock .new-chat-btn > .icon { width: 16px; height: 16px; flex: 0 0 16px; }
#sidebar .sidebar-command-dock .sidebar-search {
  width: 100%;
  max-width: 100%;
  grid-column: auto;
  gap: 6px;
  padding: 0 4px 0 8px;
  color: var(--sv-ink-secondary);
  background: var(--workspace-hover);
  border: 0;
  box-shadow: none;
}
#sidebar .sidebar-command-dock .sidebar-search:hover { color: var(--sv-ink); background: var(--workspace-hover); }
#sidebar .sidebar-command-dock .sidebar-search:focus-within {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  box-shadow: inset 0 0 0 1px var(--sv-hairline-strong);
}
#sidebar .sidebar-command-dock .sidebar-search > .icon { width: 16px; height: 16px; flex: 0 0 16px; color: inherit; }
#sidebar .sidebar-command-dock .sidebar-search input { min-height: 0; color: var(--sv-ink); }
#sidebar .sidebar-command-dock .sidebar-search-open {
  height: 22px;
  padding: 0 5px;
  color: var(--sv-ink-tertiary);
  background: transparent;
  border-radius: 6px;
  box-shadow: none;
  font-size: var(--workspace-ui-meta);
}
#sidebar .sidebar-command-dock .sidebar-search-open:is(:hover, :focus-visible) { color: var(--sv-ink); background: var(--workspace-selected); }
#sidebar .sidebar-command-dock .sidebar-search-open kbd { font: inherit; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #sidebar .sidebar-command-dock :is(.new-chat-btn, .sidebar-search) { min-height: 44px; height: 44px; }
  /* Touch browsers zoom the page when a field under 16px takes focus. */
  #sidebar .sidebar-command-dock .sidebar-search input { font-size: 16px; }
  #sidebar .sidebar-command-dock .sidebar-search-open {
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin-right: -4px;
    padding: 0;
  }
}
/* One rail, one scroller: the head stays pinned at the top and the dock pins
 * directly under it while the destinations and every project scroll past.
 * Mirrors the layout query in app.css that makes .sidebar the scroll owner. */
@media (max-width: 900px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .sidebar-command-dock {
    flex: none;
    top: var(--sv-space-16);
  }
}
/* A window shortened past the rail's fixed chrome scrolls as one column too,
 * with the same sticky head to clear. */
@media (max-height: 420px) {
  .sidebar-command-dock { top: var(--sv-space-16); }
}

.sidebar-primary { padding-inline: 10px; padding-bottom: 12px; }
.sidebar-scroll { padding-inline: 10px; }
/* Containing block for the one shared lozenge behind the active destination. */
.sidebar-primary-nav { position: relative; gap: 2px; }
.sidebar-section-head { font-size: var(--workspace-sidebar-meta); font-weight: 500; min-height: 28px; }
.sidebar-work-panel { margin-top: 12px; }
.sidebar .workspace-group { font-size: var(--workspace-sidebar-meta); text-transform: none; letter-spacing: 0; }
.project-home-children { grid-column: 1 / -1; }
.project-home-children .project-home-chat { grid-template-columns: 16px minmax(0, 1fr) max-content 16px; }
.project-home-children .project-home-chat-meta { display: block; }
.project-home-hero > nav { margin: 0 0 16px; }
@media (max-width: 900px), (pointer: coarse) {
  .project-home-action { min-height: 44px; }
  #new-category-btn { min-width: 44px; min-height: 44px; }
}
.sidebar :is(.project-row, .thread-row, .session-row, .pinned-row) { border-radius: 8px; }
/* One label scale, including the real search input and nested task titles.
 * Native input defaults must not make Search larger than its neighboring rows. */
#sidebar :is(.sidebar-nav-btn, .new-chat-btn, .project-row, .thread-row,
  .pinned-open, .pinned-title, .profile-name) {
  font: 400 var(--workspace-sidebar-text) / 1.4 var(--sv-font-sans);
  letter-spacing: normal;
}
#sidebar :is(.thread-title-text, .pinned-title, .sidebar-section-head, .workspace-group, .project-activity) {
  font-weight: 400;
}
#sidebar .project-name,
#sidebar :is(.thread-row.selected, .thread-row[data-unseen="true"]) .thread-title-text,
#sidebar .pinned-row.selected .pinned-title { font-weight: 500; }
#sidebar :is(.thread-title-text, .pinned-title) { color: var(--sv-ink); }
#sidebar .sidebar-search input,
#sidebar .sidebar-search input::placeholder { font: inherit; letter-spacing: inherit; }
#sidebar .sidebar-primary-nav > .sidebar-nav-btn > .icon,
#sidebar .new-chat-btn > .icon { width: 16px; height: 16px; flex: 0 0 16px; }
.sidebar :is(.thread-row-meta, .thread-row-stamp, .thread-live-status, .pinned-meta, .project-activity, .profile-detail) {
  font-size: var(--workspace-sidebar-meta);
  font-weight: 400;
  line-height: 1.4;
}
.sidebar .project-row { min-height: var(--workspace-control-height); }
.sidebar :is(.sidebar-nav-btn, .sidebar-search, .new-chat-btn, .project-row, .thread-row,
  .session-row, .pinned-row, .profile-trigger, .sidebar-section-action, .icon-btn):is(:hover, :focus-within) {
  color: var(--sv-ink);
  background: var(--workspace-hover);
  box-shadow: none;
}
.sidebar :is(.project-row, .thread-row, .session-row, .pinned-row).selected,
.sidebar .sidebar-nav-btn.active {
  color: var(--sv-ink);
  background: var(--workspace-selected);
  box-shadow: none;
}
/* A pressed rail filter (Recent's running-only toggle) reads as selected. */
.sidebar .sidebar-section-action[aria-pressed="true"],
.sidebar .sidebar-section-action[aria-pressed="true"]:is(:hover, :focus-within) {
  color: var(--sv-ink);
  background: var(--workspace-selected);
}
/* The open chat is the ONE solid row in a rail of quiet text: an emphasis
 * plate with the ink inverted on it. Not a raised white card with a hairline
 * outline and a lit left edge — that read as decoration borrowed from the New
 * chat plate, and it bought its contrast from a 3px bar rather than from the
 * row (Rey, 2026-09-22). Status ink swaps to its on-plate pair, so a live dot
 * and an unseen mark are still read there. */
.sidebar :is(.project-row, .thread-row, .session-row, .pinned-row).selected,
.sidebar :is(.project-row, .thread-row, .session-row, .pinned-row).selected:is(:hover, :focus-within) {
  --sv-ink: var(--rail-plate-ink);
  --sv-ink-secondary: color-mix(in srgb, var(--rail-plate-ink) 74%, transparent);
  --sv-ink-tertiary: color-mix(in srgb, var(--rail-plate-ink) 68%, transparent);
  --sv-inverse-ink: var(--rail-plate-ink);
  --sv-inverse-ink-secondary: color-mix(in srgb, var(--rail-plate-ink) 74%, transparent);
  --sv-hairline-heavy: color-mix(in srgb, var(--rail-plate-ink) 55%, transparent);
  --sv-emphasis-surface: var(--rail-plate-ink);
  --workspace-working: var(--rail-plate-working);
  --workspace-working-ink: var(--rail-plate-working);
  --sv-attention: var(--rail-plate-attention);
  /* The row's own controls are washes OF the plate: the rail's grey hover
   * would otherwise paint a light block, with white ink on it, over the plate. */
  --workspace-hover: color-mix(in srgb, var(--rail-plate-ink) 16%, transparent);
  --workspace-selected: color-mix(in srgb, var(--rail-plate-ink) 26%, transparent);
  color: var(--rail-plate-ink);
  background: var(--rail-plate);
  box-shadow: none;
}
/* Arriving lights the plate: a wash of its own ink blooms open and dissolves
 * into it. The row itself never moves — a transform on the row would make its
 * box, and every marker measured inside it, lie for the length of the
 * animation — so this is a pseudo-element under the row's content, painted
 * over the plate and below the title. Only a row the member actually moved to
 * is marked (markRailSelectionEntrance), so a rail rebuilt for an unrelated
 * reason never replays a move nobody made. */
.sidebar :is(.project-row, .thread-row, .session-row, .pinned-row).selected[data-entered]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--rail-plate-ink) 22%, transparent);
  animation: rail-plate-settle var(--sv-dur-base) var(--sv-ease-inout) forwards;
}
@keyframes rail-plate-settle {
  from { opacity: 1; transform: scaleY(.55); }
  to { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar :is(.project-row, .thread-row, .session-row, .pinned-row).selected[data-entered]::before { animation: none; opacity: 0; }
}
.sidebar :is(.project-disclosure:hover, .project-disclosure:focus-visible)::before { background: var(--workspace-hover); }
.sidebar-foot { border-top: 0; }
.sidebar .profile-avatar { color: var(--sv-ink); background: var(--workspace-selected); border: 0; border-radius: 50%; }
.sidebar .profile-trigger:hover { color: var(--sv-ink); }
.sidebar .row-actions { color: var(--sv-ink); background: var(--workspace-hover); }
.sidebar .row-actions .icon-btn:hover { color: var(--sv-ink); background: var(--workspace-selected); }
.sidebar .sidebar-search input { color: var(--sv-ink); }
.sidebar .sidebar-search input::placeholder { color: var(--sv-ink-secondary); }
.sidebar .thread-row-prop { opacity: 1; }
.sidebar .session-row:is([data-phase="received"], [data-phase="working"], [data-phase="writing"], [data-phase="done"]) .session-state { color: var(--workspace-working-ink); }

.activity-count { color: var(--sv-ink-secondary); background: var(--sv-surface-dim); }
.messages { scroll-behavior: auto; }
.messages-inner { width: min(100%, var(--workspace-reading-width)); }
/* Returning to a chat is a quiet update in the same reading column. */
.catch-up-nudge {
  width: min(100%, var(--workspace-reading-width));
  padding: var(--sv-space-2) var(--sv-space-3);
  background: var(--sv-surface-sunken);
  border: 0;
  border-radius: 12px;
}
.catch-up-nudge-copy { color: var(--sv-ink-secondary); }
.catch-up-nudge-action {
  color: var(--sv-ink);
  background: var(--sv-surface);
  border-color: var(--sv-hairline);
  border-radius: var(--sv-radius);
  font-weight: 500;
}
.catch-up-nudge-dismiss { border-radius: var(--sv-radius); }
.catch-up-nudge-action:hover, .catch-up-nudge-dismiss:hover { color: var(--sv-ink); background: var(--workspace-hover); }
.catch-up-nudge-action:focus-visible, .catch-up-nudge-dismiss:focus-visible { outline-color: var(--sv-ink); }
/* Retry notices should read like chat status, not admin banners. */
.notice[data-outbox] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  font-size: var(--sv-text-caption);
}
.notice[data-outbox] .notice-action {
  min-height: 44px;
  margin-left: 0;
  padding: 0 10px;
  color: var(--sv-ink);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: inherit;
}
.notice[data-outbox] .notice-action:hover { color: var(--sv-ink); background: var(--workspace-hover); }
.msg.assistant, .msg.peer, .msg.voice, .status-line, .agent-work-line { display: block; }
.msg + .msg,
.msg + .status-line,
.msg + .notice,
.status-line + .msg,
.notice + .msg { margin-top: var(--sv-space-6); }
.msg-role { margin-bottom: 8px; }
.turn-trace-head, .turn-trace-content { grid-column: auto; }
.msg.peer { border: 0; border-radius: 12px; }
.msg.voice { border-top-color: var(--sv-hairline); }
.md pre { border-radius: 10px; }
.md :not(pre) > code { border-radius: 4px; }
.msg, .status-line, .notice { animation: none; }
.status-chip { border-radius: 8px; box-shadow: none; }
.turn-trace-head { font-size:var(--sv-text-caption); width:min(100%, 32rem); min-height:32px; margin-bottom:0; gap:8px; }
.turn-trace-heading { flex:1 1 auto; min-width:0; }
.turn-trace-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-line[data-live-steps="1"] .turn-trace-head::before { content:""; flex:0 0 6px; height:6px; border-radius:50%; }
.status-line[data-unconfirmed="1"] .turn-trace-head::before { background:var(--sv-attention); }
.turn-trace-content { padding-top:8px; }
.turn-commentary-latest, .turn-reasoning-latest { margin:4px 0 0; color:var(--sv-ink-secondary); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.turn-reasoning-latest { -webkit-line-clamp:3; overflow-wrap:anywhere; }
/* Prefer the agent's public explanation when it supplied one. */
.status-line:has(> .turn-commentary-latest:not([hidden])) > .turn-reasoning-latest { display:none; }
.turn-commentary, .turn-reasoning { color:var(--sv-ink-secondary); }
.turn-commentary > summary, .turn-reasoning > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.turn-commentary .md, .turn-reasoning .md { color:var(--sv-ink-secondary); }
/* Long summaries scroll inside the trace rather than pushing the answer away. */
.turn-reasoning .md { max-height:320px; overflow:auto; font-size:var(--workspace-ui-meta); }
.status-line[data-trace-collapsed="1"] .turn-trace-content { display:none; }
@media (pointer:coarse), (max-width:640px) {
  .turn-trace-head { min-height:44px; }
}
.turn-trace-head .turn-trace-rule { display:none; }
.turn-trace-history { color:var(--sv-ink-secondary); font-size:var(--sv-text-caption); }
.turn-trace-history > summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; }
.turn-trace-history > summary::before { content:"›"; transition: transform var(--sv-dur-base) var(--sv-ease-inout); }
.turn-trace-history[open] > summary::before { transform:rotate(90deg); }
.turn-trace-history .turn-steps-recent { max-height:240px; overflow:auto; margin:0; padding:0; }
.status-line:not([data-trace-collapsed="1"]) .turn-trace-content { max-height:none; overflow:visible; }
/* Plan card (web/app/15-plan-card.js): the plan and assumptions under the
 * prompt they serve. One line each until opened; the Workboard keeps detail. */
.plan-card { display: grid; gap: 2px; width: min(100%, 32rem); margin: 8px 0 0; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); }
.plan-card[data-entering] { animation: workspace-message-enter var(--sv-dur-base) var(--sv-ease-out); }
.plan-card-section > summary { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; list-style: none; border-radius: 8px; padding-inline: 8px; }
.plan-card-section > summary::-webkit-details-marker { display: none; }
.plan-card-section > summary:hover { background: var(--sv-surface-sunken); }
.plan-card-section > summary::after { content: "›"; flex: none; color: var(--sv-ink-tertiary); transition: transform var(--sv-dur-base) var(--sv-ease-inout); }
.plan-card-section[open] > summary::after { transform: rotate(90deg); }
.plan-card-kicker { flex: none; color: var(--sv-ink); font-weight: 500; }
.plan-card-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-card-meta { flex: none; color: var(--sv-ink-tertiary); font-variant-numeric: tabular-nums; }
.plan-card-list { display: grid; gap: 2px; margin: 2px 0 6px; padding: 0 8px 0 16px; list-style: none; }
.plan-card-list li { display: flex; align-items: baseline; gap: 8px; min-height: 28px; line-height: 1.45; }
.plan-card-mark { flex: 0 0 12px; color: var(--workspace-working); }
.plan-card-list li.is-done .plan-card-item-text { color: var(--sv-ink-tertiary); }
.plan-card-list li.is-running .plan-card-item-text { color: var(--sv-ink); }
.plan-card-item-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Assumption review (web/app/15-plan-card.js): each assumption is a decision
 * the member can mark Right or Wrong, not a line to read. Same element in the
 * chat card and the Context panel. */
.assumption-review { display: grid; gap: 8px; margin: 4px 0 8px; padding: 10px 12px; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 10px; background: var(--sv-surface); }
.assumption-review-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.assumptions-list .assumption-review-row + .assumption-review-row { margin-top: 2px; }
/* The Context panel's list is an inline-size container: the panel is ~320px
 * even on a wide desktop, so whether Right / Wrong fits beside the text is a
 * question about the panel, not the viewport. Before this the panel squeezed
 * the text to ~110px, one or two words a line. Not on the chat card's rows: it
 * sizes to its content, and size containment would zero their width. */
.assumptions-list { container: assumption-list / inline-size; }
.assumption-review-line { display: flex; align-items: center; gap: 6px 8px; min-height: 32px; }
.assumption-review-text { flex: 1 1 auto; min-width: 0; color: var(--sv-ink); line-height: 1.45; overflow-wrap: anywhere; }
.assumption-review-row[data-verdict="wrong"] .assumption-review-text { color: var(--sv-ink-tertiary); text-decoration: line-through; }
/* Choices, add and send read at the row's own size (14px in the chat card,
 * the panel's size there) and share the 32px control height. */
.assumption-review-choices { display: inline-flex; flex: none; padding: 2px; border-radius: 8px; background: var(--sv-surface-sunken); }
.assumption-review-choice { display: inline-flex; align-items: center; min-height: calc(var(--workspace-control-height) - 4px); border: 0; border-radius: 6px; padding: 0 10px; background: transparent; color: var(--sv-ink-secondary); font: inherit; cursor: pointer; }
.assumption-review-choice:hover, .assumption-review-choice:focus-visible { color: var(--sv-ink); }
.assumption-review-choice.is-right[aria-pressed="true"] { background: var(--sv-surface); color: var(--workspace-working-ink); box-shadow: 0 0 0 var(--sv-hairline-w) var(--sv-hairline); }
.assumption-review-choice.is-wrong[aria-pressed="true"] { background: var(--sv-surface); color: var(--sv-danger); box-shadow: 0 0 0 var(--sv-hairline-w) var(--sv-hairline); }
@container assumption-list (max-width: 28rem) {
  .assumption-review-line { flex-wrap: wrap; }
  .assumption-review-text { flex-basis: 100%; }
}
.assumption-review-instead, .assumption-review-added { width: 100%; box-sizing: border-box; margin: 4px 0 2px; padding: 6px 10px; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 8px; background: var(--sv-surface); color: var(--sv-ink); font: inherit; font-size: var(--sv-text-caption); }
.assumption-review-instead:focus-visible, .assumption-review-added:focus-visible { outline: 2px solid var(--workspace-working); outline-offset: 1px; }
.assumption-review-foot { display: grid; gap: 6px; }
.assumption-review-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.assumption-review-add { display: inline-flex; align-items: center; min-height: var(--workspace-control-height); border: 0; padding: 0; white-space: nowrap; background: transparent; color: var(--sv-ink-secondary); font: inherit; cursor: pointer; }
.assumption-review-add::before { content: "+\00a0"; }
.assumption-review-add:hover, .assumption-review-add:focus-visible { color: var(--sv-ink); }
/* A compact emphasis button, not the 48px dialog slab it inherits. */
.dialog-button.assumption-review-send { width: auto; min-width: 0; height: var(--workspace-control-height); padding: 0 12px; border-radius: 8px; font: inherit; font-weight: 500; white-space: nowrap; }
.dialog-button.assumption-review-send:disabled,
.dialog-button.assumption-review-send:disabled:hover { background: transparent; color: var(--sv-ink-tertiary); border-color: var(--sv-hairline); cursor: default; }
.activity-panel .assumption-review-guide:not(:empty) { padding: 0 var(--sv-space-6) var(--sv-space-4); }
@media (pointer: coarse), (max-width: 640px) {
  .plan-card-section > summary { min-height: 44px; }
  .assumption-review-line { flex-wrap: wrap; }
  .assumption-review-text { flex-basis: 100%; }
  .assumption-review-choice { min-height: 44px; padding-inline: 14px; }
  .assumption-review-add, .dialog-button.assumption-review-send { min-height: 44px; }
  .activity-panel .assumption-review-guide:not(:empty) { padding-inline: var(--sv-space-4); }
}
@media (prefers-reduced-motion: reduce) { .plan-card[data-entering] { animation: none; } }
/* Staffing (web/app/15-staffing-chest.js): the agent and skills a turn was
 * staffed with. The live line opens a chest once (agent lifts out, skills fan
 * beside it, ~1.4s) and settles into the chip row every answer keeps, still. */
.staffing { min-width: 0; max-width: 100%; margin: 4px 0 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: 18px; }
.status-line > .staffing { padding-inline-start: 4px; }
.msg.assistant > .staffing { margin-top: 8px; }
.staffing-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.staffing-row[hidden] { display: none; }
.staffing[data-staffing-state="settled"] .staffing-row { animation: workspace-message-enter var(--sv-dur-base) var(--sv-ease-out); }
.staffing-chip { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; min-height: 24px; padding: 2px 8px; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); color: var(--sv-ink-secondary); cursor: default; }
.staffing-chip .icon { flex: 0 0 13px; width: 13px; height: 13px; color: var(--sv-ink-tertiary); }
.staffing-chip .agent-orb { flex: 0 0 14px; width: 14px; height: 14px; }
.staffing-chip-agent { color: var(--sv-ink); }
.staffing-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staffing-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; padding-top: 4px; }
.staffing-stage[data-leaving] { opacity: 0; transition: opacity var(--sv-dur-fast) var(--sv-ease-out); }
.staffing-chest-box { position: relative; z-index: 1; display: inline-flex; flex: 0 0 36px; width: 36px; height: 30px; color: var(--sv-ink-secondary); animation: workspace-surface-enter var(--sv-dur-base) var(--sv-ease-out) both; }
.staffing-chest { width: 36px; height: 30px; overflow: visible; }
.staffing-chest-wood { fill: var(--sv-surface-sunken); stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.staffing-chest-plank { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.5; }
.staffing-chest-band { fill: currentColor; opacity: 0.35; }
.staffing-chest-mouth { fill: currentColor; }
.staffing-chest-lock { fill: currentColor; }
.staffing-chest-keyhole { fill: var(--sv-surface); }
.staffing-chest-lid { transform-box: fill-box; transform-origin: 0% 100%; }
.staffing-chest-spark { fill: currentColor; opacity: 0; transform-box: fill-box; transform-origin: center; }
.staffing-stage[data-open] .staffing-chest-lid { animation: staffing-lid-open var(--sv-dur-base) var(--sv-ease-out) var(--sv-dur-fast) both; }
.staffing-stage[data-open] .staffing-chest-spark { animation: staffing-spark var(--sv-dur-slow) var(--sv-ease-out) calc(var(--sv-dur-fast) * 2) both; }
.staffing-stage[data-open] .staffing-chest-spark:nth-child(2) { animation-delay: calc(var(--sv-dur-fast) * 2 + var(--sv-dur-instant)); }
.staffing-stage[data-open] .staffing-chest-spark:nth-child(3) { animation-delay: calc(var(--sv-dur-fast) * 2 + var(--sv-dur-instant) * 2); }
.staffing-card { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 4px 10px; border: var(--sv-hairline-w) solid var(--sv-hairline-strong); border-radius: var(--sv-radius); background: var(--sv-surface-raised); color: var(--sv-ink); }
.staffing-card-agent { flex: 0 1 auto; max-width: min(22rem, calc(100% - 44px)); padding-block: 6px; }
.staffing-card-portrait { display: inline-grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 6px; background: var(--sv-surface-sunken); color: var(--sv-ink-secondary); }
.staffing-card-portrait .icon { width: 16px; height: 16px; }
.staffing-card-text { display: grid; gap: 1px; min-width: 0; }
.staffing-card-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.staffing-card-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.staffing-card-workstream { flex: none; padding: 0 6px; border-radius: 6px; background: var(--sv-surface-sunken); color: var(--sv-ink-secondary); }
.staffing-card-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sv-ink-secondary); }
.staffing-card-skill .icon { flex: 0 0 13px; width: 13px; height: 13px; color: var(--sv-ink-tertiary); }
.staffing-card-skill .staffing-card-title { font-weight: 400; }
.staffing-stage[data-open] .staffing-card-agent { animation: staffing-lift calc(var(--sv-dur-base) * 1.5) var(--sv-ease-out) calc(var(--sv-dur-base) + var(--sv-dur-fast)) both; }
.staffing-stage[data-open] .staffing-card-skill { animation: staffing-fan var(--sv-dur-base) var(--sv-ease-out) calc(var(--sv-dur-slow) + var(--sv-dur-instant) * 1.2 * var(--staffing-i, 0)) both; }
@keyframes staffing-lid-open { from { transform: none; } 70% { transform: rotate(-48deg) translateY(-1px); } to { transform: rotate(-42deg) translateY(-1px); } }
@keyframes staffing-spark { 0% { opacity: 0; transform: translateY(2px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes staffing-lift {
  from { opacity: 0; transform: translate(var(--staffing-from-x, -24px), var(--staffing-from-y, 6px)) scale(0.3); }
  55% { opacity: 1; transform: translate(0, -4px) scale(1.02); }
  to { opacity: 1; transform: none; }
}
@keyframes staffing-fan {
  from { opacity: 0; transform: translate(var(--staffing-from-x, -24px), var(--staffing-from-y, 0px)) rotate(-14deg) scale(0.3); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .staffing-stage { display: none; }
  .staffing[data-staffing-state] .staffing-row { animation: none; }
  .staffing[data-staffing-state="opening"] .staffing-row[hidden] { display: flex; }
}
.turn-trace-rule { background: transparent; }
.status-shimmer { animation: none; }
.status-dot { border-radius: 50%; }
.status-dot.live::after { content: none; }
.thread-activity-icon, .project-activity-icon { color: var(--workspace-working); }
/* The marker reserves 6px, but the glyph must not flex-shrink into that slot. */
.thread-activity-icon .icon { flex: 0 0 14px; width: 14px; height: 14px; }
.status-line[data-settled="done"] .status-activity-icon { color: var(--workspace-working); }
.starter-live-icon, .message-notify-btn.on .icon { color: var(--workspace-working); }
.fix-review-diff .is-add { color: var(--workspace-working-ink); }
.props-error { color: var(--sv-danger); }

/* Decisions keep their status accent, with a complete ink/surface pair for
 * the action. The old fixed amber ink disappeared against dark cards. */
.approval-card { border-left-color: var(--workspace-attention); }
.approval-kicker { color: var(--workspace-attention); }
.approval-approve { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); border-color: var(--sv-emphasis-surface); }
.approval-approve:hover:not(:disabled) { background: var(--sv-emphasis-surface); border-color: var(--sv-emphasis-surface); opacity: .85; }

.project-home-send {
  color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); border-radius: 50%;
}
.project-home-send:hover:not(:disabled) {
  color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); opacity: .85;
}
.msg-steer-now { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--sv-hairline); border-radius: 8px; background: transparent; color: var(--sv-ink); font-size: var(--sv-text-caption); cursor: pointer; }
.msg-steer-now:hover { background: var(--sv-surface-raised); }
.msg-steer-now:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.msg-steer-now:disabled { opacity: .5; cursor: wait; }
@media (pointer: coarse), (max-width: 640px) { .msg-steer-now { min-height: 44px; } }
/* ==== Queued follow-ups: the sender's tray above the composer ====
 * web/app/49-pending-steering.js. One raised 12px card in the reading column:
 * "Queued (N) · Sends after the current step" with Clear all, then numbered
 * rows of the sender's waiting messages (the words at message size), each
 * with Steer now, Move up, Move down, Edit and Remove. Controls are 32px; on
 * phones and coarse pointers they are 44px and wrap under the words. A row is
 * the transcript's own `.msg.user` node, so its bubble chrome is set aside. */
.queue-tray {
  width: min(100%, var(--workspace-reading-width));
  max-height: min(40vh, 24rem);
  margin: 0 auto 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 12px;
  background: var(--sv-surface-raised);
}
.queue-tray-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--workspace-control-height);
  padding: 4px 4px 4px 12px;
  color: var(--sv-ink-secondary);
  font-size: var(--workspace-ui-meta);
  line-height: var(--workspace-ui-leading);
}
.queue-tray-head > .icon { flex: none; width: 16px; height: 16px; }
.queue-tray-title { color: var(--sv-ink); font-weight: 500; white-space: nowrap; }
.queue-tray-note { flex: 1; min-width: 0; }
.queue-tray-list { margin: 0; padding: 0 4px 4px; list-style: none; }
.queue-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0 4px 8px;
  border-top: var(--sv-hairline-w) solid var(--sv-hairline);
}
.queue-row-num {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 6px;
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
  border-radius: 50%;
  color: var(--sv-ink-secondary);
  font-size: var(--workspace-ui-meta);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.queue-tray .queue-row > .msg.user {
  position: static;
  display: flex;
  flex: 1;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px 8px;
  min-width: 0;
  margin: 0;
}
.queue-tray .queue-row > .msg.user > :is(.msg-author, .msg-time, .msg-actions, .msg-receipt, .msg-merged-from, .notice, span.msg-steering-note) { display: none; }
.queue-tray .queue-row > .msg.user > .bubble {
  flex: 1 1 14rem;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 5px 0;
  color: var(--sv-ink);
  background: transparent;
  border-radius: 0;
  font-size: var(--sv-text-body);
  line-height: 1.375;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.queue-tray .queue-row > .msg.user[data-queue-editing] > :is(.bubble, .queue-row-tools) { display: none; }
.queue-row-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: auto; }
.queue-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: var(--workspace-control-height);
  height: var(--workspace-control-height);
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sv-ink-secondary);
  font: 500 var(--workspace-ui-meta) / 1 var(--sv-font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--sv-dur-instant) var(--sv-ease-out), color var(--sv-dur-instant) var(--sv-ease-out), transform var(--sv-dur-instant) var(--sv-ease-out);
}
.queue-row-btn .icon { width: 16px; height: 16px; }
.queue-move-up .icon { transform: rotate(-90deg); }
.queue-move-down .icon { transform: rotate(90deg); }
.queue-row-btn:hover:not(:disabled) { color: var(--sv-ink); background: var(--workspace-hover); }
.queue-row-btn:active:not(:disabled), .queue-tray .msg-steer-now:active:not(:disabled) { transform: scale(.97); }
.queue-row-btn:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.queue-row-btn:disabled { opacity: .4; cursor: default; }
.queue-tray .msg-steer-now { min-height: var(--workspace-control-height); margin: 0; font-size: var(--workspace-ui-meta); white-space: nowrap; }
.queue-edit { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: flex-end; gap: 6px; min-width: 0; }
.queue-edit-field {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 6px 8px;
  border: var(--sv-hairline-w) solid var(--sv-ink-secondary);
  border-radius: 8px;
  background: var(--sv-surface);
  color: var(--sv-ink);
  font: 400 var(--sv-text-body) / 1.5 var(--sv-font-sans);
  resize: vertical;
}
.queue-edit-field:focus { outline: 1px solid var(--sv-ink-secondary); outline-offset: 0; }
.queue-tray .queue-edit-save { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); }
.queue-tray .queue-edit-save:hover:not(:disabled) { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); opacity: .85; }
@media (max-width: 760px), (pointer: coarse) {
  .queue-tray-head { min-height: 44px; }
  .queue-row-btn, .queue-tray .msg-steer-now { min-width: 44px; height: 44px; min-height: 44px; }
}
@media (max-width: 760px) {
  .queue-tray .queue-row > .msg.user > .bubble { flex-basis: 100%; }
  .queue-row-tools { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .queue-row-btn, .queue-tray .msg-steer-now { transition: none; }
  .queue-row-btn:active:not(:disabled), .queue-tray .msg-steer-now:active:not(:disabled) { transform: none; }
}
.goal-progress { width: min(100%, var(--workspace-reading-width)); border: 0; background: transparent; }
.goal-progress:hover { background: var(--sv-surface-sunken); }
.goal-progress-track { border-radius: 3px; }
.goal-progress-track span { background: var(--workspace-working); }
.reply-context, .attachment-chip, .message-attachment, .message-artifact { border-radius: 8px; }

/* Activity is a list of work, not a grid of cards inside more cards. */
.shareos-home { width: min(100%, 64rem); }
.shareos-home-hero { margin-top: clamp(24px, 5vh, 56px); margin-bottom: 30px; }
.shareos-home-heading, .project-home-title { font-size: var(--sv-text-h1); letter-spacing: var(--sv-tracking-heading); line-height: 1.2; font-weight: 500; }
.shareos-home-description { margin-top: 10px; font-size: var(--sv-text-body); line-height: 1.5; }
.shareos-home-zone, .shareos-home-chats { padding: 0; background: transparent; border: 0; box-shadow: none; }
.shareos-home-zone-head { padding: 0 0 14px; }
.shareos-home-zone-head h2 { font-size: var(--workspace-ui-text); font-weight: 500; }
.shareos-home-zone-count { border-radius: 6px; background: var(--sv-surface-sunken); }
.shareos-home .hud-list { display: grid; align-content: start; gap: 10px; }
.shareos-home .hud-list > * { min-width: 0; }
/* Activity rows follow the session row's density (2026-09-25): 56px, 14px title, 13px context. */
.shareos-home .hud-row { min-height: 64px; padding: 12px; gap: 12px; grid-template-columns: 28px minmax(0, 1fr) 16px; border: 1px solid var(--sv-hairline); border-radius: 8px; background: var(--sv-surface-raised); box-shadow: none; }
.shareos-home .hud-row:hover, .shareos-home .hud-row:focus-visible { background: var(--workspace-hover); transform: none; }
.shareos-home .hud-row-icon { width: 28px; height: 28px; border: 0; background: var(--sv-surface-sunken); border-radius: 8px; }
.shareos-home .hud-row:is([data-tone="received"], [data-tone="working"], [data-tone="writing"]) .hud-row-icon { color: var(--workspace-working); }
.shareos-home .hud-row[data-tone="input"] .hud-row-icon { color: var(--workspace-attention); }
.shareos-home .hud-row:is([data-tone="error"], [data-tone="stalled"], [data-tone="stopped"]) .hud-row-icon { color: var(--sv-danger); }
.shareos-home .hud-row-top strong { font-size: var(--workspace-ui-text); line-height: var(--workspace-ui-leading); font-weight: 500; }
.shareos-home :is(.hud-row-context, .hud-row-detail, .hud-row-meta) { font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); font-weight: 400; }
/* A Needs you box (2026-09-28): row, a quiet excerpt of what the question is
 * about, the question at row text size, then one row of answer chips ending in
 * Skip. Scoped to the queue: in-chat ask cards keep their own layout. The copy
 * lines up with the row's title (10px padding + 28px icon + 10px gap). */
.shareos-home .hud-need { padding-bottom:12px; border:1px solid var(--sv-hairline); border-radius:8px; background:var(--sv-surface-raised); }
.shareos-home .hud-need > .hud-row { border:0; background:transparent; }
.shareos-home .hud-need-context { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; margin:0 10px 8px 48px; color:var(--sv-ink-secondary); font-size:var(--workspace-ui-meta); line-height:var(--workspace-ui-leading); overflow-wrap:anywhere; }
.shareos-home .hud-need-context-label { color:var(--sv-ink-tertiary); }
.shareos-home .hud-need .ask-card { margin:0; padding:0 10px 0 48px; gap:8px; border:0; background:transparent; box-shadow:none; }
.shareos-home .hud-need .ask-card[data-ask-multi="0"]:not(.is-answered) .ask-head { display:none; }
.shareos-home .hud-need .ask-question { font-size:var(--workspace-ui-text); line-height:var(--workspace-ui-leading); font-weight:400; }
.shareos-home .hud-need .ask-options { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; }
/* Chips start small and grow to a cap: wrapping is decided on the basis, so
 * three answers and Skip share one line in the reading column, and more than
 * that wraps as a compact second row rather than a table. */
.shareos-home .hud-need .ask-option { flex:1 1 10rem; justify-content:center; gap:1px; min-width:0; max-width:17rem; min-height:44px; padding:5px 12px; border:1px solid var(--sv-hairline); border-radius:8px; background:var(--sv-surface); }
.shareos-home .hud-need .ask-option:hover:not(:disabled) { border-color:var(--sv-hairline-strong); background:var(--workspace-hover); }
.shareos-home .hud-need .ask-option.is-chosen { border-color:var(--sv-ink); box-shadow:inset 0 0 0 1px var(--sv-ink); background:var(--sv-surface-sunken); }
.shareos-home .hud-need .ask-option-label { font-size:var(--workspace-ui-text); line-height:var(--workspace-ui-leading); font-weight:500; }
.shareos-home .hud-need .ask-option-detail { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; color:var(--sv-ink-secondary); font-size:var(--workspace-ui-meta); line-height:var(--workspace-ui-leading); }
.shareos-home .hud-need .ask-actions { display:flex; align-items:center; gap:4px; }
.shareos-home .hud-need :is(.ask-skip, .ask-free, .ask-send) { min-height:44px; padding:0 10px; border-radius:8px; font-size:var(--workspace-ui-text); }
.shareos-home .hud-need .ask-skip { border:0; }
.shareos-home .hud-need .ask-skip:hover:not(:disabled) { color:var(--sv-ink); background:var(--workspace-hover); }
/* Phone: one sideways row of chips, so the box stays about as short as a row
 * plus two lines. The next chip peeks in as the scroll cue; the padding keeps
 * focus rings inside the scroller's clip. */
@media (max-width:640px) {
  .shareos-home .hud-need-context { -webkit-line-clamp:2; line-clamp:2; margin-left:10px; }
  .shareos-home .hud-need .ask-card { padding:0 10px; }
  .shareos-home .hud-need .ask-options { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:10px; scrollbar-width:none; margin:0 -10px; padding:3px 10px; }
  .shareos-home .hud-need .ask-options::-webkit-scrollbar { display:none; }
  .shareos-home .hud-need .ask-option { flex:0 0 13.5rem; min-width:0; max-width:none; scroll-snap-align:start; }
  .shareos-home .hud-need .ask-actions { flex:0 0 auto; }
}
.activity-view-tabs { gap: 4px; margin-top: 24px; }
/* Same geometry as the Recents filters, so the two root pages read as one family. */
.activity-view-tabs button { height: var(--workspace-control-height); min-height: var(--workspace-control-height); padding: 0 10px; border-radius: 8px; color: var(--sv-ink-secondary); font: 500 var(--workspace-ui-text) / 1 var(--sv-font-sans); }
.activity-view-tabs button:hover { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.activity-view-tabs button[aria-selected="true"] { color: var(--sv-ink); background: var(--sv-surface-sunken); box-shadow: none; }
.home-empty-state { border: 1px dashed var(--sv-hairline); border-radius: 12px; background: transparent; }
.home-chat-table-wrap { border-radius: 10px; }
.project-home { max-width: 58rem; }
.project-home-card { border-radius: 12px; background: transparent; }
.project-home-card h2 { font-weight: 500; }
.project-home-composer { border-radius: 12px; border-color: var(--sv-hairline); }
.project-home-composer:focus-within { border-color: var(--sv-hairline-strong); outline: 0; box-shadow: none; }
/* The pre-chat sending receipt reads as part of the composer it sits under. */
.project-home-sending { border-radius: 12px; border-color: var(--sv-hairline); }
.project-home-action:hover { transform: none; }
.suggestion-grid { gap: 10px; border: 0; background: transparent; }
.suggestion { padding: 16px; border: 1px solid var(--sv-hairline); border-radius: 12px; background: transparent; gap: 12px; }
.suggestion:hover { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.suggestion:hover .suggestion-detail { color: var(--sv-ink-secondary); }
.suggestion-icon .icon { width: 20px; height: 20px; }
.suggestion-title { font-size: var(--sv-text-small); }
.suggestion-detail { font-size: var(--sv-text-caption); }

/* ==== New chat: the prompt first ==== */
/* An empty chat (its starter is in the transcript) leads with the real
 * #composer: the heading, the composer with its quiet @/# guide beneath, then
 * the starter's live rows and its folded "Suggested prompts". Only the tracks
 * reorder, so the moment the starter leaves (the first send, a transcript) the
 * same composer is back at the bottom with nothing re-created. */
.new-chat-title { display: none; }
.main:has(> #messages .thread-starter) {
  grid-template-rows:
    [head] var(--workspace-head-height, var(--sv-space-16))
    [pip-invite] auto
    [text-alerts-invite] auto
    [controls] auto
    [composer] auto
    [conversation] minmax(0, 1fr)
    [dock] auto
    [queue] auto;
}
.main:has(> #messages .thread-starter) #composer-wrap { padding-top: clamp(24px, 10vh, 96px); padding-bottom: 0; }
.main:has(> #messages .thread-starter) .new-chat-title {
  display: block;
  width: min(100%, var(--workspace-reading-width));
  margin: 0 auto 16px;
  padding: 0 4px;
  overflow-wrap: anywhere;
  color: var(--sv-ink);
  font-size: var(--sv-text-h1);
  font-weight: 500;
  line-height: var(--sv-leading-heading);
  letter-spacing: var(--sv-tracking-heading);
}
/* Three lines at rest: the box is the page's action, not a footer. */
.main:has(> #messages .thread-starter) .composer-field { min-height: 96px; }
/* With little room above the box, the @/# picker opens below it instead. */
.main:has(> #messages .thread-starter) .composer .mention-picker { top: calc(100% + 6px); bottom: auto; }
.main:has(> #messages .thread-starter) #messages { padding-top: 16px; }
/* The @/# guide the placeholder used to carry, outside the box so it never
 * reads as typed text. A transcript keeps its established note row; the field
 * still names the guide to assistive tech there (aria-describedby). */
.composer-guide { display: none; }
.main:has(> #messages .thread-starter) .composer-guide { display: inline; }
.main:has(> #messages .thread-starter) .composer-note { flex-wrap: wrap; row-gap: 2px; }
.main:has(> #messages .thread-starter) .thread-starter { width: min(100%, var(--workspace-reading-width)); padding: 0 0 var(--sv-space-12); }
.starter-prompts { width: 100%; }
.starter-live + .starter-prompts,
.starter-peripheral + .starter-prompts { margin-top: var(--sv-space-6); }
.starter-prompts-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--workspace-control-height);
  padding: 0 8px;
  border-radius: 8px;
  color: var(--sv-ink-secondary);
  font: 500 var(--workspace-ui-text) / 1 var(--sv-font-sans);
  list-style: none;
  cursor: pointer;
}
.starter-prompts-toggle::-webkit-details-marker { display: none; }
.starter-prompts-toggle:hover { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.starter-prompts-toggle .icon { width: 16px; height: 16px; transform: rotate(90deg); transition: transform var(--sv-dur-base) var(--sv-ease-inout); }
.starter-prompts[open] > .starter-prompts-toggle .icon { transform: rotate(-90deg); }
.starter-prompts > .suggestion-grid { margin-top: 8px; }
@media (max-width: 760px), (pointer: coarse) {
  .starter-prompts-toggle { min-height: 44px; }
}
@media (max-width: 760px) {
  .main:has(> #messages .thread-starter) #composer-wrap { padding-top: 24px; }
  .main:has(> #messages .thread-starter) .new-chat-title { font-size: var(--sv-text-h2); }
  .main:has(> #messages .thread-starter) .composer-field { min-height: 88px; }
}
/* Phones hide the note row in a transcript; a new chat keeps the guide. */
@media (max-width: 600px) {
  .main:has(> #messages .thread-starter) .composer-note { display: flex; }
  .main:has(> #messages .thread-starter) .composer-disclaimer { display: none; }
}

.activity-panel { background: var(--sv-surface); }
.activity-head { border-bottom: 0; }
.activity-close-btn { display: inline-flex; }
.context-panel-kicker { font-size: var(--sv-text-caption); text-transform: none; letter-spacing: 0; }
.context-panel-tabs { margin: 0 12px 8px; padding: 3px; border: 0; border-radius: 10px; background: var(--sv-surface-sunken); }
.context-panel-tabs button[aria-selected="true"] { background: var(--sv-surface); box-shadow: none; }
.context-panel-tabs button { font-size: var(--sv-text-caption); }
.side-chat-question, .side-chat-composer-row { border-radius: 12px; }
.side-chat-send, .side-chat-failure { border-radius: 8px; }
.side-chat-send:not(:disabled) { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); }
.side-chat-send:not(:disabled):hover { opacity: .85; }
.side-chat-composer-row:focus-within { border-color: var(--sv-ink-secondary); }
.activity-item { border-color: var(--sv-hairline); }
.activity-icon { border: 0; border-radius: 8px; background: var(--sv-surface-sunken); }
.activity-item[data-status="running"] .activity-icon, .activity-tool-group[data-status="running"] .activity-icon, .agent-work-icon { color: var(--workspace-working); }
.activity-item[data-status="error"] .activity-icon { color: var(--sv-danger); }
.activity-item-meta { text-transform: none; letter-spacing: 0; }
.activity-section-heading, .assumptions-section h3, .todos-section h3, .agent-messages-section h3,
.context-resource-section h3 { font-size: var(--sv-text-small); font-weight: 500; text-transform: none; letter-spacing: 0; }
.context-resource-row {
  /* The first grid track has to hold the thumbnail tile. */
  grid-template-columns: 56px minmax(0, 1fr) 12px;
  gap: 10px;
  border-radius: 8px;
}
.context-resource-thumbnail {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--sv-hairline);
  border-radius: 6px;
  background: var(--sv-surface-sunken);
  color: var(--sv-ink-secondary);
}
.context-resource-thumbnail > .icon { width: 18px; height: 18px; }
.context-resource-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.context-resource-thumbnail.has-thumbnail .context-resource-image { opacity: 1; }
.context-resource-thumbnail.has-thumbnail > .icon { visibility: hidden; }
@media (max-width: 760px) {
  .context-resource-row { grid-template-columns: 52px minmax(0, 1fr) 12px; }
  .context-resource-thumbnail { width: 52px; }
}
/* Peer exchanges and delegation rooms share the same read-only chat surface. */
.agent-message-head { padding: 12px 16px; }
.agent-message-direction,
.agent-message[data-direction="received"] .agent-message-direction {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sv-ink-secondary);
  font-weight: 400;
  text-transform: none;
}
.agent-room[data-status="running"] .agent-message-direction { color: var(--workspace-working-ink); }
.agent-message-content {
  display: grid;
  gap: 16px;
  padding: 4px 16px 16px;
  border: 0;
  background: none;
}
.agent-chat-message { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.agent-chat-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--sv-surface-sunken);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-caption);
}
.agent-chat-body { flex: 1; min-width: 0; }
.agent-chat-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 4px; }
.agent-message-content .agent-chat-meta strong {
  margin: 0;
  font-weight: 500;
  text-transform: none;
  overflow-wrap: anywhere;
}
.agent-chat-meta time { font-size: var(--sv-text-caption); }
.agent-chat-bubble { padding: 10px 12px; border-radius: 2px 8px 8px; background: var(--sv-surface-sunken); }
.agent-chat-message[data-outgoing="true"] { flex-direction: row-reverse; }
.agent-chat-message[data-outgoing="true"] .agent-chat-bubble {
  border-radius: 8px 2px 8px 8px;
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
}
.agent-chat-status { color: var(--sv-ink-secondary); padding-left: 32px; }
/* Coding card: Watch beside Inspect log. The live run view
 * (web/app/15c-watching-a-coding-run.js) is the agent chat above at a reading
 * measure: the harness speaks in bubbles, its tool calls are the turn trace's
 * compact rows, Share's sends, stops and notices are its outgoing bubbles. */
.activity-coding-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2) var(--sv-space-4); }
.run-live-dialog { width: min(calc(100% - (var(--sv-space-6) * 2)), 46rem); }
.run-live-card { position: relative; display: flex; flex-direction: column; gap: 0; max-height: min(86vh, 52rem); padding: 0; overflow: hidden; }
.run-live-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); }
.run-live-identity { display: flex; align-items: flex-start; gap: var(--sv-space-3); min-width: 0; }
.run-live-identity > div { min-width: 0; }
.run-live-mark { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; background: var(--sv-surface-sunken); color: var(--sv-ink); }
.run-live-mark .icon { width: 18px; height: 18px; }
.run-live-kicker { display: flex; align-items: center; gap: var(--sv-space-2); }
.run-live-pulse { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--workspace-working); animation: activity-pulse var(--workspace-pulse) var(--sv-ease-inout) infinite; }
.run-live-pulse[hidden] { display: none; }
.run-live-dialog[data-status="running"] .run-live-kicker { color: var(--workspace-working-ink); }
.run-live-dialog[data-status="failed"] .run-live-kicker { color: var(--sv-danger); }
.run-live-meta { margin: var(--sv-space-1) 0 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); overflow-wrap: anywhere; }
.run-live-meta:empty { display: none; }
.run-live-reader { flex: 1 1 auto; min-height: 12rem; padding: var(--sv-space-5); overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: var(--sv-space-5); }
.run-live-reader:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: -2px; }
.run-live-turn { max-width: 62ch; width: 100%; margin: 0 auto; }
.run-live-turn .agent-chat-body { display: grid; gap: var(--sv-space-2); justify-items: start; }
.run-live-turn[data-outgoing="true"] .agent-chat-body { justify-items: end; }
.run-live-turn[data-outgoing="true"] .agent-chat-meta { justify-content: flex-end; }
.run-live-avatar { overflow: hidden; color: var(--sv-ink); }
.run-live-avatar .icon { width: 16px; height: 16px; }
.run-live-bubble { max-width: 100%; min-width: 0; }
.run-live-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.run-live-detail { margin: var(--sv-space-1) 0 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); overflow-wrap: anywhere; }
.run-live-bubble[data-kind="cancel"] { border-color: var(--sv-attention); }
.run-live-steps { display: grid; width: 100%; margin: 0; padding: 0; list-style: none; }
.run-live-step .turn-step-label { white-space: normal; overflow-wrap: anywhere; }
.run-live-step-detail { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sv-font-mono); color: var(--sv-ink-secondary); }
.run-live-step[data-status="failed"] .turn-step-icon { color: var(--sv-danger); }
.run-live-segment { max-width: 62ch; width: 100%; margin: 0 auto; padding-top: 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); }
.run-live-empty, .run-live-error { max-width: 62ch; width: 100%; margin: 0 auto; color: var(--sv-ink-secondary); }
.run-live-latest { position: absolute; left: 50%; bottom: var(--sv-space-4); transform: translateX(-50%); min-height: var(--workspace-control-height); padding: 0 var(--sv-space-4); border: var(--sv-hairline-w) solid var(--sv-hairline-strong); border-radius: 8px; background: var(--sv-surface-raised); color: var(--sv-ink); font: 500 var(--workspace-ui-text) / 1 var(--sv-font-sans); box-shadow: var(--workspace-panel-shadow); cursor: pointer; }
.run-live-latest[hidden] { display: none; }
@media (max-width: 760px), (pointer: coarse) {
  .activity-coding-actions .activity-coding-inspect-btn { min-height: 44px; }
  .run-live-card .share-dialog-heading .icon-btn { width: 44px; height: 44px; }
  .run-live-latest { min-height: 44px; }
}
/* Phones: a full-screen sheet on the visual viewport, like Messaging. */
@media (max-width: 760px) {
  .run-live-dialog { bottom: auto; width: 100%; max-width: 100%; height: var(--app-viewport-height, 100dvh); max-height: var(--app-viewport-height, 100dvh); margin: 0; border-radius: 0; transform: none; }
  .app-dialog > .run-live-card { width: 100vw; height: var(--app-viewport-height, 100dvh); max-height: var(--app-viewport-height, 100dvh); overflow: hidden; border-radius: 0; }
  .run-live-card .share-dialog-heading { padding: var(--sv-space-4); }
  .run-live-reader { padding: var(--sv-space-4); }
}
/* Context panel ranking (web/app/15a-context-ranking.js): one Now card leads,
 * folds are quiet button rows, repeated trail rows carry a count. */
.context-now {
  display: flex;
  align-items: center;
  gap: var(--sv-space-3);
  margin: var(--sv-space-1) var(--sv-space-6) var(--sv-space-4);
  padding: 10px 8px 10px 14px;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 12px;
  background: var(--sv-surface-raised);
}
.context-now-copy { display: grid; gap: 6px; flex: 1; min-width: 0; }
.context-now[data-tone="working"] { border-color: var(--workspace-working); background: color-mix(in srgb, var(--workspace-working) 6%, var(--sv-surface)); }
.context-now[data-tone="attention"] { border-color: var(--workspace-attention); background: color-mix(in srgb, var(--workspace-attention) 6%, var(--sv-surface)); }
.context-now[data-tone="danger"] { border-color: var(--sv-danger); }
.context-now-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--workspace-ui-meta);
  font-weight: 500;
}
.context-now-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-ink-tertiary); }
.context-now[data-tone="attention"] .context-now-label { color: var(--sv-attention); }
.context-now[data-tone="attention"] .context-now-dot { background: var(--sv-attention); animation: activity-pulse var(--workspace-ping) var(--sv-ease-inout) infinite; }
.context-now[data-tone="danger"] .context-now-label { color: var(--sv-danger); }
.context-now[data-tone="danger"] .context-now-dot { background: var(--sv-danger); }
.context-now[data-tone="working"] .context-now-label { color: var(--workspace-working-ink); }
.context-now[data-tone="working"] .context-now-dot { background: var(--workspace-working); animation: activity-pulse var(--workspace-pulse) var(--sv-ease-inout) infinite; }
.context-now-qa { color: var(--sv-ink-secondary); font-weight: 400; }
.context-now-qa::before { content: "\00b7"; margin-right: 6px; }
.context-now-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--sv-ink);
  font-size: var(--workspace-ui-text);
  line-height: var(--workspace-ui-leading);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.context-now-action {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--workspace-control-height);
  padding: 0 12px;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 8px;
  background: var(--sv-surface-sunken);
  color: var(--sv-ink);
  font: inherit;
  font-size: var(--workspace-ui-meta);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.context-now-action:hover { border-color: var(--sv-hairline-strong); }
.context-now-action:focus-visible,
.context-fold-toggle:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 2px; }
.deliverables-section { border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.deliverables-section h3 {
  margin: 0;
  padding: var(--sv-space-4) var(--sv-space-6) var(--sv-space-2);
  color: var(--sv-ink-secondary);
  font-size: var(--sv-text-small);
  font-weight: 500;
}
.deliverables-list > .activity-item:last-child { border-bottom: 0; }
.context-fold-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: var(--workspace-control-height);
  padding: 0 var(--sv-space-6);
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--sv-ink-secondary);
  font: inherit;
  font-size: var(--workspace-ui-meta);
  text-align: left;
  cursor: pointer;
}
.context-fold-toggle:hover { color: var(--sv-ink); }
.context-fold-chevron { display: flex; transition: transform var(--sv-dur-fast) var(--sv-ease-out); }
.context-fold-chevron .icon { width: 14px; height: 14px; }
.context-fold-toggle[aria-expanded="true"] .context-fold-chevron { transform: rotate(90deg); }
.context-fold { padding-bottom: var(--sv-space-2); }
.todos-done .todos-done-list { padding-top: var(--sv-space-1); }
/* Workflow (web/app/14-catch-up-on-what-changed.js renderTodos): the checklist
 * reads as steps on one rail, not a to-do list. Scoped to .workflow-steps
 * because the task graph shares .todos-list and keeps its own look. The rail
 * runs between nodes, never under them, so it needs no surface color to hide. */
.todos-section h3 { display: flex; align-items: baseline; gap: var(--sv-space-2); }
.todos-progress { margin-left: auto; color: var(--sv-ink-tertiary); font-weight: 400; font-variant-numeric: tabular-nums; }
.todos-list.workflow-steps { gap: 0; }
.todos-list.workflow-steps > li { grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; padding-bottom: var(--sv-space-3); }
.todos-list.workflow-steps > li::after { position: absolute; top: 23px; bottom: 3px; left: 9px; width: 2px; border-radius: 1px; background: var(--sv-hairline); content: ""; }
.todos-list.workflow-steps > li:last-child { padding-bottom: 0; }
.todos-list.workflow-steps > li:last-child::after { content: none; }
.todos-done:has(.workflow-steps) .context-fold { padding-bottom: 0; }
.todos-done .todos-done-list.workflow-steps { padding-bottom: 0; }
.todos-done-list.workflow-steps.has-next > li:last-child { padding-bottom: var(--sv-space-3); }
.todos-done-list.workflow-steps.has-next > li:last-child::after { content: ""; }
.todos-list.workflow-steps > li.is-done::after { background: var(--sv-ink-tertiary); }
.todos-list.workflow-steps .todo-mark {
  width: 20px; height: 20px; margin-top: 0; box-sizing: border-box;
  color: var(--sv-ink-secondary); background: transparent;
  border: 1.5px solid var(--sv-hairline-heavy); border-radius: 50%;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.todos-list.workflow-steps > li.is-done .todo-mark { color: var(--sv-inverse-ink); background: var(--sv-inverse-surface); border-color: var(--sv-inverse-surface); }
.todos-list.workflow-steps > li.is-done .todo-text { text-decoration: none; }
.todos-list.workflow-steps > li.is-running .todo-mark {
  color: var(--sv-ink); background: color-mix(in srgb, var(--workspace-working) 16%, transparent);
  border-color: var(--workspace-working);
  animation: workflow-step-live var(--workspace-pulse) ease-in-out infinite;
}
.todos-list.workflow-steps > li.is-blocked .todo-mark { border-style: dashed; color: var(--sv-ink-tertiary); }
.todos-list.workflow-steps .todo-state { color: var(--workspace-working); font-size: var(--sv-text-caption); font-weight: 500; }
.todos-list.workflow-steps .todo-needs { color: var(--sv-ink-tertiary); }
@keyframes workflow-step-live {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--workspace-working) 35%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--workspace-working) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .todos-list.workflow-steps > li.is-running .todo-mark { animation: none; } }
.activity-show-all, .activity-earlier { border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.activity-earlier > .context-fold { padding-bottom: 0; }
.activity-earlier .activity-all-list { border-top: 0; }
.activity-trail-counts { display: block; color: var(--sv-ink-secondary); -webkit-line-clamp: unset; }
.activity-repeat {
  padding: 0 6px;
  border-radius: 8px;
  background: var(--sv-surface-sunken);
  color: var(--sv-ink-secondary);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px), (pointer: coarse) {
  .context-now { margin-inline: var(--sv-space-4); }
  .context-now-action, .context-fold-toggle { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .context-now-dot { animation: none; }
  .context-fold-chevron { transition: none; }
}
.workboard-context .agent-usage-group { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.workboard-context .agent-usage-label { padding-top: 0; }
/* Workboard search (web/app/15b-workboard-search.js): one field pinned under
 * the tabs while the board scrolls; rows that miss leave the layout and the
 * matched words carry one highlight. The field mirrors the rail's search. */
.workboard-search {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0 var(--sv-space-6) var(--sv-space-3);
  background: var(--sv-surface);
}
.workboard-search[hidden] { display: none; }
.workboard-search-field {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: var(--workspace-control-height);
  padding: 0 4px 0 8px;
  border-radius: var(--sv-radius);
  color: var(--sv-ink-secondary);
  background: var(--workspace-hover);
}
.workboard-search-field:focus-within {
  color: var(--sv-ink);
  background: var(--sv-surface-raised);
  box-shadow: inset 0 0 0 1px var(--sv-hairline-strong);
}
.workboard-search-field > .icon { width: 16px; height: 16px; flex: 0 0 16px; color: inherit; }
.workboard-search-field input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: var(--sv-ink);
  font: inherit;
  font-size: var(--workspace-ui-text);
  -webkit-appearance: none;
  appearance: none;
}
.workboard-search-field input::placeholder { color: var(--sv-ink-secondary); }
.workboard-search-field input::-webkit-search-cancel-button { display: none; }
.workboard-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sv-ink-tertiary);
  cursor: pointer;
}
.workboard-search-clear[hidden] { display: none; }
.workboard-search-clear:is(:hover, :focus-visible) { color: var(--sv-ink); background: var(--workspace-selected); }
.workboard-search-clear .icon { width: 14px; height: 14px; }
.workboard-search-count {
  margin: 0;
  padding: 0 2px;
  overflow: hidden;
  color: var(--sv-ink-secondary);
  font-size: var(--workspace-ui-meta);
  line-height: var(--workspace-ui-leading);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.workboard-search-count:not(:empty) { margin-top: 6px; }
#context-workboard-panel [data-search-miss] { display: none !important; }
::highlight(workboard-search) { background-color: var(--sv-emphasis-surface); color: var(--sv-emphasis-ink); }
@media (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  /* The overlaid touch panel is the raised surface (web/app.css). */
  .workboard-search { background: var(--sv-surface-raised); }
}
@media (max-width: 760px), (pointer: coarse) {
  .workboard-search { padding-inline: var(--sv-space-4); }
  .workboard-search-field { height: 44px; }
  /* Touch browsers zoom the page when a field under 16px takes focus. */
  .workboard-search-field input { min-height: 44px; font-size: 16px; }
  .workboard-search-clear { width: 44px; height: 44px; margin-right: -4px; }
}

.app-dialog { border-radius: 12px; box-shadow: var(--workspace-panel-shadow); transform: translateY(4px); transition-duration: var(--sv-dur-fast); }
.app-dialog::backdrop { transition-duration: var(--sv-dur-fast); }
@starting-style { .app-dialog[open] { transform: translateY(4px); } }
.dialog-card { border-radius: inherit; }
.row-menu, .profile-menu, .mention-picker,
.response-selection-actions { border-radius: 12px; box-shadow: var(--workspace-panel-shadow); }
.row-menu-item, .profile-menu button, .mention-option { border-radius: 7px; }
.row-menu { --sv-danger: #b42318; --sv-attention: var(--workspace-attention); color: var(--sv-ink); background: var(--sv-surface-raised); border-color: var(--sv-hairline); }
.theme-dark .row-menu { --sv-danger: var(--sv-danger-inverse); }
.row-menu-item { color: var(--sv-ink); }
.row-menu-separator { background: var(--sv-hairline); }
.row-menu-item:hover, .row-menu-item:focus-visible { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.message-popup, .toast { border-radius: 12px; }
.update-pill {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  max-width: calc(100vw - (var(--sv-space-4) * 2));
  padding: 6px 8px 6px 14px;
  color: var(--sv-ink-secondary);
  background: var(--sv-surface-raised);
  border-color: var(--sv-hairline);
  box-shadow: var(--workspace-panel-shadow);
  font-size: var(--sv-text-caption);
}
.update-pill-message { min-width: 0; }
.update-pill-reload, .update-pill-dismiss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--sv-ink);
}
.update-pill-reload { font-weight: 500; }
.update-pill-dismiss { width: 32px; padding: 0; color: var(--sv-ink-secondary); }
.update-pill-dismiss .icon { width: 16px; height: 16px; }
.update-pill-reload:hover, .update-pill-dismiss:hover { background: var(--sv-surface-sunken); }
@media (max-width: 760px) {
  .update-pill-reload, .update-pill-dismiss { min-height: 44px; min-width: 44px; }
}
.profile-menu { color: var(--sv-ink); background: var(--sv-surface-raised); border-color: var(--sv-hairline); }
.profile-menu button:hover, .profile-menu button:focus-visible { color: var(--sv-ink); background: var(--sv-surface-sunken); }

/* Only transient surfaces animate in. Repainting transcript history never
 * replays a wall of message animations or interferes with streaming scroll. */
@keyframes workspace-view-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes workspace-view-enter-forward {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes workspace-view-enter-back {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}
@keyframes workspace-message-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes workspace-surface-enter {
  from { opacity: 0; transform: translateY(4px) scale(.96); }
  to { opacity: 1; transform: none; }
}
[data-work-enter] {
  animation: workspace-view-enter var(--sv-dur-base) var(--sv-ease-out);
}
.thread-loading { display:grid; gap:var(--sv-space-3); width:min(100%, 38rem); margin:auto; opacity:.62; }
.thread-loading-bot { width:28px; height:28px; border-radius:50%; background:var(--sv-surface-sunken); animation:workspace-loading-pulse var(--workspace-pulse) var(--sv-ease-inout) infinite; }
.thread-loading-line { height:8px; border-radius:8px; background:linear-gradient(90deg,var(--sv-surface-sunken),var(--sv-surface-raised),var(--sv-surface-sunken)); background-size:200% 100%; animation:workspace-loading-shimmer var(--workspace-pulse) var(--sv-ease-inout) infinite; }
.thread-loading-line:nth-child(2) { width:72%; }
.thread-loading-line:nth-child(3) { width:48%; }
@keyframes workspace-loading-pulse { 50% { opacity:.42; transform:scale(.96); } }
@keyframes workspace-loading-shimmer { to { background-position:-200% 0; } }
@media (max-width:760px) {
  .phone-ui [data-work-enter="forward"] { animation-name:workspace-view-enter-forward; }
  .phone-ui [data-work-enter="back"] { animation-name:workspace-view-enter-back; }
}
.msg[data-work-arrival] {
  animation: workspace-message-enter var(--sv-dur-base) var(--sv-ease-out);
  animation-delay:calc(var(--sv-dur-instant) * var(--work-arrival-step, .35));
}
.msg[data-work-arrival="1"] { --work-arrival-step:.35; }
.msg[data-work-arrival="2"] { --work-arrival-step:.7; }
.msg[data-work-arrival="3"] { --work-arrival-step:1.05; }
.msg[data-work-arrival="4"] { --work-arrival-step:1.4; }
.msg[data-work-arrival="5"] { --work-arrival-step:1.75; }
.msg[data-work-arrival="6"] { --work-arrival-step:2.1; }
.row-menu:not([hidden]), .profile-menu:not([hidden]),
.mention-picker:not([hidden]), .response-selection-actions:not([hidden]),
.message-add-menu:not([hidden]), .message-actions-more:not([hidden]),
.message-navigation-preview:not([hidden]) {
  animation: workspace-surface-enter var(--sv-dur-fast) var(--sv-ease-out);
}

/* Stable grid tracks make a reversed toggle start from its current position.
 * Resize remains 1:1 with the pointer, with no transition chasing the drag. */
@media (min-width: 901px) and (hover: hover), (min-width: 1401px) {
  .app { transition: grid-template-columns var(--sv-dur-base) var(--sv-ease-out); }
  .sidebar { transition: transform var(--sv-dur-base) var(--sv-ease-out), visibility var(--sv-dur-base); }
  .app:is(.is-resizing-sidebar, .is-resizing-context) { transition: none; }
}
/* The docked panel's width is --context-panel-width (web/app/21-sidebar-width.js:
 * dragged on this device, or squeezed so the conversation keeps 420px), else the
 * --sv-activity-rail default. The overlay below 1401px keeps its own width. */
@media (min-width: 1401px) {
  .app { grid-template-columns: var(--sidebar-width, var(--sv-rail)) minmax(0, 1fr) 0; }
  .app.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .app.activity-open { grid-template-columns: var(--sidebar-width, var(--sv-rail)) minmax(0, 1fr) var(--context-panel-width, var(--sv-activity-rail)); }
  .app.sidebar-collapsed.activity-open { grid-template-columns: 0 minmax(0, 1fr) var(--context-panel-width, var(--sv-activity-rail)); }
  .sidebar { grid-area: 1 / 1; }
  .main { grid-area: 1 / 2; }
  .activity-panel {
    grid-area: 1 / 3; display: grid; width: var(--context-panel-width, var(--sv-activity-rail));
    visibility: hidden; opacity: 0;
    transition: opacity var(--sv-dur-fast) var(--sv-ease-out), visibility 0s linear var(--sv-dur-base);
  }
  .app.activity-open .activity-panel {
    visibility: visible; opacity: 1; transition-delay: 0s;
  }
}
/* ---- Context panel resize handle (rail columns slice) ----------------------
 * The sidebar handle's twin on the docked panel's inner edge. Only while the
 * panel docks and is open: never on the overlay, a phone, Home (the panel
 * closes there), behind Messaging, or when the browser holds the third track. */
.context-resize-handle { display: none; }
@media (min-width: 1401px) {
  .app.activity-open:not(.browser-docked) > .context-resize-handle {
    position: absolute;
    z-index: calc(var(--sv-z-nav) + 1);
    top: 0;
    bottom: 0;
    right: calc(var(--context-panel-width, var(--sv-activity-rail)) - 4px);
    display: block;
    width: 8px;
    cursor: col-resize;
    touch-action: none;
  }
  .app:has(> .messages-dialog[open]) > .context-resize-handle { display: none; }
}
.context-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);
}
.context-resize-handle:is(:hover, :focus-visible)::after,
.app.is-resizing-context .context-resize-handle::after { opacity: 1; }
@media (max-width: 1400px) {
  .activity-panel, .app.activity-open .activity-panel {
    transition-timing-function: var(--sv-ease-out); box-shadow: var(--workspace-panel-shadow);
  }
  .activity-scrim { background: rgb(0 0 0 / .18); }
}
@media (max-width: 900px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .sidebar, .app.sidebar-collapsed .sidebar { border-radius: 0 16px 16px 0; transition-timing-function: var(--sv-ease-out); }
  .sidebar-head, .sidebar-foot { background: var(--workspace-sidebar); }
}
@media (max-width: 640px) {
  .catch-up-nudge { display: grid; grid-template-columns: 18px minmax(0, 1fr) 44px; gap: 0 var(--sv-space-2); }
  .catch-up-nudge-copy { white-space: normal; overflow-wrap: anywhere; }
  .catch-up-nudge-dismiss { grid-column: 3; grid-row: 1; width: 44px; min-height: 44px; }
  .catch-up-nudge-action { grid-column: 2; grid-row: 2; justify-self: start; min-height: 44px; margin-bottom: var(--sv-space-1); }
  .messages { padding-top: 20px; padding-bottom: 20px; }
  .shareos-home-hero { margin-top: 20px; margin-bottom: 24px; }
  .shareos-home-zone, .shareos-home-chats { padding: 0; }
  .shareos-home .hud-row { padding-inline: 4px; }
}
@media (max-width: 760px) {
  #sidebar .sidebar-primary-nav > .sidebar-nav-btn { min-height: 44px; }
  #sidebar :is(.new-chat-btn, .sidebar-search) { min-height: 44px; }
  .sidebar .project-row { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :where(.app button, .app [role="button"], .pip-context-panel button):active { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --sv-hairline: var(--sv-ink-secondary); }
  .project-home-composer:focus-within { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
}

/* Messaging shares the application canvas and rail. It is a nonmodal native
 * dialog so existing notifications can open it and nested pickers still work. */
.app > .messages-dialog {
  position: absolute; inset: 0 0 0 var(--sidebar-width, var(--sv-rail));
  width: auto; max-width: none; height: 100%; max-height: none; margin: 0;
  padding: 0; border: 0; border-radius: 0; box-shadow: none;
  color: var(--sv-ink); background: var(--sv-surface); z-index: 90;
  transform: none; transition: none;
}
.app.sidebar-collapsed > .messages-dialog { left: 0; }
.app:has(> .messages-dialog[open]) > :is(.main, .activity-panel) { visibility: hidden; }
.app:has(> .messages-dialog[open]) #messages-btn { background: var(--workspace-selected); color: var(--sv-ink); }
.app:has(> .messages-dialog[open]) #hud-btn.active { background: transparent; }
.app > .messages-dialog > .messages-dialog-card {
  width: 100%; height: 100%; max-height: none; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: var(--sv-surface); overflow: hidden;
}
.messages-dialog-head { position: sticky; top: -8px; z-index: 4; min-height: 56px; margin: -8px -8px 12px; padding: 8px 12px; border: 0; background: var(--sv-surface); }
.messages-dialog-head h2 { font-size: 18px; font-weight: 500; }
.messages-dialog-head p { margin-top: 6px; }
.messages-head-actions { gap: 0; }
#message-new-btn span { display: none; }
.messages-dialog :is(.message-notify-btn, .icon-btn) { min-width: 40px; min-height: 40px; border-radius: 8px; }
.messages-dialog .message-notify-btn { background: transparent; border-color: transparent; font-weight: 400; }
.messages-dialog .icon { width: 18px; height: 18px; }
.messages-layout { position: relative; grid-template-columns: 280px minmax(0, 1fr) 0; overflow: clip; transition: grid-template-columns var(--sv-dur-fast) var(--sv-ease-inout); }
.messages-layout.details-open { grid-template-columns: 280px minmax(0, 1fr) 260px; }
.message-contacts { background: var(--sv-surface); padding: 8px; scrollbar-width: thin; }
.message-filters { display: flex; gap: 2px; padding: 0 2px 16px; }
.message-filters button { flex: 1; min-height: 36px; padding: 4px 7px; color: var(--sv-ink-secondary); border: 0; border-radius: 8px; background: transparent; }
.message-filters button[aria-pressed="true"] { color: var(--sv-ink); background: transparent; font-weight: 500; }
.message-filters button { position: relative; }
.message-filters button[aria-pressed="true"]::after { content: ""; position: absolute; bottom: 0; left: calc(50% - 8px); width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.message-filters button:hover { background: var(--workspace-hover); }
.message-search-wrap { position: relative; top: auto; padding: 0 4px 8px; border: 0; background: var(--sv-surface); }
.message-search-wrap .chat-search-field { height: 40px; margin: 0; border-radius: 10px; background: var(--sv-surface-sunken); border-color: transparent; }
.message-search-wrap .chat-search-field input { min-width: 0; }
.message-rail-group + .message-rail-group { border: 0; margin-top: 12px; }
.message-rail-title { padding: 8px 12px; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }
.message-contact-list { gap: 3px; }
.message-contact { gap: 10px; padding: 8px 10px; min-height: 48px; border: 0; border-radius: 10px; position: relative; }
.message-contact:hover { background: var(--workspace-hover); }
.message-contact.selected { background: var(--workspace-selected); box-shadow: none; }
.message-contact.selected::before { content: none; }
.message-contact-top strong { font-weight: 400; }
.message-contact-avatar { width: 32px; height: 32px; flex-basis: 32px; color: var(--sv-ink); background: var(--sv-surface-sunken); border: 0; border-radius: 10px; }
.message-contact-avatar.room { background: transparent; border: 0; font-size: 24px; }
.message-contact-unread { background: var(--sv-ink); color: var(--sv-surface); border-radius: 6px; }
.message-conversation { background: var(--sv-surface); }
.message-conversation-top { min-height: 64px; align-items: center; padding: 8px 24px; gap: 8px; }
.message-conversation-head { padding: 0; gap: 12px; }
.message-conversation-copy strong { font-size: 18px; font-weight: 500; }
.message-conversation-avatar { display: none; }
.message-lock { border: 0; padding: 8px; border-radius: 8px; }
.message-lock span { display: none; }
.message-lock .icon { width: 18px; height: 18px; }
.message-security { max-height: 40%; overflow: auto; background: var(--sv-surface-raised); }
.message-details-toggle[aria-expanded="true"] { background: var(--workspace-selected); }
.message-thread { padding: 20px max(24px, calc((100% - 800px) / 2)); gap: 12px; scroll-behavior: auto; }
#message-thread .direct-message {
  width: 100%; max-width: none; align-self: stretch; position: relative;
  padding: 8px 12px 8px 48px; color: var(--sv-ink); background: transparent;
  border: 1px solid transparent; border-radius: 10px;
}
#message-thread .direct-message:has(:focus-visible) { background: var(--sv-surface-raised); }
@media (hover: hover) and (pointer: fine) {
  #message-thread .direct-message:hover { background: var(--sv-surface-raised); }
}
#message-thread .group-message-author { color: var(--sv-ink); gap: 10px; margin-bottom: 4px; flex-wrap: wrap; font-weight: 500; }
#message-thread .room-person-avatar { position: absolute; left: 0; top: 8px; width: 32px; height: 32px; border: 0; border-radius: 10px; color: var(--sv-ink-secondary); background: var(--workspace-bubble); border-color: var(--sv-hairline); font-weight: 400; }
#message-thread .direct-message :is(.message-meta, .share-card-meta) { color: var(--sv-ink-secondary); }
#message-thread .direct-message > p { line-height: 1.55; }
#message-thread .direct-message :is(.share-card, .message-request-card, .message-work-card) { color: var(--sv-ink); background: var(--sv-surface-raised); border-color: var(--sv-hairline); border-radius: 10px; }
#message-thread .message-actions { margin-top: 6px; gap: 8px; }
#message-thread .message-action { border: 0; border-radius: 6px; color: var(--sv-ink-secondary); background: transparent; padding: 4px 8px; }
#message-thread .message-action:hover { color: var(--sv-ink); background: var(--workspace-selected); }
#message-thread .message-actions-more { overflow-y: auto; scroll-margin: 8px; border: 1px solid var(--sv-hairline); border-radius: 8px; padding: 6px; margin-top: 4px; color: var(--sv-ink); background: var(--sv-surface); }
.message-thread :is(.message-quote, .message-parent-quote) { border-left: 2px solid var(--sv-hairline); border-radius: 0; padding: 4px 10px; margin-bottom: 8px; color: var(--sv-ink-secondary); white-space: normal; background: transparent; }
#message-thread .message-day { margin: 4px 0 12px; padding: 8px 0; }
#message-thread .message-day-label { color: var(--sv-ink-secondary); }
#message-thread .message-day::before { content: ""; height: 1px; background: var(--sv-hairline); flex: 1; }
#message-thread .message-reaction { border-radius: 8px; min-height: 32px; }
#message-thread .message-receipts { text-align: left; padding-left: 54px; }
.message-composer { position: relative; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: end; gap: 6px; width: calc(100% - 48px); max-width: 800px; margin: 12px auto 20px; padding: 8px; border: 1px solid var(--sv-hairline); border-radius: 12px; background: var(--sv-surface); }
.message-composer:focus-within { border-color: var(--sv-hairline-strong); }
.message-composer textarea { grid-area: 1 / 2; min-height: 40px; max-height: 112px; padding: 9px 4px; border: 0; background: transparent; }
.message-composer:focus-within textarea { border: 0; }
.message-composer-bar { display: contents; }
.message-composer-tools { grid-area: 1 / 1; }
.message-composer .dialog-button { grid-area: 1 / 3; min-width: 40px; width: 40px; padding: 0; height: 40px; border-radius: 10px; background: var(--sv-ink); color: var(--sv-surface); border: 0; }
.message-composer .dialog-button:disabled { opacity: .45; }
.message-share-btn { border: 0; border-radius: 8px; padding: 8px; min-height: 40px; }
.message-share-btn .icon { width: 18px; height: 18px; }
.message-share-btn:hover { background: var(--workspace-hover); }
.message-error:empty { display: none; }
.message-error { padding: 0 24px 12px; }
.message-typing, .message-replying { padding-inline: 24px; }
.message-files, .message-pending { padding-inline: 24px; }
.message-details { position: absolute; z-index: 8; right: 0; top: 0; bottom: 0; width: 260px; min-height: 0; min-width: 0; padding: 0 18px 24px; overflow: auto; border-left: 1px solid var(--sv-hairline); background: var(--sv-surface-raised); }
.message-details-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 76px; }
.message-details h3 { font-size: 18px; font-weight: 500; margin: 0 0 12px; }
.message-details-head h3 { margin: 0; }
.message-details p { color: var(--sv-ink-secondary); line-height: 1.5; overflow-wrap: anywhere; }
.message-details .room-context { display: flex; flex-direction: column; flex-wrap: nowrap; max-height: none; overflow: visible; align-items: stretch; gap: 12px; padding: 16px 0 24px; font-size: 16px; }
.message-details .room-context > span { flex: none; line-height: 1.5; }
.message-details .room-context h3 { margin: 0; }
.message-details .room-participants { flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.message-details .room-person-avatar { width: 36px; height: 36px; margin: 0; color: var(--sv-ink); background: var(--workspace-bubble); border-color: var(--sv-hairline); border-radius: 10px; }
.message-details :is(select, .message-action) { width: 100%; min-height: 40px; padding: 8px; color: var(--sv-ink); background: var(--sv-surface); border: 1px solid var(--sv-hairline); border-radius: 8px; text-align: left; white-space: normal; }
.message-shared-detail { margin-top: 24px; }
.message-details .share-card { border-radius: 8px; padding: 12px; background: var(--sv-surface); }
.message-welcome { width: min(100%, 420px); margin: auto; padding: 32px 12px; }
.message-welcome > .icon { width: 36px; height: 36px; color: var(--sv-ink-secondary); }
.message-welcome h3 { font-size: 28px; font-weight: 500; margin: 20px 0 12px; line-height: 1.2; }
.message-welcome p { margin: 0; color: var(--sv-ink-secondary); line-height: 1.6; }
.message-search-results { border-radius: 10px; box-shadow: var(--workspace-panel-shadow); }

.sidebar-artifact-results .chat-search-result {
  width: 100%; min-width: 0; border: 0; background: transparent; color: inherit;
  display: grid; gap: 2px; padding: 8px 10px; text-align: left; border-radius: var(--sv-radius-sm);
}
.sidebar-artifact-results .chat-search-result:is(:hover, :focus-visible, .active) { background: var(--workspace-hover); }
.sidebar-artifact-results .chat-search-result-title { display: flex; min-width: 0; gap: 8px; align-items: baseline; }
.sidebar-artifact-results .chat-search-result-title > span:first-child,
.sidebar-artifact-results .chat-search-result-snippet { min-width: 0; overflow-wrap: anywhere; }
.sidebar-artifact-results .chat-search-result-project {
  flex: 0 1 45%; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--sv-ink-secondary);
}
.sidebar-artifact-results .chat-search-result-snippet { color: var(--sv-ink-secondary); }
/* Jev's picks (web/app/22-jev-search.js): the same rows on a quiet tint, so
 * matches by meaning read apart from Best matches without a new colour. */
.sidebar-jev-results { padding-bottom: 4px; background: var(--workspace-bubble); border-radius: var(--sv-radius-sm); }
#sidebar #sidebar-jev-results > .sidebar-section-head { padding-inline: 10px; }
.message-search-heading { margin: 12px; color: var(--sv-ink-secondary); }
.message-search-result { min-height: 56px; white-space: normal; flex-direction: column; gap: 4px; }
.message-load-status { padding: 12px 24px; display: flex; align-items: center; gap: 12px; color: var(--sv-ink-secondary); border-bottom: 1px solid var(--sv-hairline); }
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  #message-thread .message-actions { position: absolute; z-index: 2; right: 12px; top: -12px; margin: 0; gap: 2px; padding: 2px; border: 1px solid var(--sv-hairline); border-radius: 8px; background: var(--sv-surface-raised); }
}
@media (max-width: 1200px) {
  .messages-layout, .messages-layout.details-open { grid-template-columns: 280px minmax(0, 1fr); }
  .message-details { width: min(340px, 100%); box-shadow: var(--workspace-panel-shadow); }
}
@media (max-width: 900px) {
  .app > .messages-dialog, .app.sidebar-collapsed > .messages-dialog { inset: 0; width: 100%; }
  .messages-layout, .messages-layout.details-open { grid-template-columns: minmax(0, 1fr); }
  .message-contacts { padding: 12px; }
  .message-search-wrap .chat-search-field { height: 44px; }
  .message-conversation-top { padding: 8px 12px; min-height: 64px; }
  .message-back-btn { border: 0; height: 44px; width: 44px; }
  .message-filters button { min-height: 44px; }
  .messages-dialog :is(.icon-btn, .message-notify-btn, .message-action, .message-reaction, .message-share-btn, .message-file-remove, .message-pending-remove) { min-width: 44px; min-height: 44px; }
  .messages-dialog-head { min-height: 64px; margin: -12px -12px 8px; padding: 8px 16px; }
  .messages-dialog-head p { display: none; }
  .messages-dialog-head h2 { font-size: 20px; }
  .message-notify-btn span { display: none; }
  .messages-dialog .message-notify-btn { padding: 8px; border: 0; }
  .messages-head-actions { gap: 4px; }
  .message-thread { padding: 8px 12px; }
  #message-thread .message-actions { opacity: 1; transform: none; transition: none; }
  #message-thread .direct-message { padding-left: 42px; padding-right: 0; }
  #message-thread .room-person-avatar { left: 2px; }
  .message-composer { grid-template-columns: 44px minmax(0, 1fr) 44px; width: calc(100% - 24px); margin: 4px auto max(8px, env(safe-area-inset-bottom)); padding: 4px; gap: 4px; }
  .message-composer textarea { min-height: 44px; padding: 11px 2px; }
  .message-composer .dialog-button { min-width: 44px; height: 44px; }
  .message-composer .dialog-button span { display: none; }
  .message-composer-tools { gap: 0; }
  .messages-dialog[data-pane="conversation"] .messages-dialog-head { display: none; }
  .message-conversation-top { padding-top: max(8px, env(safe-area-inset-top)); }
  .message-conversation-avatar { display: none; }
  .message-details { width: 100%; box-shadow: none; border-left: 0; }
  .message-load-status { flex-wrap: wrap; padding: 8px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .messages-dialog, .message-details, .messages-layout { animation: none; transition: none; scroll-behavior: auto; }
}

#message-thread .message-day-label { text-transform: none; letter-spacing: 0; font-weight: 500; }

.messages-dialog .message-lock .icon { opacity: 1; }
@media (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .app > .messages-dialog { left: 0; }
}
.message-edit-dialog { width: min(560px, calc(100% - 24px)); }
#message-edit-fields { display: grid; gap: 18px; }
#message-edit-fields :is(input, select, textarea) { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--sv-hairline); border-radius: 8px; background: var(--sv-surface); color: var(--sv-ink); font: inherit; }
#message-edit-fields textarea { min-height: 120px; resize: vertical; }
#message-edit-fields select { min-height: 44px; }
#message-edit-error { padding: 0; }
/* Conversation rows show one clock; presence remains in On now and tooltips. */
.messages-dialog .person-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; }
.messages-dialog .person-row .message-contact-avatar { grid-column: 1; grid-row: 1 / span 2; }
.messages-dialog .person-row .message-contact-body, #message-contact-list .message-contact-line { display: contents; }
.messages-dialog .person-row .message-contact-top { grid-column: 2; grid-row: 1; min-width: 0; }
.messages-dialog .person-row .message-contact-preview { grid-column: 2 / -1; grid-row: 2; min-width: 0; }
#message-contact-list .message-contact-when { grid-column: 3; grid-row: 1; }
#message-contact-list .person-row-when { display: none; }
#message-contact-list .person-row:not(.has-message) { row-gap: 0; align-items: center; }
#message-contact-list .person-row:not(.has-message) .message-contact-preview { display: none; }
#message-contact-list .person-row:not(.has-message) .message-contact-avatar { grid-row: 1; }
.message-room:not(.has-message) .message-contact-preview { display: none; }
#people-online-list .person-row-when { grid-column: 3; grid-row: 1; }

/* Quiet chrome leaves the message itself as the primary content. */
.message-composer #message-send-label { display: none; }
#message-thread .message-day-age { display: none; }
.message-online-group > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; min-height: 44px; }
.message-online-group > summary::-webkit-details-marker { display: none; }
.message-online-group > summary::before { content: "›"; color: var(--sv-ink-secondary); transition: transform var(--sv-dur-base) var(--sv-ease-inout); }
.message-online-group[open] > summary::before { transform: rotate(90deg); }
.messages-dialog :is(.message-contact, .icon-btn, .message-filters button) { transition: background-color var(--sv-dur-instant) var(--sv-ease-out); }
.messages-dialog :is(.message-contact, .icon-btn, .message-filters button):active { background-color: var(--workspace-selected); }
.message-add-menu { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 8px); width: min(260px, 100%); max-height: min(320px, 50dvh); overflow-y: auto; padding: 6px; background: var(--sv-surface-raised); color: var(--sv-ink); border: 1px solid var(--sv-hairline); border-radius: 12px; box-shadow: var(--workspace-panel-shadow); }
.message-add-menu .message-share-actions { display: flex; flex-direction: column; gap: 0; }
.message-add-menu .message-share-btn { display: flex; width: 100%; min-height: 45px; gap: 12px; justify-content: flex-start; padding: 10px 12px; text-align: left; }
.message-add-menu .message-share-btn span { display: inline; }
.message-add-menu .message-share-btn:hover { background: var(--workspace-hover); }
.message-add-menu .message-share-btn .icon { flex: none; }
.message-details { overflow-x: hidden; }
@media (max-width: 900px) {
  .messages-dialog-head { padding-top: max(8px, env(safe-area-inset-top)); }
  .message-conversation-copy strong { font-size: 18px; }
}

/* Shared work is an attachment to the message, not a second dashboard. */
#message-thread .share-card { width: 100%; max-width: 440px; min-height: 60px; padding: 10px 12px; margin-top: 10px; background: transparent; }
#message-thread .share-card-title { font-weight: 500; }
#message-thread .share-card-meta { margin-top: 2px; }
#message-thread .direct-message .message-request-card { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; width: fit-content; max-width: 100%; padding: 4px 0; border: 0; background: transparent; }
#message-thread .message-request-card strong { font-weight: 500; }
#message-thread .message-request-assignee { color: var(--sv-ink-secondary); }
#message-thread .message-request-card .message-action { min-height: 36px; padding-inline: 8px; background: var(--sv-surface-sunken); }
#message-thread .message-more-toggle { display: inline-flex; justify-content: center; align-items: center; min-width: 36px; min-height: 36px; }
#message-thread .message-phone-reply { display: none; }
@media (min-width: 901px) {
  #message-thread .message-actions-more { position: absolute; z-index: 3; top: 100%; right: 0; width: 260px; box-shadow: var(--workspace-panel-shadow); }
}
@media (max-width: 900px) {
  #message-thread .message-actions { display: contents; }
  #message-thread .message-actions > .message-reply-action { display: none; }
  #message-thread .message-more-toggle { position: absolute; top: 0; right: 0; width: 44px; height: 44px; }
  #message-thread .group-message-author { min-height: 32px; padding-right: 36px; gap: 4px 8px; }
  #message-thread .message-phone-reply { display: inline-flex; }
  #message-thread .message-request-card .message-action { min-height: 44px; }
}

/* Linked Fleet work uses the existing task panel and neutral workspace tokens. */
.fleet-work-card { display: grid; gap: 12px; margin-block: 16px; padding: 20px; }
.fleet-work-card > p { margin: 0; }
.fleet-work-card .hud-row-detail { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.fleet-work-card .task-panel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fleet-work-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid var(--sv-hairline); border-radius: 12px; padding: 24px; background: var(--sv-surface); color: var(--sv-ink); }
.fleet-work-dialog::backdrop { background: rgb(0 0 0 / .4); }
.fleet-work-dialog form, .fleet-human-assignment { display: grid; gap: 12px; }
.fleet-work-dialog label, .fleet-human-assignment label { display: grid; gap: 6px; }
.fleet-work-dialog textarea, .fleet-human-assignment textarea, .fleet-human-assignment select { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid var(--sv-hairline); border-radius: 8px; background: var(--sv-surface); color: var(--sv-ink); font: inherit; }
.fleet-work-dialog button, .fleet-human-assignment button, .fleet-work-card a, .fleet-work-card button { min-height: 44px; }
#fleet-work-list summary { padding-block: 12px; cursor: pointer; }

/* Phone workspace: thumb-reachable destinations and one focused work surface.
 * The same DOM and handlers retain desktop drafts, permissions and history. */
.phone-navigation, #pip-context-minimize, #pip-context-work { display: none; }
@media (max-width: 760px) {
  .phone-ui { --phone-nav-height: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .phone-ui.phone-keyboard { --phone-nav-height: 0px; }
  .phone-ui .app > .main { padding-bottom: var(--phone-nav-height); }
  .phone-ui .app > .main { --conversation-gutter: 16px; }
  .phone-ui .phone-navigation:not([hidden]) {
    position: absolute; z-index: calc(var(--sv-z-overlay) + 5); inset: auto 0 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: var(--phone-nav-height); padding: 4px 8px max(4px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--sv-hairline); background: var(--sv-surface);
  }
  .phone-ui.phone-keyboard .phone-navigation { display: none; }
  .phone-navigation[inert], [inert] .phone-navigation { visibility: hidden; }
  .phone-navigation button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 56px; min-width: 0; border: 0; border-radius: 12px;
    padding: 3px 0; background: transparent; color: var(--sv-ink-secondary);
    font: inherit; line-height: 1.35; cursor: pointer;
  }
  .phone-navigation button[aria-current] { background: var(--sv-surface-sunken); color: var(--sv-ink); }
  .phone-navigation button:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: -2px; }
  .phone-navigation .icon { width: 20px; height: 20px; }
  .phone-navigation i { position: absolute; right: 24%; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--workspace-attention-ink); }
  .phone-navigation i[hidden] { display: none; }
  .phone-ui .app > .messages-dialog { bottom: var(--phone-nav-height); height: calc(100% - var(--phone-nav-height)); max-height: calc(100% - var(--phone-nav-height)); }
  .phone-ui .activity-panel {
    height: calc(var(--app-viewport-height, 100dvh) - var(--phone-nav-height));
    max-height: calc(var(--app-viewport-height, 100dvh) - var(--phone-nav-height));
  }
  .phone-ui .thread-context-actions > .share-thread-button:not(.fork-thread-button),
  .phone-ui .app:not(.fleet-mode) .thread-head > .thread-actions > #activity-toggle-btn { display: none; }
  .phone-ui .messages { padding-inline: 16px; }
  /* A phone reads by flicking, not by aiming at a column of 2px dashes. The
   * rail's 44px reserve pushed the transcript and the composer that far off
   * centre (16px of gutter on the left, 60px on the right) and the composer
   * paid for it by giving up its own padding, which is why the project chip sat
   * on the border. Keep only jump-to-latest, floating over the transcript the
   * way every phone chat does, and give the 44px back to the reading column. */
  .phone-ui .app > .main { --message-nav-reserve: 0px; }
  .phone-ui .message-navigation-dots, .phone-ui .message-navigation-preview { display: none; }
  .phone-ui .message-navigation {
    top: auto; right: 16px; bottom: 12px; transform: none;
    width: 44px; max-height: none;
  }
  .phone-ui .message-navigation-latest {
    margin-top: 0; border: 1px solid var(--sv-hairline); border-radius: 50%;
    background: var(--sv-surface-raised); box-shadow: var(--workspace-panel-shadow);
  }
  .phone-ui .message-navigation-latest[aria-disabled="true"] { display: none; }
  /* The plan strip above the composer is borderless here, so its own 12px
   * indent put it on no edge at all. */
  .phone-ui .goal-progress { padding-inline: 0; }
  /* The entry surface meets the same edge as a chat: the canvas already holds
   * the gutter, so the hero's and the list's own `100% - gutter * 2` indented
   * them to 32px — the heading, the filters and the work below them each
   * landed on a different left edge. */
  .phone-ui :is(.shareos-home-hero, .shareos-home-workspace, .project-home) { width: 100%; margin-inline: 0; }
  /* Four filters wrapped to two rows and pushed the work below the fold. */
  .phone-ui .activity-view-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .phone-ui .activity-view-tabs button { white-space: nowrap; height: 44px; min-height: 44px; }
  .phone-ui .activity-view-tabs::-webkit-scrollbar { display: none; }
  .phone-ui .msg { margin-bottom: 24px; }
  .phone-ui .msg .msg-actions { margin-top: 4px; }
  /* The dock owns New chat and Search on a phone too; the destinations below it
   * keep their own compact grid. */
  .phone-ui #sidebar .sidebar-command-dock { padding: 6px 12px 8px; }
  .phone-ui #sidebar .sidebar-primary-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 4px; padding: 0 12px 8px; }
  .phone-ui #sidebar .sidebar-primary-nav > .sidebar-nav-btn { grid-column: auto; justify-content: flex-start; padding-inline: 8px; }
  .phone-ui #sidebar { height: calc(var(--app-viewport-height, 100dvh) - var(--phone-nav-height)); max-height: calc(var(--app-viewport-height, 100dvh) - var(--phone-nav-height)); padding-bottom: 0; border-radius: 0; }
  .phone-ui #sidebar .sidebar-foot { min-height: 56px; }
  .phone-ui #sidebar .profile-menu {
    box-sizing: border-box;
    max-height: calc(var(--app-viewport-height, 100dvh) - var(--phone-nav-height) - var(--sv-space-16) - env(safe-area-inset-bottom, 0px) - var(--sv-space-2));
  }
  /* Keep search and actual chats visible even with a keyboard: the dock is
   * already pinned under the head, so the destinations stand down instead. */
  .phone-ui.phone-keyboard #sidebar .sidebar-primary { display: none; }
  .phone-ui.phone-keyboard #sidebar .sidebar-command-dock .sidebar-create { display: none; }
  .phone-ui.phone-keyboard #sidebar .sidebar-command-dock .sidebar-search { grid-column: 1 / -1; }
  .phone-ui #pip-companion { visibility: hidden; pointer-events: none; }
  .phone-ui .pip-context-panel {
    z-index: calc(var(--sv-z-overlay) + 10); right: 8px; left: 8px; width: auto;
    bottom: calc(8px + var(--phone-nav-height) + 100dvh - var(--app-viewport-height, 100dvh) - var(--app-viewport-top, 0px));
    max-height: calc(var(--app-viewport-height, 100dvh) - var(--phone-nav-height) - 16px);
    border-radius: 12px; box-shadow: var(--workspace-panel-shadow);
  }
  .phone-ui #pip-companion:has(#pip-work-panel:not([hidden])) { z-index: calc(var(--sv-z-overlay) + 15); }
  .phone-ui #pip-context-work { display: inline-flex; }
  .phone-ui #pip-context-minimize { display: inline-flex; align-items: center; justify-content: center; }
  .phone-ui #pip-context-float, .phone-ui #pip-context-share, .phone-ui .pip-desktop-browser,
  .phone-ui #pip-context-browser-install { display: none; }
  .phone-ui .pip-context-panel:has(#pip-context-stop[hidden]) #pip-context-source { display: none; }
  .phone-ui .pip-phone-minimized { overflow: hidden; padding-bottom: 0; }
  .phone-ui .pip-phone-minimized > :not(.pip-context-head) { display: none; }
  .phone-ui .pip-phone-minimized .pip-context-head { margin-bottom: 0; border-bottom: 0; }
  .phone-pip-intro { width: calc(100% - 24px); }
  .phone-pip-intro .dialog-card { padding: 24px; border-radius: 12px; background: var(--sv-surface); color: var(--sv-ink); }
  .phone-pip-intro h2 { font-size: 24px; line-height: 1.2; margin: 0 0 16px; }
  .phone-pip-intro p { margin: 0 0 16px; }
  .phone-intro-actions { display: flex; gap: 8px; }
  .phone-intro-actions button { flex: 1; min-height: 44px; border: 1px solid var(--sv-hairline); border-radius: 12px; font: inherit; background: var(--sv-surface); color: var(--sv-ink); }
  #phone-pip-enable { background: var(--sv-ink); color: var(--sv-surface); }
}
@media (max-width: 640px) and (max-height: 640px) {
  .phone-ui #sidebar .sidebar-primary-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sidebar .sidebar-primary-nav > .hud-nav-btn { grid-column: 1 / -1; }
  #sidebar .sidebar-primary-nav > .sidebar-nav-btn:not(.hud-nav-btn) {
    justify-content: center;
    padding-inline: 0;
  }
}
@media (max-width: 760px) {
  #phone-pip-art, #phone-pip-art .pip-sprite { display: block; width: 22px; height: 22px; }
  .phone-ui #pip-work-panel {
    position: fixed; z-index: 125; visibility: visible; pointer-events: auto;
    top: auto; left: 8px; right: 8px; width: auto;
    bottom: calc(8px + var(--phone-nav-height) + 100dvh - var(--app-viewport-height, 100dvh) - var(--app-viewport-top, 0px));
    max-height: calc(var(--app-viewport-height, 100dvh) - var(--phone-nav-height) - 16px);
    border-radius: 12px;
  }
}


/* Typed artifact readers use the workspace's paired surfaces in both themes. */
.artifact-reader {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(var(--app-viewport-height, 100dvh) - 48px);
  padding: 0;
  border: 1px solid var(--sv-hairline);
  border-radius: 12px;
  background: var(--sv-surface);
  color: var(--sv-ink);
  box-shadow: var(--workspace-panel-shadow);
  font: 400 max(16px, var(--sv-text-body))/1.6 var(--sv-font-sans);
  overflow: hidden;
}
.artifact-reader[open] { display: flex; flex-direction: column; }
.artifact-reader::backdrop { background: color-mix(in srgb, var(--sv-ink) 45%, transparent); }
.artifact-reader * { box-sizing: border-box; }
.artifact-reader-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--sv-hairline); }
.artifact-reader-head > div:first-child { min-width: 0; }
.artifact-reader-head h2 { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.artifact-reader-status { margin: 0 0 4px; color: var(--sv-ink-secondary); }
.artifact-reader-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-shrink: 0; }
.artifact-reader-actions :is(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  border: 1px solid var(--sv-hairline);
  border-radius: 8px;
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.artifact-reader-actions :is(button, a):hover { background: var(--workspace-hover); }
.artifact-reader-actions [aria-pressed="true"] { background: var(--workspace-selected); border-color: var(--sv-hairline-strong); }
.artifact-reader-actions :disabled { opacity: .55; cursor: wait; }
.artifact-reader :is(button, a):focus-visible,
.artifact-reader-actions :is(button, a):focus-visible,
.artifact-card :is(button, a):focus-visible,
.pi-artifact-link:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: -2px; }
.artifact-reader-note { margin: 0; padding: 8px 24px; color: var(--sv-ink-secondary); }
.artifact-reader-loading { margin: 0; padding: 24px; }
.artifact-reader-note:empty { display: none; }
.artifact-reader-body { min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--sv-surface-sunken); }
.artifact-reader-document { width: min(100%, 80ch); margin: 24px auto; padding: 32px; border: 1px solid var(--sv-hairline); border-radius: 8px; background: var(--sv-surface); overflow-wrap: anywhere; }
.artifact-reader-document .md { --sv-md-measure: 100%; font-size: inherit; line-height: 1.7; }
.artifact-reader-document .md :is(pre, code, table, .codebar) { font-size: max(16px, 1em); }
.artifact-reader-envelope { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--sv-hairline); }
.artifact-reader-envelope dt { color: var(--sv-ink-secondary); }
.artifact-reader-envelope dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.artifact-email { box-sizing: border-box; min-width: 0; }
.artifact-email > .artifact-reader-status { margin-bottom: 16px; }
.artifact-browser-preview { min-width: 0; }
.artifact-browser-preview * { box-sizing: border-box; }
.artifact-browser-chrome { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--sv-hairline); background: var(--sv-surface-raised); }
.artifact-browser-address { min-width: 0; overflow-wrap: anywhere; color: var(--sv-ink-secondary); }
.artifact-browser-notice { margin: 0; padding: 12px 24px; color: var(--sv-ink-secondary); }
.artifact-browser-viewport { padding: 0 24px 24px; }
.artifact-browser-frame { display: block; width: 100%; height: 60dvh; min-height: 240px; margin: 0 auto; border: 1px solid var(--sv-hairline); border-radius: 8px; background: var(--sv-surface); }
.artifact-browser-viewport[data-width="mobile"] .artifact-browser-frame { width: min(390px, 100%); }
/* A page preview is a page (#105): the reader takes the screen and the frame
 * fills it, instead of a 60dvh window scrolling inside a 1120px dialog that
 * itself scrolled, which hid most of the asset. */
.artifact-reader:is([data-kind="html"], [data-kind="browser"]) {
  width: calc(100vw - 32px);
  height: calc(var(--app-viewport-height, 100dvh) - 32px);
  max-height: none;
}
.artifact-reader:is([data-kind="html"], [data-kind="browser"]) .artifact-reader-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.artifact-reader:is([data-kind="html"], [data-kind="browser"]) .artifact-browser-preview { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.artifact-reader:is([data-kind="html"], [data-kind="browser"]) .artifact-browser-viewport { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.artifact-reader:is([data-kind="html"], [data-kind="browser"]) .artifact-browser-frame { flex: 1; height: auto; }
button.artifact-preview, button.artifact-card-title, button.pi-artifact-link { padding: 0; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.artifact-preview { width: 100%; border-bottom: 1px solid var(--sv-hairline); }
button.artifact-card-title, button.pi-artifact-link { background: transparent; }
button.artifact-card-title { font-weight: 500; }
.artifact-preview.artifact-preview-inline { display: flex; flex-direction: column; gap: 8px; padding: 20px; text-decoration: none; }
.artifact-excerpt-label, .artifact-excerpt-to { color: var(--sv-ink-secondary); }
.artifact-excerpt-to, .artifact-excerpt-subject { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artifact-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
.artifact-card :is(.artifact-card-title, .artifact-card-meta, .artifact-card-kind, .artifact-card-source, .artifact-card-sources-more, .artifact-preview-fallback, .artifact-preview-inline),
.pi-artifact :is(.pi-artifact-title, .pi-artifact-meta, .pi-artifact-excerpt) { font-size: 16px; }
.artifact-card-kind { letter-spacing: normal; text-transform: none; font-weight: 500; }
.pi-artifact-excerpt { color: var(--sv-ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
@media (max-width: 760px) {
  .artifact-reader { width: calc(100vw - 16px); max-height: calc(var(--app-viewport-height, 100dvh) - 16px); border-radius: 12px; }
  .artifact-reader:is([data-kind="html"], [data-kind="browser"]) { height: calc(var(--app-viewport-height, 100dvh) - 16px); }
  .artifact-reader-head { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .artifact-reader-actions { width: 100%; align-items: stretch; }
  .artifact-reader-actions > :is(button, a) { flex: 1; }
  #artifact-reader-close { margin-left: auto; }
  .artifact-reader-head h2 { font-size: 20px; }
  .artifact-reader-note { padding: 8px 16px; }
  .artifact-reader-document { margin: 0; padding: 20px 16px; border: 0; border-radius: 0; }
  .artifact-browser-chrome { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .artifact-browser-notice { padding: 12px 16px; }
  .artifact-browser-viewport { padding: 0 8px 8px; }
  .artifact-card :is(button, a), .pi-artifact-link { min-height: 44px; }
  .artifact-card-delete { width: 44px; height: 44px; flex-basis: 44px; }
  .artifact-card-foot { flex-wrap: wrap; }
  .pi-artifact-form :is(input, select, button) { min-height: 44px; font-size: 16px; }
}

/* Side browser (web/app/42a-in-app-browser.js). Modal it takes the screen, as
 * the page reader did; docked it is the third grid track beside the chat, and
 * expanded (data-expanded) the same element spans the chat's track too. */
.browser-panel {
  width: calc(100vw - 32px);
  height: calc(var(--app-viewport-height, 100dvh) - 32px);
  max-height: none;
  font-size: var(--workspace-ui-text);
}
.browser-panel .artifact-reader-body { flex: 1; min-height: 0; }
.browser-panel .icon-btn:disabled { opacity: .4; cursor: default; }
.browser-tabbar {
  display: flex; align-items: flex-end; gap: 4px; padding: 6px 8px 0;
  border-bottom: 1px solid var(--sv-hairline); background: var(--sv-surface-sunken);
}
.browser-tabbar > .icon-btn { margin-bottom: 4px; }
.browser-tabs { display: flex; flex: 1; min-width: 0; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.browser-tab {
  display: flex; flex: 0 1 12rem; align-items: center; min-width: 6rem;
  height: var(--workspace-control-height); border-radius: 8px 8px 0 0; color: var(--sv-ink-secondary);
}
.browser-tab:has([aria-selected="true"]) { background: var(--sv-surface); color: var(--sv-ink); }
.browser-tab-select {
  display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; height: 100%;
  padding: 0 4px 0 10px; border: 0; border-radius: 8px 0 0 0; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.browser-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-tab-select .icon { flex: 0 0 auto; width: 14px; height: 14px; }
.browser-tab-close {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 24px; height: 24px;
  margin-right: 4px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: inherit; cursor: pointer;
}
.browser-tab-close .icon { width: 14px; height: 14px; }
.browser-tab:not(:has([aria-selected="true"])) .browser-tab-select:hover,
.browser-tab-close:hover { background: var(--workspace-hover); }
.browser-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--sv-hairline); background: var(--sv-surface); }
.browser-address { flex: 1; min-width: 0; }
.browser-address input {
  width: 100%; height: var(--workspace-control-height); padding: 0 12px;
  border: 1px solid var(--sv-hairline); border-radius: 8px; background: var(--sv-surface-sunken);
  color: var(--sv-ink); font: inherit;
}
.browser-address input:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: -1px; }
.browser-page-head:empty { display: none; }
.browser-panel .artifact-reader-head { padding: 12px 16px; }
.browser-panel .artifact-reader-head h2 { font-size: var(--sv-text-body); }
.browser-panel .artifact-reader-note { padding: 6px 16px; font-size: var(--workspace-ui-meta); }
.browser-panel .artifact-browser-chrome { padding: 6px 12px; }
.browser-panel .artifact-browser-notice { padding: 0; font-size: var(--workspace-ui-meta); }
.browser-panel .artifact-browser-chrome .artifact-reader-actions :is(button, a) { min-height: var(--workspace-control-height); padding: 4px 10px; }
.browser-panel .artifact-browser-viewport { padding: 0; }
.browser-panel .artifact-browser-frame { border: 0; border-radius: 0; }
.browser-panel .artifact-browser-viewport[data-width="mobile"] { padding-top: 8px; }
.browser-panel .artifact-browser-viewport[data-width="mobile"] .artifact-browser-frame { border: 1px solid var(--sv-hairline); border-radius: 8px; }
.browser-page-width-label { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.browser-empty { color: var(--sv-ink-secondary); }
/* Comment on a region (web/app/42b-browser-page-tools.js): the overlay takes the
 * pointer from the page underneath while the member drags out an area. */
.browser-panel .artifact-reader-body { position: relative; }
.browser-region-overlay { position: absolute; inset: 0; z-index: 2; cursor: crosshair; touch-action: none; background: color-mix(in srgb, var(--sv-ink) 8%, transparent); }
.browser-region-overlay:focus { outline: none; }
.browser-region-overlay.is-busy { cursor: progress; }
.browser-region-box { position: absolute; border: 2px solid var(--sv-ink); border-radius: 7px; background: color-mix(in srgb, var(--sv-surface) 30%, transparent); pointer-events: none; }
.browser-region-hint {
  position: absolute; top: 12px; left: 50%; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px;
  transform: translateX(-50%); border: 1px solid var(--sv-hairline); border-radius: 12px;
  background: var(--sv-surface-raised); box-shadow: var(--workspace-panel-shadow); color: var(--sv-ink); white-space: nowrap; cursor: default;
}
.browser-region-hint button {
  min-height: var(--workspace-control-height); padding: 4px 10px; border: 1px solid var(--sv-hairline); border-radius: 8px;
  background: var(--sv-surface); color: var(--sv-ink); font: inherit; cursor: pointer;
}
.attachment-chip.attachment-page .icon { flex: 0 0 auto; width: 16px; height: 16px; margin-left: 4px; }
/* Share's tab (web/app/42c-share-browser-tab.js): read-only frames of the
 * agent's own browser. Working colour marks only that it is browsing now. */
.browser-toggle-btn { position: relative; }
.browser-share-dot {
  position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--workspace-working); outline: 2px solid var(--sv-surface);
}
.browser-tab-share { flex: 0 0 auto; min-width: 0; }
.browser-tab-share .browser-tab-select { padding-right: 10px; }
.browser-tab-live { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--workspace-working); }
.browser-panel[data-kind="share"] .artifact-reader-body { display: flex; flex-direction: column; overflow: hidden; }
.share-browser { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.share-browser-bar { justify-content: flex-start; }
.share-browser-action { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-browser-action strong { font-weight: 500; }
.share-browser-time { color: var(--sv-ink-secondary); }
.browser-panel .share-browser-follow[aria-pressed="true"] { background: var(--workspace-selected); border-color: var(--sv-hairline-strong); }
.share-browser-stage { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--sv-surface); }
.share-browser-frame { display: block; width: 100%; height: auto; }
.share-browser-strip { display: flex; flex: 0 0 auto; gap: 6px; padding: 8px 12px; overflow-x: auto; border-top: 1px solid var(--sv-hairline); background: var(--sv-surface-raised); }
.share-browser-thumb {
  flex: 0 0 auto; width: 72px; height: 48px; padding: 0; overflow: hidden; border: 1px solid var(--sv-hairline); border-radius: 7px;
  background: var(--sv-surface); cursor: pointer;
}
.share-browser-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.share-browser-thumb[aria-pressed="true"] { outline: 2px solid var(--sv-ink); outline-offset: -2px; }
.browser-panel .artifact-browser-notice:empty { display: none; }
.browser-panel .artifact-browser-chrome > button {
  min-height: var(--workspace-control-height); padding: 4px 10px; border: 1px solid var(--sv-hairline); border-radius: 8px;
  background: var(--sv-surface-raised); color: var(--sv-ink); font: inherit; cursor: pointer;
}
.browser-panel .artifact-browser-chrome > button:hover { background: var(--workspace-hover); }
.browser-panel .artifact-browser-chrome > button:disabled { opacity: .55; cursor: wait; }
.browser-snapshot { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.browser-snapshot-bar { justify-content: flex-start; }
.browser-snapshot-label { flex: 1; min-width: 0; overflow: hidden; color: var(--sv-ink-secondary); text-overflow: ellipsis; white-space: nowrap; }
.browser-snapshot-body { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--sv-surface); }
/* Never wider than it was captured (width/height attributes, in page pixels):
 * a 2x capture on a 2x screen is sharp, and nothing is upscaled into blur. */
.browser-snapshot-image { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.browser-snapshot-text {
  max-width: 72ch; margin: 0 auto; padding: 16px 20px; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: var(--sv-text-body); line-height: var(--sv-leading-body);
}
.turn-step-open { display: inline-block; margin: 4px 0; color: var(--sv-ink); text-decoration: underline; text-underline-offset: 2px; }
/* Docks only where web/app/42a-in-app-browser.js BROWSER_DOCK_MEDIA says it can. */
@media (min-width: 1200px) and (hover: hover), (min-width: 1401px) {
  .app.browser-docked {
    --browser-rail: clamp(26rem, 40vw, 56rem);
    grid-template-columns: var(--sidebar-width, var(--sv-rail)) minmax(0, 1fr) var(--browser-rail);
  }
  .app.sidebar-collapsed.browser-docked { grid-template-columns: 0 minmax(0, 1fr) var(--browser-rail); }
  .app.browser-docked > .sidebar { grid-area: 1 / 1; }
  .app.browser-docked > .main { grid-area: 1 / 2; }
  .browser-panel[data-mode="docked"] {
    position: relative; inset: auto; z-index: 1; grid-area: 1 / 3;
    width: auto; height: 100%; max-width: none; margin: 0;
    border: 0; border-left: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 0; box-shadow: none;
  }
  /* Expanded over the chat; the rail stays. The chat keeps its own track and
   * width underneath (no reflow, its scroll is kept) and is out of reach. */
  .browser-panel[data-mode="docked"][data-expanded] { grid-area: 1 / 2 / 2 / 4; }
  .app.browser-expanded > .main { visibility: hidden; }
}
@media (max-width: 760px) {
  .artifact-reader.browser-panel {
    inset: var(--app-viewport-top, 0px) 0 auto; width: 100vw; max-width: none;
    height: var(--app-viewport-height, 100dvh); max-height: none; margin: 0; border: 0; border-radius: 0;
  }
  .browser-panel .icon-btn, .browser-tab-close { min-width: 44px; min-height: 44px; }
  .browser-tab { height: 44px; min-width: 7rem; }
  .browser-address input { height: 44px; font-size: 16px; }
  /* The address gets a row of its own; the controls share the next. */
  .browser-toolbar { flex-wrap: wrap; }
  .browser-address { order: -1; flex-basis: 100%; }
  .browser-toolbar > .browser-open { margin-left: auto; }
  .browser-region-hint button { min-height: 44px; }
  .browser-panel .artifact-browser-chrome .artifact-reader-actions :is(button, a),
  .browser-panel .artifact-browser-chrome > button { min-height: 44px; }
  .browser-panel .artifact-browser-chrome { flex-wrap: nowrap; }
  .browser-panel .artifact-browser-chrome .artifact-reader-actions { width: auto; }
  /* No Expand on a phone to confuse it with, and the caption would squeeze the
   * notice beside it; the group keeps its "Page width" name. */
  .browser-page-width-label { display: none; }
  .turn-step-open { min-height: 44px; line-height: 44px; }
}

/* A quiet map of the conversation, sharing the transcript's grid track so it
 * never covers the header, pending decisions, or composer. */
#messages { grid-column: 1; }
.main:has(> #messages > .messages-inner > .msg ~ .msg) #messages {
  padding-inline-end: calc(var(--conversation-gutter, var(--sv-gutter)) + var(--message-nav-reserve, 44px));
}
.main:has(> #messages > .messages-inner > .msg ~ .msg) #composer-wrap {
  padding-inline-end: calc(var(--conversation-gutter, var(--sv-gutter)) + var(--chat-scrollbar-width, 0px) + var(--message-nav-reserve, 44px));
}
.message-navigation-layer {
  grid-area: conversation / 1;
  position: relative;
  min-height: 0;
  min-width: 0;
  pointer-events: none;
  z-index: 3;
}
.message-navigation-layer[hidden], .message-navigation-preview[hidden] { display: none; }
.message-navigation {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  max-height: min(60%, 288px);
  width: 44px;
  pointer-events: auto;
}
.message-navigation-dots { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.message-navigation-dots::-webkit-scrollbar { display: none; }
.message-navigation-dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sv-ink-secondary);
  cursor: pointer;
}
.message-navigation-dot::before { content: ""; width: 12px; height: 2px; border-radius: 1px; background: currentColor; opacity: .5; }
.message-navigation-dot.is-member::before { width: 18px; }
.message-navigation-dot[aria-current="true"] { color: var(--sv-ink); }
.message-navigation-dot[aria-current="true"]::before { width: 24px; height: 3px; opacity: 1; }
.message-navigation :is(button:hover, button:focus-visible) { color: var(--sv-ink); }
.message-navigation-dot:is(:hover, :focus-visible)::before { opacity: 1; }
.message-navigation-latest:is(:hover, :focus-visible) { background: var(--sv-surface-dim); }
.message-navigation button:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: -2px; }
.message-navigation-latest { flex: 0 0 44px; width: 44px; height: 44px; margin-top: 4px; border-radius: 8px; color: var(--sv-ink-secondary); }
.message-navigation-latest .icon { transform: rotate(90deg); }
.message-navigation-latest[aria-disabled="true"] { opacity: .5; }
.message-navigation-preview {
  position: absolute;
  right: 52px;
  width: min(320px, calc(100% - 64px));
  max-height: calc(100% - 16px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--sv-hairline);
  border-radius: 12px;
  background: var(--sv-surface-raised);
  color: var(--sv-ink);
  box-shadow: var(--workspace-panel-shadow);
  pointer-events: auto;
  font: 400 var(--sv-text-body)/1.5 var(--sv-font-sans);
}
.message-navigation-preview-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.message-navigation-preview-head > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-navigation-position { flex: none; color: var(--sv-ink-secondary); font-variant-numeric: tabular-nums; }
.message-navigation-preview p { margin: 8px 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.message-navigation-preview img { display: block; max-width: 100%; height: 88px; object-fit: contain; margin-top: 12px; border-radius: 4px; }
@media (pointer: coarse), (max-width: 640px) {
  .message-navigation-dot { height: 44px; }
}
@media print { .message-navigation-layer { display: none; } }
/* The answer's model chip is the disclosure for its recorded routing decision.
 * It keeps the static chip's look; only hover, focus and a phone-sized hit area
 * say it opens. The hit area grows invisibly so the chip itself stays compact. */
button.msg-model { position: relative; background: transparent; text-align: left; transition: color var(--sv-dur-instant) var(--sv-ease-out), background-color var(--sv-dur-instant) var(--sv-ease-out); }
button.msg-model:hover { color: var(--sv-ink); background: var(--workspace-hover); }
button.msg-model[aria-expanded="true"] { color: var(--sv-ink); border-color: var(--sv-hairline-strong); }
button.msg-model:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 1px; }
.msg-routing-body { grid-column: 2; color: var(--sv-ink-secondary); font: 400 var(--workspace-ui-meta)/1.45 var(--sv-font-sans); max-width: 60ch; padding-block: 6px 2px; overflow-wrap: anywhere; }
.msg-routing-body[hidden] { display: none; }
.msg-routing-body p { margin: 1px 0; }
/* Phone targets: an invisible 44px band over the chip, with room below it so
 * the band never covers the answer's copy/reply row. */
@media (pointer: coarse), (max-width: 640px) {
  button.msg-model { margin-bottom: var(--sv-space-3); }
  button.msg-model::after { content: ""; position: absolute; inset: 50% 0 auto; height: 44px; transform: translateY(-50%); }
  .msg-routing-body { grid-column: auto; padding-top: 0; }
}

/* Drop targets keep the tree still, so the destination cannot jump away. */
body.reordering-projects [data-project-drop="inside"] {
  background: var(--sv-surface) !important;
  color: var(--sv-ink) !important;
  outline: 2px solid var(--sv-ink-secondary);
  outline-offset: -2px;
}
[data-project-drop="before"] { box-shadow: inset 0 2px var(--sv-ink-secondary); }
[data-project-drop="after"] { box-shadow: inset 0 -2px var(--sv-ink-secondary); }
.project-row.is-reordering, .thread-row.is-reordering { opacity: .5; }
.project-drop-hint {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  max-width: 228px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--sv-ink);
  background: var(--sv-surface);
  border: 1px solid var(--sv-hairline);
}

/* Categories are section headings; project rows remain work destinations. */
.project[data-kind="category"] { margin-block-start: 16px; }
.project[data-kind="category"] > .project-row {
  min-height: 44px;
  color: var(--sv-ink-secondary);
  border-radius: 0;
  background: transparent;
}
.project[data-kind="category"] > .project-row .project-name { color: inherit; }
.project[data-kind="category"] > .project-row .project-disclosure { color: inherit; }
.project[data-kind="category"] > .project-row:hover,
.project[data-kind="category"] > .project-row:focus-within { color: var(--sv-ink); }
.category-label { margin: 0 0 8px; color: var(--sv-ink-secondary); }

/* One left edge for the rail. The reorder grip used to reserve a 28px lane on
 * every project row, which pushed the tree a full step right of the nav and the
 * section heads above it. With a pointer it sits in the row's own left padding
 * instead (the whole row drags anyway; the grip is the keyboard handle), so a
 * project name starts where "Activity" and "Recents" do. An idle project carries
 * no ring: the chip names a working one, and twenty-seven hollow dots said
 * nothing. Touch keeps its always-visible 28px grip and 44px targets. */
@media (hover: hover) and (pointer: fine) {
  .sidebar .project-row { padding-left: calc(16px + var(--project-indent, 0px)); }
  .sidebar .project-drag {
    position: absolute;
    left: var(--project-indent, 0px);
    width: 16px;
    flex-basis: 16px;
  }
  .sidebar .thread-row { padding-left: calc(36px + var(--project-indent, 0px)); }
  .sidebar .project-row .status-dot:not(.live) { display: none; }
  .sidebar .project[data-kind="category"] { margin-block-start: 8px; }
  .sidebar .workspace-group + .project[data-kind="category"],
  .sidebar .subprojects > .project[data-kind="category"] { margin-block-start: 0; }
  .sidebar .project[data-kind="category"] > .project-row { min-height: 32px; }
}
.project-home[data-kind="category"] .project-home-grid { grid-template-columns: 1fr; }
.project-home-chat[data-kind="category"] { color: var(--sv-ink-secondary); }

/* ---------- Send experience: live work moves, settled work is still ----------
 * The live line was a grey dot and grey text with every animation off, so a
 * running turn looked identical to a frozen one. The dot breathes in the
 * working colour and the label carries a slow light sweep; both stop the
 * moment the line settles or goes unconfirmed. */
.status-line[data-live-steps="1"] .turn-trace-head::before {
  background: var(--workspace-working);
  animation: turn-tool-breathe var(--workspace-pulse) var(--sv-ease-inout) infinite;
}
.status-line[data-live-steps="1"]:not([data-unconfirmed="1"]):not([data-answer-started]) .turn-trace-label {
  background: linear-gradient(90deg, var(--sv-ink-secondary) 35%, var(--sv-ink) 50%, var(--sv-ink-secondary) 65%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: status-sweep var(--workspace-pulse) linear infinite;
}
@keyframes status-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
.status-line[data-live-steps="1"] { animation: workspace-message-enter var(--sv-dur-base) var(--sv-ease-out); }
/* Done is a visible state, not an absence: the fold that replaces the live line
 * says so, and the answer's footer arrives rather than blinking in. */
.work-progress-history[data-settled-now] > summary { animation: workspace-message-enter var(--sv-dur-base) var(--sv-ease-out); }
.work-progress-done { display: inline-flex; align-items: center; gap: 6px; color: var(--sv-ink-secondary); }
.work-progress-done .icon { width: 14px; height: 14px; color: var(--workspace-working); }
.msg.assistant[data-just-answered] :is(.msg-time, .msg-model, .msg-actions) { animation: workspace-message-enter var(--sv-dur-base) var(--sv-ease-out) both; }
/* A prompt's hover actions sit on its timestamp row, left of the time, instead
 * of reserving an empty 52px row under every bubble: that blank was most of the
 * gap between a sent prompt and the work it started. The time never steps
 * aside for them: it is how a member finds a message again. The actions'
 * negative margins keep the row at the time's height. Touch keeps its row. */
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  .msg.user:not([data-steering]) { position: relative; }
  .messages-inner > .msg.user:not([data-steering], [hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-auto-flow: row dense; align-items: center; column-gap: 4px; }
  .messages-inner > .msg.user:not([data-steering]) > * { grid-column: 1 / -1; justify-self: end; }
  .messages-inner > .msg.user:not([data-steering]) > .msg-time { grid-column: 3; }
  .messages-inner > .msg.user:not([data-steering]) > .msg-actions { grid-column: 2; align-self: end; width: auto; margin: -6px 0; }
  /* An answer's copy/reply actions share its timestamp's row. */
  .msg.assistant > .msg-time { display: inline-block; vertical-align: middle; }
  .msg.assistant > .msg-time + .msg-actions { display: inline-flex; vertical-align: middle; }
  .msg.assistant > .msg-time ~ .msg-model { display: flex; margin-top: var(--sv-space-2); }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .status-line[data-live-steps="1"] .turn-trace-head::before,
  .status-line[data-live-steps="1"],
  .work-progress-history[data-settled-now] > summary,
  .msg.assistant[data-just-answered] :is(.msg-time, .msg-model, .msg-actions) { animation: none; }
  .status-line[data-live-steps="1"] .turn-trace-label { animation: none; background: none; -webkit-text-fill-color: currentColor; }
}

/* ==== Revamp 2026-09-25 · A: shell, Recents, sidebar, phone navigation ==== */
/* ---- Rail sections: Recent above Projects, each folded by its heading ---- */
#sidebar .sidebar-section-head {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 0 4px 0 2px;
  color: var(--sv-ink-secondary);
  font: 500 var(--workspace-ui-meta) / 1.35 var(--sv-font-sans);
}
#sidebar .sidebar-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 24px;
  margin: 0;
  padding: 0 6px 0 2px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}
#sidebar .sidebar-section-toggle:is(:hover, :focus-visible) { color: var(--sv-ink); background: var(--workspace-hover); }
#sidebar .sidebar-section-toggle:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: -2px; }
#sidebar .sidebar-section-toggle > .icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  transform: rotate(90deg);
  transition: transform var(--sv-dur-fast) var(--sv-ease-inout);
}
#sidebar .sidebar-section-toggle[aria-expanded="false"] > .icon { transform: none; }
#sidebar .sidebar-section-head .sidebar-section-tools { margin-left: auto; }
#sidebar-chats-panel[data-collapsed="true"] :is(.session-list, .session-show-all),
#sidebar-projects-panel[data-collapsed="true"] #project-tree { display: none; }
#sidebar #sidebar-chats-panel { margin-top: 4px; padding: 0; }

/* ---- The session row: one component wherever a chat is listed ----------
 * Two fixed lines at --workspace-row-height: [status slot · title · age] over
 * [project · state]. Status repaints only text inside reserved slots, so a
 * row never changes height and its title never moves. */
.session-list { display: grid; gap: 1px; }
.session-row {
  position: relative;
  min-width: 0;
  height: var(--workspace-row-height);
  min-height: var(--workspace-row-height);
  margin: 0;
  color: var(--sv-ink);
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}
.session-open {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  grid-template-rows: 20px 18px;
  align-content: center;
  column-gap: 8px;
  row-gap: 2px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 calc(10px + var(--session-touch-reserve, 0px)) 0 6px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: inherit;
  font: 400 var(--workspace-ui-text) / 20px var(--sv-font-sans);
  text-align: left;
  cursor: pointer;
}
.session-open:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: -2px; }
.session-open > .status-dot {
  grid-column: 1;
  grid-row: 1;
  place-self: center;
  margin: 0;
  width: 7px;
  height: 7px;
  flex: none;
  border-width: 0;
  border-radius: 50%;
  background: transparent;
  opacity: 1;
}
#sidebar .session-title,
.session-title {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--sv-ink);
  font: 500 var(--workspace-ui-text) / 20px var(--sv-font-sans);
  letter-spacing: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sidebar .session-stamp,
.session-stamp {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  margin: 0;
  color: var(--sv-ink-secondary);
  font: 400 var(--workspace-ui-meta) / 18px var(--sv-font-sans);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
#sidebar .session-meta,
.session-meta {
  display: flex;
  grid-column: 2 / -1;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  color: var(--sv-ink-secondary);
  font: 400 var(--workspace-ui-meta) / 18px var(--sv-font-sans);
  white-space: nowrap;
}
.session-meta > * { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.session-meta > .session-project { flex-shrink: 2; }
.session-meta > :not(.session-project):not([hidden])::before { content: "·"; margin-inline: 5px; color: var(--sv-ink-tertiary); }
.session-meta > .session-project:empty + *::before { content: none; }
.session-state { flex: 0 1 auto; color: var(--sv-ink-secondary); font-weight: 400; }
.session-meta .session-snippet { display: inline; max-width: none; font-size: inherit; }
/* Status: working breathes in --workspace-working; a settled state that needs
 * reading carries a glyph (paintStatusGlyph, below); unread is a small ink dot,
 * idle nothing. The 16px slot is reserved either way. */
.session-row .session-open > .status-dot:not(.live) { visibility: hidden; }
.session-row .session-open > .status-dot.live { visibility: visible; background: var(--workspace-working); }
.session-row .session-open > .status-dot.live::after { border-radius: 50%; }
.session-row .session-open > .status-dot.live.unconfirmed { background: transparent; border: 1px solid var(--sv-ink-tertiary); }
/* A live step draws its mark inside this dot (paintThreadRowGlyph), so the
 * working fill above stands aside exactly as `.status-dot[data-step]` does in
 * the project tree: left on, it painted a 7px disc under the mark's centre and a
 * running Codex step read as a filled green rosette (Rey, 2026-10-01). */
.session-row .session-open > .status-dot.live[data-step] { background: transparent; }
.session-row[data-unseen="true"] .session-open > .status-dot:is([data-phase="idle"], [data-phase="done"]) {
  visibility: visible;
  width: 6px;
  height: 6px;
  background: var(--sv-ink);
}
/* Settled chat states as glyphs, in every chat row (Recent list and project
 * tree): the shape names the state — needs you (question), unanswered (alert),
 * failed (cross), stopped, queued (clock) — and colour only its urgency. The
 * glyph overhangs the dot's box, so a title never shifts when state changes. */
.status-dot[data-glyph],
.session-row .session-open > .status-dot[data-glyph] {
  visibility: visible;
  border-color: transparent;
  background: transparent;
  animation: none;
}
.status-dot[data-glyph]::after { content: none; }
.status-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sv-ink-secondary);
  pointer-events: none;
}
.status-glyph .icon { flex: 0 0 14px; width: 14px; height: 14px; }
.status-dot:is([data-glyph="message-question"], [data-glyph="alert"]) > .status-glyph { color: var(--sv-attention); }
.status-dot[data-glyph="circle-x"] > .status-glyph { color: var(--sv-danger); }
.session-row:is([data-phase="received"], [data-phase="working"], [data-phase="writing"]) .session-state,
.sidebar .session-row:is([data-phase="received"], [data-phase="working"], [data-phase="writing"]) .session-state { color: var(--workspace-working-ink); }
.session-row:is([data-phase="input"], [data-phase="stalled"], [data-phase="stopped"]) .session-state { color: var(--sv-attention); }
.session-row[data-phase="error"] .session-state { color: var(--sv-danger); }
/* Row actions overlay the age on hover/focus; touch shows them always. */
.session-row .row-actions {
  position: absolute;
  top: 6px;
  right: 4px;
  bottom: auto;
  height: 28px;
  padding: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}
.session-row .row-actions .icon-btn { width: 28px; height: 28px; min-height: 28px; }
.session-row:is(:hover, :focus-within, .row-menu-open) .row-actions { opacity: 1; pointer-events: auto; }
.session-row:is(:hover, :focus-within, .row-menu-open) .session-stamp { visibility: hidden; }
@media (hover: none) {
  .session-row .row-actions,
  .sidebar .session-row .row-actions { top: 0; right: 0; bottom: 0; height: auto; opacity: 1; pointer-events: auto; align-items: center; background: transparent; box-shadow: none; }
  .session-row .row-actions .icon-btn { width: 44px; height: 44px; min-height: 44px; }
  .session-row { --session-touch-reserve: 40px; }
}
.sidebar .session-row:is(:hover, :focus-within) { background: var(--workspace-hover); }
/* A chat's coding runs (web/app/22-coding-runs-in-the-sidebar.js): nested rows
 * right after its row, indented under its title; one line each. */
.session-runs { display: grid; gap: 1px; margin: 0 0 var(--sv-space-1); padding: 0 0 0 22px; list-style: none; }
.session-run {
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 6px;
  width: 100%;
  min-height: var(--workspace-control-height);
  padding: 0 10px 0 6px;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: 400 var(--workspace-ui-meta) / 18px var(--sv-font-sans);
  text-align: left;
  cursor: pointer;
}
.session-run:is(:hover, :focus-visible) { color: var(--sv-ink); background: var(--workspace-hover); }
.session-run:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: -2px; }
.session-run-mark { display: grid; place-items: center; color: var(--sv-ink); }
.session-run-mark .icon { width: 14px; height: 14px; }
.session-run-name { color: var(--sv-ink); font-weight: 500; white-space: nowrap; }
.session-run-goal { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-run-state { font-variant-numeric: tabular-nums; white-space: nowrap; }
.session-run-item[data-state="running"] .session-run-state { color: var(--workspace-working-ink); }
.session-run-item[data-state="failed"] .session-run-state { color: var(--sv-danger); }
@media (max-width: 760px), (pointer: coarse) {
  .session-run { min-height: 44px; }
}
.session-empty {
  margin: 0;
  padding: 6px 8px 8px;
  color: var(--sv-ink-secondary);
  font-size: var(--workspace-ui-meta);
}
/* ---- Rail link rows (rail columns slice) -----------------------------------
 * "All chats" under Recent and a project's "Show N more" are ordinary rail rows,
 * not text links: an icon in the rows' status slot, the label at row text size,
 * the height, hover and focus ring of the rows above them. */
#sidebar .session-show-all {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  width: 100%;
  height: var(--workspace-row-height);
  margin: 1px 0 0;
  padding: 0 10px 0 6px;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: 400 var(--workspace-ui-text) / 20px var(--sv-font-sans);
  text-align: left;
  cursor: pointer;
}
#sidebar .rail-link-row > .icon { width: 16px; height: 16px; flex: 0 0 16px; }
#sidebar .rail-link-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sidebar .rail-link-row:is(:hover, :focus-visible) { color: var(--sv-ink); background: var(--workspace-hover); }
#sidebar .rail-link-row:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: -2px; }
#sidebar .session-show-all[hidden], #sidebar .project-chats-toggle[hidden] { display: none; }
/* The icon centres on the chat rows' status dot and the label starts at their
 * titles (rows: 6px dot at the row's left padding, 8px gap). */
#project-tree .project-chats-toggle {
  --rail-link-inset: calc(var(--sv-space-12) - 4px);
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--workspace-control-height);
  padding: 0 8px 0 calc(var(--rail-link-inset) + var(--project-indent, 0px));
  border-radius: 8px;
  font: 400 var(--workspace-ui-text) / 20px var(--sv-font-sans);
}
#project-tree .project-chats-toggle > .icon { width: 14px; height: 14px; flex-basis: 14px; }
@media (hover: hover) and (pointer: fine) {
  #project-tree .project-chats-toggle { --rail-link-inset: 32px; }
}
@media (max-width: 760px), (pointer: coarse) {
  #project-tree .project-chats-toggle { min-height: 44px; }
}

/* ---- Project tree: dense 32px rows ---------------------------------------
 * A chat in the tree is one line: title, then its age at the right edge. The
 * live status keeps its own second line only while the chat is working, the
 * one case the tree still has to say out loud. */
#project-tree .project-row { min-height: var(--workspace-control-height); }
#project-tree .thread-row:has(.thread-row-meta) { min-height: var(--workspace-control-height); }
#project-tree .thread-row:has(.thread-live-status) { min-height: var(--workspace-row-height); }
#project-tree .thread-row .thread-name {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: baseline;
  min-width: 0;
}
#project-tree .thread-row .thread-title-text { grid-column: 1; grid-row: 1; }
#project-tree .thread-row .thread-row-meta { grid-column: 2; grid-row: 1; gap: 4px; justify-self: end; }
#project-tree .thread-row .thread-live-status { grid-column: 1 / -1; grid-row: 2; }
#project-tree .thread-row .thread-row-snippet { display: none; }
/* A two-line row still marks its title line, as a session row does: the dot (and
 * any glyph in it) sits on line one, not between the two. The offset is half of
 * line two: the name's 2px row gap plus the status line's 18px. */
#project-tree .thread-row .thread-live-status { line-height: 18px; }
#project-tree .thread-row:has(.thread-live-status) > .status-dot { translate: 0 -10px; }
#project-tree .thread-row .thread-row-stamp { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); font-weight: 400; }
/* The row's controls take the right edge on hover, as on a session row, so the
 * age steps aside for them rather than squeezing the title between the two. */
#project-tree .thread-row:is(:hover, :focus-within, .row-menu-open):not(:has(.inline-input)) .thread-row-stamp { display: none; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #project-tree .project-row.project-row, #project-tree .thread-row.thread-row { min-height: 44px; }
  #project-tree .thread-row.thread-row:has(.thread-live-status) { min-height: 56px; }
}

/* ---- Recents page (the root surface) and Activity's shared head ---------- */
/* One reading column for the whole entry surface, so the composer keeps its
 * width when moving between Recents and Activity. */
.shareos-home :is(.shareos-home-hero, .shareos-home-workspace), #pip-reminder-slot { width: min(calc(100% - (var(--sv-gutter) * 2)), 56rem); }
.shareos-home .shareos-home-hero { margin-top: clamp(20px, 4vh, 40px); margin-bottom: 20px; }

/* Compact home: the composer and starter prompts share the work list's width.
 * Promotional artwork and the split desktop hero are intentionally removed. */
.shareos-home[data-view="recents"] .composer-home { margin-top: 0; }
.shareos-home[data-view="recents"] .shareos-home-head { display: flex; align-items: center; }
.shareos-home[data-view="recents"] .shareos-home-heading { flex: 1; font-size: var(--workspace-ui-text); color: var(--sv-ink-secondary); font-weight: 500; }
.launchpad-starters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.launchpad-starters button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--sv-hairline); border-radius: 8px; color: var(--sv-ink-secondary); background: var(--sv-surface); font: 400 var(--workspace-ui-meta)/1.3 var(--sv-font-sans); cursor: pointer; }
.launchpad-starters button:hover { color: var(--sv-ink); border-color: var(--sv-hairline-strong); background: var(--sv-surface-sunken); }
.launchpad-starters .icon { width: 15px; height: 15px; }
.launchpad-signal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; color: var(--sv-ink-secondary); font: 400 var(--workspace-ui-meta)/1.4 var(--sv-font-sans); }
.launchpad-signal-dot { flex: 0 0 6px; width: 6px; height: 6px; border: 1px solid var(--sv-ink-secondary); border-radius: 50%; }
/* Green marks live state only (2026-10-06): the connection dot is neutral. */
[data-connection="connected"] .launchpad-signal-dot { background: var(--sv-ink-secondary); border-color: var(--sv-ink-secondary); }
[data-connection="stale"] .launchpad-signal-dot { background: var(--workspace-attention); border-color: var(--workspace-attention); }
.launchpad-tab-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.launchpad-tab-hint { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); font-weight: 400; }
[data-session-filter="needs"] .launchpad-tab-label > .icon { color: var(--workspace-attention); }
[data-connection="stale"] .recents-tabs [data-live="true"] .icon { color: var(--sv-ink-secondary); }
@media (max-width: 760px) {
  .launchpad-starters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .launchpad-starters button { flex: 0 0 auto; min-height: 44px; }
  .launchpad-signal { margin-top: 14px; }
  .launchpad-tab-hint { display: none; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .launchpad-signal { margin-top: 10px; }
}
.shareos-home .shareos-home-heading { font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.shareos-home[data-view="recents"] .shareos-home-head { margin-bottom: 16px; }
.recents-zone[hidden] { display: none; }
.recents-zone { display: grid; gap: 4px; min-width: 0; }
.recents-search { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 12px; padding: 0 8px 0 12px; color: var(--sv-ink-secondary); background: var(--sv-surface-raised); border: 1px solid var(--sv-hairline); border-radius: 8px; cursor: text; }
.recents-search:focus-within { border-color: var(--sv-ink); }
.recents-search > .icon { width: 16px; height: 16px; flex: 0 0 16px; }
.recents-search input { flex: 1 1 auto; min-width: 0; padding: 10px 0; color: var(--sv-ink); background: transparent; border: 0; outline: 0; font: 400 max(16px, var(--workspace-ui-text)) / 1.3 var(--sv-font-sans); }
.recents-search input::-webkit-search-cancel-button { display: none; }
.recents-search-clear { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--sv-ink-secondary); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.recents-search-clear:hover { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.recents-search-clear[hidden] { display: none; }
.recents-search-clear .icon { width: 16px; height: 16px; }
/* The field, not only its frame, is the phone tap target: 10px padding on a
 * 1.3 line left the input 41px tall inside the 44px box. */
@media (max-width: 760px), (pointer: coarse) {
  .recents-search input { min-height: 44px; padding-block: 0; }
  .recents-search-clear { width: 44px; height: 44px; }
}
.recents-matches[hidden] { display: none; }
.recents-matches-list { display: grid; min-width: 0; margin-bottom: 8px; }
.recents-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.recents-tabs::-webkit-scrollbar { display: none; }
.recents-tabs [data-session-filter] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  color: var(--sv-ink-secondary);
  background: var(--sv-surface-raised);
  border: 1px solid var(--sv-hairline);
  border-radius: 8px;
  font: 500 var(--workspace-ui-text) / 1 var(--sv-font-sans);
  white-space: nowrap;
  cursor: pointer;
}
.recents-tabs [data-session-filter]:hover { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.recents-tabs [data-session-filter][aria-selected="true"] { color: var(--sv-ink); background: var(--sv-surface-sunken); border-color: var(--sv-ink); }
.recents-tabs [data-session-filter]:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: -2px; }
.recents-tabs .icon { width: 16px; height: 16px; flex: 0 0 16px; }
.recents-tabs [data-live="true"] .icon { color: var(--workspace-working); }
.recents-tabs .session-filter-count { color: var(--sv-ink); font-weight: 500; font-size: 2rem; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.recents-tabs [data-session-filter="all"][aria-selected="true"] { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); }
.recents-tabs [data-session-filter="all"][aria-selected="true"] :is(.session-filter-count, .launchpad-tab-hint) { color: inherit; }
.theme-dark .recents-tabs [data-session-filter="all"][aria-selected="true"] { color: var(--sv-ink); background: var(--sv-surface-dim); }
.recents-tabs [data-session-filter="needs"][data-populated="true"] { background: color-mix(in srgb, var(--workspace-attention) 9%, var(--sv-surface)); }
.recents-results { display: grid; min-width: 0; }
.recents-group { display: grid; min-width: 0; }
.recents-group-title {
  margin: 0;
  padding: 18px 8px 10px;
  border-bottom: 1px solid var(--sv-hairline);
  color: var(--sv-ink-secondary);
  font: 500 var(--workspace-ui-meta) / 18px var(--sv-font-sans);
  letter-spacing: normal;
}
.recents-results .session-row:is(:hover, :focus-within) { background: var(--sv-surface-sunken); }
.recents-results .session-open { padding-left: 8px; }
.recents-empty { margin: 0; padding: 24px 8px; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-text); }
.recents-results[hidden] { display: none; }

/* ---- Recents filters (2026-10-06) ---------------------------------------
 * The Needs you tile shows the Needs you boxes (the Activity boxes) and the
 * Working tile the Working now rows; All shows neither. Green only on the live
 * dot; clocks, step text and every other mark stay neutral. */
.home-triage { display: grid; gap: 24px; min-width: 0; margin: 0 0 8px; }
.home-triage:is(:empty, [hidden]) { display: none; }
.home-triage :is(.home-section, .home-section-empty)[hidden] { display: none; }
.home-section { display: grid; gap: 8px; min-width: 0; }
.home-section-head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; }
.home-section-title { margin: 0; font: 500 var(--workspace-ui-text) / var(--workspace-ui-leading) var(--sv-font-sans); letter-spacing: normal; }
.home-section-count { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); font-variant-numeric: proportional-nums; }
.home-section-list { display: grid; gap: 8px; min-width: 0; }
.home-section-empty { margin: 0; padding: 4px 2px; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-text); }
.shareos-home .hud-need[data-leaving] { pointer-events: none; }
.shareos-home .hud-need-error { margin: 8px 10px 0 48px; color: var(--sv-danger); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); }
.shareos-home .hud-need .approval-card { margin: 0 10px 0 48px; }
.home-live-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-items: center; width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--sv-hairline); border-radius: 8px; color: var(--sv-ink); background: var(--sv-surface-raised); font: inherit; text-align: left; cursor: pointer; }
.home-live-row:hover { border-color: var(--sv-hairline-strong); background: var(--workspace-hover); }
.home-live-row:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 2px; }
.home-live-dot { grid-row: 1; justify-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--workspace-working); animation: activity-pulse var(--workspace-pulse) ease-in-out infinite; }
.home-live-row[data-unconfirmed="true"] .home-live-dot { background: transparent; border: 1px solid var(--sv-ink-tertiary); animation: none; }
.home-live-title { grid-column: 2; min-width: 0; overflow: hidden; font: 500 var(--workspace-ui-text) / 20px var(--sv-font-sans); text-overflow: ellipsis; white-space: nowrap; }
.home-live-tag { grid-column: 3; padding: 0 6px; border-radius: 6px; color: var(--sv-ink-secondary); background: var(--sv-surface-sunken); font: 500 var(--workspace-ui-meta) / 20px var(--sv-font-sans); white-space: nowrap; }
.home-live-clock { grid-column: 4; color: var(--sv-ink-secondary); font: 400 var(--workspace-ui-meta) / 20px var(--sv-font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-live-step { grid-column: 2 / -1; grid-row: 2; display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--sv-ink-secondary); font: 400 var(--workspace-ui-meta) / 18px var(--sv-font-sans); }
.home-live-step-icon { display: grid; place-items: center; flex: none; }
.home-live-step-icon .icon { width: 14px; height: 14px; color: var(--sv-ink-secondary); }
.home-live-step-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The Needs you count beside Recents in the rail and on the phone bar. Slice E
 * owns `.rail-count`; this is only the fallback geometry, at zero specificity. */
:where(#recents-btn, #phone-recents-btn) .rail-count[hidden] { display: none; }
:where(#recents-btn) .rail-count { min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font: 500 var(--workspace-ui-meta) / 1 var(--sv-font-sans); font-variant-numeric: proportional-nums; }
:where(#recents-btn, #phone-recents-btn) .rail-count.is-attention { color: var(--sv-on-attention); background: var(--sv-attention); }
:where(#phone-recents-btn) .rail-count { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font: 500 var(--workspace-ui-meta) / 1 var(--sv-font-sans); }
@media (max-width: 760px), (pointer: coarse) {
  .home-live-row { min-height: 56px; }
  .shareos-home .hud-need :is(.approval-approve, .approval-deny) { min-height: 44px; }
}
@media (max-width: 640px) {
  .shareos-home .hud-need .approval-card, .shareos-home .hud-need-error { margin-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-live-dot { animation: none; }
}

/* ---- Phone: Recents home, list chrome, full-screen chat ----------------- */
.phone-list-actions[hidden] { display: none; }
.phone-list-actions { display: flex; align-items: center; gap: 0; }
.phone-list-actions .icon-btn { width: 44px; height: 44px; min-height: 44px; }
@media (max-width: 760px) {
  /* A chat is a full screen of its own: the bottom bar is gone, so is its reserve. */
  .phone-ui .app[data-surface="chat"] { --phone-nav-height: 0px; }
  .phone-ui .session-row { height: 56px; min-height: 56px; }
  .phone-ui .shareos-home :is(.shareos-home-hero, .shareos-home-workspace) { width: 100%; }
  .phone-ui .recents-tabs { gap: 8px; margin-bottom: 4px; }
  .phone-ui .recents-tabs [data-session-filter] { position: relative; min-height: 80px; padding: 12px 10px; gap: 10px; }
  .phone-ui .recents-tabs .session-filter-count { font-size: 1.5rem; }
  .phone-ui .launchpad-tab-label > .icon { display: none; }
  .phone-ui [data-session-filter="working"] .launchpad-tab-label > .icon { display: block; position: absolute; right: 12px; bottom: 14px; }
  .phone-ui .recents-results .session-open { padding-left: 2px; }
  .phone-ui #sidebar .sidebar-section-toggle { height: 44px; }
  .phone-ui #sidebar .session-show-all { height: 56px; }
  /* Chats start high in the drawer: the destinations above them stay compact. */
  .phone-ui #sidebar .sidebar-primary { padding-top: 0; padding-bottom: 4px; }
  .phone-ui #sidebar .sidebar-primary-nav { padding-bottom: 0; }
  .phone-ui #sidebar #project-list { padding-top: 0; }
  .phone-ui #sidebar #sidebar-chats-panel { margin-top: 0; }
  .phone-ui .shareos-home[data-view="recents"] .shareos-home-hero { margin-top: 8px; margin-bottom: 8px; }
}
@media (max-width: 760px) and (max-height: 600px) {
  .phone-ui .shareos-home[data-view="recents"] .shareos-home-hero { margin-top: 0; }
  .phone-ui .shareos-home[data-view="recents"] .shareos-home-head { margin-bottom: 8px; }
  .phone-ui .recents-tabs [data-session-filter] { min-height: 48px; padding: 6px 8px; gap: 4px; }
  .phone-ui .recents-tabs .session-filter-count { font-size: 1rem; }
  .phone-ui [data-session-filter="working"] .launchpad-tab-label > .icon { bottom: 8px; right: 8px; }
  .phone-ui .recents-group-title { padding-block: 6px; }
  .phone-ui .launchpad-signal { margin-top: 6px; }
  .phone-ui .launchpad-starters { margin-top: 0; }
}
/* ==== end A ==== */

/* ==== Revamp 2026-09-25 · B: composer ==== */
/* One composer component for the chat (#composer) and the new-chat prompt on
 * home (.composer-home): a 12px box with a context line (where the message
 * goes), a field that grows from one line to 40vh, and a bottom bar — attach
 * and voice on the left, dictate and the send/stop slot on the right. The box
 * is laid out by named areas so a hidden tray collapses to nothing and the
 * controls never move between idle, typing and running. */
.composer-wrap {
  padding: 8px var(--sv-gutter) max(12px, env(safe-area-inset-bottom));
  background: var(--sv-surface);
  border-top: 0;
}
/* Transcript and composer share one reading column, scrollbar space included. */
#composer-wrap {
  padding-inline-start: var(--conversation-gutter, var(--sv-gutter));
  padding-inline-end: calc(var(--conversation-gutter, var(--sv-gutter)) + var(--chat-scrollbar-width, 0px));
}
.composer,
.composer-home {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "reply" "head" "files" "field" "bar";
  width: min(100%, var(--workspace-reading-width));
  margin: 0 auto;
  padding: 0;
  gap: 0;
  /* Menus such as the @ picker extend above the box; clipping would leave them
   * under the transcript's hit target. */
  overflow: visible;
  color: var(--sv-ink);
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color var(--sv-dur-fast) var(--sv-ease-out), outline-color var(--sv-dur-fast) var(--sv-ease-out);
}
/* Home keeps its page column's width; the chat box keeps the reading column. */
.composer-home { width: 100%; margin-top: 24px; }
/* One focus ring on the whole box, contiguous with its edge: border and a 1px
 * outline together read as a 2px ink edge, never a detached band. */
.composer:focus-within,
.composer-home:focus-within {
  border-color: var(--sv-ink-secondary);
  outline: 1px solid var(--sv-ink-secondary);
  outline-offset: 0;
  box-shadow: none;
}
body.is-dragging-files .composer,
.composer-home.is-dragging {
  border-color: var(--sv-ink);
  outline: 1px solid var(--sv-ink);
  outline-offset: 0;
}

/* Context line: folder + project, workspace badge, then context and spend. */
.composer-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px 0;
  font-size: var(--workspace-ui-meta);
}
.composer-context {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  color: var(--sv-ink-secondary);
  font-size: var(--workspace-ui-meta);
  font-weight: 400;
  line-height: 1;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
}
.composer-context .icon { flex: 0 0 auto; width: 15px; height: 15px; }
.composer-context span { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
button.composer-context:not(:disabled) { cursor: pointer; }
button.composer-context:not(:disabled):hover { color: var(--sv-ink); background: var(--sv-surface-sunken); }
button.composer-context:disabled { cursor: default; }
.composer-context-caret { width: 12px; height: 12px; transform: rotate(90deg); opacity: .7; }
button.composer-context:disabled .composer-context-caret { display: none; }
.composer-workspace {
  flex: 0 1 auto;
  padding: 1px 6px;
  color: var(--sv-ink-tertiary);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 6px;
  font-size: var(--workspace-ui-meta);
  letter-spacing: 0.02em;
}
.composer-ctx,
.composer-spend {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--sv-ink-tertiary);
  font-size: var(--workspace-ui-meta);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-ctx { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.composer-ctx::after {
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, currentColor 0 var(--ctx-fill, 0%), var(--sv-hairline) var(--ctx-fill, 0%) 100%);
  content: "";
}
.composer-ctx[data-warn] { color: var(--sv-attention); }
.composer-ctx[hidden] + .composer-spend { margin-left: auto; }
.composer-spend { padding-right: 4px; }

/* Trays live inside the box, above the field. */
.composer .reply-context { grid-area: reply; margin: 8px 8px 0; }
.composer .attachment-list,
.composer-home .attachment-list {
  grid-area: files;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
}
.composer .attachment-list[hidden],
.composer-home .attachment-list[hidden] { display: none; }
.composer .attachment-chip,
.composer-home .attachment-chip {
  gap: 6px;
  min-height: 32px;
  max-width: min(100%, 18rem);
  padding: 3px 3px 3px 4px;
  background: var(--sv-surface-sunken);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 8px;
  font-size: var(--workspace-ui-meta);
}
.composer .attachment-chip.attachment-pdf,
.composer-home .attachment-chip.attachment-pdf { border-left-width: var(--sv-hairline-w); }
.composer :is(.attachment-chip img, .attachment-chip > .icon),
.composer-home :is(.attachment-chip img, .attachment-chip > .icon) { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 5px; }
.composer .attachment-chip > .icon,
.composer-home .attachment-chip > .icon { padding: 3px; color: var(--sv-ink-secondary); }
.composer .attachment-chip button,
.composer-home .attachment-chip button {
  width: 24px;
  height: 24px;
  color: var(--sv-ink-secondary);
  border-radius: 6px;
  font-size: 16px;
}
.composer .attachment-chip button:hover,
.composer-home .attachment-chip button:hover { color: var(--sv-ink); background: var(--sv-surface-dim); }

/* The field: 16px (no iOS zoom), one line at rest, grows to 40vh then scrolls.
 * Height is set by fitComposerField(); CSS only bounds it. */
.composer-field {
  grid-area: field;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  max-height: 40vh;
  margin: 0;
  padding: 10px 16px;
  overflow-y: hidden;
  resize: none;
  color: var(--sv-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
}
.composer-field:focus-visible { outline: 0; box-shadow: none; }
.composer-field::placeholder { overflow: hidden; color: var(--sv-ink-tertiary); opacity: 1; text-overflow: ellipsis; white-space: nowrap; }

/* The @/# picker hangs directly above the box, full width, never over text
 * inside it. */
.composer .mention-picker { right: 0; bottom: calc(100% + 6px); left: 0; border-color: var(--sv-hairline); }

/* Bottom bar: tools left, send slot right. */
.composer-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 2px 8px 8px;
  border-top: 0;
}
.composer-tools,
.composer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.composer-tools { flex: 1 1 auto; }
.composer-actions { flex: 0 0 auto; margin-left: auto; padding: 0; }
.composer-icon-btn,
.composer-chip,
.composer-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: var(--workspace-control-height);
  margin: 0;
  padding: 0;
  border-radius: 8px;
  transition: color var(--sv-dur-fast) var(--sv-ease-out), background-color var(--sv-dur-fast) var(--sv-ease-out), opacity var(--sv-dur-fast) var(--sv-ease-out);
}
.composer-icon-btn {
  width: var(--workspace-control-height);
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
}
.composer-icon-btn .icon { width: 18px; height: 18px; overflow: visible; stroke-width: 1.75; }
.composer-icon-btn:hover:not(:disabled) { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.composer-icon-btn:disabled { color: var(--sv-hairline-strong); background: transparent; }
.composer-icon-btn:focus-visible,
.composer-chip:focus-visible,
.composer-send:focus-visible,
.composer-context:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 1px; }
.composer-add-btn { border: var(--sv-hairline-w) solid var(--sv-hairline); }
.composer-chip {
  gap: 6px;
  padding: 0 10px 0 8px;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  font-size: var(--workspace-ui-meta);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.composer-chip .icon { width: 16px; height: 16px; flex: 0 0 16px; stroke-width: 1.75; }
.composer-chip:hover:not(:disabled) { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.composer-chip:disabled { color: var(--sv-ink-tertiary); opacity: .6; cursor: default; }
/* Spec bar: the task spec this chat runs under, one quiet chip per field, in
 * the control dock's Run row. A chip set off its default reads in full ink, so
 * a pinned model or a guardrail is never a quiet surprise. Wraps on a desktop;
 * a phone scrolls it sideways. */
.spec-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.spec-bar[hidden] { display: none; }
.spec-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  height: 26px;
  margin: 0;
  padding: 0 8px 0 6px;
  color: var(--sv-ink-tertiary);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 7px;
  font: inherit;
  font-size: var(--workspace-ui-meta);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.spec-chip .icon,
.spec-chip .msg-model-logo { width: 14px; height: 14px; flex: 0 0 14px; stroke-width: 1.75; }
.spec-chip-label { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.spec-chip.is-set { color: var(--sv-ink); }
.spec-chip:hover:not(:disabled) { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.spec-chip:disabled { opacity: .6; cursor: default; }
.spec-chip:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 1px; }
.spec-chip[aria-expanded="true"] { color: var(--sv-ink); background: var(--sv-surface-sunken); }
/* Control dock (web/app/52-control-dock.js): every control that steers the
 * open chat, under the header. The strip is one row in the reading column; the
 * panel opens over the transcript, so opening it never moves what you read. */
.control-dock {
  grid-row: controls;
  position: relative;
  z-index: 3;
  min-width: 0;
  padding-block: var(--sv-space-2) var(--sv-space-1);
  padding-inline-start: var(--conversation-gutter, var(--sv-gutter));
  padding-inline-end: calc(var(--conversation-gutter, var(--sv-gutter)) + var(--chat-scrollbar-width, 0px));
  background: var(--sv-surface);
}
.control-dock[hidden] { display: none; }
.control-dock-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  width: min(100%, var(--workspace-reading-width));
  min-width: 0;
  margin: 0 auto;
  padding: 4px 6px;
  background: var(--sv-surface-sunken);
  border-radius: 12px;
  box-shadow: inset 0 0 0 var(--sv-hairline-w) var(--sv-hairline-strong);
  font-size: var(--workspace-ui-meta);
}
.control-dock-caption {
  flex: 0 0 auto;
  padding-right: 6px;
  color: var(--sv-ink);
  border-right: var(--sv-hairline-w) solid var(--sv-hairline-strong);
  font-weight: 500;
}
.control-dock-strip .composer-spend { padding-right: 0; }
.control-dock-toggle {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: var(--workspace-control-height);
  margin: 0;
  padding: 0 8px 0 6px;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 8px;
  font: inherit;
  font-size: var(--workspace-ui-meta);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sv-dur-fast) var(--sv-ease-out), background-color var(--sv-dur-fast) var(--sv-ease-out);
}
.control-dock-toggle[hidden] { display: none; }
.control-dock-toggle.is-set { color: var(--sv-ink); }
.control-dock-toggle:hover,
.control-dock-toggle[aria-expanded="true"] { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.control-dock-toggle:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 1px; }
.control-dock-faces { display: inline-flex; flex: 0 0 auto; }
.control-dock-faces .agent-avatar { width: 20px; height: 20px; }
.control-dock-faces .agent-avatar + .agent-avatar { margin-left: -6px; }
.control-dock-lead { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.control-dock-skills { flex: 0 0 auto; color: var(--sv-ink-secondary); }
.control-dock-skills::before { content: "· "; }
.control-dock-skills[hidden] { display: none; }
.control-dock-caret { flex: 0 0 12px; width: 12px; height: 12px; transform: rotate(90deg); opacity: .7; transition: transform var(--sv-dur-fast) var(--sv-ease-out); }
.control-dock-toggle[aria-expanded="true"] .control-dock-caret { transform: rotate(-90deg); }
.control-dock-core {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: var(--workspace-control-height);
  margin: 0;
  padding: 0 8px;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 8px;
  font: inherit;
  font-size: var(--workspace-ui-meta);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sv-dur-fast) var(--sv-ease-out), background-color var(--sv-dur-fast) var(--sv-ease-out);
}
.control-dock-core[hidden] { display: none; }
.control-dock-core .icon { flex: 0 0 14px; width: 14px; height: 14px; }
.control-dock-core.is-set { color: var(--sv-ink); }
.control-dock-core:hover { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.control-dock-core:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 1px; }
.control-dock-core-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.control-dock-core-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--sv-danger); }
.control-dock-core[data-tone="good"] .control-dock-core-dot { background: var(--workspace-working); }
.control-dock-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  padding-inline: inherit;
}
.control-dock-panel[hidden] { display: none; }
.control-dock-card {
  display: grid;
  gap: var(--sv-space-2);
  width: min(100%, var(--workspace-reading-width));
  max-height: min(70vh, 28rem);
  margin: 0 auto;
  padding: var(--sv-space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sv-surface-raised);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 12px;
  box-shadow: var(--workspace-panel-shadow);
  transform-origin: top center;
  animation: control-dock-enter var(--sv-dur-fast) var(--sv-ease-out);
}
@keyframes control-dock-enter { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.control-dock-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: center; column-gap: var(--sv-space-2); min-width: 0; }
.control-dock-label { color: var(--sv-ink-tertiary); font-size: var(--workspace-ui-meta); }
.control-dock-empty { align-self: center; color: var(--sv-ink-tertiary); font-size: var(--workspace-ui-meta); }
/* Agents as story bubbles. The ring says where each one stands: a double ink
 * ring leads, a solid ink ring is a pinned specialist, a secondary ring worked
 * in this chat, a hairline is merely available. A hovered bubble grows toward
 * the pointer like a dock icon, its neighbours a little less. */
.agent-stories {
  display: flex;
  gap: var(--sv-space-1);
  min-width: 0;
  padding: 12px 2px 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.agent-stories::-webkit-scrollbar { display: none; }
.agent-story {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 4.5rem;
  margin: 0;
  padding: 2px 0 0;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: var(--workspace-ui-meta);
  line-height: 1.2;
  cursor: pointer;
  transform-origin: center bottom;
  transition: transform var(--sv-dur-instant) var(--sv-ease-out), color var(--sv-dur-fast) var(--sv-ease-out);
}
.agent-story:disabled { opacity: .6; cursor: default; }
.agent-story:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 1px; }
.agent-story[aria-expanded="true"],
.agent-story:hover:not(:disabled) { color: var(--sv-ink); }
@media (hover: hover) and (pointer: fine) {
  .agent-story:hover:not(:disabled) { transform: scale(1.12); }
  .agent-story:has(+ .agent-story:hover:not(:disabled)),
  .agent-story:hover:not(:disabled) + .agent-story { transform: scale(1.05); }
}
.agent-story-ring {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--sv-ink-secondary);
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
  border-radius: 50%;
}
.agent-story-ring .agent-avatar { width: 36px; height: 36px; }
.agent-story-ring > .icon { width: 20px; height: 20px; }
.agent-story[data-state="worked"] .agent-story-ring,
.agent-story-ring[data-state="worked"] { border: 2px solid var(--sv-ink-secondary); }
.agent-story[data-state="specialist"] .agent-story-ring,
.agent-story-ring[data-state="specialist"] { border: 2px solid var(--sv-ink); }
.agent-story[data-state="lead"] .agent-story-ring,
.agent-story-ring[data-state="lead"] { border: 2px solid var(--sv-ink); box-shadow: 0 0 0 2px var(--sv-surface-raised), 0 0 0 3.5px var(--sv-ink); }
.agent-story-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-story:is([data-state="lead"], [data-state="specialist"]) .agent-story-name { color: var(--sv-ink); font-weight: 500; }
/* The card a bubble opens: a story's progress bar, who they are, one action row. */
.row-menu.spec-menu.agent-story-menu { width: min(20rem, calc(100vw - 16px)); max-width: min(20rem, calc(100vw - 16px)); }
/* The head names the agent; the menu title stays for its label only. */
.agent-story-menu > .spec-menu-title { display: none; }
.agent-story-card { display: grid; gap: var(--sv-space-2); }
.agent-story-progress { display: flex; gap: 3px; }
.agent-story-segment { flex: 1 1 0; height: 2px; border-radius: 1px; background: var(--sv-hairline); }
.agent-story-segment.is-seen { background: var(--sv-ink); }
.agent-story-head { display: flex; align-items: center; gap: var(--sv-space-3); min-width: 0; }
.agent-story-head .agent-story-ring { flex: 0 0 64px; width: 64px; height: 64px; }
.agent-story-head .agent-story-ring .agent-avatar { width: 50px; height: 50px; }
.agent-story-who { display: grid; gap: 2px; min-width: 0; }
.agent-story-title { overflow: hidden; color: var(--sv-ink); font-size: var(--workspace-ui-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.agent-story-meta,
.agent-story-note { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); }
.agent-story-text { margin: 0; color: var(--sv-ink); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); }
.agent-story-note { margin: 0; }
.agent-story-nav { display: flex; align-items: center; gap: var(--sv-space-1); }
.agent-story-actions { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: var(--sv-space-1); }
.agent-story-step,
.agent-story-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--workspace-control-height);
  margin: 0;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 8px;
  font: inherit;
  font-size: var(--workspace-ui-meta);
  cursor: pointer;
}
.agent-story-step { flex: 0 0 var(--workspace-control-height); width: var(--workspace-control-height); padding: 0; border-color: transparent; }
.agent-story-step .icon { width: 16px; height: 16px; }
.agent-story-action { padding: 0 10px; }
.agent-story-action.is-primary { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); border-color: var(--sv-emphasis-surface); }
.agent-story-action.is-primary:hover:not(:disabled) { opacity: .85; }
.agent-story-action:not(.is-primary):hover:not(:disabled),
.agent-story-step:hover:not(:disabled) { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.agent-story-step:disabled { opacity: .35; cursor: default; }
.agent-story-action:disabled { opacity: .55; cursor: default; }
.agent-story-step:focus-visible,
.agent-story-action:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 1px; }
/* Skills: pinned in full ink with an unpin mark, picked-in-this-chat dashed. */
.skill-dock { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.dock-skill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  height: 26px;
  margin: 0;
  padding: 0 8px 0 6px;
  color: var(--sv-ink-secondary);
  background: transparent;
  border: var(--sv-hairline-w) dashed var(--sv-hairline-strong);
  border-radius: 7px;
  font: inherit;
  font-size: var(--workspace-ui-meta);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.dock-skill .icon { flex: 0 0 14px; width: 14px; height: 14px; stroke-width: 1.75; }
.dock-skill-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dock-skill.is-pinned { color: var(--sv-ink); background: var(--sv-surface-sunken); border-style: solid; border-color: var(--sv-hairline-strong); }
.dock-skill.is-pinned .dock-skill-unpin { width: 12px; height: 12px; flex-basis: 12px; opacity: .6; }
.dock-skill.is-more { border-style: solid; border-color: var(--sv-hairline); font-variant-numeric: tabular-nums; }
.dock-skill:hover:not(:disabled),
.dock-skill[aria-expanded="true"] { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.dock-skill:disabled { opacity: .55; cursor: default; }
.dock-skill:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 1px; }
/* The spec bar's popover: a row menu that holds checklists and fields. */
.row-menu.spec-menu { gap: var(--sv-space-1); width: min(22rem, calc(100vw - 16px)); max-width: min(22rem, calc(100vw - 16px)); padding: var(--sv-space-2); }
.spec-menu-title { margin: 0 0 2px; color: var(--sv-ink); font-size: var(--sv-text-caption); font-weight: 600; }
.spec-menu-note { margin: 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); }
.spec-menu-error { color: var(--sv-danger); }
.spec-menu-note[hidden] { display: none; }
.spec-options { display: grid; gap: 1px; max-height: min(45vh, 22rem); overflow-y: auto; overscroll-behavior: contain; }
.spec-option { display: flex; align-items: flex-start; gap: var(--sv-space-2); padding: 6px var(--sv-space-2); border-radius: 7px; cursor: pointer; }
.spec-option[hidden] { display: none; }
.spec-option:hover { background: var(--sv-surface-sunken); }
.spec-option input { flex: 0 0 auto; margin: 2px 0 0; }
.spec-option input:disabled + .spec-option-text { opacity: .55; }
.spec-option-text { display: grid; gap: 2px; min-width: 0; }
.spec-option-label { display: flex; align-items: center; gap: 6px; color: var(--sv-ink); font-size: var(--sv-text-caption); overflow-wrap: anywhere; }
.spec-option-badge:empty { display: none; }
.spec-option-badge { padding: 0 5px; color: var(--sv-ink-secondary); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 5px; font-size: var(--workspace-ui-meta); }
.spec-option-detail { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); }
.spec-filter,
.spec-field,
.spec-money input {
  box-sizing: border-box;
  width: 100%;
  padding: 6px 8px;
  color: var(--sv-ink);
  background: var(--sv-surface);
  border: var(--sv-hairline-w) solid var(--sv-hairline-strong);
  border-radius: 7px;
  font: inherit;
  font-size: var(--sv-text-caption);
}
.spec-field { resize: vertical; }
.spec-prompt { min-height: 10rem; }
.spec-money-fields { display: grid; gap: var(--sv-space-2); padding: 0 var(--sv-space-2); }
.spec-money-fields[hidden] { display: none; }
.spec-money { display: grid; gap: 4px; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
/* The model menu is the longest row menu; it scrolls rather than leave the viewport. */
.row-menu { max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* More models: vendor logo before the name, the benchmark score at the row's end. */
.model-catalog-result .project-picker-name .msg-model-logo { width: 14px; height: 14px; flex: 0 0 14px; }
.model-catalog-score { margin-left: auto; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); font-variant-numeric: tabular-nums; }
.model-catalog-note { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.model-catalog-note a { color: inherit; text-decoration: underline; }
/* The provider rail: vendors on the left, each a jump to its heading in the
 * list, with the vendor the list is showing marked. Rail and list share one
 * height and scroll on their own; a phone turns the rail into a chip strip. */
.project-picker-dialog.model-catalog-dialog { width: min(calc(100% - (var(--sv-space-6) * 2)), 46rem); }
.model-catalog-body { display: flex; gap: var(--sv-space-3); min-height: 0; height: min(60vh, 480px); border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.model-catalog-body .model-catalog-results { flex: 1 1 auto; min-width: 0; max-height: none; border-top: 0; overscroll-behavior: contain; }
.model-catalog-rail { display: flex; flex: 0 0 12rem; flex-direction: column; gap: 2px; min-height: 0; padding: var(--sv-space-3) var(--sv-space-3) var(--sv-space-3) 0; overflow-y: auto; overscroll-behavior: contain; border-right: var(--sv-hairline-w) solid var(--sv-hairline); }
.model-catalog-rail[hidden] { display: none; }
.model-catalog-rail-item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: var(--workspace-control-height);
  padding: 0 var(--sv-space-2);
  color: var(--sv-ink-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--sv-radius);
  font: inherit;
  font-size: var(--workspace-ui-text);
  text-align: left;
  cursor: pointer;
}
.model-catalog-rail-item:hover { color: var(--sv-ink); background: var(--workspace-hover); }
.model-catalog-rail-item[aria-current="true"] { color: var(--sv-ink); background: var(--workspace-selected); font-weight: 500; }
.model-catalog-rail-item .msg-model-logo { width: 14px; height: 14px; flex: 0 0 14px; }
.model-catalog-rail-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-catalog-rail-count { margin-left: auto; padding-left: var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--workspace-ui-meta); font-weight: 400; font-variant-numeric: tabular-nums; }
.model-catalog-rail-item[aria-current="true"] .model-catalog-rail-count { color: var(--sv-ink-secondary); }
.model-catalog-rail-item:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: -2px; }
@media (pointer: coarse), (max-width: 760px) { .model-catalog-rail-item { min-height: 44px; } }
@media (max-width: 640px) {
  .model-catalog-body { flex-direction: column; gap: 0; }
  .model-catalog-body .model-catalog-results { flex: 1 1 0; min-height: 0; }
  .model-catalog-rail {
    flex: 0 0 auto;
    flex-direction: row;
    gap: var(--sv-space-2);
    padding: var(--sv-space-2) 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border-right: 0;
    border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
  }
  .model-catalog-rail-item { scroll-snap-align: start; border: var(--sv-hairline-w) solid var(--sv-hairline); white-space: nowrap; }
  .model-catalog-rail-item[aria-current="true"] { border-color: transparent; }
}
/* Armed and recording are live states: filled, not merely hovered. */
.composer-icon-btn.escalate-btn.is-on,
.composer-icon-btn.voice-btn.is-recording { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); }
.composer-icon-btn.escalate-btn.is-on:hover,
.composer-icon-btn.voice-btn.is-recording:hover { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); opacity: .85; }
.composer-bar .voice-status { margin: 0 0 0 4px; color: var(--sv-ink); font-size: var(--workspace-ui-meta); }

/* Send and Stop: one 32px emphasis square in one slot. */
.composer-send {
  width: var(--workspace-control-height);
  color: var(--sv-emphasis-ink);
  background: var(--sv-emphasis-surface);
  border: 0;
  box-shadow: none;
}
.composer-send .icon { width: 18px; height: 18px; stroke-width: 2; }
.composer-send:hover:not(:disabled) { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); opacity: .85; }
.composer-send:disabled { color: var(--sv-ink-tertiary); background: var(--sv-surface-dim); cursor: default; }
.composer-send.stop-btn .icon { width: 14px; height: 14px; fill: currentColor; }
.composer-send.stop-btn:disabled { color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); opacity: .5; cursor: progress; }
.composer-bar:has(#stop-btn:not([hidden])) #send-btn:disabled { display: none; }

/* A docked decision is the tray directly above the box: same column, same
 * corners, its own grid track so it never covers transcript text. */
.decision-dock {
  padding: 8px var(--conversation-gutter, var(--sv-gutter)) 0;
  padding-inline-end: calc(var(--conversation-gutter, var(--sv-gutter)) + var(--chat-scrollbar-width, 0px));
  background: var(--sv-surface);
  border-top: 0;
}
.main:has(> #messages > .messages-inner > .msg ~ .msg) .decision-dock {
  padding-inline-end: calc(var(--conversation-gutter, var(--sv-gutter)) + var(--chat-scrollbar-width, 0px) + var(--message-nav-reserve, 44px));
}
.decision-dock-card {
  width: min(100%, var(--workspace-reading-width));
  min-height: 44px;
  padding: 5px 6px 5px 14px;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 12px;
}
.decision-dock-kicker {
  color: var(--sv-attention);
  font-size: var(--workspace-ui-meta);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.decision-dock-question { font-size: var(--workspace-ui-text); }
.decision-dock-show { min-height: var(--workspace-control-height); font-size: var(--workspace-ui-meta); }
.decision-dock-dismiss { width: var(--workspace-control-height); height: var(--workspace-control-height); border-radius: 8px; }

/* Hint row outside the box: key hint on desktop, the caveat quiet beside it. */
.composer-note {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, var(--workspace-reading-width));
  margin: 6px auto 0;
  padding: 0 4px;
  color: var(--sv-ink-tertiary);
  font-size: var(--workspace-ui-meta);
  line-height: var(--workspace-ui-leading);
}
.composer-disclaimer { margin-left: auto; text-align: right; }
@media (hover: none), (max-width: 900px) {
  .composer-hint { display: none; }
}

/* Phone: the resting box is two 44px rows (field, then [+] and [mic send];
 * home adds its project chip between them) and every control is a 44px target.
 * A chat's project, voice and spec live in the control dock, which keeps one
 * 44px strip: the project name takes whatever its buttons leave. */
@media (max-width: 600px) {
  .composer-wrap { padding: 4px var(--sv-gutter) max(8px, env(safe-area-inset-bottom)); }
  .phone-keyboard .composer-wrap { padding-bottom: 8px; }
  .composer,
  .composer-home {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "reply reply reply" "files files files" "field field field" "tools head actions";
  }
  .composer-bar { display: contents; }
  .spec-bar { flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .spec-chip { height: 44px; padding: 0 8px; border: 0; }
  .composer-tools { grid-area: tools; gap: 0; }
  .composer-head { grid-area: head; gap: 4px; padding: 0; }
  .composer-actions { grid-area: actions; gap: 0; }
  .composer-icon-btn,
  .composer-chip,
  .composer-send { width: 44px; height: 44px; }
  .composer-chip { padding: 0; border: 0; }
  .composer-chip-label { display: none; }
  .composer-add-btn { border: 0; }
  /* The emphasis square stays 34px to the eye inside its 44px target. */
  .composer-actions .composer-send,
  .composer-actions .composer-send:disabled,
  .composer-actions .composer-send:hover:not(:disabled) { position: relative; isolation: isolate; background: transparent; }
  .composer-send::before {
    position: absolute;
    z-index: -1;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--sv-emphasis-surface);
    content: "";
  }
  #send-btn:disabled::before,
  .shareos-home-send:disabled::before { background: var(--sv-surface-dim); }
  .composer-context { height: 44px; min-width: 44px; padding: 0 8px; }
  .composer-context > .icon:first-child,
  .composer-workspace,
  .composer-ctx,
  .composer-context-caret { display: none; }
  .composer-spend { flex: 0 1 auto; margin-left: auto; }
  /* A read-only chip is pressable only here: tapping it reads a truncated
   * workspace name aloud as a toast; it cannot move the chat. */
  button.composer-context[data-readonly] { cursor: pointer; }
  button.composer-context[data-readonly]:hover { color: var(--sv-ink); }
  .composer-field { min-height: 44px; padding: 10px 14px; }
  .composer .reply-context { margin: 4px 4px 0; }
  /* Staged files stay one row that scrolls sideways, so a second file never
   * doubles the composer's height. */
  .composer .attachment-list,
  .composer-home .attachment-list { flex-wrap: nowrap; padding: 6px 8px 0; overflow-x: auto; scrollbar-width: none; }
  .composer .attachment-chip,
  .composer-home .attachment-chip { flex: 0 0 auto; max-width: 75%; }
  .composer .attachment-chip,
  .composer-home .attachment-chip { min-height: 44px; }
  .composer .attachment-chip button,
  .composer-home .attachment-chip button { width: 44px; height: 44px; }
  .composer-note { display: none; }
  .decision-dock-card { min-height: 52px; padding-block: 4px; }
  .decision-dock-show { min-height: 44px; }
  .decision-dock-dismiss { width: 44px; height: 44px; }
  .control-dock-strip { gap: 0; padding: 0 4px; }
  .control-dock-toggle { padding: 0 8px; border: 0; }
  .control-dock-core { padding: 0 8px; border: 0; }
  .control-dock-core-label,
  .control-dock-lead,
  .control-dock-skills { display: none; }
  .control-dock-card { max-height: min(60vh, 26rem); padding: var(--sv-space-2); }
  .control-dock-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .skill-dock { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
/* Touch: every dock control is a 44px target, as the composer's are. */
@media (max-width: 760px), (pointer: coarse) {
  .control-dock-toggle,
  .control-dock-core,
  .dock-skill,
  .agent-story-action { height: 44px; }
  .agent-story-step { flex-basis: 44px; width: 44px; height: 44px; }
}
/* Deep zoom (effective viewport near 200px): trim the targets, drop the
 * voice chip and the label rather than clip the send button. */
@media (max-width: 300px) {
  .composer-icon-btn,
  .composer-chip,
  .composer-send { width: 40px; height: 40px; }
  .composer-chip { display: none; }
}
@media (forced-colors: active) {
  .composer, .composer-home, .composer-send, .composer-chip, .composer-add-btn { border: 1px solid ButtonText; }
}
/* ==== end B ==== */

/* ==== Revamp 2026-09-25 · C: conversation header and transcript ==== */
/* One predictable conversation: a 48px header whose title and project share one
 * line, then a quiet reading column. Settled work folds to one "Worked for …"
 * row per turn; live work is the same row shape, so a turn finishing changes
 * the row's words, not its geometry. Chrome reads at 14px, metadata at 13px,
 * the transcript body stays at 16px. */
:root { --workspace-head-height: 48px; }

/* ---------- Header ---------- */
.thread-head {
  min-height: 0;
  gap: 12px;
  padding-inline: 16px 12px;
  border-bottom: 1px solid var(--sv-hairline);
  background: var(--sv-surface);
  font-size: var(--workspace-ui-text);
  line-height: var(--workspace-ui-leading);
}
.thread-leading { gap: 4px; }
.thread-back-btn[hidden] { display: none; }
.thread-back-btn:not([hidden]) ~ .sidebar-open-btn { display: none; }
/* Combining chats is picked in the rail, and arming it opens the destination
 * chat full screen: the rail control stays so the checkboxes can be reached. */
.app.merge-picking .thread-back-btn:not([hidden]) ~ .sidebar-open-btn { display: inline-flex; }
.thread-head .icon-btn {
  width: var(--workspace-control-height);
  height: var(--workspace-control-height);
  flex: 0 0 var(--workspace-control-height);
  border: 0;
  border-radius: 8px;
  color: var(--sv-ink-secondary);
}
.thread-head .icon-btn .icon { width: 18px; height: 18px; }
.thread-head .icon-btn:hover,
.thread-head .thread-more-btn[aria-expanded="true"] { color: var(--sv-ink); background: var(--workspace-hover); border-color: transparent; }
.thread-head .icon-btn:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 1px; }

/* Status slot · title · project · turn state, all on one line. The dot keeps
 * its 8px slot while idle so the title never shifts when a turn starts. */
.thread-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-inline-start: 4px;
}
.thread-heading > .thread-status { flex: 0 0 8px; width: 8px; height: 8px; margin: 0; }
.thread-heading > .thread-status[hidden] { display: block; visibility: hidden; }
.thread-heading > .thread-title {
  flex: 0 1 auto;
  min-width: 3rem;
  color: var(--sv-ink);
  font-size: var(--workspace-ui-text);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 20px;
}
.thread-heading > .thread-subline { flex: 0 100 auto; align-items: center; gap: 8px; min-width: 0; }
.thread-subline .thread-context {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--sv-ink-secondary);
  font-size: var(--workspace-ui-text);
  line-height: 20px;
}
.thread-subline .thread-context:empty { display: none; }
/* The project reads as a breadcrumb: a folder glyph, like the composer's. */
.thread-subline .thread-context::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2h7.5A2.5 2.5 0 0 1 21 9.5v7A2.5 2.5 0 0 1 18.5 19h-13A2.5 2.5 0 0 1 3 16.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2h7.5A2.5 2.5 0 0 1 21 9.5v7A2.5 2.5 0 0 1 18.5 19h-13A2.5 2.5 0 0 1 3 16.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .8;
}
.thread-subline .turn-status { font-size: var(--workspace-ui-meta); line-height: 20px; }
.thread-subline .turn-status::before { content: none; }
.thread-subline .thread-context:not(:empty) + .turn-status::before { content: "·"; }

.thread-actions, .thread-context-actions { gap: 4px; }
.thread-head .share-thread-button {
  height: var(--workspace-control-height);
  min-height: 0;
  min-width: 0;
  gap: 6px;
  padding-inline: 10px;
  color: var(--sv-ink);
  background: transparent;
  border: 1px solid var(--sv-hairline);
  border-radius: 8px;
  font-size: var(--workspace-ui-text);
  font-weight: 500;
}
.thread-head .share-thread-button .icon { width: 16px; height: 16px; }
.thread-head .share-thread-button:hover { background: var(--workspace-hover); }
.thread-head .share-thread-button.active { background: var(--sv-surface-sunken); }
.thread-head .share-thread-button.active::after { top: 4px; right: 4px; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--workspace-working); }
.thread-head .activity-toggle-btn { width: auto; min-width: var(--workspace-control-height); flex-basis: auto; gap: 6px; padding-inline: 8px; }
.thread-head .activity-toggle-btn .context-toggle-label { font-size: var(--workspace-ui-text); font-weight: 500; }
.thread-head .activity-toggle-btn[aria-expanded="true"] { color: var(--sv-ink); background: var(--workspace-hover); }

/* ---------- Pip invitation: one quiet line in the reading column ---------- */
/* Styled in web/pip.css; it keeps its own grid row above the transcript. */

/* ---------- Transcript ---------- */
.messages { padding-top: 24px; padding-bottom: 32px; }
/* Text scrolling out of view fades under the header or invitation edge instead
 * of being cut, so nothing reads as laid over the conversation. */
#messages { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }
.messages-inner > .msg + .msg,
.messages-inner > .msg + :is(.status-line, .work-progress-history, .plan-card, .notice),
.messages-inner > :is(.status-line, .work-progress-history, .plan-card, .notice, .agent-usage) + .msg { margin-top: 24px; }
.messages-inner > .msg.user + :is(.status-line, .work-progress-history, .plan-card) { margin-top: 12px; }
.messages-inner > :is(.status-line, .work-progress-history) + :is(.status-line, .work-progress-history, .plan-card) { margin-top: 4px; }
.messages-inner > .plan-card + .msg.assistant,
.messages-inner > :is(.status-line, .work-progress-history) + .msg.assistant { margin-top: 12px; }

/* Member prompt: a sunken 12px bubble on the right. */
.msg.user .bubble {
  max-width: min(78%, 36rem);
  padding: 10px 14px;
  color: var(--sv-ink);
  background: var(--sv-surface-sunken);
  border-radius: 12px;
  font-size: var(--sv-text-body);
  line-height: 1.5;
}
.msg.user > .msg-time { width: auto; }
.msg-time { margin-top: 6px; color: var(--sv-ink-tertiary); font-size: var(--workspace-ui-meta); line-height: 16px; }

/* Answer: full width of the reading column, no rule above it, a small mark. */
.msg.assistant { padding-top: 0; border-top: 0; }
.msg.assistant > .msg-role { min-height: 20px; margin-bottom: 8px; }
.msg.assistant .wordmark-role { height: 18px; font-size: var(--workspace-ui-text); }
.msg.assistant .wordmark-role svg { width: 16px; height: 18px; }
.msg.assistant .md { --sv-md-measure: none; font-size: var(--sv-text-body); line-height: 1.65; }
.msg.assistant .md :is(h1, h2, h3, h4) { font-weight: 600; letter-spacing: -0.01em; }
.msg.assistant .md :is(h1, h2, h3, h4):not(:first-child) { margin-top: 1.25em; }
.msg-model, .msg-receipt { color: var(--sv-ink-tertiary); font-size: var(--workspace-ui-meta); }

/* Message actions: small, quiet, and in one row with the answer's time. */
.msg-actions { gap: 0; margin-top: 4px; }
.msg-actions :is(.msg-action-btn, .response-copy-button) {
  width: 28px;
  height: 28px;
  min-width: 0;
  min-height: 0;
  flex: 0 0 28px;
  border: 0;
  border-radius: 6px;
  color: var(--sv-ink-tertiary);
}
.msg-actions :is(.msg-action-btn, .response-copy-button) .icon { width: 16px; height: 16px; }
.msg-actions :is(.msg-action-btn, .response-copy-button):hover { color: var(--sv-ink); background: var(--workspace-hover); }
.msg-actions :is(.msg-action-btn, .response-copy-button):focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 0; }
.msg-actions .msg-retry-button { min-height: 28px; border-radius: 6px; font-size: var(--workspace-ui-meta); }
/* The newest answer keeps its actions in view; older rows reveal on hover or focus. */
.messages-inner > .msg.assistant:not(:has(~ .msg.assistant)) .msg-actions { opacity: 1; }
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  .msg.assistant > .msg-time + .msg-actions { margin: 4px 0 0 4px; }
}

/* ---------- The turn row: live status and settled "Worked for …" ----------
 * Both are one 32px row (44px on touch): a 16px status slot, the label and a
 * chevron that turns when opened. Expanded detail hangs from a hairline under
 * the status slot. */
.messages-inner > .status-line[data-live-steps="1"],
.messages-inner > .work-progress-history { display: block; margin-block: 0; }
.messages-inner > .status-line[data-live-steps="1"] { padding: 10px 12px; border: 1px solid var(--sv-hairline); border-radius: 12px; background: var(--sv-surface-raised); }
.messages-inner > .work-progress-history[open] { padding: 8px 12px; border: 1px solid var(--sv-hairline); border-radius: 12px; background: var(--sv-surface-raised); }
.status-line[data-live-steps="1"] > .turn-trace-head,
.messages-inner > .work-progress-history > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 0 8px 0 4px;
  border-radius: 8px;
  color: var(--sv-ink-secondary);
  background: transparent;
  font-size: var(--workspace-ui-text);
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--sv-dur-fast) var(--sv-ease-out), color var(--sv-dur-fast) var(--sv-ease-out);
}
.messages-inner > .work-progress-history > summary::-webkit-details-marker { display: none; }
.status-line[data-live-steps="1"] > .turn-trace-head:hover,
.messages-inner > .work-progress-history > summary:hover { color: var(--sv-ink); background: var(--workspace-hover); }
.status-line[data-live-steps="1"] > .turn-trace-head:focus-visible,
.messages-inner > .work-progress-history > summary:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 0; }
/* Live status slot: the breathing working dot, centred in 16px. */
.status-line[data-live-steps="1"] > .turn-trace-head::before {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  margin-inline: 5px;
  border-radius: 50%;
}
.status-line[data-live-steps="1"] .turn-trace-heading { flex: 0 1 auto; min-width: 0; }
.status-line[data-live-steps="1"] .turn-trace-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-line[data-live-steps="1"] .turn-trace-chevron { color: var(--sv-ink-tertiary); }
.status-line[data-live-steps="1"] .turn-trace-chevron .icon { width: 14px; height: 14px; }
/* Settled: a quiet check in the same slot, the recorded total, then the chevron. */
.messages-inner > .work-progress-history > summary::before { content: none; }
.messages-inner > .work-progress-history > summary::after {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: var(--sv-ink-tertiary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--sv-dur-base) var(--sv-ease-out);
}
.messages-inner > .work-progress-history[open] > summary::after { transform: rotate(90deg); }
.messages-inner > .work-progress-history .work-progress-done { gap: 8px; color: inherit; }
.messages-inner > .work-progress-history .work-progress-done .icon { width: 16px; height: 16px; color: var(--sv-ink-tertiary); }
.messages-inner > .work-progress-history .agent-progress-summary { font-size: var(--workspace-ui-meta); }
.messages-inner > .work-progress-history .agent-progress-summary::before { content: "· "; }

/* Opened detail: steps hang from a hairline under the status slot. */
.status-line[data-live-steps="1"] > .turn-trace-content,
.messages-inner > .work-progress-history > agent-progress {
  width: auto;
  max-width: min(100%, 42rem);
  margin: 4px 0 4px 11px;
  padding: 2px 0 2px 16px;
  border-left: 1px solid var(--sv-hairline);
  color: var(--sv-ink-secondary);
}
.status-line[data-live-steps="1"][data-trace-collapsed="1"] > .turn-trace-content { margin-block: 0; padding-block: 0; border-left-color: transparent; }
.messages-inner > .work-progress-history .agent-progress-row,
.status-line[data-live-steps="1"] .agent-progress-row { font-size: var(--workspace-ui-meta); padding-block: 4px; }
.status-line[data-live-steps="1"] .turn-trace-history > summary { min-height: 32px; font-size: var(--workspace-ui-meta); }
.status-line[data-live-steps="1"] .turn-trace-note { margin: 0; font-size: var(--workspace-ui-meta); color: var(--sv-ink-secondary); }
.turn-commentary-latest, .turn-reasoning-latest { font-size: var(--workspace-ui-meta); }
.messages-inner :is(.work-progress-history, .status-line) :is(.turn-step-time, .agent-progress-status, .agent-progress-summary) { font-size: var(--workspace-ui-meta); }

/* Plan card rows share the turn row's type and hover plate. */
/* One track no wider than the reading column: the summary's nowrap text is its
 * min-content, so an implicit auto track grew to the whole assumption and the
 * opened review ran off a phone screen (clipped by .messages, not scrollable). */
.messages-inner > .plan-card { grid-template-columns: minmax(0, 1fr); justify-items: start; width: auto; max-width: 100%; margin-top: 4px; font-size: var(--workspace-ui-text); }
.messages-inner > .plan-card .plan-card-section { max-width: 100%; }
.messages-inner > .plan-card .plan-card-section > summary { display: inline-flex; max-width: 100%; min-height: 32px; padding-inline: 4px 8px; }
.messages-inner > .plan-card .plan-card-section > summary::after { content: "›"; }
.messages-inner > .plan-card .plan-card-section > summary:hover { background: var(--workspace-hover); }
.messages-inner > .plan-card .plan-card-list { font-size: var(--workspace-ui-meta); }

/* Agents & skills provenance: kept at the top of the chat as quiet metadata,
 * not a card competing with the conversation. */
.messages-inner > .agent-usage {
  margin: 0 0 8px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--sv-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--sv-ink-secondary);
  font-size: var(--workspace-ui-meta);
  line-height: var(--workspace-ui-leading);
}
.messages-inner > .agent-usage .agent-usage-heading { margin: 0 0 6px; color: var(--sv-ink); font-size: var(--workspace-ui-meta); font-weight: 500; }
.messages-inner > .agent-usage .agent-usage-group { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 24px; }
.messages-inner > .agent-usage .agent-usage-group + .agent-usage-group { margin-top: 2px; }
.messages-inner > .agent-usage .agent-usage-label { padding-top: 0; color: var(--sv-ink-tertiary); font-size: inherit; font-weight: 400; }
.messages-inner > .agent-usage .agent-usage-empty { padding-top: 0; color: var(--sv-ink-tertiary); }
.messages-inner > .agent-usage .agent-skill { padding: 1px 6px; border-radius: 6px; }
.messages-inner > .agent-usage .agent-usage-items { gap: 4px 12px; }
.messages-inner > .agent-usage .agent-usage-note { margin-top: 6px; }

/* ---------- Touch and phone ---------- */
@media (pointer: coarse), (max-width: 640px) {
  .status-line[data-live-steps="1"] > .turn-trace-head,
  .messages-inner > .work-progress-history > summary,
  .messages-inner > .plan-card .plan-card-section > summary { min-height: 44px; }
  .msg-actions :is(.msg-action-btn, .response-copy-button) { width: 44px; height: 44px; flex-basis: 44px; }
  .msg-actions .msg-retry-button { min-height: 44px; }
}
@media (max-width: 760px) {
  .phone-ui { --workspace-head-height: 56px; }
  .phone-ui .thread-head { gap: 4px; padding-inline: 4px; }
  .phone-ui .thread-head .icon-btn { width: 44px; height: 44px; flex-basis: 44px; }
  .phone-ui .thread-head .icon-btn .icon { width: 22px; height: 22px; }
  .phone-ui .thread-head .share-thread-button { height: 44px; }
  .phone-ui .thread-actions { flex-shrink: 0; gap: 0; }
  .phone-ui .thread-heading { padding-inline-start: 0; }
  .phone-ui .thread-heading > .thread-title { display: block; min-width: 0; font-size: var(--sv-text-body); line-height: 22px; }
  /* A phone chat header is back · title · overflow; the project and turn state
   * are in the chat list row, the status dot and the composer. */
  .phone-ui .app[data-surface="chat"] .thread-heading > .thread-subline { display: none; }
  /* Detached coding work keeps its name and clock visible after the turn.
   * Two lines fit the existing phone header without shrinking its controls. */
  .phone-ui .thread-heading:has(#turn-status[data-phase="working"]:not([hidden])) {
    display: grid; grid-template-columns: 8px minmax(0, 1fr); row-gap: 0;
  }
  .phone-ui .thread-heading:has(#turn-status[data-phase="working"]:not([hidden])) > .thread-status { grid-row: 1 / 3; }
  .phone-ui .app[data-surface="chat"] .thread-heading:has(#turn-status[data-phase="working"]:not([hidden])) > .thread-subline { display: flex; grid-column: 2; }
  .phone-ui .thread-subline:has(#turn-status[data-phase="working"]:not([hidden])) .thread-context { display: none; }
  .phone-ui #turn-status[data-phase="working"]::before { content: none; }
  .phone-ui #turn-status[data-phase="working"] .turn-status-meta { display: inline; flex-shrink: 0; }

  .phone-ui .app[data-surface="chat"] .thread-back-btn:not([hidden]) + .sidebar-open-btn + .thread-heading { padding-inline-start: 0; }
  .phone-ui .messages { padding-top: 16px; }
  .phone-ui .msg.user .bubble { max-width: 88%; }
  /* The answer's time and its actions share one row, as on desktop. */
  .phone-ui .msg.assistant > .msg-time { display: inline-block; vertical-align: middle; }
  .phone-ui .msg.assistant > .msg-time + .msg-actions { display: inline-flex; vertical-align: middle; margin: 0 0 0 4px; }
  /* The model receipt keeps its own row on the answer's left edge. */
  .phone-ui .msg.assistant > .msg-time ~ .msg-model { display: flex; margin-top: var(--sv-space-2); }
  .phone-ui .messages-inner > .agent-usage .agent-usage-group { grid-template-columns: 104px minmax(0, 1fr); }
  /* Spacing comes from the row above (margin-top), never a trailing margin. */
  .phone-ui .messages-inner > .msg { margin-bottom: 0; }
  /* A prompt's time and its Reply / Edit share one row under the bubble. */
  .phone-ui .messages-inner > .msg.user:not([data-steering]) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 4px; }
  .phone-ui .messages-inner > .msg.user:not([data-steering]) > * { grid-column: 1 / -1; justify-self: end; }
  .phone-ui .messages-inner > .msg.user:not([data-steering]) > .msg-time { grid-column: 2; width: auto; margin-top: 0; }
  .phone-ui .messages-inner > .msg.user:not([data-steering]) > .msg-actions { grid-column: 3; width: auto; margin-top: 0; }
}
/* ==== end C ==== */
/* Locked project (web/app/32-thread-view.js): outside collaborators mean the
 * agent has no shell here. Attention, not danger: a person can change it. */
.thread-locked { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--sv-attention); font-size: var(--sv-text-caption); white-space: nowrap; cursor: help; }
.thread-locked .icon { width: 12px; height: 12px; }
.thread-locked[hidden] { display: none; }

/* Guardrails (web/app/52-guardrails.js): an operator's own switches. A switch
 * that is off is failure-adjacent, so off states wear --sv-danger; the list
 * itself stays neutral. */
.guardrails-dialog { width: min(calc(100% - (var(--sv-space-6) * 2)), 40rem); }
/* Heading and actions stay put; only the list scrolls on a short viewport. */
.guardrails-card { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: var(--sv-space-4); max-height: min(90dvh, 48rem); overflow: hidden; }
.guardrails-list { display: grid; align-content: start; min-height: 0; overflow-y: auto; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); }
.guardrail-option { display: grid; grid-template-columns: auto 1fr; gap: var(--sv-space-3); padding: var(--sv-space-3); cursor: pointer; }
.guardrail-option + .guardrail-option { border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.guardrail-option:hover { background: var(--sv-surface-sunken); }
.guardrail-option input { margin-top: 3px; accent-color: var(--sv-ink); }
.guardrail-option strong, .guardrail-option span { display: block; }
.guardrail-option span { margin-top: 2px; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); line-height: 1.35; }
.guardrail-option:has(input:not(:checked)) strong { color: var(--sv-danger); }
.guardrails-dialog.is-ultra #guardrails-kicker { color: var(--sv-danger); }
#guardrails-btn.is-unguarded .profile-menu-count { color: var(--sv-inverse-ink); background: var(--sv-danger); }

/* ---------- Task audit (web/app/52-task-audit.js, platform admins) ----------
 * A reading surface for one exec job at a time: dense facts, a nested agent
 * timeline and verbatim payloads. Monospace only where the value is machine
 * text (ids, hashes, JSON); everything else keeps the product's one text size. */
.exec-jobs-dialog { width: min(calc(100% - (var(--sv-space-6) * 2)), 76rem); }
.exec-jobs-card { max-height: min(90dvh, 72rem); overflow-y: auto; }
.exec-jobs-body { display: grid; gap: var(--sv-space-4); min-width: 0; }
.exec-filters { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }
.exec-filters :is(select, input) {
  min-height: 40px; min-width: 0; flex: 1 1 10rem; 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;
}
.exec-filters input[type="search"] { flex-basis: 16rem; }
.exec-table-wrap { overflow-x: auto; min-width: 0; }
.exec-jobs-table, .exec-files-table { width: 100%; border-collapse: collapse; font-size: var(--sv-text-small); }
.exec-jobs-table :is(th, td), .exec-files-table :is(th, td) {
  padding: var(--sv-space-2) var(--sv-space-3); text-align: left; vertical-align: top;
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}
.exec-jobs-table th, .exec-files-table th { color: var(--sv-ink-secondary); font-weight: 500; white-space: nowrap; }
.exec-job-row { cursor: pointer; transition: background var(--sv-dur-instant) var(--sv-ease-out); }
.exec-job-row:hover { background: var(--workspace-hover); }
.exec-job-name { display: grid; gap: var(--sv-space-1); min-width: 12rem; }
.exec-link {
  padding: 0; color: var(--sv-ink); background: none; border: 0; font: inherit; font-weight: 500;
  text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere;
}
.exec-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.exec-mono { font-family: var(--sv-font-mono); overflow-wrap: anywhere; }
.exec-sha { max-width: 18rem; font-size: var(--sv-text-caption); }
.exec-muted { color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); overflow-wrap: anywhere; }
.exec-empty { margin: 0; color: var(--sv-ink-secondary); }
.exec-error, .exec-error-line { margin: 0; color: var(--sv-danger); overflow-wrap: anywhere; }
.exec-error-line { font-size: var(--sv-text-caption); }
.exec-more, .exec-back { justify-self: start; }
.exec-badge {
  display: inline-block; padding: 0 var(--sv-space-2); border-radius: var(--sv-radius);
  font-size: var(--sv-text-caption); line-height: 1.6; white-space: nowrap;
  color: var(--sv-ink); background: var(--sv-surface-sunken);
}
.exec-badge-live { color: var(--workspace-working-ink); box-shadow: inset 0 0 0 var(--sv-hairline-w) var(--workspace-working); background: transparent; }
.exec-badge-danger { color: var(--sv-danger); box-shadow: inset 0 0 0 var(--sv-hairline-w) var(--sv-danger); background: transparent; }
.exec-badge-quiet { color: var(--sv-ink-secondary); }
.exec-status-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); }
.exec-live { color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); }
.exec-section { display: grid; gap: var(--sv-space-3); min-width: 0; padding-top: var(--sv-space-4); border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.exec-section-title { margin: 0; font-size: var(--sv-text-body); font-weight: 600; }
.exec-sub { margin: var(--sv-space-2) 0 0; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); font-weight: 500; }
.exec-facts { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: var(--sv-space-1) var(--sv-space-4); margin: 0; font-size: var(--sv-text-small); }
.exec-facts dt { color: var(--sv-ink-secondary); }
.exec-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.exec-disclosure > summary { cursor: pointer; font-size: var(--sv-text-small); font-weight: 500; }
.exec-pre {
  max-height: 32rem; margin: var(--sv-space-2) 0 0; padding: var(--sv-space-3); overflow: auto;
  font-family: var(--sv-font-mono); font-size: var(--sv-text-caption); white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--sv-ink); background: var(--sv-surface-sunken); border-radius: var(--sv-radius);
}
.exec-preview { color: var(--sv-ink-secondary); }
.exec-blob-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); margin-top: var(--sv-space-2); }
.exec-blob-load, .exec-download { height: 36px; padding: 0 var(--sv-space-3); font-size: var(--sv-text-caption); }
.exec-agent { min-width: 0; padding: var(--sv-space-2) 0 var(--sv-space-2) var(--sv-space-3); border-left: var(--sv-hairline-w) solid var(--sv-hairline-strong); }
.exec-agent > summary, .exec-tool > summary, .exec-row-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sv-space-1) var(--sv-space-2); font-size: var(--sv-text-small);
}
.exec-agent > summary, .exec-tool > summary { cursor: pointer; }
.exec-agent-body, .exec-tool-body { display: grid; gap: var(--sv-space-2); min-width: 0; margin-top: var(--sv-space-2); }
.exec-agent-body p, .exec-tool-body p { margin: 0; }
.exec-kind { color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.exec-row-label { font-weight: 500; overflow-wrap: anywhere; }
.exec-row { min-width: 0; padding: var(--sv-space-2) var(--sv-space-3); background: var(--sv-surface); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); }
.exec-marker { background: var(--sv-surface-sunken); }
.exec-text { margin-top: var(--sv-space-2); white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--sv-leading-body); }
.exec-thinking { margin-top: var(--sv-space-2); }
.exec-image { display: grid; justify-items: start; gap: var(--sv-space-1); min-width: 0; }
.exec-image-view {
  max-width: 100%; max-height: 32rem; height: auto; object-fit: contain;
  background: var(--sv-surface-sunken); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius);
}
@media (max-width: 640px) {
  .exec-facts { grid-template-columns: minmax(0, 1fr); }
  .exec-facts dd { margin-bottom: var(--sv-space-2); }
  .exec-filters :is(select, input, button) { min-height: 44px; flex-basis: 100%; }
  .exec-blob-load, .exec-download { height: 44px; }
  .exec-agent { padding-left: var(--sv-space-2); }
}
/* ---------- Work (web/app/52-work.js): contracts for platform admins, and the
 * chat Workboard's request activity ----------
 * Status colour is restrained: working, waiting on a person and failure each keep
 * their one role colour on a dot, a badge outline or a thin bar; everything else is
 * ink. Sentences come from the server; nothing here decorates them. */
.work-dialog { width: min(calc(100% - (var(--sv-space-6) * 2)), 64rem); }
.work-card { max-height: min(90dvh, 72rem); overflow-y: auto; }
.work-body { display: grid; gap: var(--sv-space-4); min-width: 0; }
.work-section { display: grid; gap: var(--sv-space-3); min-width: 0; padding-top: var(--sv-space-4); border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.work-section:first-child { padding-top: 0; border-top: 0; }
.work-section-title { display: flex; align-items: baseline; gap: var(--sv-space-2); margin: 0; font-size: var(--sv-text-body); font-weight: 600; }
.work-count { color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); font-weight: 500; font-variant-numeric: tabular-nums; }
.work-list { display: grid; gap: var(--sv-space-2); margin: 0; padding: 0; list-style: none; }
.work-row {
  display: grid; gap: var(--sv-space-1); min-width: 0; padding: var(--sv-space-2) var(--sv-space-3);
  border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface);
}
.work-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1) var(--sv-space-2); min-width: 0; }
.work-row-head .work-title { flex: 1 1 12rem; min-width: 0; }
.work-line { margin: 0; min-width: 0; color: var(--sv-ink); font-size: var(--sv-text-small); overflow-wrap: anywhere; }
.work-meta { margin: 0; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); overflow-wrap: anywhere; }
.work-row[data-tone="danger"] .work-line { color: var(--sv-danger); }
.work-row[data-tone="attention"] .work-line { color: var(--sv-attention); }
.work-stop { height: 32px; padding: 0 var(--sv-space-3); font-size: var(--sv-text-caption); }
.work-badge {
  display: inline-block; padding: 0 var(--sv-space-2); border-radius: var(--sv-radius);
  font-size: var(--sv-text-caption); line-height: 1.6; white-space: nowrap;
  color: var(--sv-ink-secondary); box-shadow: inset 0 0 0 var(--sv-hairline-w) var(--sv-hairline-strong);
}
.work-badge[data-tone="working"] { color: var(--workspace-working-ink); box-shadow: inset 0 0 0 var(--sv-hairline-w) var(--workspace-working); }
.work-badge[data-tone="attention"] { color: var(--sv-attention); box-shadow: inset 0 0 0 var(--sv-hairline-w) var(--sv-attention); }
.work-badge[data-tone="danger"] { color: var(--sv-danger); box-shadow: inset 0 0 0 var(--sv-hairline-w) var(--sv-danger); }
.work-badge[data-tone="done"] { color: var(--sv-ink); }
.work-phase { display: grid; gap: var(--sv-space-1); min-width: 0; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); font-variant-numeric: tabular-nums; }
.work-bar { display: block; block-size: 3px; max-inline-size: 24rem; overflow: hidden; border-radius: 2px; background: var(--sv-surface-sunken); }
.work-bar-fill { display: block; block-size: 100%; background: var(--workspace-working); transition: inline-size var(--sv-dur-base) var(--sv-ease-out); }
.work-bar[data-over="true"] .work-bar-fill { background: var(--sv-danger); }
.work-journal { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; font-size: var(--sv-text-small); }
.work-journal-line {
  display: grid; grid-template-columns: minmax(10rem, max-content) minmax(8rem, max-content) minmax(0, 1fr); gap: var(--sv-space-1) var(--sv-space-3);
  padding: var(--sv-space-2) 0; border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
}
.work-journal-time { color: var(--sv-ink-secondary); font-variant-numeric: tabular-nums; }
.work-journal-what { font-weight: 500; }
.work-journal-note { min-width: 0; color: var(--sv-ink-secondary); overflow-wrap: anywhere; }
.work-journal-line[data-state="abandoned"] .work-journal-what, .work-journal-line[data-state="failed"] .work-journal-what { color: var(--sv-danger); }
.work-tree { display: grid; gap: var(--sv-space-1); margin: 0; padding: 0 0 0 var(--sv-space-3); list-style: none; border-left: var(--sv-hairline-w) solid var(--sv-hairline); }
.work-tree-root { padding-left: 0; border-left: 0; }
.work-node { display: grid; gap: var(--sv-space-1); min-width: 0; }
.work-node-body { position: relative; display: grid; gap: 2px; min-width: 0; padding-left: var(--sv-space-3); font-size: var(--sv-text-small); }
.work-node-body::before {
  content: ""; position: absolute; left: 0; top: .5em; inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--sv-ink-tertiary);
}
.work-node[data-tone="working"] > .work-node-body::before { background: var(--workspace-working); }
.work-node[data-tone="attention"] > .work-node-body::before { background: var(--sv-attention); }
.work-node[data-tone="danger"] > .work-node-body::before { background: var(--sv-danger); }
.work-node[data-tone="done"] > .work-node-body::before { background: var(--sv-ink-secondary); }
.work-node-title { font-weight: 500; overflow-wrap: anywhere; }
.work-node-current { text-decoration: none; }
.work-node-line { color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); overflow-wrap: anywhere; }
.work-node[data-tone="danger"] > .work-node-body > .work-node-line { color: var(--sv-danger); }
.work-node[data-tone="attention"] > .work-node-body > .work-node-line { color: var(--sv-attention); }
.work-request-body { display: grid; gap: var(--sv-space-3); padding: 0 var(--sv-space-6) var(--sv-space-4); min-width: 0; }
.work-request { display: grid; gap: var(--sv-space-2); min-width: 0; }
.work-request-state { margin: 0; font-size: var(--workspace-ui-text); line-height: var(--workspace-ui-leading); font-weight: 400; color: var(--sv-ink); overflow-wrap: anywhere; }
.work-request-state[data-tone="working"] { color: var(--workspace-working-ink); }
.work-request-state[data-tone="attention"] { color: var(--sv-attention); }
.work-request-state[data-tone="danger"] { color: var(--sv-danger); }
.work-request-section summary { cursor: pointer; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); overflow-wrap: anywhere; min-height: var(--workspace-control-height); align-content: center; border-radius: var(--sv-radius); }
.work-request-section summary:hover { color: var(--sv-ink); background: var(--workspace-hover); }
.work-request-section summary:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 2px; }
.work-request-details > .work-tree, .work-request-earlier > .work-tree { margin-top: var(--sv-space-2); }
.work-request-earlier { padding-left: var(--sv-space-3); }
/* "Files changed": one quiet text button per turn that changed workspace files. */
.work-request-files { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); min-width: 0; }
.work-request-files-btn { min-height: var(--workspace-control-height); padding: 0 var(--sv-space-3); color: var(--sv-ink-secondary); background: transparent; border: var(--sv-hairline-w) solid var(--sv-hairline-strong); border-radius: var(--sv-radius); font: inherit; font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); cursor: pointer; }
.work-request-files-btn:hover { color: var(--sv-ink); background: var(--workspace-hover); }
.work-request-files-btn:focus-visible { outline: 2px solid var(--sv-ink-secondary); outline-offset: 2px; }
@media (max-width: 760px), (pointer: coarse) {
  .work-request-section summary { min-height: 44px; }
  .work-request-files-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .work-bar-fill { transition: none; } }
@media (max-width: 640px) {
  .work-journal-line { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .work-stop { height: 44px; }
}

/* A quiet, stationary status avoids moving the list or animating a drag. */
.phone-pull-refresh {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--sv-z-toast);
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  padding: var(--sv-space-2) var(--sv-space-3);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-raised);
  color: var(--sv-ink-secondary);
  font: 400 var(--workspace-ui-meta)/var(--workspace-ui-leading) var(--sv-font-sans);
  pointer-events: none;
  white-space: nowrap;
}
.phone-pull-refresh[hidden] { display: none; }

/* Tool markers keep the trace compact; raw details open on deliberate action. */
.turn-step .activity-tool-entry-summary {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: var(--workspace-control-height);
  padding: 0 var(--sv-space-2);
  border-radius: var(--sv-radius);
  font-size: inherit;
}
.turn-step .activity-tool-entry-summary::after { content: "›"; margin-left: auto; }
.turn-step details[open] > .activity-tool-entry-summary::after { transform: rotate(90deg); }
.turn-step .activity-tool-disclosure > .agent-progress-text { padding: var(--sv-space-2); }
.status-step-note { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px), (pointer: coarse) {
  .turn-step .activity-tool-entry-summary { min-height: 44px; }
}

/* File tabs share the artifact reader's document and chrome. */
.browser-file-text { margin: 0; padding: var(--sv-space-4); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sv-font-mono); color: var(--sv-ink); }
.browser-file-media { display: block; width: 100%; max-width: 100%; min-height: 0; object-fit: contain; }
iframe.browser-file-media { flex: 1; border: 0; min-height: 60vh; }

/* ---------- Share chat (Share chat slice: one central Share chat) ----------
 * web/app/48b-talking-to-share.js and 48c-what-share-knows.js. The member's
 * Share chat is an ordinary thread; `.app[data-share-chat]` gives it the
 * message-chat look. Ordinary chats keep their own look. */
#share-count[hidden], #phone-share-dot[hidden] { display: none; }
#phone-share-dot { background: var(--sv-ink); }
.phone-ui .phone-navigation:not([hidden]) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* Back to Share replaces the usual back affordance in the chat it opened. */
.thread-head .back-share-btn { width: auto; flex-basis: auto; gap: 2px; padding-inline: 4px 10px; font-size: var(--workspace-ui-text); font-weight: 500; }
.thread-head .back-share-btn[hidden], .app[data-from-share] .thread-back-btn { display: none; }

/* Turn rhythm: 10px inside a run of Share messages, 20px before a new turn. */
.app[data-share-chat] .messages-inner > :is(.msg, .smsg, .share-day, .share-empty) { margin-top: 20px; }
.app[data-share-chat] .messages-inner > :is(.msg, .smsg)[data-run-continues] { margin-top: 10px; }
.app[data-share-chat] .messages-inner > :first-child { margin-top: 0; }
.share-day { display: flex; align-items: center; gap: 12px; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); }
.share-day::before, .share-day::after { content: ""; flex: 1; height: 1px; background: var(--sv-hairline); }
.share-empty { margin-block: 0; color: var(--sv-ink-secondary); font-size: var(--sv-text-body); }

/* Share's messages: left bubbles beside one avatar per run. */
.smsg { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; align-items: start; color: var(--sv-ink); font-size: var(--sv-text-body); line-height: var(--sv-leading-body); }
/* Share's avatar: the S on a machined graphite disc (graphite to aluminum, key
 * light top left, still at rest). Inset light and shade only, no drop shadow. */
.smsg-av { position: relative; display: grid; place-items: center; box-sizing: border-box; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; color: var(--sv-white); }
/* All of the disc's paint lives here, so no theme rule can outrank the
 * forced-colors look below (.theme-dark .smsg-av once kept its shading there). */
@media (forced-colors: none) {
  .smsg-av {
    background: radial-gradient(circle at 32% 26%, var(--sv-gray-mid) 0%, var(--sv-gray-dark) 26%, var(--sv-gray-xdark) 58%, var(--sv-black) 100%);
    box-shadow: inset 0 1px 1px color-mix(in srgb, var(--sv-white) 55%, transparent), inset 0 -2px 3px color-mix(in srgb, var(--sv-black) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--sv-black) 12%, transparent); }
  .smsg-av::after { content: ""; position: absolute; inset: 9% 22% 52% 18%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--sv-white) 38%, transparent), transparent 70%); pointer-events: none; }
  .theme-dark .smsg-av { box-shadow: inset 0 1px 1px color-mix(in srgb, var(--sv-white) 55%, transparent), inset 0 -2px 3px color-mix(in srgb, var(--sv-black) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--sv-white) 16%, transparent); }
}
/* The S itself stays pure white (the brand allows black or white only), whole,
 * sized by height. #brand-symbol's paths paint currentColor, so `color` (not
 * `fill`) is what sets the S. */
.smsg-av > .smsg-s { position: relative; z-index: 1; display: block; width: auto; height: 14px; aspect-ratio: 828.3 / 933.4; color: var(--sv-white); fill: currentColor; stroke: none; }
/* The rail and phone Share buttons carry the same S, in brand ink, in their
 * neighbours' icon box (the rail's is set by an id rule, hence the selector). */
#sidebar .sidebar-primary-nav > .sidebar-nav-btn > .icon.share-s { width: 16px; height: 14px; flex: 0 0 16px; color: var(--sv-brand-ink); fill: currentColor; stroke: none; }
.phone-navigation .icon.share-s { width: 20px; height: 17px; color: var(--sv-brand-ink); fill: currentColor; stroke: none; }
/* The current destination's rail plate is the inverse surface (near black in
 * light, light grey in dark), where brand ink vanishes: the S takes the other
 * brand ink there. The phone bar lays no plate in the Share chat, so it keeps
 * brand ink. Forced colors paint their own plate, so this stays out of them. */
@media (forced-colors: none) {
  #sidebar .sidebar-primary-nav > .sidebar-nav-btn.active > .icon.share-s { color: var(--sv-white); }
  .theme-dark #sidebar .sidebar-primary-nav > .sidebar-nav-btn.active > .icon.share-s { color: var(--sv-black); }
}
@media (forced-colors: active) {
  .smsg-av { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; }
  .smsg-av > .smsg-s { color: CanvasText; }
  /* An svg's UA forced-color-adjust (preserve-parent-color) keeps an author
   * color, so the S inherits the button's forced ink explicitly. */
  #sidebar .sidebar-primary-nav > .sidebar-nav-btn > .icon.share-s, .phone-navigation .icon.share-s { color: inherit; }
}
:is(.smsg, .msg)[data-run-continues] > .smsg-av { visibility: hidden; }
/* One 8px step through a message: bubble, answer buttons and details are
 * spaced by this row gap alone; none of them adds padding or margin. */
.smsg-main { grid-column: 2; display: grid; gap: 8px 6px; justify-items: start; min-width: 0; }
.smsg-bubble { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start; min-width: 0; max-width: min(100%, 38rem); padding: 12px 16px; overflow-wrap: anywhere; border-radius: 12px; background: var(--workspace-bubble); }
.smsg-head, .smsg-body, .smsg-note, .smsg-more { margin: 0; }
.smsg-head { font-weight: 500; }
.smsg-body { white-space: pre-line; }
.smsg-note, .smsg-more { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.smsg-list { display: grid; width: 100%; margin: 0; padding: 0; list-style: none; }
.smsg-list li { min-width: 0; }
.smsg-list li + li { border-top: 1px solid var(--sv-hairline); }
.smsg-link { display: grid; grid-template-columns: 16px minmax(0, 1fr) 12px; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 4px; border: 0; border-radius: var(--sv-radius); background: transparent; color: var(--sv-ink); font: inherit; font-size: var(--workspace-ui-text); text-align: left; text-decoration: none; cursor: pointer; }
.smsg-link:hover { background: var(--workspace-hover); }
.smsg-link .icon { width: 16px; height: 16px; color: var(--sv-ink-secondary); }
.smsg-link .icon:last-child { width: 12px; height: 12px; transform: rotate(-90deg); }
.smsg-row-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.smsg-row-copy strong { font-weight: 500; }
.smsg-row-copy small { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.smsg-art { width: min(100%, 360px); }
.smsg-art .artifact-card-delete { display: none; }
.smsg-source-row { display: flex; flex-wrap: wrap; align-items: start; gap: 0 16px; width: 100%; }
.smsg-from { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 0; border: 0; border-radius: var(--sv-radius); background: transparent; color: var(--sv-ink-secondary); font: inherit; font-size: var(--workspace-ui-meta); cursor: pointer; }
.smsg-from:hover { color: var(--sv-ink); }
.smsg-from .icon { width: 14px; height: 14px; }
.share-details { flex: 1; min-width: 100px; max-width: 100%; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.share-details summary { min-height: 28px; padding: 4px 0; cursor: pointer; }
.share-details p { margin: 4px 0 0; white-space: pre-line; }
.smsg-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.smsg-done { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.smsg-done .icon { width: 14px; height: 14px; }

/* Every message's time stays shown, so a member can find one again. Sender,
 * kind and actions rest hidden (still in layout, never over the bubble);
 * hover, keyboard focus or the details control reveal them. */
.smsg-foot { display: flex; align-items: center; gap: 4px; min-height: 24px; max-width: 100%; }
.smsg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); }
.smsg-meta > * + *::before { content: "\00B7"; margin-right: 6px; }
.msg-info { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--sv-radius); background: transparent; color: var(--sv-ink-secondary); cursor: pointer; }
.msg-info .icon { width: 14px; height: 14px; }
.msg-info:hover { background: var(--workspace-hover); }
.msg-info[aria-expanded="true"] .icon { transform: rotate(180deg); }
.app[data-share-chat] .messages-inner > :is(.smsg, .msg) :is(.smsg-meta > .kind-label, .msg-info),
.app[data-share-chat] .messages-inner > .msg > :is(.msg-author, .msg-model, .msg-actions) { opacity: 0; transition: opacity var(--sv-dur-fast) var(--sv-ease-out); }
.app[data-share-chat] .messages-inner > :is(.smsg, .msg):is(:hover, :focus-within, [data-meta-open]) :is(.smsg-meta > .kind-label, .msg-info),
.app[data-share-chat] .messages-inner > .msg:is(:hover, :focus-within, [data-meta-open]) > :is(.msg-author, .msg-model, .msg-actions) { opacity: 1; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .smsg-main { grid-template-columns: minmax(0, max-content) minmax(24px, max-content); column-gap: 6px; align-items: end; justify-content: start; }
  .smsg-main > * { grid-column: 1 / -1; }
  .smsg-main > .smsg-bubble { grid-column: 1; grid-row: 1; }
  .smsg-main > .smsg-foot { grid-column: 2; grid-row: 1; }
}

/* Share's real replies in the same bubble, beside the avatar. */
.app[data-share-chat] .messages-inner > .msg.assistant:not([hidden]) { position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; padding-left: 36px; }
.app[data-share-chat] .messages-inner > .msg.assistant > * { flex: 0 0 100%; min-width: 0; }
.app[data-share-chat] .messages-inner > .msg.assistant > :is(.msg-time, .msg-model, .msg-actions) { flex: 0 0 auto; width: auto; margin-top: 4px; }
.app[data-share-chat] .messages-inner > .msg.assistant > .msg-info { flex: none; margin-top: 4px; }
.app[data-share-chat] .messages-inner > .msg.assistant > .smsg-av { position: absolute; top: 0; left: 0; }
.app[data-share-chat] .messages-inner > .msg.assistant > .msg-role { display: none; }
.app[data-share-chat] .messages-inner > .msg.assistant > .md { flex-basis: auto; max-width: min(100%, 38rem); padding: 12px 16px; border-radius: 12px; background: var(--workspace-bubble); }
.app[data-share-chat] .messages-inner > .msg.assistant > .md > :first-child { margin-top: 0; }
.app[data-share-chat] .messages-inner > .msg.assistant > .md > :last-child { margin-bottom: 0; }

/* Your messages: right, emphasis bubble, details under it on one right edge. */
.app[data-share-chat] .messages-inner > .msg.user:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-auto-flow: row dense; align-items: center; column-gap: 4px; }
.app[data-share-chat] .messages-inner > .msg.user > * { grid-column: 1 / -1; justify-self: end; }
.app[data-share-chat] .messages-inner > .msg.user > .msg-time { grid-column: 2; width: auto; margin-top: 4px; }
.app[data-share-chat] .messages-inner > .msg.user > .msg-info { grid-column: 3; margin-top: 4px; }
.app[data-share-chat] .messages-inner > .msg.user > .msg-author { width: auto; margin-bottom: 4px; }
/* With a mouse, hover actions take the free space left of the time. */
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  .app[data-share-chat] .messages-inner > .msg.user:not([data-steering]) > .msg-actions { grid-column: 1; }
}
.app[data-share-chat] .msg.user .bubble { max-width: min(85%, 34rem); padding: 12px 16px; border-radius: 12px; background: var(--sv-emphasis-surface); color: var(--sv-emphasis-ink); font-size: var(--sv-text-body); }
.app[data-share-chat] .msg.user .bubble .message-attachments { max-width: 100%; }

/* The composer's pending photos are removable thumbnails in Share. */
.app[data-share-chat] .composer .attachment-chip.attachment-image { position: relative; padding: 4px; }
.app[data-share-chat] .composer .attachment-chip.attachment-image img { width: 56px; height: 56px; flex-basis: 56px; border-radius: var(--sv-radius); object-fit: cover; }
.app[data-share-chat] .composer .attachment-chip.attachment-image .attachment-chip-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phones and coarse pointers: every control a 44px target. */
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .app[data-share-chat] .messages-inner > :is(.smsg, .msg) .msg-info { opacity: 1; width: 44px; height: 44px; }
  .smsg-link, .smsg-from, .share-details summary, .smsg-acts .btn { min-height: 44px; }
  .smsg { column-gap: 10px; }
  .attachment-viewer-actions .icon-btn { min-width: 44px; min-height: 44px; }
  .thread-head .back-share-btn { min-width: 44px; min-height: 44px; }
  /* A short reply leaves room beside it; its details still go under, as a
   * Share message's do here: one row after everything the reply holds. */
  .app[data-share-chat] .messages-inner > .msg.assistant:not([hidden]) { display: grid; grid-template-columns: repeat(4, auto) minmax(0, 1fr); grid-auto-flow: row dense; align-items: center; }
  .app[data-share-chat] .messages-inner > .msg.assistant > * { grid-column: 1 / -1; }
  .app[data-share-chat] .messages-inner > .msg.assistant > .md { justify-self: start; }
  .app[data-share-chat] .messages-inner > .msg.assistant > .msg-time { grid-column: 1; }
  .app[data-share-chat] .messages-inner > .msg.assistant > .msg-model { grid-column: 2; }
  .app[data-share-chat] .messages-inner > .msg.assistant > .msg-actions { grid-column: 3; }
  .app[data-share-chat] .messages-inner > .msg.assistant > .msg-info { grid-column: 4; }
}

/* Context panel: Watching, Reach me, Knows about you. */
.share-tab { display: grid; align-content: start; gap: 12px; min-height: 0; padding: 12px 16px 24px; overflow: auto; }
.share-tab[hidden] { display: none; }
.share-tab .panel-note { margin: 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); line-height: var(--workspace-ui-leading); }
.share-tab-heading { margin: 4px 0 0; font-size: var(--workspace-ui-text); font-weight: 500; }
.share-tab-empty { margin: 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-text); }
/* The tab's 12px grid gap is the space before the add field; rows are 8px apart. */
.watch-list { display: grid; row-gap: 8px; margin: 0; padding: 0; list-style: none; }
.watch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface-raised); }
.watch-text { grid-column: 1; overflow-wrap: anywhere; font-size: var(--workspace-ui-text); }
.watch-row[data-paused] .watch-text { color: var(--sv-ink-secondary); }
.watch-meta { grid-column: 1; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.watch-row .share-switch { grid-column: 2; grid-row: 1 / 3; }
.watch-row .watch-remove { grid-column: 3; grid-row: 1 / 3; }
.watch-add { display: flex; gap: 8px; }
.watch-add input { flex: 1; min-width: 0; min-height: var(--workspace-control-height); padding: 0 10px; border: 1px solid var(--sv-hairline-strong); border-radius: var(--sv-radius); background: var(--sv-surface); color: var(--sv-ink); font: inherit; font-size: var(--workspace-ui-text); }
.share-switch { display: inline-flex; align-items: center; gap: 6px; min-height: var(--workspace-control-height); padding: 0 4px; border: 0; border-radius: var(--sv-radius); background: transparent; color: var(--sv-ink-secondary); font: inherit; font-size: var(--workspace-ui-meta); text-align: left; cursor: pointer; }
.share-switch-track { position: relative; flex: none; width: 28px; height: 16px; border-radius: 8px; background: var(--sv-hairline-strong); }
.share-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--sv-surface); transition: transform var(--sv-dur-fast) var(--sv-ease-out); }
.share-switch[aria-checked="true"] { color: var(--sv-ink); }
.share-switch[aria-checked="true"] .share-switch-track { background: var(--sv-ink); }
.share-switch[aria-checked="true"] .share-switch-track::after { transform: translateX(12px); }
.rule-row { display: grid; gap: 6px; }
.rule-label { display: grid; gap: 2px; font-size: var(--workspace-ui-text); }
.rule-label small { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.share-seg { display: inline-flex; width: fit-content; padding: 2px; gap: 2px; border: 1px solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface-sunken); }
.share-seg button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--sv-ink-secondary); font: inherit; font-size: var(--workspace-ui-meta); cursor: pointer; }
.share-seg button[aria-checked="true"] { background: var(--sv-surface); color: var(--sv-ink); font-weight: 500; }
.share-notify-line, .phone-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--workspace-ui-text); }
.share-notify-line { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.phone-line .icon { width: 16px; height: 16px; color: var(--sv-ink-secondary); }
.phone-line .verified { display: inline-flex; align-items: center; gap: 4px; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.note-list { display: grid; row-gap: 8px; margin: 0; padding: 0; list-style: none; }
.note-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface-raised); }
.note-text { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--workspace-ui-text); }
@media (max-width: 760px), (pointer: coarse) {
  .share-switch, .share-seg button, .watch-add input, .watch-add .btn, .note-row .btn, .phone-line .btn, .share-notify-line .btn, .watch-row .watch-remove { min-height: 44px; }
  .watch-row .watch-remove { min-width: 44px; }
  .watch-add input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .app[data-share-chat] .messages-inner :is(.smsg-meta > .kind-label, .msg-info, .msg-author, .msg-model, .msg-actions), .share-switch-track::after { transition: none; }
}

/* Agent rooms (web/app/54-agent-rooms.js, 54a-agent-rooms-cards.js; docs/agent-rooms.md).
 * A nonmodal workspace beside the rail, like Messaging: the rooms list, the room, and a third
 * column that holds the open thread or the Agents panel. Status only carries colour: working,
 * waiting on a person (a pending approval, over a cap) and failure. */
.app > :is(.agent-rooms-dialog, .eval-dialog) {
  position: absolute; inset: 0 0 0 var(--sidebar-width, var(--sv-rail));
  width: auto; max-width: none; height: 100%; max-height: none; margin: 0;
  padding: 0; border: 0; border-radius: 0; box-shadow: none;
  color: var(--sv-ink); background: var(--sv-surface); z-index: 90;
  transform: none; transition: none;
}
.app.sidebar-collapsed > :is(.agent-rooms-dialog, .eval-dialog) { left: 0; }
.app:has(> :is(.agent-rooms-dialog, .eval-dialog)[open]) > :is(.main, .activity-panel) { visibility: hidden; }
.app:has(> :is(.agent-rooms-dialog, .eval-dialog)[open]) > .context-resize-handle { display: none; }
.app:has(> .agent-rooms-dialog[open]) #agent-rooms-btn, .app:has(> .eval-dialog[open]) #eval-btn { background: var(--workspace-selected); color: var(--sv-ink); }
.app:has(> :is(.agent-rooms-dialog, .eval-dialog)[open]) #sidebar .sidebar-primary-nav > .sidebar-nav-btn.active { background: transparent; color: var(--sv-ink-secondary); }
.app > .agent-rooms-dialog > .agent-rooms-card {
  width: 100%; height: 100%; max-height: none; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: var(--sv-surface); overflow: hidden;
}
.agent-rooms-layout { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr) 340px; height: 100%; min-height: 0; }
.agent-rooms-layout > * { min-height: 0; min-width: 0; }
.agent-rooms-layout.thread-open .agent-panel { display: none; }
.agent-rooms-layout.thread-open.agents-open .agent-panel { display: none; }
.agent-rooms-list { display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow: auto; border-right: 1px solid var(--sv-hairline); scrollbar-width: thin; }
.agent-rooms-head, .agent-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 4px 0 8px; }
.agent-rooms-head h2, .agent-panel-head h2 { margin: 0; font-size: 18px; font-weight: 500; }
.agent-panel-head span { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.agent-rooms-group { display: flex; flex-direction: column; gap: 2px; }
.agent-rooms-group-title { margin: 8px 0 2px; padding: 0 12px; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); font-weight: 400; }
.agent-rooms-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: var(--workspace-control-height);
  padding: 4px 10px; border: 0; border-radius: 8px; color: var(--sv-ink); background: transparent; font-size: var(--workspace-ui-text); text-align: left;
  transition: background-color var(--sv-dur-instant) var(--sv-ease-out);
}
.agent-rooms-item:hover { background: var(--workspace-hover); }
.agent-rooms-item[aria-current="true"] { background: var(--workspace-selected); font-weight: 500; }
.agent-rooms-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lens-room, .agent-room-thread { display: flex; flex-direction: column; min-height: 0; background: var(--sv-surface); }
.agent-room-thread { grid-column: 3; border-left: 1px solid var(--sv-hairline); }
.lens-room-head { display: flex; align-items: center; gap: 12px; min-height: var(--workspace-head-height); padding: 8px 16px; border-bottom: 1px solid var(--sv-hairline); }
.agent-room-heading { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.agent-room-heading strong { font-size: 16px; font-weight: 500; }
.agent-room-heading span { overflow: hidden; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); text-overflow: ellipsis; white-space: nowrap; }
.agent-room-back { display: none; }
.agent-agents-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--workspace-control-height); padding: 0 10px;
  border: 1px solid var(--sv-hairline); border-radius: 8px; color: var(--sv-ink); background: transparent; font-size: var(--workspace-ui-text);
}
.agent-agents-toggle .icon { width: 16px; height: 16px; }
.agent-agents-toggle[aria-expanded="true"] { background: var(--workspace-selected); }
.agent-room-log { display: flex; flex: 1; flex-direction: column; gap: 2px; padding: 16px max(16px, calc((100% - 820px) / 2)); overflow: auto; scrollbar-width: thin; }
.agent-room-empty { margin: auto; max-width: 28rem; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-text); text-align: center; }
.agent-room-status { margin: 0 16px; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.agent-room-status:empty { display: none; }
.agent-msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 8px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .agent-msg:hover { background: var(--sv-surface-raised); } }
.agent-msg-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 10px;
  color: var(--sv-ink-secondary); background: var(--workspace-bubble); font-size: var(--workspace-ui-text);
}
.agent-msg-avatar.is-agent { background: transparent; }
.agent-msg-avatar.is-system { color: var(--sv-brand-ink); background: var(--sv-surface-sunken); }
.agent-msg-avatar .brand-mark { height: 16px; aspect-ratio: 828.3 / 933.4; }
.agent-msg-body { min-width: 0; }
.agent-msg-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.agent-msg-author { font-size: var(--workspace-ui-text); font-weight: 500; }
.agent-msg-time { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.agent-msg-text { margin-top: 2px; font-size: var(--sv-text-body); line-height: 1.55; overflow-wrap: anywhere; }
.agent-msg-text > :first-child { margin-top: 0; }
.agent-msg-text > :last-child { margin-bottom: 0; }
.agent-msg-replies { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.agent-msg-reply-btn {
  min-height: 28px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: 8px; color: var(--sv-ink-secondary);
  background: transparent; font-size: var(--workspace-ui-meta);
}
.agent-msg-reply-btn:hover { color: var(--sv-ink); background: var(--workspace-hover); }
.agent-msg-live, .agent-turn-live, .agent-row-doing {
  display: flex; align-items: center; gap: 6px; margin: 0; color: var(--workspace-working-ink); font-size: var(--workspace-ui-meta);
}
.agent-live-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--workspace-working);
  animation: workflow-step-live var(--workspace-pulse) var(--sv-ease-inout) infinite;
}
.agent-turn { margin-top: 4px; }
.agent-turn-meta, .agent-turn-why { margin: 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.agent-turn-details > summary { width: fit-content; cursor: pointer; list-style-position: inside; }
.agent-turn-why { margin-top: 4px; }
.agent-turn-error { margin: 2px 0; color: var(--sv-danger); font-size: var(--workspace-ui-meta); }
.agent-turn-steps { display: grid; gap: 2px; margin: 6px 0 0; padding: 8px 12px 8px 28px; border-radius: 8px; background: var(--sv-surface-sunken); font-size: var(--workspace-ui-meta); }
.agent-turn-step { display: flex; justify-content: space-between; gap: 12px; }
.agent-turn-step-meta { flex: none; color: var(--sv-ink-secondary); }
.agent-card { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--sv-hairline); border-radius: 12px; background: var(--sv-surface-raised); }
.agent-card.is-event { background: transparent; }
.agent-card.is-approval.is-pending { border-color: var(--sv-attention); }
.agent-card-kicker { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.agent-card-kicker .icon { width: 14px; height: 14px; }
.agent-card.is-approval.is-pending .agent-card-kicker { color: var(--sv-attention); }
.agent-card-text { font-size: var(--workspace-ui-text); line-height: 1.45; }
.agent-card-summary { margin: 0; font-size: var(--sv-text-body); font-weight: 500; }
.agent-card-meta { margin: 6px 0 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.agent-card-call, .agent-card-result { margin-top: 8px; font-size: var(--workspace-ui-meta); }
.agent-card-call > summary, .agent-card-result > summary { width: fit-content; color: var(--sv-ink-secondary); cursor: pointer; }
.agent-card-result.is-error > summary { color: var(--sv-danger); }
.agent-card pre {
  max-height: 240px; margin: 6px 0 0; padding: 8px 10px; overflow: auto; border-radius: 8px; background: var(--sv-surface-sunken);
  font: var(--workspace-ui-meta) / 1.45 var(--sv-font-mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.agent-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.agent-card-actions button { min-height: var(--workspace-control-height); padding: 0 14px; border-radius: 8px; font-size: var(--workspace-ui-text); }
.agent-card-approve { border: 0; color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); font-weight: 500; }
.agent-card-approve:hover { opacity: .85; }
.agent-card-decline { border: 1px solid var(--sv-hairline-strong); color: var(--sv-ink); background: transparent; }
.agent-card-decline:hover { background: var(--workspace-hover); }
.agent-goals { margin-top: 8px; overflow-x: auto; }
.agent-goals-table { width: 100%; border-collapse: collapse; font-size: var(--workspace-ui-meta); }
.agent-goals-table th { padding: 4px 8px; border-bottom: 1px solid var(--sv-hairline); color: var(--sv-ink-secondary); font-weight: 500; text-align: left; white-space: nowrap; }
.agent-goals-table td { padding: 6px 8px; border-bottom: 1px solid var(--sv-hairline); vertical-align: top; }
.agent-goal-title { display: flex; flex-direction: column; min-width: 10rem; }
.agent-goal-ref { color: var(--sv-ink-tertiary); font-family: var(--sv-font-mono); }
.agent-room-composer {
  position: relative; display: flex; align-items: flex-end; gap: 8px; margin: 8px max(16px, calc((100% - 820px) / 2)) 16px;
  padding: 6px 6px 6px 12px; border: 1px solid var(--sv-hairline-strong); border-radius: 12px; background: var(--sv-surface);
}
.agent-room-composer:focus-within { border-color: var(--sv-ink-secondary); }
.agent-room-composer textarea {
  flex: 1; min-height: var(--workspace-control-height); max-height: 240px; padding: 6px 0; border: 0; outline: 0; resize: none;
  color: var(--sv-ink); background: transparent; font: var(--sv-text-body) / 1.4 var(--sv-font-sans);
}
.agent-room-send {
  display: grid; place-items: center; flex: none; width: var(--workspace-control-height); height: var(--workspace-control-height);
  border: 0; border-radius: 8px; color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface);
}
.agent-room-send:hover { opacity: .85; }
.agent-room-send .icon { width: 16px; height: 16px; }
.agent-mention-menu {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; display: grid; gap: 2px; width: min(22rem, 100%); max-height: 280px;
  padding: 4px; overflow: auto; border: 1px solid var(--sv-hairline); border-radius: 12px; background: var(--sv-surface-raised);
  box-shadow: var(--workspace-panel-shadow);
}
.agent-mention-option {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 10px; border: 0; border-radius: 7px;
  color: var(--sv-ink); background: transparent; font-size: var(--workspace-ui-text); text-align: left;
}
.agent-mention-option[aria-selected="true"], .agent-mention-option:hover { background: var(--workspace-selected); }
.agent-mention-handle { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.agent-panel { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; overflow: auto; border-left: 1px solid var(--sv-hairline); scrollbar-width: thin; }
.agent-panel-group { display: flex; flex-direction: column; }
.agent-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--sv-hairline); }
.agent-row-main { min-width: 0; }
.agent-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--workspace-ui-text); }
.agent-row-head strong { font-weight: 500; }
.agent-row-status { flex: none; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.agent-row-status.is-working { color: var(--workspace-working-ink); }
.agent-row-status.is-over-budget, .agent-row-pending { color: var(--sv-attention); }
.agent-row-meta, .agent-row-pending { margin: 2px 0 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.agent-row-pending { color: var(--sv-attention); }
.agent-row-doing { margin-top: 2px; }
.agent-row-actions { display: flex; gap: 6px; margin-top: 6px; }
.agent-row-btn {
  min-height: 28px; padding: 0 10px; border: 1px solid var(--sv-hairline); border-radius: 8px; color: var(--sv-ink);
  background: transparent; font-size: var(--workspace-ui-meta);
}
.agent-row-btn:hover { background: var(--workspace-hover); }
.agent-turns { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.agent-turns-item { padding: 6px 8px; border-radius: 8px; background: var(--sv-surface-sunken); }
.agent-turns-room { padding: 0; border: 0; color: var(--sv-ink); background: transparent; font-size: var(--workspace-ui-meta); font-weight: 500; text-decoration: underline; }
@media (max-width: 1100px) {
  .agent-rooms-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .agent-panel, .agent-room-thread {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: min(380px, 100%);
    background: var(--sv-surface); box-shadow: var(--workspace-panel-shadow);
  }
  .agent-panel { display: none; }
  .agent-rooms-layout.agents-open:not(.thread-open) .agent-panel { display: flex; }
}
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px) {
  .app > :is(.agent-rooms-dialog, .eval-dialog), .app.sidebar-collapsed > :is(.agent-rooms-dialog, .eval-dialog) { inset: 0; width: 100%; }
  .phone-ui .app > :is(.agent-rooms-dialog, .eval-dialog) { bottom: var(--phone-nav-height); height: calc(100% - var(--phone-nav-height)); }
  .agent-rooms-layout { grid-template-columns: minmax(0, 1fr); }
  .agent-rooms-layout[data-pane="list"] > :not(.agent-rooms-list),
  .agent-rooms-layout[data-pane="room"] > :is(.agent-rooms-list, .agent-room-thread),
  .agent-rooms-layout[data-pane="thread"] > :is(.agent-rooms-list, .lens-room) { display: none; }
  .agent-room-thread { position: static; width: auto; box-shadow: none; border-left: 0; }
  .agent-room-back { display: inline-grid; }
  .agent-rooms-item, .agent-row-btn, .agent-msg-reply-btn, .agent-card-actions button, .agent-agents-toggle, .agent-mention-option { min-height: 44px; }
  .agent-room-send { width: 44px; height: 44px; }
  .agent-room-composer { margin: 8px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-live-dot { animation: none; }
  .agent-rooms-item { transition: none; }
}

/* Eval (web/app/55-eval.js, 55a-55c; docs/eval.md). The same nonmodal workspace beside the rail as
 * agent rooms (the rules above). Calm and observability first: numbers in tabular figures, every
 * layer marked deterministic or model-assisted, intervals drawn on a 0 to 1 bar. Status only carries
 * colour: a failure, and what waits on a person (an eval not trusted yet, a draft workflow). The
 * review's three choices look identical so none is nudged. */
.app > .eval-dialog > .eval-card {
  display: flex; flex-direction: column; gap: 0; width: 100%; height: 100%; max-height: none; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: var(--sv-surface); overflow: hidden;
}
.eval-head { display: flex; align-items: center; gap: 16px; min-height: var(--workspace-head-height); padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--sv-hairline); }
.eval-head h2 { margin: 0; font-size: 18px; font-weight: 500; }
.eval-nav { display: flex; gap: 4px; flex: 1; }
.eval-nav button, .eval-button, .eval-seg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--workspace-control-height); padding: 0 12px;
  border: 1px solid var(--sv-hairline); border-radius: 8px; color: var(--sv-ink); background: transparent; font-size: var(--workspace-ui-text); text-decoration: none;
  transition: background-color var(--sv-dur-instant) var(--sv-ease-out);
}
.eval-nav button { border-color: transparent; color: var(--sv-ink-secondary); }
.eval-nav button:hover, .eval-button:hover, .eval-seg-btn:hover { background: var(--workspace-hover); color: var(--sv-ink); }
.eval-nav button[aria-current="page"], .eval-seg-btn[aria-pressed="true"] { background: var(--workspace-selected); color: var(--sv-ink); font-weight: 500; }
.eval-primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--workspace-control-height); padding: 0 14px; border: 0; border-radius: 8px;
  color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); font-size: var(--workspace-ui-text); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.eval-primary:hover { opacity: .85; }
:is(.eval-button, .eval-primary, .eval-choice):disabled { opacity: .5; cursor: default; }
.eval-card > .eval-banner { margin: 12px 16px 0; padding: 10px 12px; border: 1px solid var(--sv-danger); border-radius: 8px; color: var(--sv-ink); background: var(--sv-surface-raised); font-size: var(--workspace-ui-text); }
.eval-body:focus { outline: none; }
.eval-body { flex: 1; min-height: 0; padding: 16px max(16px, calc((100% - 1180px) / 2)) 48px; overflow: auto; scrollbar-width: thin; font-size: var(--workspace-ui-text); }
.eval-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.eval-crumb-here { color: var(--sv-ink); }
.eval-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: underline; text-decoration-color: var(--sv-hairline-strong); text-underline-offset: 3px; }
.eval-link:hover { color: var(--sv-ink); text-decoration-color: currentColor; }
.eval-link .icon { width: 14px; height: 14px; }
.eval-empty { margin: 24px 0; color: var(--sv-ink-secondary); }
.eval-empty-box { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 24px 0; }
.eval-empty-box .eval-empty { margin: 0; }
.eval-sub { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.eval-note { margin: 8px 0 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.eval-lede { margin: 0 0 12px; color: var(--sv-ink-secondary); line-height: var(--workspace-ui-leading); max-width: 52rem; }
.eval-caveat { margin: 4px 0 8px; color: var(--sv-attention); }
.eval-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.eval-fail { color: var(--sv-danger); }
.eval-code { padding: 0 4px; border-radius: 4px; background: var(--sv-surface-sunken); font: var(--workspace-ui-meta) / 1.4 var(--sv-font-mono); overflow-wrap: anywhere; }
.eval-section { margin-top: 28px; }
.eval-section-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.eval-section-head h3 { margin: 0; font-size: 16px; font-weight: 500; }
.eval-layer-score { margin-left: auto; font-size: 16px; font-weight: 500; }
.eval-chip, .eval-trust, .eval-status, .eval-tag {
  display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border: 1px solid var(--sv-hairline); border-radius: 8px;
  color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); font-weight: 400; white-space: nowrap;
}
.eval-chip.is-model { border-style: dashed; }
.eval-trust.is-trusted { color: var(--sv-ink); border-color: var(--sv-hairline-strong); }
.eval-trust.is-untrusted, .eval-status.is-warn { color: var(--sv-attention); border-color: var(--sv-attention); }
.eval-status { border-color: transparent; padding: 0; min-height: 0; }
.eval-status.is-ok { color: var(--sv-ink); }
.eval-status.is-fail, .eval-tag.is-hard { color: var(--sv-danger); }
.eval-status.is-warn { border: 0; }
.eval-status.is-quiet { color: var(--sv-ink-tertiary); }
.eval-tag { min-height: 18px; margin-left: 6px; padding: 0 6px; }
.eval-tag.is-hard { border-color: var(--sv-danger); }
.eval-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0; }
.eval-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eval-fact dt { color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.eval-fact dd { margin: 0; overflow-wrap: anywhere; }
.eval-page-head { display: flex; flex-direction: column; gap: 4px; }
.eval-page-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.eval-page-title h2 { margin: 0; font-size: var(--sv-text-h4, 20px); font-weight: 500; }
.eval-table-wrap { overflow-x: auto; scrollbar-width: thin; }
.eval-table { width: 100%; border-collapse: collapse; font-size: var(--workspace-ui-text); }
.eval-table th { padding: 6px 10px; border-bottom: 1px solid var(--sv-hairline); color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); font-weight: 500; text-align: left; white-space: nowrap; }
.eval-table td { padding: 10px; border-bottom: 1px solid var(--sv-hairline); vertical-align: top; }
.eval-table .eval-col-groups th { border-bottom: 0; padding-bottom: 0; }
.eval-row { cursor: pointer; transition: background-color var(--sv-dur-instant) var(--sv-ease-out); }
.eval-row:hover { background: var(--workspace-hover); }
.eval-name { display: flex; flex-direction: column; gap: 2px; min-width: 10rem; }
.eval-table td.eval-name { display: table-cell; }
.eval-name > * { display: block; width: fit-content; max-width: 100%; }
.eval-name .eval-tag { display: inline-flex; margin: 4px 4px 0 0; }
.eval-name > .eval-code { margin-top: 2px; }
.eval-row-link { color: var(--sv-ink); font-weight: 500; text-decoration: none; }
.eval-row-link:hover { text-decoration: underline; }
.eval-composite { font-weight: 500; }
.eval-detail { margin: 2px 0 0; color: var(--sv-ink-secondary); overflow-wrap: anywhere; }
.eval-detail.is-fail { color: var(--sv-danger); }
.eval-ci { display: inline-flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eval-ci-text strong { font-weight: 500; }
.eval-ci-n { color: var(--sv-ink-secondary); }
.eval-ci-bar { position: relative; display: block; width: 120px; height: 6px; border-radius: 3px; background: var(--sv-surface-sunken); box-shadow: inset 0 0 0 1px var(--sv-hairline); }
.eval-ci-range { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--sv-ink-tertiary); }
.eval-ci-mean { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--sv-ink); }
.eval-callout {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px;
  border: 1px solid var(--sv-hairline); border-radius: 12px; background: var(--sv-surface-raised);
}
.eval-callout-text { flex: 1 1 24rem; min-width: 0; }
.eval-callout h3 { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.eval-callout p { margin: 0 0 12px; color: var(--sv-ink-secondary); max-width: 46rem; line-height: var(--workspace-ui-leading); }
.eval-progress { display: flex; flex-direction: column; gap: 6px; max-width: 28rem; }
.eval-progress-bar { position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: var(--sv-surface-sunken); box-shadow: inset 0 0 0 1px var(--sv-hairline); }
.eval-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sv-ink-secondary); transition: width var(--sv-dur-base) var(--sv-ease-out); }
.eval-progress .eval-progress-text { margin: 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.eval-panel { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--sv-hairline); border-radius: 12px; }
.eval-panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.eval-panel-head strong { font-weight: 500; }
.eval-details { margin-top: 8px; }
.eval-details > summary { width: fit-content; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); cursor: pointer; }
.eval-details > summary:hover { color: var(--sv-ink); }
.eval-versions, .eval-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.eval-version, .eval-step { padding: 10px 12px; border: 1px solid var(--sv-hairline); border-radius: 8px; }
.eval-version-line, .eval-step-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.eval-step-name { font-weight: 500; }
.eval-version-note { margin: 6px 0 0; color: var(--sv-ink-secondary); }
.eval-step-defs { display: grid; gap: 4px; margin: 6px 0 0; padding-left: 20px; }
.eval-approve { margin-top: 10px; }
.eval-approve-ask { margin: 0 0 8px; }
.eval-approve-status { margin: 6px 0 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.eval-approve-status:empty { display: none; }
.eval-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.eval-evidence, .eval-reasons, .eval-quotes, .eval-notes, .eval-claims { display: grid; gap: 6px; margin: 6px 0 0; padding-left: 18px; }
.eval-reasons li, .eval-quotes li { line-height: var(--workspace-ui-leading); }
.eval-quotes { padding: 0; list-style: none; }
.eval-quotes q { font-size: var(--sv-text-body); }
.eval-verdicts { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 0; font-size: var(--workspace-ui-meta); }
.eval-verdict { display: inline-flex; align-items: center; gap: 4px; }
.eval-claim-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.eval-spread { margin-top: 12px; }
.eval-spread .eval-sub { margin: 0; }
.eval-composite-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 20px; padding: 16px;
  border: 1px solid var(--sv-hairline); border-radius: 12px;
}
.eval-composite-score { display: flex; flex-direction: column; }
.eval-big { font-size: 32px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.eval-split { display: flex; flex-direction: column; gap: 6px; flex: 1 1 18rem; }
.eval-split p { margin: 0; }
.eval-split-bar { position: relative; height: 8px; overflow: hidden; border-radius: 4px; background: var(--sv-surface-sunken); box-shadow: inset 0 0 0 1px var(--sv-hairline-strong); }
.eval-split-fill { position: absolute; inset: 0 auto 0 0; background: var(--sv-ink-secondary); }
.eval-hard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; }
.eval-notes { flex-basis: 100%; margin: 0; color: var(--sv-ink-secondary); }
.eval-shots { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.eval-shot { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.eval-shot.is-desktop { flex: 1 1 28rem; min-width: 0; }
.eval-shot.is-phone { flex: 0 1 14rem; }
.eval-shot-frame { max-height: 420px; overflow: auto; border: 1px solid var(--sv-hairline); border-radius: 8px; background: var(--sv-surface-sunken); scrollbar-width: thin; }
.eval-shot-frame img { display: block; width: 100%; height: auto; }
.eval-shot-frame .eval-empty { margin: 16px; }
.eval-persona { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--sv-surface-sunken); }
.eval-persona p { margin: 4px 0; }
.eval-actions-list { display: grid; gap: 2px; margin: 6px 0 0; padding-left: 20px; font-size: var(--workspace-ui-meta); }
/* The review. */
.eval-review { display: flex; flex-direction: column; gap: 12px; }
.eval-review-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.eval-review-title h2 { margin: 0; font-size: var(--sv-text-h4, 20px); font-weight: 500; }
.eval-review-title p { margin: 2px 0 0; }
.eval-review-progress { flex: 0 1 22rem; }
.eval-review-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.eval-seg { display: inline-flex; gap: 4px; }
.eval-keys { margin: 0; color: var(--sv-ink-tertiary); font-size: var(--workspace-ui-meta); }
.eval-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.eval-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.eval-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.eval-side-head strong { color: var(--sv-ink); font-size: var(--workspace-ui-text); font-weight: 500; }
.eval-view { height: max(320px, calc(100dvh - 400px)); overflow: auto; border: 1px solid var(--sv-hairline); border-radius: 12px; background: var(--sv-surface-sunken); scrollbar-width: thin; }
.eval-view[data-view="phone"] { display: flex; justify-content: center; padding: 12px; }
.eval-view .eval-empty { margin: 24px 16px; }
.eval-shot-img { display: block; width: 100%; height: auto; }
.eval-shot-img.is-phone { width: auto; max-width: 100%; align-self: flex-start; border-radius: 8px; }
.eval-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--sv-surface); }
.eval-decide {
  position: sticky; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: end;
  padding: 12px 0 16px; border-top: 1px solid var(--sv-hairline); background: var(--sv-surface);
}
.eval-reason-label { grid-column: 1 / -1; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.eval-reason {
  min-height: var(--workspace-control-height); max-height: 8rem; padding: 6px 10px; border: 1px solid var(--sv-hairline-strong); border-radius: 8px; resize: vertical;
  color: var(--sv-ink); background: var(--sv-surface); font: var(--workspace-ui-text) / 1.4 var(--sv-font-sans);
}
.eval-reason:focus { border-color: var(--sv-ink-secondary); outline: 0; }
.eval-choices { display: flex; gap: 8px; }
.eval-choice {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 6.5rem; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--sv-hairline-strong); border-radius: 8px; color: var(--sv-ink); background: var(--sv-surface); font-size: var(--workspace-ui-text); font-weight: 500;
  transition: background-color var(--sv-dur-instant) var(--sv-ease-out);
}
.eval-choice:hover:not(:disabled) { background: var(--workspace-hover); }
.eval-choice kbd { color: var(--sv-ink-secondary); font: var(--workspace-ui-meta) / 1 var(--sv-font-sans); }
.eval-review-status { grid-column: 1 / -1; margin: 0; color: var(--sv-ink-secondary); font-size: var(--workspace-ui-meta); }
.eval-done { margin: 0; font-size: var(--sv-text-body); }
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px) {
  .eval-head { gap: 8px; padding: 8px 8px 8px 12px; }
  .eval-nav button, .eval-button, .eval-seg-btn, .eval-primary, .eval-choice, #eval-close { min-height: 44px; }
  #eval-close { min-width: 44px; }
  .eval-sides { grid-template-columns: minmax(0, 1fr); }
  .eval-view { height: 60dvh; }
  .eval-decide { grid-template-columns: minmax(0, 1fr); }
  .eval-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eval-choice { min-width: 0; }
  .eval-reason { font-size: 16px; }
  .eval-keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eval-nav button, .eval-button, .eval-seg-btn, .eval-row, .eval-choice, .eval-progress-fill { transition: none; }
}