/* ============================================================================
   Career Coach — page system
   ----------------------------------------------------------------------------
   Built entirely on the shared foundation:
     tokens      → refined-tokens.css (--space-*, --text-*, --r-*, --ease-*)
     primitives  → .rm-card, .rm-btn, .rm-icon-btn, .form-input, .form-textarea
     components  → WorkspaceContextBar, PageIntro, ContentReferenceCard

   Layout contract
   ---------------
   The page has two modes, toggled by `body.coach-page.is-chatting`:

     setup mode  — an ordinary document-flow form page. The page scrolls, the
                   footer is reachable, spacing follows the standard workspace
                   rhythm.

     chat mode   — an app shell locked to the viewport. The header is pinned at
                   the top, the composer is pinned at the bottom, and the
                   message thread is the ONE scroll container on the page. This
                   is the ChatGPT/Claude model: the page itself never scrolls, so
                   the composer can never drift relative to the conversation.

   Every horizontal edge on this page — breadcrumb, title, setup cards, message
   thread, composer — resolves to `.coach-container`, which is the same measure
   the WorkspaceContextBar uses. Header and body therefore share one left edge.
   ============================================================================ */

.coach-page {
  /* Mirrors the shared `.container` primitive and WorkspaceContextBar, so the
     breadcrumb, the title, the setup cards, the message thread, and the
     composer all resolve to one left edge and one max width. */
  --coach-measure: var(--container-max-width);
  --coach-gutter: var(--space-10);
  /* Reading measure for coach prose — long-form answers stay legible even
     though their container is full page width. */
  --coach-prose-measure: 68ch;
  --coach-composer-radius: var(--r-xl);
}

.coach-container {
  width: 100%;
  max-width: var(--coach-measure);
  margin-inline: auto;
  padding-inline: var(--coach-gutter);
  box-sizing: border-box;
}

/* ── Shell ────────────────────────────────────────────────────────────────── */

.coach-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--paper-0);
}

.coach-header {
  flex: 0 0 auto;
}

.coach-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Entering chat mode removes the document scrollbar. Without a reserved gutter
   the whole page — header included — would jump sideways by half a scrollbar at
   the exact moment the conversation opens. Reserving it on the root keeps both
   modes on the same axis. (No-op where the platform uses overlay scrollbars.) */
:root:has(body.coach-page) {
  scrollbar-gutter: stable;
}

/* Chat mode — lock the shell to the viewport so the thread owns scrolling.
   `--coach-shell-offset` is the distance from the top of the viewport to the
   top of the shell (the mobile app bar, or the marketing navbar for guests).
   The controller measures it, because which chrome is above the shell depends
   on auth state and viewport, and getting it wrong pushes the composer off the
   bottom of the screen. */
body.coach-page.is-chatting {
  overflow: hidden;
}

body.coach-page.is-chatting .footer {
  display: none;
}

.coach-page.is-chatting .coach-shell {
  height: calc(100dvh - var(--coach-shell-offset, 0px));
  min-height: 0;
  overflow: hidden;
}

/* ── Setup mode ───────────────────────────────────────────────────────────── */

.coach-setup {
  padding-block: var(--space-8) var(--space-20);
}

.coach-setup[hidden],
.coach-setup.is-hidden {
  display: none;
}

.coach-setup-intro {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.coach-setup-intro > * {
  margin: var(--space-0);
}

/* The old rule stacked --text-5xl on line-height 1.06 with no bottom spacing,
   so descenders in the title physically overlapped the lede. Sized to the
   workspace scale (--text-4xl) with a real leading value instead. */
.coach-setup-title {
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-0);
}

.coach-setup-lede {
  max-width: 62ch;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-2);
}

/* ── Step panel primitive ─────────────────────────────────────────────────── */

.coach-panel {
  margin-bottom: var(--space-6);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.coach-panel:hover {
  border-color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}

.coach-panel > h2,
.coach-panel__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  color: var(--ink-0);
}

/* `.coach-panel label { display: block }` outranks the UA's `[hidden]` rule, so
   controller-toggled labels (the context step relabels itself per coaching
   mode) rendered even while marked hidden. Restore `hidden` as authoritative. */
.coach-panel [hidden],
.coach-container [hidden] {
  display: none !important;
}

.coach-panel label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: var(--space-2);
}

.coach-panel p {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin: 0 0 var(--space-4);
  line-height: 1.6;
}

.coach-panel__optional {
  font: 400 var(--text-xs) / 1.3 var(--font-sans);
  color: var(--ink-3);
}

.coach-field-intro {
  margin: 0 0 var(--space-4);
}

.coach-dynamic-field {
  margin-top: var(--space-4);
}

/* A referenced article/job belongs to the choice above it, so it sits tight to
   the preceding card while keeping the standard gap before the next prompt. */
.coach-reference-card {
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-4);
}

/* ── Coaching mode chips ──────────────────────────────────────────────────── */

.coaching-mode-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.coaching-mode-chip {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background-color: var(--paper-1);
  color: var(--ink-0);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-standard);
}

.coaching-mode-chip strong {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-0);
}

.coaching-mode-chip span {
  font-family: var(--font-serif);
  font-size: var(--text-3xs);
  color: var(--ink-2);
  line-height: 1.4;
}

.coaching-mode-chip:hover {
  border-color: var(--ink-0);
  background-color: var(--paper-0);
}

.coaching-mode-chip:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.coaching-mode-chip.selected {
  border-color: var(--ink-0);
  background-color: var(--ink-0);
  color: var(--paper-0);
}

.coaching-mode-chip.selected strong {
  color: var(--paper-0);
}

.coaching-mode-chip.selected span {
  color: var(--paper-2);
}

/* ── Job picker ───────────────────────────────────────────────────────────── */

.job-search-bar {
  position: relative;
}

.job-search-results {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-dropdown);
  max-height: 280px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

.job-search-results.visible {
  display: block;
}

.job-result-item {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.job-result-item:last-child {
  border-bottom: 0;
}

.job-result-item:hover,
.job-result-item:focus-visible {
  background: var(--paper-1);
  outline: none;
}

.job-result-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-0);
}

.job-result-company {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--ink-2);
}

.coach-job-status {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.coach-empty-message {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

#selectedJobDisplay {
  display: none;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--paper-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
}

#selectedJobDisplay.visible {
  display: block;
}

.selected-job-content {
  margin-bottom: var(--space-2);
}

.selected-job-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink-0);
}

.selected-job-company {
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.selected-job-link {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.job-description-area {
  margin-top: var(--space-4);
}

/* ── Resume / history sharing ─────────────────────────────────────────────── */

.history-share-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-1);
  color: var(--ink-1);
  cursor: pointer;
}

.history-share-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent);
}

.history-share-option input {
  margin-top: 3px;
  accent-color: var(--brand);
}

.history-share-option strong {
  display: block;
  font-size: var(--text-sm);
}

.history-share-option span {
  display: block;
  margin-top: 3px;
  color: var(--ink-2);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.full-history-notice {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--brand-soft);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-md);
}

.full-history-notice.visible {
  display: block;
}

.full-history-notice p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--brand-deep);
}

.full-history-notice a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-deep);
  text-decoration: underline;
}

/* ── Quests ───────────────────────────────────────────────────────────────── */

.quests-list {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.quest-checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background-color: var(--paper-1);
  cursor: pointer;
  transition: var(--transition-fast);
}

.quest-checkbox-item:hover {
  border-color: var(--ink-0);
  background-color: var(--paper-0);
}

.quest-checkbox-item.selected {
  border-color: var(--ink-0);
  background-color: var(--ink-0);
  color: var(--paper-0);
}

.quest-checkbox-item.selected label {
  color: var(--paper-0);
}

.quest-checkbox-item input {
  width: 18px;
  height: 18px;
  accent-color: var(--clay);
}

.quest-checkbox-item label {
  flex: 1;
  margin-bottom: var(--space-0);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-0);
  cursor: pointer;
}

.quest-context-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: color-mix(in srgb, var(--brand) 10%, var(--paper-1));
  border: 1px solid var(--brand);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.quest-context-pill svg {
  color: var(--brand);
}

/* ── Form actions / upsell / completion ───────────────────────────────────── */

.coach-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

#upsellBlock {
  display: none;
  margin-bottom: var(--space-12);
  padding: var(--space-8);
  background: var(--paper-0);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  text-align: center;
}

#upsellBlock.visible {
  display: block;
}

#upsellBlock h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--space-4);
  color: var(--ink-0);
}

#upsellBlock p {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--ink-2);
  margin-bottom: var(--space-6);
}

#upsellBlock a {
  display: inline-block;
}

#completeSection {
  display: none;
}

#completeSection.visible {
  display: block;
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.complete-icon {
  font-size: 48px;
  color: var(--clay);
  margin-bottom: var(--space-4);
}

.complete-text {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--ink-2);
  margin-bottom: var(--space-6);
}

#completeSection a {
  display: inline-block;
  margin: var(--space-2);
}

.cover-letter-section {
  display: none;
}

.cover-letter-section.visible {
  display: block;
  margin-top: var(--space-4);
}

.coach-upgrade-link {
  color: var(--on-ink);
  text-decoration: underline;
}

/* State helper — was previously trapped inside a mobile media query, so every
   element meant to start hidden rendered as a stray gap on desktop. */
.coach-state-hidden {
  display: none;
}

/* ── Header actions ───────────────────────────────────────────────────────── */

.sb-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(300px, 32vw);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-md);
  white-space: nowrap;
  background: var(--paper-1);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font: inherit;
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.sb-search:hover {
  border-color: var(--line-strong);
}

.sb-search:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}

.sb-search svg {
  flex: none;
}

.sb-search .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  padding: 2px 6px;
  color: var(--ink-3);
}

.sb-past,
.sb-new {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.sb-past .ct {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--ink-3);
}

/* ── Chat: scroll pane ────────────────────────────────────────────────────── */

.coach-chat {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.coach-chat.visible {
  display: flex;
}

/* Sub-header inside the chat (reference card + job context). Pinned with the
   rest of the chrome — it must not scroll with the conversation. */
.coach-chat-context {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
}

.coach-chat-context__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.coach-chat-context:empty,
.coach-chat-context.is-empty {
  display: none;
}

.coach-job-context {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--ink-3);
}

/* THE scroll container. Everything the controller scrolls targets this
   element, so it must actually be scrollable at every viewport width — the
   previous build forced `overflow: visible !important` here on desktop, which
   silently turned every scrollTop write into a no-op and left the document to
   scroll instead. */
.coach-thread-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  /* Deliberately no `scrollbar-gutter` here. `.coach-container` is
     `width: 100%` with a max-width that exceeds the space available at normal
     widths, so it fills rather than centres — which anchors its left edge to
     this pane's content-box left edge. The scrollbar only takes space from the
     right, so the thread's content edge stays exactly where the pinned header
     and composer put theirs. Reserving a gutter instead pushed the whole thread
     a scrollbar-width inboard of the page header. */
}

.coach-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-6);
}

/* ── Chat: messages ───────────────────────────────────────────────────────── */

.m-user {
  display: flex;
  justify-content: flex-end;
}

.m-user .b {
  max-width: 74%;
  padding: var(--space-3) var(--space-4);
  background: var(--brand-soft);
  color: var(--brand-deep);
  border-radius: var(--r-xl) var(--r-lg) var(--r-xs) var(--r-lg);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.m-coach {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
}

.m-coach .who {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-2);
}

.m-sys {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.m-sys::before,
.m-sys::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 80px;
  background: var(--line);
}

.m-acts {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.coachmark {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--clay-soft);
  color: var(--clay-deep);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  flex: none;
}

.ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
  background: var(--clay-soft);
  color: var(--clay-deep);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.ctx-chip .pc {
  font-weight: 600;
}

/* Coach prose — long answers cap at a reading measure even though the thread
   spans the full page container. */
.ex-prose {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.62;
  color: var(--ink-1);
  max-width: var(--coach-prose-measure);
}

.ex-prose p {
  margin: 0 0 var(--space-3);
}

.ex-prose p:last-child {
  margin-bottom: var(--space-0);
}

.ex-prose strong {
  font-weight: 600;
  color: var(--ink-0);
}

.ex-prose ul,
.ex-prose ol {
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-0);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ex-prose li {
  position: relative;
  padding-left: var(--space-6);
}

.ex-prose li::before {
  content: "–";
  position: absolute;
  left: var(--space-1);
  top: 0;
  color: var(--clay-deep);
  font-weight: 600;
}

.ex-prose .pull {
  border-left: 2px solid var(--clay);
  padding: 3px 0 3px var(--space-4);
  margin: var(--space-3) 0;
  font-style: italic;
  color: var(--ink-1);
}

.ex-prose h1,
.ex-prose h2,
.ex-prose h3 {
  font-family: var(--font-display);
  color: var(--ink-0);
  margin: var(--space-4) 0 var(--space-2);
  font-weight: 600;
}

.ex-prose h3 {
  font-size: var(--text-base);
}

.ex-prose code {
  background: var(--paper-1);
  padding: 2px 4px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--ink-0);
}

/* Newly-arrived turns settle in rather than snapping. */
.m-user,
.m-coach,
.m-sys {
  animation: coach-message-in var(--duration-slow) var(--ease-standard) both;
}

@keyframes coach-message-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Chat: loading states ─────────────────────────────────────────────────── */

.typing {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
}

.typing .dots {
  display: flex;
  gap: 5px;
}

.typing .dots i {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--ink-4);
  animation: coach-typing-bounce 1.3s infinite;
}

.typing .dots i:nth-child(2) { animation-delay: 0.18s; }
.typing .dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes coach-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Streaming caret on the in-flight answer. */
.ex-prose.is-streaming > :last-child::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--clay-deep);
  animation: coach-caret 1s steps(2, start) infinite;
}

@keyframes coach-caret {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ── Chat: jump to latest ─────────────────────────────────────────────────── */

.coach-jump-latest {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--space-3));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.coach-jump-latest.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.coach-jump-latest:hover {
  border-color: var(--ink-2);
}

/* ── Chat: composer ───────────────────────────────────────────────────────── */

.coach-composer-dock {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--paper-0);
  padding-block: var(--space-3) var(--space-4);
}

.coach-composer {
  position: relative;
}

.compose-box {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--coach-composer-radius);
  background: var(--card);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.compose-box:focus-within {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 14%, transparent);
}

.compose-box textarea {
  flex: 1;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.45;
  max-height: 168px;
  min-height: 24px;
  padding: var(--space-2) 0;
  overflow-y: auto;
}

.compose-box textarea::placeholder {
  color: var(--ink-3);
  font-style: italic;
}

.compose-box .send {
  flex: none;
  margin-bottom: 2px;
}

.compose-box .send[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Send button spinner while a turn is in flight. */
.compose-box .send.is-busy svg {
  display: none;
}

.compose-box .send.is-busy::after {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: var(--radius-full);
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  animation: coach-spin 0.7s linear infinite;
}

@keyframes coach-spin {
  to { transform: rotate(360deg); }
}

.compose-hint {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-inline: var(--space-1);
}

.compose-hint .l {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--ink-3);
}

.coach-message-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.coach-rolling-indicator {
  display: none;
  justify-content: flex-end;
  padding: 1px var(--space-1) 0;
  position: relative;
}

.coach-rolling-indicator.visible {
  display: flex;
}

.coach-rolling-label {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--ink-3);
  opacity: 0.5;
}

.coach-rolling-info-icon {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: var(--radius-full);
  border: 1px solid var(--ink-3);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  color: var(--ink-3);
  opacity: 0.5;
}

.coach-rolling-popup {
  display: none;
  position: absolute;
  bottom: 100%;
  right: 0;
  z-index: var(--z-dropdown);
  width: 260px;
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-1);
}

.coach-rolling-popup.visible {
  display: block;
}

/* ── Suggestion chips ─────────────────────────────────────────────────────── */

.suggestion-chips-container {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.suggestion-chip {
  display: inline-flex;
  align-items: center;
  max-width: 200px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-3xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background-color: var(--paper-1);
  color: var(--ink-0);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-chip:hover {
  border-color: var(--ink-0);
  background-color: var(--ink-0);
  color: var(--paper-0);
  transform: translateY(-1px);
}

.suggestion-chip:active {
  transform: translateY(0);
}

.suggestion-chip.custom-input {
  border-style: dashed;
  opacity: 0.7;
}

.suggestion-chip.custom-input:hover {
  opacity: 1;
}

/* ── Conversation browser modal ───────────────────────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  /* Above --z-modal (1050): the workspace rail and the mobile app bar both sit
     in the modal band, and this dialog must cover them. */
  z-index: 7000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
  background: color-mix(in srgb, var(--ink-0) 42%, transparent);
  backdrop-filter: blur(3px);
}

.scrim.open {
  display: flex;
  animation: coach-fade-in var(--duration-base) var(--ease-standard);
}

@keyframes coach-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.browser {
  width: min(940px, 100%);
  height: min(620px, 86vh);
  background: var(--paper-0);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.br-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--line);
}

.br-head .h {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink-0);
  white-space: nowrap;
}

.br-searchbox {
  flex: 1;
  position: relative;
  min-width: 180px;
}

.br-searchbox svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.br-searchbox .form-input {
  width: 100%;
  min-height: 38px;
  padding-left: var(--space-8);
  border-radius: var(--radius-full);
}

.br-close {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  flex: none;
}

.br-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 312px 1fr;
}

.br-results {
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--paper-0);
}

.br-group {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--space-3) var(--space-3) 6px;
}

.br-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  margin-bottom: 2px;
}

.br-item:hover {
  background: var(--paper-1);
}

.br-item:focus-visible {
  outline: none;
  border-color: var(--brand);
}

.br-item.on {
  background: var(--clay-soft);
}

.br-item .top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.br-item .d {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.br-item .q {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xs);
  color: var(--ink-1);
  line-height: 1.4;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.br-item .tg {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin-top: 7px;
  display: inline-block;
}

.br-item .preview {
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.br-preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper-1);
}

.pv-head {
  flex: none;
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--line);
}

.pv-head .ey {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pv-head .h {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--ink-0);
  margin-top: 7px;
  line-height: 1.2;
}

.pv-head .meta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--ink-3);
}

.pv-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
}

.pv-snip {
  margin-bottom: var(--space-4);
}

.pv-snip .role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-1);
}

.pv-snip .tx {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-1);
}

/* Previews render the same markdown the thread does, so give it the same
   breathing room — otherwise headings collide with the list that follows. */
.pv-snip .tx > :first-child { margin-top: var(--space-0); }
.pv-snip .tx > :last-child { margin-bottom: var(--space-0); }

.pv-snip .tx p {
  margin: 0 0 var(--space-3);
}

.pv-snip .tx h1,
.pv-snip .tx h2,
.pv-snip .tx h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink-0);
  margin: var(--space-4) 0 var(--space-2);
  line-height: 1.3;
}

.pv-snip .tx ul,
.pv-snip .tx ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}

.pv-snip .tx li {
  margin-bottom: var(--space-1);
}

.pv-snip .tx strong {
  font-weight: 600;
  color: var(--ink-0);
}

.pv-snip.user .tx {
  color: var(--ink-2);
  font-style: italic;
}

.pv-foot {
  flex: none;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.coach-recent-empty {
  display: none;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-3);
  font-size: var(--text-sm);
}

.coach-preview-placeholder {
  color: var(--ink-3);
  font-style: italic;
  text-align: center;
  margin-top: var(--space-8);
}

.coach-preview-loading {
  text-align: center;
  margin-top: var(--space-5);
}

.coach-preview-spinner {
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: var(--radius-full);
  border: 2px solid var(--line-strong);
  border-top-color: var(--clay);
  animation: coach-spin 0.7s linear infinite;
}

.coach-preview-error {
  color: var(--clay-deep);
  text-align: center;
  margin-top: var(--space-8);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* The gutter steps at exactly the breakpoints `.container` and
   `.workspace-context-bar__inner` use. Any other breakpoint here would make the
   header and the body below it disagree about the left edge. */
@media (min-width: 769px) and (max-width: 1024px) {
  .coach-page {
    --coach-gutter: var(--space-6);
  }
}

@media (max-width: 768px) {
  .coach-page {
    --coach-gutter: var(--space-4);
    --coach-composer-radius: var(--r-lg);
  }

  .coach-setup {
    padding-block: var(--space-6) var(--space-16);
  }

  .coach-setup-title {
    font-size: var(--text-3xl);
  }

  .coach-setup-lede {
    font-size: var(--text-base);
  }

  .sb-search {
    display: none;
  }

  .sb-past,
  .sb-new {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .coaching-mode-selector {
    grid-template-columns: 1fr;
  }

  .coach-thread {
    gap: var(--space-5);
    padding-block: var(--space-5) var(--space-4);
  }

  .m-user .b {
    max-width: 92%;
  }

  .m-coach {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .coachmark {
    display: none;
  }

  .m-acts {
    gap: 7px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-1);
  }

  .m-acts .rm-btn {
    flex: none;
  }

  .coach-composer-dock {
    padding-block: var(--space-2) max(var(--space-3), env(safe-area-inset-bottom));
  }

  .compose-hint {
    flex-direction: column;
    gap: 3px;
  }

  .scrim {
    padding: var(--space-0);
    align-items: stretch;
  }

  .browser {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .br-head {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-4) var(--space-3);
  }

  .br-head .h {
    flex: 1;
    min-width: 0;
    font-size: var(--text-base);
  }

  .br-searchbox {
    flex-basis: 100%;
    order: 3;
    min-width: 0;
  }

  .br-searchbox .form-input {
    min-height: 44px;
    font-size: var(--text-base);
  }

  .br-body {
    grid-template-columns: 1fr;
  }

  .br-preview {
    display: none;
  }

  .br-results {
    border-right: 0;
    padding: var(--space-3);
  }

  .br-item {
    padding: var(--space-3);
    border-color: var(--line);
    background: var(--card);
  }
}

/* main.css declares `input, button, .btn { width: 100% }` below 480px. That is
   right for stacked forms and wrong for every inline control on this page — it
   stretched the send button, the jump pill, the modal close, and the info dot
   across the full width. Opt those specific controls back out; the controls
   that genuinely want full width (mode chips, history rows) are left alone. */
@media (max-width: 480px) {
  .coach-jump-latest,
  .compose-box .send,
  .coach-rolling-info-icon,
  .br-close,
  .suggestion-chip,
  .m-acts .rm-btn,
  .coach-form-actions .rm-btn,
  .workspace-context-bar__actions .rm-btn,
  .workspace-context-bar__actions .sb-search {
    width: auto;
  }

  .coach-jump-latest {
    max-width: calc(100% - (var(--coach-gutter) * 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-user,
  .m-coach,
  .m-sys,
  .scrim.open {
    animation: none;
  }

  .coach-jump-latest {
    transition: none;
  }
}