/* 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; }

/* 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: 16px;
  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 { width: min(calc(100% - (var(--sv-gutter) * 2)), 62rem); 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; }
#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;
  --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;
  --workspace-sidebar-text: var(--sv-text-body);
  --workspace-sidebar-meta: var(--sv-text-caption);
}

: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);
  color: var(--sv-ink);
  background: var(--workspace-sidebar);
  border-right-color: transparent;
}
.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;
  --sv-danger: var(--sv-danger-inverse);
  --sv-attention: var(--workspace-attention);
}

.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; }
.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. */
#sidebar .sidebar-primary-nav > .sidebar-nav-btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 40px;
  height: 40px;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 10px;
  color: var(--sv-ink-secondary);
  background: transparent;
  border-color: transparent;
  border-radius: var(--sv-radius);
  box-shadow: none;
}
#sidebar .sidebar-primary-nav > .sidebar-nav-btn:is(:hover, :focus-visible) {
  color: var(--sv-ink);
  background: var(--workspace-hover);
}
#sidebar .sidebar-primary-nav > .sidebar-nav-btn.active {
  color: var(--sv-ink);
  background: var(--workspace-selected);
}
#sidebar .sidebar-primary-nav .messages-badge {
  position: static;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 5px;
  color: var(--sv-ink-secondary);
  background: var(--workspace-selected);
  border: 0;
  border-radius: 5px;
  font-size: var(--sv-text-micro);
  font-weight: 500;
  line-height: 20px;
}
.sidebar .brand .wordmark { font-size: 18px; }
.sidebar-primary { padding-inline: 10px; padding-bottom: 12px; }
.sidebar-scroll { padding-inline: 10px; }
.sidebar-primary-nav { gap: 2px; }
.sidebar-section-head { font-size: var(--workspace-sidebar-meta); font-weight: 500; min-height: 34px; }
.sidebar-work-panel { margin-top: 16px; }
.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,
  .session-open, .pinned-open, .session-title, .pinned-title, .profile-name) {
  font: 400 var(--workspace-sidebar-text) / 1.4 var(--sv-font-sans);
  letter-spacing: normal;
}
#sidebar :is(.project-name, .thread-title-text, .session-title, .pinned-title,
  .session-state, .sidebar-section-head, .workspace-group, .project-activity) {
  font-weight: 400;
}
#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, .session-meta, .session-stamp, .pinned-meta, .project-activity, .profile-detail) {
  font-size: var(--workspace-sidebar-meta);
  font-weight: 400;
  line-height: 1.4;
}
.sidebar .project-row { min-height: 40px; }
#sidebar :is(.new-chat-btn, .sidebar-search) { min-height: 40px; height: 40px; }
.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;
}
.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); }

.thread-head { padding-inline: 24px; border-bottom-color: transparent; background: var(--sv-surface); }
.thread-title { font-size: var(--sv-text-small); font-weight: 500; letter-spacing: -.01em; }
.thread-context { font-size: var(--sv-text-caption); }
.thread-actions { gap: 6px; }
.share-thread-button { height: 34px; min-height: 32px; min-width: 0; padding-inline: 12px; color: var(--sv-ink); background: transparent; border-color: var(--sv-hairline); border-radius: 8px; font-size: var(--sv-text-caption); }
.share-thread-button:hover { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.activity-count { color: var(--sv-ink-secondary); background: var(--sv-surface-dim); }
.share-thread-button.active { color: var(--sv-ink); background: var(--sv-surface-sunken); box-shadow: none; }
.activity-toggle-btn { min-height: 34px; }
.activity-toggle-btn[aria-expanded="true"] { color: var(--sv-ink); background: var(--sv-surface-sunken); }
.messages { padding-top: 28px; padding-bottom: 32px; 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-role { margin-bottom: 16px; }
.turn-trace-head, .turn-trace-content { grid-column: auto; }
.msg.assistant { border-top: 0; padding-top: 12px; }
.msg.assistant .md { font-size: var(--sv-text-small); line-height: 1.65; }
.msg.user .bubble { color: var(--sv-ink); background: var(--workspace-bubble); border-radius: 18px; padding: 14px 20px; }
.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; }
.msg-actions { gap: 2px; }
.status-chip { border-radius: 8px; box-shadow: none; }
.turn-trace-head { font-size: var(--sv-text-caption); width:fit-content; gap:8px; }
.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:"›"; }
.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; }
.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; }

/* One quiet input surface. Focus changes its edge, never draws a detached bar. */
.composer-wrap { padding-top: 10px; border-top: 0; }
#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 { width: min(100%, var(--workspace-reading-width)); border-color: var(--sv-hairline); border-radius: 18px; background: var(--sv-surface-raised); }
.composer:focus-within { border-color: var(--sv-ink-secondary); outline: 2px solid var(--sv-ink-secondary); outline-offset: -1px; box-shadow: none; }
.composer textarea { min-height: 58px; padding: 16px 18px 10px; border-radius: 18px 18px 0 0; font-size: var(--sv-text-small); }
.composer-bar { padding: 4px 10px 10px; border-top: 0; gap: 6px; }
.composer-context { min-height: 32px; background: transparent; border-color: transparent; padding-inline: 8px; }
.composer-context:hover { background: var(--sv-surface-sunken); }
.composer-icon-btn { border-radius: 8px; }
#send-btn, .shareos-home-send, .project-home-send {
  color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); border-radius: 50%;
}
#send-btn:hover:not(:disabled), .shareos-home-send:hover:not(:disabled), .project-home-send:hover:not(:disabled) {
  color: var(--sv-emphasis-ink); background: var(--sv-emphasis-surface); opacity: .85;
}
#send-btn:disabled { color: var(--sv-ink-tertiary); background: var(--sv-surface-dim); }
.composer-note { width: min(100%, var(--workspace-reading-width)); margin: 8px auto 0; font-size: var(--sv-text-caption); }
.steering-tray { width: min(100%, var(--workspace-reading-width)); margin: 0 auto 8px; border: 1px solid var(--sv-hairline); border-radius: 14px; background: var(--sv-surface-raised); }
.steering-tray-heading { padding: 10px 14px 4px; color: var(--sv-ink-secondary); font-size: var(--sv-text-caption); }
.steering-tray-list { list-style: none; padding: 0 14px 8px; margin: 0; max-height: min(200px, 25dvh); overflow-y: auto; overscroll-behavior: contain; }
.steering-tray-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.steering-tray-row + .steering-tray-row { border-top: 1px solid var(--sv-hairline); }
.steering-tray-row > .icon { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 3px; color: var(--sv-ink-tertiary); }
.steering-tray-copy { min-width: 0; flex: 1; }
.steering-tray-text { color: var(--sv-ink); font-size: var(--sv-text-body); line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.steering-tray-state { display: block; margin-top: 3px; color: var(--sv-ink-tertiary); font-size: var(--sv-text-caption); }
.steering-tray-steer { flex: 0 0 auto; align-self: center; min-height: 44px; padding: 6px 10px; border: 1px solid var(--sv-hairline); border-radius: 8px; background: var(--sv-surface); color: var(--sv-ink); font: inherit; font-size: var(--sv-text-caption); cursor: pointer; }
.steering-tray-steer:hover { background: var(--sv-surface-raised); }
.steering-tray-steer:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.steering-tray-steer:disabled { opacity: .5; cursor: wait; }
.msg.user[data-steering-pending] { display: 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 { 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(--sv-text-small); font-weight: 500; }
.shareos-home-zone-count { border-radius: 6px; background: var(--sv-surface-sunken); }
.shareos-home .hud-list { gap: 0; }
.shareos-home .hud-row { min-height: 76px; padding: 14px 10px; border: 0; border-bottom: 1px solid var(--sv-hairline); border-radius: 0; background: transparent; box-shadow: none; }
.shareos-home .hud-row:hover, .shareos-home .hud-row:focus-visible { background: var(--sv-surface-sunken); transform: none; }
.shareos-home .hud-row-icon { border: 0; background: var(--sv-surface-sunken); border-radius: 10px; }
.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(--sv-text-small); font-weight: 500; }
.shareos-home :is(.hud-row-context, .hud-row-detail) { font-weight: 400; }
.activity-view-tabs { gap: 4px; margin-top: 24px; }
.activity-view-tabs button { font-size: var(--sv-text-caption); }
.activity-view-tabs button[aria-selected="true"] { 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-eyebrow { text-transform: none; letter-spacing: 0; font-size: var(--sv-text-caption); font-weight: 400; }
.project-home-card { border-radius: 12px; background: transparent; }
.project-home-card h2 { font-weight: 500; }
.project-home-composer, .shareos-home-form { border-radius: 16px; border-color: var(--sv-hairline); }
.project-home-composer:focus-within, .shareos-home-form: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; }
.thread-starter h2 { font-size: var(--sv-text-h1); font-weight: 500; letter-spacing: var(--sv-tracking-heading); }
.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); }

.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); }
.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 { border-radius: 8px; }
.activity-panel :is(.assumptions-empty, .todos-empty) { font-weight: 400; }

.app-dialog { border-radius: 16px; box-shadow: var(--workspace-panel-shadow); transform: translateY(4px); transition-duration: 160ms; }
.app-dialog::backdrop { transition-duration: 160ms; }
@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-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-surface-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
.row-menu:not([hidden]), .profile-menu:not([hidden]),
.mention-picker:not([hidden]) {
  animation: workspace-surface-enter 160ms 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 240ms var(--sv-ease-out); }
  .sidebar { transition: transform 240ms var(--sv-ease-out), visibility 240ms; }
  .app.is-resizing-sidebar { transition: none; }
}
@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(--sv-activity-rail); }
  .app.side-chat-open { grid-template-columns: var(--sidebar-width, var(--sv-rail)) minmax(0, 1fr) var(--sv-side-chat-rail); }
  .app.sidebar-collapsed.activity-open { grid-template-columns: 0 minmax(0, 1fr) var(--sv-activity-rail); }
  .app.sidebar-collapsed.side-chat-open { grid-template-columns: 0 minmax(0, 1fr) var(--sv-side-chat-rail); }
  .sidebar { grid-area: 1 / 1; }
  .main { grid-area: 1 / 2; }
  .activity-panel, .side-chat-panel {
    grid-area: 1 / 3; display: grid; width: var(--sv-activity-rail);
    visibility: hidden; opacity: 0; transform: translateX(16px);
    transition: transform 240ms var(--sv-ease-out), opacity 160ms, visibility 240ms;
  }
  .side-chat-panel { width: var(--sv-side-chat-rail); }
  .app.activity-open .activity-panel, .app.side-chat-open .side-chat-panel {
    visibility: visible; opacity: 1; transform: none;
  }
}
@media (max-width: 1400px) {
  .activity-panel, .app.activity-open .activity-panel, .side-chat-panel, .app.side-chat-open .side-chat-panel {
    transition-timing-function: var(--sv-ease-out); box-shadow: var(--workspace-panel-shadow);
  }
  .activity-scrim, .side-chat-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); }
  .thread-head { padding-inline: 12px; }
  .thread-title { font-size: var(--sv-text-small); }
  .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; }
  .msg.user .bubble { padding: 12px 16px; border-radius: 16px; }
  .share-thread-button { min-height: 44px; height: 44px; }
  .composer-wrap { padding: 1px var(--sv-gutter) max(7px, env(safe-area-inset-bottom)); }
  .composer { border-radius: 16px; }
  .composer textarea { padding: 8px 14px; min-height: 44px; }
  .composer-bar { padding: 0 0 4px; gap: 0; }
  /* The navigator narrows the reading column. Give the phone project name
   * the chip's full width while preserving every 44px action target. */
  .composer-context { min-width: 44px; min-height: 44px; padding-inline: 0; }
  .composer-context > .icon { display: none; }
  .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 (max-width: 640px) and (max-height: 640px) {
  #sidebar .sidebar-primary-nav > .hud-nav-btn { grid-column: span 3; }
  #sidebar .sidebar-primary-nav > .sidebar-nav-btn:not(.hud-nav-btn) {
    grid-column: span 2;
    justify-content: center;
    padding-inline: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --sv-hairline: var(--sv-ink-secondary); }
  .composer:focus-within, .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, .side-chat-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 180ms cubic-bezier(.22,.68,0,1); }
.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, .group-message-author .message-meta, .share-card-meta) { color: var(--sv-ink-secondary); }
#message-thread .direct-message > .group-message-author .message-meta { margin-left: 0; font-weight: 400; }
#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: 16px; 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); }
.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 :is(.message-age, .message-day-age) { display: none; }
.message-online-group > summary { display: list-item; list-style: disclosure-closed inside; cursor: pointer; min-height: 44px; line-height: 44px; }
.message-online-group[open] > summary { list-style-type: disclosure-open; }
.message-online-group > summary::marker { color: var(--sv-ink-secondary); }
.messages-dialog :is(.message-contact, .icon-btn, .message-filters button) { transition: background-color 120ms 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: 44px; 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: 16px; 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 .thread-head { min-height: 60px; gap: 8px; padding-inline: 12px; }
  .phone-ui .thread-heading { min-width: 0; }
  .phone-ui .thread-title { font-size: 16px; line-height: 1.35; }
  .phone-ui .thread-actions { flex-shrink: 0; gap: 0; }
  .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 .thread-subline { display: flex; min-width: 0; }
  .phone-ui .thread-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .phone-ui .messages { padding-inline: 16px; }
  .phone-ui .msg { margin-bottom: 24px; }
  .phone-ui .msg .msg-actions { margin-top: 4px; }
  .phone-ui .composer-wrap { padding-inline: 16px; padding-bottom: 8px; }
  .phone-ui.phone-keyboard .composer-wrap { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  /* Keep search and actual chats visible even with a keyboard. */
  .phone-ui #sidebar .sidebar-primary-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; padding: 0 12px 8px; }
  .phone-ui #sidebar .sidebar-search { grid-column: 1 / -1; grid-row: 1; margin: 4px 0; border: 1px solid var(--sv-hairline); border-radius: 12px; background: var(--sv-surface); }
  .phone-ui #sidebar .sidebar-create { grid-column: 1 / -1; }
  .phone-ui #sidebar .sidebar-primary-nav > .sidebar-nav-btn { grid-column: auto; justify-content: flex-start; padding-inline: 8px; }
  .phone-ui #sidebar .sidebar-primary-nav > .sidebar-search { grid-column: 1 / -1; }
  .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));
  }
  .phone-ui.phone-keyboard #sidebar .sidebar-primary { position: sticky; top: 64px; z-index: 2; background: var(--workspace-sidebar); }
  .phone-ui.phone-keyboard #sidebar .sidebar-primary-nav > :not(.sidebar-search) { display: none; }
  .phone-ui .pip-invite { position: relative; inset: auto; display: flex; align-items: center; gap: 10px; margin: 4px var(--chat-scrollbar-width, 0px) 8px 0; padding: 8px 12px; border-radius: 12px; box-shadow: none; }
  .phone-ui .pip-invite[hidden] { display: none; }
  .phone-ui .pip-invite-art { width: 32px; height: 32px; flex: 0 0 32px; }
  .phone-ui .pip-invite-art > * { width: 32px; height: 32px; }
  .phone-ui .pip-invite-copy { min-width: 0; display: block; }
  .phone-ui .pip-invite-copy > :is(strong, p, small) { display: none; }
  .phone-ui .pip-invite-actions { margin: 0; gap: 8px; flex-wrap: nowrap; }
  .phone-ui .pip-invite-actions button { min-height: 44px; white-space: nowrap; }
  .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: 20px; 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: 20px; 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: 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: 20px;
  }
}


/* 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: 16px;
  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-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: var(--sv-leading-body, 1.7); }
.artifact-email > .artifact-reader-status { margin-bottom: 16px; }
.artifact-email-actions { margin-bottom: 16px; }
.artifact-email-note { margin: 0 0 16px; color: var(--sv-ink-secondary); }
.artifact-email-note:empty { display: none; }
.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%); }
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-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-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; }
}

/* 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)) + 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) + 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; } }
/* Recorded model choices remain available during work and beside saved answers. */
.msg-routing { color: var(--sv-ink-secondary); font: 400 0.8125rem/1.45 var(--sv-font-sans); margin-block: 2px; max-width: 60ch; overflow-wrap: anywhere; }
.msg-routing summary { list-style: none; display: flex; align-items: center; gap: 5px; min-height: 32px; width: fit-content; padding-inline: 2px; }
.msg-routing summary::-webkit-details-marker { display: none; }
.msg-routing summary .icon { width: 13px; height: 13px; flex: 0 0 auto; transition: transform 150ms ease; }
.msg-routing[open] summary .icon { transform: rotate(90deg); }
.msg-routing-body { padding-block: 2px 4px; }
.msg-routing-body p { margin: 1px 0; }
@media (pointer: coarse), (max-width: 640px) {
  .msg-routing summary { min-height: 44px; }
}

/* 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); }
.project-home[data-kind="category"] .project-home-grid { grid-template-columns: 1fr; }
.project-home-chat[data-kind="category"] { color: var(--sv-ink-secondary); }