/* The stage's Claude tab. Page chrome (the view switch, the rail caption) uses site tokens; everything inside
   .screen-chat is the Claude app's own dark palette and type, the same exception the terminal screen has
   (DESIGN.md, The Two Palettes Rule). Sizes inside the screen are in em off a container-width font size, so
   the window keeps its proportions in the bezel at every width, the way the terminal frames scale. */

/* ---------------------------------------------------------------- stage chrome (site tokens) */
.stage-seg .seg-thumb { width: calc((100% - 2 * var(--s-1)) / 2); }
/* the switch takes room from the chapter caption, so on wide rails the caption may wrap to a second line */
@media (min-width: 1024px) { .rail-cap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.65; } }
html:not(.js) .stage-seg, [data-failed] .stage-seg { display: none; }
.stage[data-view='chat'] .caption-size { display: none; }

.rail-views { display: grid; flex: none; align-items: center; }
.rail-views > * { grid-area: 1 / 1; }
.chat-railcap { align-self: center; max-width: 34rem; margin: 0; padding-inline: var(--s-1); font: 400 0.84375rem/1.65 var(--font-sans); color: var(--ink-2); opacity: 0; visibility: hidden; transition: opacity 250ms var(--ease-out), visibility 0s 250ms; }
.chat-railcap b { color: var(--ink); font-weight: 500; }
.rail-views .tabs { transition: opacity 250ms var(--ease-out), visibility 0s; }
.stage[data-view='chat'] .rail-views .tabs, .stage[data-view='chat'] .rail-cap { opacity: 0; visibility: hidden; transition: opacity 250ms var(--ease-out), visibility 0s 250ms; }
.stage[data-view='chat'] .chat-railcap, html:not(.js) .chat-railcap { opacity: 1; visibility: visible; transition: opacity 250ms var(--ease-out), visibility 0s; }
/* while the terminal shows, the Claude caption is out of the render tree (never hidden text); it fades in on switch */
html.js .stage:not([data-view='chat']) .chat-railcap { display: none; }
@starting-style { .stage[data-view='chat'] .chat-railcap { opacity: 0; } }
/* tablets: chapters on the first row, then switch, caption and Pause. Phones: switch and Pause, then the
   chapters (or the Claude caption in the same reserved box), then the chapter caption. */
@media (max-width: 1023px) { .rail-views { flex: 1 1 100%; order: -1; } }
@media (max-width: 767px) {
  .rail-views { order: 2; }
  .stage-seg { order: 0; }
  .rail .stage-toggle { order: 1; margin-left: auto; }
  .rail .rail-cap { order: 3; flex: 1 1 100%; }
  /* in Claude view the chapter caption has nothing to say: take it out so no empty band sits above the screen */
  .stage[data-view='chat'] .rail .rail-cap { display: none; }
  .stage[data-view='chat'] .rail-views .tabs { display: none; }
}

.screens { position: relative; }
.screens > .screen { transition: opacity 280ms var(--ease-out), visibility 0s; }
/* the inactive Claude screen leaves the render tree once its fade ends (main.js sets data-off), so its text never
   counts as hidden content; without scripts it is the visible, finished conversation */
html.js .screen-chat[data-off] { display: none; }
.screen-chat { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 280ms var(--ease-out), visibility 0s 280ms; }
.stage[data-view='chat'] .screen-chat, html:not(.js) .screen-chat { opacity: 1; visibility: visible; transition: opacity 280ms var(--ease-out), visibility 0s; }
.stage[data-view='chat'] .screen-term { opacity: 0; visibility: hidden; transition: opacity 280ms var(--ease-out), visibility 0s 280ms; }
@media (prefers-reduced-motion: reduce) { .screens > .screen, .chat-railcap, .rail-views .tabs { transition: none !important; } }

/* ---------------------------------------------------------------- the Claude window (its own palette) */
.screen-chat {
  --c-ground: #191919; --c-rail: #1f1f1f; --c-raised: #303030; --c-well: #1b1b1b;
  --c-line: #303030; --c-line-2: #3d3d3d; --c-text: #efefef; --c-body: #d6d6d6; --c-dim: #9c9c9c;
  --c-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --c-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  container-type: size; background: var(--c-ground); color: var(--c-text);
}
.screen-chat::after { display: none; }
.chat { position: absolute; inset: 0; font: 400 1.32cqw/1.55 var(--c-sans); }
.chat-app { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; }
.chat-i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.chat-rail { display: flex; flex-direction: column; align-items: center; gap: 1em; width: 3.5em; padding: 0.9em 0; background: var(--c-rail); border-right: 1px solid var(--c-line); color: var(--c-dim); }
.chat-new { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--c-raised); color: var(--c-text); }
.chat-new .chat-i { width: 1.05em; height: 1.05em; }
.chat-me { display: grid; place-items: center; width: 2em; height: 2em; margin-top: auto; border-radius: 50%; background: #3d3d3d; color: var(--c-text); font-size: 0.8em; font-weight: 600; }

.chat-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
.chat-top { display: flex; align-items: center; justify-content: space-between; height: 3em; padding: 0 1.25em; }
.chat-title { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.95em; color: var(--c-text); }
.chat-title .chat-i { width: 1.1em; height: 1.1em; color: var(--c-dim); }
.chat-share { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.9em; color: var(--c-text); }
.chat-share .chat-i { width: 1.05em; height: 1.05em; }

/* not a scroll container for the visitor: the replay moves it, and the wheel always scrolls the page (2026-11-03,
   a contained scroller trapped the page scroll whenever the pointer sat over the stage) */
.chat-scroll { overflow: hidden; }
.chat-log { max-width: 46em; margin: 0 auto; padding: 0.75em 2em 1.5em; }
.chat-log[data-out] { opacity: 0; transition: opacity 420ms var(--ease-out); }

.chat-user { display: flex; justify-content: flex-end; margin: 0.5em 0 1.4em; }
.chat-user p { max-width: 80%; margin: 0; padding: 0.6em 1em; border-radius: 1em; background: var(--c-raised); color: var(--c-text); }

.chat-say { margin: 0 0 1.75em; color: var(--c-text); }
.chat-say p { margin: 0 0 0.8em; }
.chat-say strong { font-weight: 600; }
.chat-say ol { margin: 0 0 0.8em; padding-left: 1.6em; }
.chat-say li { margin: 0 0 0.35em; padding-left: 0.25em; }
.chat-say .chat-dim { color: var(--c-dim); font-size: 0.93em; }
.chat-table { margin: 0 0 0.9em; overflow-x: auto; }
.chat-table table { border-collapse: separate; border-spacing: 0; font-size: 0.93em; font-variant-numeric: tabular-nums; }
.chat-table th, .chat-table td { padding: 0.4em 1.1em 0.4em 0; text-align: left; border-bottom: 1px solid var(--c-line-2); white-space: nowrap; }
.chat-table th { font-weight: 600; }
.chat-table td:nth-child(2), .chat-table td:nth-child(3), .chat-table th:nth-child(2), .chat-table th:nth-child(3) { text-align: right; padding-right: 1.6em; }
.chat-acts { display: flex; gap: 0.9em; color: var(--c-dim); }
.chat-acts .chat-i { width: 1.05em; height: 1.05em; }

/* tool use: a quiet disclosure line, like the app's collapsed steps */
.chat-tool { margin: 0 0 0.6em; }
.chat-tool + .chat-say, .chat-tool:last-child { margin-top: 0.9em; }
.chat-tool-row { display: inline-flex; align-items: center; gap: 0.55em; max-width: 100%; min-height: 2em; padding: 0.15em 0.6em 0.15em 0.15em; border: 0; border-radius: 0.5em; background: none; color: var(--c-dim); font: inherit; text-align: left; cursor: pointer; }
.chat-tool-ico { position: relative; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 0.45em; background: var(--c-raised); color: var(--c-text); }
.chat-tool-ico .chat-i { width: 1em; height: 1em; }
.chat-tool-name { font-weight: 500; color: var(--c-body); }
.chat-tool-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.93em; }
.chat-tool-caret { width: 1em; height: 1em; transform: rotate(-90deg); transition: transform 180ms var(--ease-out); }
.chat-tool-row[aria-expanded='true'] .chat-tool-caret { transform: none; }
@media (hover: hover) { .chat-tool-row:hover { color: var(--c-text); background: #222; } }
.chat-tool-row:focus-visible { outline: 2px solid var(--pop-up); outline-offset: 1px; }
.chat-tool-out { margin: 0.4em 0 0.4em 2.4em; padding: 0.6em 0.9em; border: 1px solid var(--c-line); border-radius: 0.75em; background: var(--c-well); }
.chat-tool-k { margin: 0.2em 0; font-size: 0.8em; color: var(--c-dim); }
.chat-tool-out pre { max-height: 13em; margin: 0 0 0.5em; overflow: auto; font: 400 0.78em/1.5 var(--c-mono); color: var(--c-body); white-space: pre; scrollbar-width: thin; scrollbar-color: #3d3d3d transparent; }
.chat-spin { position: absolute; inset: 0.3em; border-radius: 50%; border: 2px solid #4a4a4a; border-top-color: var(--c-text); opacity: 0; }

.chat-composer { padding: 0 1.25em 1em; }
.chat-box { max-width: 46em; margin: 0 auto; padding: 0.8em 1em 0.6em; border: 1px solid var(--c-line-2); border-radius: 1.1em; background: var(--c-raised); }
.chat-input { min-height: 1.55em; margin: 0 0 0.6em; color: var(--c-text); white-space: nowrap; overflow: hidden; }
.chat-ph { color: var(--c-dim); }
.chat-ph[hidden] { display: none; }
.chat-bar { display: flex; align-items: center; gap: 0.8em; color: var(--c-dim); }
.chat-chip { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.15em 0.65em 0.15em 0.45em; border: 1px solid #4a4a4a; border-radius: 99em; font-size: 0.88em; color: var(--c-body); }
.chat-chip .chat-i { width: 1.1em; height: 1.1em; }
.chat-send { margin-left: auto; }

/* phones: the app's narrow layout, no rail */
@container (max-width: 640px) {
  .chat { font-size: 3.8cqw; }
  .chat-rail { display: none; }
  .chat-app { grid-template-columns: minmax(0, 1fr); }
  .chat-top { height: 2.6em; padding: 0 1em; }
  .chat-share { display: none; }
  .chat-log { padding: 0.5em 1em 1em; }
  .chat-user p { max-width: 88%; }
  .chat-table table { font-size: 0.86em; }
  .chat-table th, .chat-table td { padding-right: 0.8em; }
  .chat-table td:nth-child(2), .chat-table td:nth-child(3), .chat-table th:nth-child(2), .chat-table th:nth-child(3) { padding-right: 0.9em; }
  .chat-composer { padding: 0 0.75em 0.75em; }
  .chat-tool-sum { display: none; }
}

/* ---------------------------------------------------------------- replay states (transform and opacity only) */
.chat-log .w { opacity: 0; transition: opacity 220ms var(--ease-out); }
.chat-log .w.on { opacity: 1; }
.chat-log .chat-acts { opacity: 0; transition: opacity 300ms var(--ease-out); }
.chat-log .chat-acts[data-on] { opacity: 1; }
.chat-user[data-in] p { animation: chat-in 320ms var(--ease-out) both; transform-origin: 100% 100%; }
.chat-tool[data-pending] .chat-tool-ico .chat-i, .chat-tool[data-pending] .chat-tool-sum, .chat-tool[data-pending] .chat-tool-caret { opacity: 0; }
.chat-tool[data-pending] .chat-spin { opacity: 1; animation: chat-spin 800ms linear infinite; }
.chat-tool[data-pending] { animation: chat-fade 240ms var(--ease-out) both; }
.chat-tool[data-done] .chat-tool-ico .chat-i, .chat-tool[data-done] .chat-tool-sum, .chat-tool[data-done] .chat-tool-caret { transition: opacity 260ms var(--ease-out); }
@keyframes chat-in { from { opacity: 0; transform: translateY(0.6em) scale(0.98); } }
@keyframes chat-fade { from { opacity: 0; transform: translateY(0.4em); } }
@keyframes chat-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .chat-log .w { opacity: 1; }
  .chat-user[data-in] p, .chat-tool[data-pending], .chat-tool[data-pending] .chat-spin { animation: none; }
}