/* The setup interview and "Something changed" as conversation cards
   (docs/CONVERSATIONAL-APP.md, sections 4, 5 and 5.1). Light theme only,
   tokens from tokens.css. The thread, bubbles, chips and composer are
   chat.css; this file styles the card bodies inside them, the header's setup
   dots and the change animation. */

/* ---- the setup thread ---------------------------------------------------------- */
.intake-thread { display: flex; flex-direction: column; gap: 14px; }
.intake-thread .msg[data-id="ix-typing"] .bubble { color: var(--text-3); }
.intake-thread .msg[data-id="ix-typing"] .bubble::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--brand); vertical-align: middle; animation: ixc-breathe var(--dur-loop) var(--ease-in-out) infinite; }
@keyframes ixc-breathe { 50% { opacity: .25; transform: scale(.7); } }

/* Card bodies: plain text in the system's voice, no boxes inside boxes. */
.ix-qcard-compact, .ix-probe-chat, .ix-card-chat { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ix-qcard-compact .ix-q-title, .ix-probe-chat .ix-q-title, .ix-heard-compact .ix-q-title {
  margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 1.5; letter-spacing: 0; text-wrap: pretty;
}
.ix-q-now { margin: 4px 0 0; font-size: 13px; color: var(--text-3); }
.ix-qcard-compact .ix-heard-line { margin-top: 6px; }
.ix-qcard-compact .ix-q-field { margin-top: 12px; }
.ix-probe-chat .ix-situation { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.ix-probe-list { margin: 8px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.ix-probe-list li + li { margin-top: 2px; }

.ix-card-chat > .msg-text { margin: 0 0 8px; }
.ix-heard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ix-heard-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ix-heard-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.ix-heard-list li.ix-soft::before { background: var(--border); }
.ix-heard-compact .ix-q-title { margin-top: 10px; }
.ix-sum-more { color: var(--text-3); font-size: 13px; }

.ix-summary-compact .ix-sumlist { border-top: 0; }
.ix-summary-compact .ix-sumlist li { grid-template-columns: 16px minmax(0, 1fr); padding: 6px 0; border-bottom: 0; font-size: 14px; animation: none; }
.ix-summary-compact .ix-draft { margin-top: 10px; }

/* A finished stage: one line, the details one tap away. */
.ix-stage-done { font-size: 14px; color: var(--text-2); }
.ix-stage-done summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; min-height: 32px; }
.ix-stage-done summary::-webkit-details-marker { display: none; }
.ix-stage-done summary::after { content: "Show"; margin-left: auto; font-size: 13px; color: var(--brand); }
.ix-stage-done[open] summary::after { content: "Hide"; }
.ix-stage-check { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--gold); color: var(--ground); animation: ixc-pop var(--dur-3) var(--ease-spring) both; }
@keyframes ixc-pop { from { transform: scale(.4); opacity: 0; } }
.ix-stage-done .ix-summary-compact { padding: 6px 0 0 26px; }

.ix-scn-compact { padding: 14px 16px; margin-top: 4px; }
.ix-scn-compact .ix-scn-title { margin: 0 0 4px; font-weight: 600; font-size: 15px; }
.ix-scn-compact .ix-scn-setup, .ix-scn-compact .ix-scn-outcome { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.ix-scn-compact .ix-scn-outcome { margin: 8px 0 0; font-weight: 600; }

.ix-review-compact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ix-review-line { margin: 0; flex: 1 1 260px; font-size: 14px; color: var(--text-2); }
.ix-review-line strong { color: var(--text); }
.ix-create-btn { min-height: 44px; }

.ix-concept-chat .ix-concept-tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--wordmark); }

/* ---- header: setup dots -------------------------------------------------------------- */
.setup-progress { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.setup-progress:hover { background: var(--surface-2); }
.setup-progress:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sp-dots { display: inline-flex; gap: 6px; }
.sp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); transition: background-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-spring); }
.sp-dot.sp-done { background: var(--gold); }
.sp-dot.sp-attn { background: var(--orange); }
.sp-dot.sp-cur { background: var(--surface); box-shadow: 0 0 0 2px var(--brand); }
.sp-dot.sp-cur.sp-done { background: var(--gold); }
.sp-label { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-sheet { display: grid; gap: 20px; }
@media (max-width: 560px) {
  .sp-label { display: none; }
}

/* ---- right rail: the interview's stages ------------------------------------------------ */
.setup-rail { display: flex; flex-direction: column; gap: 22px; font-size: 14px; color: var(--text-2); }
.sr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.sr-title { font-weight: 600; color: var(--text); }
.sr-min { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* The line behind the dots fills to the current stage. */
.sr-stages { --dot: 12px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sr-stages::before, .sr-stages::after { content: ""; position: absolute; left: calc(var(--dot) / 2 + 9px); top: 22px; bottom: 22px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--border); }
.sr-stages::after { background: var(--gold); transform-origin: top; transform: scaleY(var(--fill, 0)); transition: transform 600ms var(--ease-out); }
.sr-btn { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 9px; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; text-align: left; }
.sr-btn:not(:disabled) { cursor: pointer; }
.sr-btn:not(:disabled):hover { background: var(--surface-2); }
.sr-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sr-btn:disabled { cursor: default; }
.sr-dot { flex: none; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--border); transition: background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-spring); }
.sr-done .sr-dot { background: var(--gold); box-shadow: none; }
.sr-current .sr-dot { background: var(--surface); box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); transform: scale(1.1); }
.sr-name { line-height: 1.35; }
.sr-done .sr-name { color: var(--text-2); }
.sr-current .sr-name { font-weight: 600; color: var(--text); }
.sr-upcoming .sr-name { color: var(--text-3); }
.sr-known { border-top: 1px solid var(--border); padding-top: 16px; }
.sr-known-title { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.sr-known ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sr-known li { display: grid; gap: 1px; }
.sr-count { color: var(--text); font-variant-numeric: tabular-nums; }
.sr-sub { font-size: 12px; color: var(--text-3); }

/* ---- stage confirms: short lines, must / prefer -------------------------------------------- */
.ix-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ix-lines li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--text); }
.ix-lines li.ix-lines-more { color: var(--text-3); font-size: 13px; }
.ix-tag { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 18px; }
.ix-tag-must { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.ix-tag-prefer { color: var(--text-3); box-shadow: inset 0 0 0 1px var(--border); }
.ix-stage-done-body { padding: 6px 0 0 26px; }

/* ---- "Something changed" cards ------------------------------------------------------------ */
.chg-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.chg-card > .msg-text { margin: 0; }
.chg-card .token-card { margin: 0; }
.chg-finding { margin: 0; }
.results-loading-line { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--text-2); }
.alt-lines { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.alt-line { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 14px; }
.alt-line .btn { min-height: 44px; }
.chg-line { margin: 0; font-size: 14px; color: var(--text-2); }
.chg-status { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 18px; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }

/* Options in the conversation: up to 3 one-line rows, the chosen one holds
   Apply and "Why". Calm: no boxes inside boxes, one primary button. */
.opt-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.option-card.opt-row { padding: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; box-shadow: none; display: block; gap: 0; animation: none; }
.option-card.opt-row:first-child { border-top: 0; }
.opt-main { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.opt-pick { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.opt-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.opt-dot { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-strong, var(--border)); transition: box-shadow var(--dur-1, 120ms) ease; }
.opt-row.on .opt-dot { box-shadow: inset 0 0 0 5px var(--brand); }
.opt-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.opt-meta { flex: none; color: var(--text-3); font-size: 13px; white-space: nowrap; }
.opt-rec { flex: none; display: inline-flex; color: var(--gold-ink, #b7791f); }
.opt-acts { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.opt-acts .apply-option { min-height: 40px; padding-inline: 16px; }
.opt-why-btn { min-height: 44px; padding: 0 8px; color: var(--text-2); }
.opt-why { display: grid; gap: 8px; padding: 0 0 12px 26px; animation: rise var(--dur-2, 200ms) var(--ease-out, ease) both; }
.opt-why > p { margin: 0; color: var(--text-2); }
.opt-why .oc-badges:empty { display: none; }
@media (max-width: 480px) {
  .opt-main { flex-wrap: wrap; gap: 0 8px; }
  .opt-pick { flex-basis: 100%; }
  .opt-acts { margin: 0 0 8px 26px; }
  .opt-pick { flex-wrap: wrap; row-gap: 0; }
  /* The text sits beside its dot; meta and the star wrap under the text. */
  .opt-text { flex: 1 1 calc(100% - 26px); white-space: normal; }
  .opt-meta { margin-left: 26px; }
}
.undo-change { justify-self: start; min-height: 44px; gap: 6px; }
svg.undo-ring { width: 16px; height: 16px; transform: rotate(-90deg); }
svg.undo-ring circle { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 50.3; stroke-dashoffset: 0; animation: ring-down var(--ms, 45000ms) linear forwards; animation-delay: var(--delay, 0ms); }

/* ---- the apply animation (5.1): who left, who stepped in ------------------------------------- */
.slot-move { display: grid; gap: 10px; }
.sm-row { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.sm-slot { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
/* Side by side: the person who left stays (struck, dimmed) and the replacement arrives beside them. */
.sm-lane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 34px; }
.sm-chip { display: inline-flex; max-width: 100%; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--border); font-size: 14px; white-space: nowrap; }
.sm-name { position: relative; font-weight: 600; }
.sm-tag { font-size: 12px; color: var(--text-2); }
.sm-out { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 10%, var(--surface)); color: var(--bad); }
.sm-out .sm-tag { color: inherit; }
.sm-out .sm-name::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px; background: currentColor; transform-origin: left center; }
.sm-in { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); }
.sm-in .sm-tag { color: var(--brand); font-weight: 600; }
.sm-caption { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.sm-more { margin: 0; font-size: 13px; color: var(--text-3); }

/* Three states, set by change/thread.js SlotMoves (timings in motion.js
   SLOT_MOTION). .sm-pre, the first frame: the person who is out in the slot,
   nobody in yet. .sm-playing: motion.js moves them. .sm-settled (also reduced
   motion, and a card from earlier): who left, struck and dimmed, beside the
   replacement, outline settled. */
.slot-move.sm-pre .sm-in, .slot-move.sm-pre .sm-caption, .slot-move.sm-pre .sm-row + .sm-row { opacity: 0; }
.slot-move.sm-pre .sm-out { background: var(--surface); border-color: var(--border); color: var(--text); }
.slot-move.sm-pre .sm-out .sm-name::after { transform: scaleX(0); }
.slot-move.sm-settled .sm-out { opacity: .6; } /* motion.js OUT_REST_OPACITY: who left stays, struck */
.slot-move.sm-settled .sm-in { box-shadow: none; }
/* Nobody covers: an "Open" placeholder takes the slot, so no empty band. */
.sm-open { border-style: dashed; border-color: var(--border-strong, var(--border)); box-shadow: none; color: var(--text-2); background: var(--surface); }
.sm-open .sm-tag { color: var(--text-3); font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
  .ix-stage-check, .intake-thread .msg[data-id="ix-typing"] .bubble::after { animation: none; }
  .sr-stages::after, .sr-dot { transition: none; }
}

/* A list question's table stays folded: chips and words come first. */
.ix-q-table { margin-top: 2px; }
.ix-q-table > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--text-2); font-size: 13.5px; list-style: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.ix-q-table > summary::-webkit-details-marker { display: none; }
.ix-q-table > summary:hover { color: var(--text); }
.ix-q-table[open] > summary { color: var(--text-3); }