/* The Share home (home.js): the home chat is a conversation — messages,
 * its work as one Trace group per run as in any chat (the chats Share
 * started live in Details > Activity), reports as quiet cards. The model, context, spend and billing chips, footers,
 * markers and the Details panel stay in the chats Share starts. The rail
 * nests those chats under Share. */

.main.home :is(.effort-control, #model-chip, #context-chip, #usage, #billing-limits) { display: none; }
/* No billing chip in the Share home, but its Subscriptions card opens there (profile menu, Share's setup link). */
.main.home #billing:has(> .billing-card[hidden]) { display: none; }
.main.home .transcript :is(.turn-meta, .marker:not(.stopped, .brief, .slack-reply, .system-input)) { display: none; }
.back-home { flex: none; color: var(--sv-ink-secondary); }
.transcript > .empty h2 { margin: 0; font-size: 1.25rem; font-weight: 500; color: var(--sv-ink); }

.chat-report summary:hover .chat-open { color: var(--sv-ink); }

/* a finished chat's report: one line, the report itself folded */
.chat-report summary {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: 28px;
  padding: 2px var(--sv-space-2);
  margin: 0 calc(-1 * var(--sv-space-2));
  border-radius: var(--sv-radius);
  color: var(--sv-ink-secondary);
  font-size: var(--ui-text);
  list-style: none;
  cursor: pointer;
}
.chat-report summary::-webkit-details-marker { display: none; }
.chat-report summary:hover { background: var(--ws-hover); }
.chat-report-title { font-weight: 500; color: var(--sv-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-report-word { flex: 1; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.chat-report.error .t-glyph { color: var(--sv-danger); }
.chat-report-body {
  margin: var(--sv-space-1) 0 var(--sv-space-2) var(--sv-space-5);
  padding: var(--sv-space-2) var(--sv-space-3);
  border-radius: var(--sv-radius);
  max-height: 24rem;
  overflow-y: auto;
}
.transcript > .chat-report + .turn-agent { margin-top: var(--sv-space-3); }

/* rail: Share on top, its chats nested under it */
/* Share's row is a contact, like WhatsApp / iMessage: round avatar with the
 * mark, name and time on one line, the last message under it. */
.chats .c-home > button.c-open { min-height: 56px; padding: var(--sv-space-2) var(--sv-space-3); gap: var(--sv-space-3); }
.c-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sv-emphasis-surface, #000);
  color: var(--sv-surface-raised, #fff);
}
.c-avatar > svg { width: 18px; height: 20px; overflow: visible; }

.c-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.c-line { display: flex; align-items: baseline; gap: var(--sv-space-2); min-width: 0; }
.chats .c-home .c-label { flex: 1; font-weight: 600; color: var(--sv-ink); }
.c-preview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.c-preview.working { color: var(--ws-working-ink, var(--ws-working)); }
/* the header of the home chat carries the same avatar */
.chat-avatar { flex: none; width: 28px; height: 28px; }
.chat-avatar svg { width: 13px; height: 14px; }
.chats .c-row.c-sub > button.c-open { padding-left: calc(var(--sv-space-3) + var(--sv-space-4)); }
.chats .c-row.c-sub > button.c-open:has(.c-dot:is(.running, .failed, .cancelled)) { padding-left: calc(var(--sv-space-3) + var(--sv-space-3)); }
.chats .c-home + .c-row:not(.c-sub), .chats .c-sub + .rail-group-head, .chats .c-home + .rail-group-head { margin-top: var(--sv-space-3); }
/* Share's row stays pinned on top while the list scrolls (Rey, 2026-10-19).
 * Scrolled, it is a compact one-line bar (rail.js `compact`): small avatar,
 * "Share" and its time, or "working…". The row keeps its full height
 * (rail.js), so nothing under it moves; only its opaque button shrinks, and
 * the rest of the row lets rows show and take taps. A row scrolled to (the
 * open chat, a focused one) stops below the bar: scroll-padding-top. */
.chats:has(> .c-home) { scroll-padding-top: calc(36px + var(--sv-space-1)); }
.chats .c-home { position: sticky; top: 0; z-index: 1; align-items: flex-start; pointer-events: none; }
.chats .c-home > button.c-open {
  pointer-events: auto;
  background: var(--ws-sidebar);
  transition: min-height var(--sv-dur-fast) var(--sv-ease-out), padding var(--sv-dur-fast) var(--sv-ease-out), box-shadow var(--sv-dur-fast) var(--sv-ease-out), background var(--sv-dur-instant) var(--sv-ease-out), color var(--sv-dur-instant) var(--sv-ease-out);
}
.chats .c-home > button.c-open:hover { background: var(--ws-hover); }
.chats .c-home > button.c-open[aria-current="true"] { background: color-mix(in srgb, var(--sv-ink) 8%, var(--ws-sidebar)); }
.chats .c-home .c-avatar { transition: width var(--sv-dur-fast) var(--sv-ease-out), height var(--sv-dur-fast) var(--sv-ease-out); }
.chats .c-home .mark3d.small { transition: transform var(--sv-dur-fast) var(--sv-ease-out); }
.chats .c-home.compact > button.c-open { min-height: 36px; padding-block: var(--sv-space-1); gap: var(--sv-space-2); box-shadow: 0 1px 0 var(--sv-hairline); }
.chats .c-home.compact .c-avatar { width: 24px; height: 24px; }
.chats .c-home.compact .mark3d.small { transform: scale(0.6); }
.chats .c-home.compact .c-body { display: flex; align-items: baseline; gap: var(--sv-space-2); }
.chats .c-home.compact .c-line { flex: 1; }
.chats .c-home.compact .c-preview:not(.working), .chats .c-home.compact .c-body:has(.working) .c-when { display: none; }
/* rail.js paintRows: "Show N more" / "Show less" under a long list */
.chats .c-show > .c-open { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.chats .c-show > .c-open:hover { color: var(--sv-ink); }
.chat-avatar[hidden] { display: none; }

/* An email to os@share.vc (home.js emailTurn): sender, subject, words. The
 * person's own email sits on their side; someone else's answer on the other,
 * under the sender's own name. Plain text, no envelope. */
.email-turn {
  width: fit-content;
  min-width: min(100%, 16rem);
  max-width: min(78%, 36rem);
  padding: 10px 14px;
  border: 1px solid var(--sv-border, color-mix(in srgb, var(--sv-ink) 12%, transparent));
  border-radius: calc(var(--sv-radius) * 2);
  line-height: 1.5;
  overflow-wrap: anywhere;
  min-inline-size: 0;
}
.email-turn.own { margin-left: auto; background: var(--sv-fill-2); }
.email-turn.incoming { margin-right: auto; background: var(--sv-surface-raised, transparent); }
.email-head { display: flex; align-items: center; gap: var(--sv-space-1); min-width: 0; color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.email-head .icon { flex: none; width: 14px; height: 14px; }
.email-from { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--sv-ink); }
.email-kind { flex: none; color: var(--sv-ink-tertiary); }
.email-subject { margin-top: 2px; font-weight: 600; color: var(--sv-ink); }
.email-body { margin-top: var(--sv-space-1); white-space: pre-wrap; color: var(--sv-ink); }
.email-body a { color: inherit; text-decoration: underline; }
.email-thread { margin-top: var(--sv-space-1); color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.email-thread summary { cursor: pointer; color: var(--sv-ink-tertiary); }
.email-quoted { margin: 4px 0 0; padding: 0 0 0 var(--sv-space-2); border-left: 2px solid var(--sv-border, color-mix(in srgb, var(--sv-ink) 18%, transparent)); white-space: pre-wrap; overflow-wrap: anywhere; }
.transcript > .email-turn + .email-turn { margin-top: var(--sv-space-2); }

/* A pendant mark or another system input: one quiet line, the words folded. */
.system-input { color: var(--sv-ink-secondary); font-size: var(--ui-text); overflow-wrap: anywhere; }
.system-input-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sv-space-2); }
.system-input-head strong { font-weight: 500; color: var(--sv-ink); }
.system-input-head > span:last-child { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.system-input summary { cursor: pointer; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); margin-top: 2px; }
.system-input-body { white-space: pre-wrap; padding: var(--sv-space-1) 0 0 var(--sv-space-5); }

/* Share's own words in a chat it started (home.js shareTurn): a prompt from the delegating agent, named as such. */
.turn-from { display: flex; align-items: center; gap: var(--sv-space-1); margin-bottom: var(--sv-space-1); color: var(--sv-ink-secondary); font-size: var(--ui-meta); font-weight: 500; }
.turn-from .icon { width: 14px; height: 14px; }