/* The session view (and the public session page, which reuses it): the header,
   the outline rail, the transcript, tool chips, attachments, inline diffs, the
   subagent list, and the tool-body inspector modal. This is the one page that
   runs full width. */

/* The session view is the one page that takes the full content width: its outline,
   stat strip, tool chips, and diffs all earn the room, while prose inside a message
   stays capped at a readable measure (see .msg .content). Every other page keeps
   the centered --maxw column. */
main:has(> .session-page) { max-width: none; }

/* ---- Session head ---- */
.session-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-lg); flex-wrap: wrap; margin-bottom: var(--sp-md);
}
.session-title h1 { display: flex; align-items: baseline; gap: var(--sp-sm); flex-wrap: wrap; }
.session-title h1 .sep { color: var(--faint); }
.session-meta { display: flex; align-items: center; gap: var(--sp-md); flex-wrap: wrap; margin-top: var(--sp-sm); font-size: 0.8125rem; }

/* The owner/admin controls ride on the header's top line opposite the title, so
   publishing and deleting cost no vertical band of their own. */
.session-actions { display: flex; align-items: center; gap: var(--sp-sm); flex: none; flex-wrap: wrap; justify-content: flex-end; }
.session-actions .share-link { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26ch; }

/* ---- Session grid: outline + transcript (the body opens in a modal, not a third column) ---- */
.session-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-lg); align-items: start; }
.session-main { min-width: 0; }

/* ---- Outline (left pane) ---- */
.outline-rail { position: sticky; top: var(--sp-md); align-self: start; max-height: calc(100vh - var(--sp-lg)); overflow-y: auto; }
.outline {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-sm);
}
.outline-head { padding: var(--sp-xs) var(--sp-sm) var(--sp-sm); }
.ol-group { margin-bottom: 1px; }
.ol-turn {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: 5px var(--sp-sm); border-radius: var(--r-sm);
  color: var(--subtext); font-size: 0.8125rem; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-state);
}
.ol-turn:hover { background: var(--surface-2); text-decoration: none; }
.ol-turn.current { background: var(--surface-3); color: var(--text); }
.ol-dot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--faint); }
.ol-user .ol-dot { background: var(--info); }
.ol-assistant .ol-dot { background: var(--lilac); }
.ol-error .ol-dot { background: var(--err); }
.ol-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-role { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; color: var(--muted); }
.ol-count { margin-left: auto; font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.ol-steps { margin: 1px 0 3px 14px; border-left: 1px solid var(--border); padding-left: var(--sp-sm); display: flex; flex-direction: column; gap: 1px; }
.ol-step {
  display: flex; align-items: baseline; gap: var(--sp-sm);
  padding: 3px var(--sp-sm); border-radius: var(--r-sm);
  color: var(--muted); font: 450 0.75rem/1.3 var(--mono); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-state), color var(--dur-fast) var(--ease-state);
}
.ol-step:hover { background: var(--surface-2); color: var(--subtext); text-decoration: none; }
.ol-step.inspect-selected { background: var(--surface-3); color: var(--text); }
.ol-step .ol-tn { color: var(--lilac); }
.ol-step.ol-step-error .ol-tn { color: var(--err); }
.ol-step .ol-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

/* ---- Inspector (tool-body modal) ----
   A selected tool call's bodies open in a large centered dialog instead of a
   docked column, so reading a body has the room a 360px rail never did and the
   transcript keeps the full width when nothing is open. One overlay layer only,
   dismissed by the backdrop, Esc, or the close control. */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-2xl);
  background: rgba(8, 6, 14, 0.62);
  animation: fadein var(--dur-base) var(--ease-settle);
}
.modal-overlay[hidden] { display: none; }
.modal-dialog {
  width: min(1100px, 92vw); height: min(880px, 88vh);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-overlay);
}
body.modal-open { overflow: hidden; }
.insp-head { display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-md) var(--sp-md); border-bottom: 1px solid var(--border); }
.insp-tn { color: var(--lilac); font-family: var(--mono); font-weight: 500; font-size: 0.8125rem; flex: none; }
.insp-file { color: var(--muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-spacer { flex: 1 1 auto; }
.insp-status { flex: none; font-size: 0.75rem; font-weight: 500; }
.insp-close { background: transparent; color: var(--faint); border: none; padding: 2px 6px; font-size: 0.875rem; flex: none; }
.insp-close:hover { background: var(--surface-2); color: var(--subtext); }
.insp-views { margin: var(--sp-sm) var(--sp-md); }
.insp-body { flex: 1; padding: 0 var(--sp-md) var(--sp-md); overflow: auto; min-height: 0; }
.insp-body .tool-body, .insp-body .diff { margin-top: 0; max-height: none; }
.insp-loading { padding: var(--sp-md); font-size: 0.8125rem; }
.insp-trunc { padding: var(--sp-sm) 0 2px; font-size: 0.75rem; }
/* The selected chip in the transcript reads as wired to the open inspector. */
.tool-chip.inspect-selected { border-color: var(--lilac); box-shadow: 0 0 0 1px var(--lilac); }

/* ---- Transcript ---- */
.transcript { display: flex; flex-direction: column; gap: var(--sp-md); }
.msg { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-md) var(--sp-lg); scroll-margin-top: 96px; }
.msg-user { background: var(--msg-user); }
.msg-assistant { background: var(--msg-assistant); }
.msg-other { background: var(--surface); }
.msg .meta { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-sm); font-size: 0.75rem; }
.msg .meta .role { color: var(--subtext); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.6875rem; }
.msg .content { white-space: pre-wrap; word-break: break-word; max-width: 78ch; }
.thinking { margin-bottom: var(--sp-sm); }
.thinking summary { color: var(--muted); font-size: 0.75rem; user-select: none; letter-spacing: 0.04em; text-transform: uppercase; }
.thinking summary::marker { color: var(--faint); }
.thinking-body { color: var(--muted); font-style: italic; white-space: pre-wrap; border-left: 1px solid var(--border); padding-left: var(--sp-md); margin-top: var(--sp-sm); }

/* ---- Tool chips ---- */
.tools { display: flex; flex-direction: column; gap: var(--sp-xs); margin-top: var(--sp-md); }
.tool-chip {
  display: inline-flex; gap: var(--sp-sm); align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 5px 10px; font: 450 0.8125rem/1.4 var(--mono); width: fit-content; max-width: 100%;
}
.tool-chip .tname { color: var(--lilac); font-weight: 500; }
.tool-chip .tpath { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.tstatus.ok { color: var(--ok); }
.tstatus.err { color: var(--err); }
.stamp {
  font: inherit; background: var(--surface-2); color: var(--subtext);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 7px;
}
button.stamp { transition: background var(--dur-fast) var(--ease-state), color var(--dur-fast) var(--ease-state), border-color var(--dur-fast) var(--ease-state); }
button.stamp:hover { background: var(--lilac); color: var(--ink); border-color: var(--lilac); }
button.stamp.open { background: var(--lilac); color: var(--ink); border-color: var(--lilac); }
button.stamp.loading { opacity: 0.6; }

pre.tool-body {
  margin: var(--sp-sm) 0 2px; padding: var(--sp-md); max-height: 440px; overflow: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
  font: 400 0.75rem/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--subtext);
  animation: expand var(--dur-base) var(--ease-settle);
}
pre.tool-body.error { color: var(--err); }
@keyframes expand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- Attachments (lifted binary images) ---- */
.attachments { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin-top: var(--sp-md); }
.attachment.image { margin: 0; display: flex; flex-direction: column; gap: var(--sp-xs); max-width: 320px; }
.attachment.image a { display: block; line-height: 0; }
.attachment.image img {
  max-width: 100%; max-height: 320px; height: auto; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2);
}
.attachment.image figcaption { font: 450 0.8125rem/1.4 var(--mono); }
a.attachment.file { width: fit-content; text-decoration: none; }

/* ---- Inline diff (editing tools) ---- */
.diff { margin: var(--sp-sm) 0 2px; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; animation: expand var(--dur-base) var(--ease-settle); }
.diff-file { background: var(--surface-2); color: var(--subtext); font: 450 0.75rem/1.6 var(--mono); padding: 4px var(--sp-md); border-bottom: 1px solid var(--border); }
.diff-body { margin: 0; padding: var(--sp-sm) 0; background: var(--bg); max-height: 440px; overflow: auto; font: 400 0.75rem/1.5 var(--mono); }
.diff-line { display: block; white-space: pre-wrap; word-break: break-word; padding: 0 var(--sp-md) 0 var(--sp-xl); position: relative; }
.diff-line::before { position: absolute; left: var(--sp-sm); color: var(--faint); }
.diff-del { background: rgba(239, 154, 169, 0.10); color: var(--err); }
.diff-del::before { content: "-"; }
.diff-add { background: rgba(159, 214, 166, 0.10); color: var(--ok); }
.diff-add::before { content: "+"; }
.diff-hunk { color: var(--muted); padding: 2px var(--sp-md); }

/* ---- Subagents ---- */
.subagents { margin: var(--sp-sm) 0 var(--sp-lg); padding-left: var(--sp-md); border-left: 1px solid var(--border); }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .session-grid { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .session-grid { grid-template-columns: 1fr; }
  .outline-rail { display: none; }
  .session-head { flex-direction: column; }
  .modal-overlay { padding: var(--sp-md); }
  .modal-dialog { width: 96vw; height: 92vh; }
}