/*
 * ASK PINTO — the harness (KORA-PORT-PLAN.md §2, mockup "INOX Harness").
 *
 * The Command Centre's own tokens (centre.css), not Kora's: white ground, the one cool grey,
 * hairlines rather than boxes, ink for primary actions, the accent only for focus and the
 * current item. No inline styles anywhere (the console's CSP is style-src 'self'), so every
 * state the script sets is a class here.
 *
 * Layout: past conversations live in the left rail under the console's links, the way a
 * chat tool keeps its history beside the conversation; the thread is a 760px measure with
 * the composer at its foot; the Memory panel opens on the right.
 */

/* ── the conversation list in the rail ─────────────────────────────────────── */
/* The rail scrolls as a whole when a short window cannot fit the links and the conversations,
   so the conversations never shrink to nothing under a long administrator menu. */
.nav { overflow-y: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.convos { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 10px; border-top: 1px solid var(--line); margin-top: 14px; }
.convos.hidden { display: none; }
.convos__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.convos__fold { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 0; background: none; color: var(--muted); font: 600 11px var(--sans); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; border-radius: 6px; }
.convos__fold svg { transition: transform var(--dur) var(--settle); }
.convos__fold[aria-expanded="true"] svg { transform: rotate(90deg); }
.convos__fold:hover { color: var(--ink-2); }
.convos__new { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); color: var(--ink); font: 600 13.5px var(--sans); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color var(--dur), background var(--dur); }
.convos__new svg { flex: none; color: var(--ink-2); }
.convos__new:hover { border-color: var(--muted); }
.convos__new.on { background: var(--raised); border-color: var(--raised); }
.convos__fold:focus-visible, .convos__new:focus-visible, .convos__all:focus-visible { outline: 3px solid var(--accent-edge); outline-offset: 1px; }
.convos__body { display: flex; flex-direction: column; gap: 4px; }
.convos__body.hidden { display: none; }
.convos__list { display: flex; flex-direction: column; gap: 1px; }
.convos__all { padding: 6px 10px; font-size: 13px; color: var(--ink-2); text-decoration: none; border-radius: 8px; }
.convos__all:hover, .convos__all.on { background: var(--raised); color: var(--ink); }
.convos__item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; font: 13.5px var(--sans); transition: background var(--dur); }
/* All conversations, the page */
.cvall { display: flex; flex-direction: column; gap: 26px; margin-top: 22px; }
.cvall__group { display: flex; flex-direction: column; }
.cvall__label { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cvall__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 10px 4px; border-top: 1px solid var(--line); }
.cvall__title { color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.cvall__title:hover { text-decoration: underline; }
.cvall__meta { display: flex; gap: 12px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cvall__meta .waiting { color: var(--decide); }
.cvall__meta .done { color: var(--ok); }
.cvall__acts { display: flex; gap: 10px; }
.cvall__rename { display: flex; gap: 8px; min-width: 0; }
.cvall__acts .hlink.danger { color: var(--bad); }
.cvall__older select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--ground); font: 13.5px var(--sans); color: var(--ink-2); cursor: pointer; }
.cvall__rename input { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--r); font: 14px var(--sans); }
@media (max-width: 860px) { .cvall__row { grid-template-columns: 1fr; gap: 4px; } }
.convos__item:hover { background: var(--raised); }
.convos__item.on { background: var(--raised); font-weight: 600; }
.convos__item:focus-visible { outline: 3px solid var(--accent-edge); outline-offset: 1px; }
.convos__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convos__meta { font-size: 12px; font-weight: 400; color: var(--muted); }
.convos__meta.waiting { color: var(--decide); }
.convos__meta.done { color: var(--ok); }
.convos__empty { padding: 4px 10px; font-size: 13px; color: var(--muted); }

/* ── the workspace ─────────────────────────────────────────────────────────── */
.main.harness-main { padding: 0; }
.hx { display: grid; grid-template-columns: minmax(0, 1fr); height: 100vh; }
.hx.mem-open { grid-template-columns: minmax(0, 1fr) 320px; }
.hx__col { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.hx__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 28px; border-bottom: 1px solid var(--hair); }
.hx__headl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hx__title { margin: 0; font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx__scope { font-size: 12px; color: var(--accent-ink); border: 1px solid var(--accent-edge); border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.hx__thread { flex: 1 1 auto; overflow-y: auto; padding: 28px 28px 12px; }
.hx__measure { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

/* the empty conversation: what needs you, then where to start */
/*
 * A NEW CONVERSATION: the welcome and the brand chips sit together in the
 * middle; the box stays at the foot, as in every conversation (Daniel, 2026-10-28). Once the
 * first message is sent `.is-new` goes and the thread fills the space.
 */
.hx.is-new .hx__col { overflow-y: auto; scrollbar-width: none; }
.hx.is-new .hx__col::-webkit-scrollbar { display: none; }
.hx.is-new .hx__thread { flex: 0 0 auto; overflow: visible; margin-top: auto; padding-bottom: 4px; }
/* the welcome sits in the middle (the empty .hx__below balances it); the box stays at the foot, where it is in every conversation */
.hx.is-new .hx__below { order: 1; margin-bottom: auto; }
.hx.is-new .hx__foot { order: 2; position: sticky; bottom: 0; background: var(--ground); }
.hx.is-new .hx__scope, .hx.is-new .hx__title, .hx.is-new .hcomposer__scope { display: none; }
.hx.is-new .hx__head { border-bottom-color: transparent; justify-content: flex-end; }
.hx.is-new .hcomposer__row { justify-content: flex-end; }
.hx:not(.is-new) .hx__below { display: none; }
.hx__below { padding: 8px 28px 48px; }
.hx__hello { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 0 14px; text-align: center; }
.hx__hi { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.hx__hello h2 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.hx__scopes { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 14px; padding: 3px; border-radius: 999px; background: var(--raised); }
.hx__scopes button { border: 0; background: transparent; border-radius: 999px; padding: 6px 14px; font: 13.5px var(--sans); color: var(--ink-2); cursor: pointer; transition: background var(--dur), color var(--dur); }
.hx__scopes button:hover { color: var(--ink); }
.hx__scopes button[aria-pressed="true"] { background: var(--ground); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.hx__scopes button:focus-visible { outline: 3px solid var(--accent-edge); outline-offset: 1px; }
.needs__ask { color: var(--accent-ink) !important; }
.hx__starter { border: 1px solid var(--line); background: var(--ground); border-radius: 999px; padding: 8px 14px; cursor: pointer; font: 13.5px var(--sans); color: var(--ink); transition: border-color var(--dur); }
.hx__starter:hover { border-color: var(--muted); }
.hx__starter:focus-visible { outline: 3px solid var(--accent-edge); outline-offset: 2px; }

.needs { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.needs__head { margin: 6px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.needs__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 11px 2px; border-bottom: 1px solid var(--hair); }
.needs__title { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.needs__title:hover { text-decoration: underline; }
.needs__item.act .needs__title { color: var(--decide); }
.needs__why { grid-column: 1; font-size: 13px; color: var(--ink-2); }
.needs__acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; align-items: start; }
.needs__acts button { border: 0; background: transparent; font: 12.5px var(--sans); color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.needs__acts button:hover { color: var(--ink); background: var(--raised); }

/* ── one turn ──────────────────────────────────────────────────────────────── */
.hturn { display: flex; flex-direction: column; gap: 10px; }
.hturn__you { align-self: flex-end; max-width: 78%; margin: 0; background: var(--raised); border-radius: 16px; padding: 10px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.hsteps { display: flex; flex-direction: column; gap: 6px; }
.hsteps__toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 3px 0; cursor: pointer; color: var(--muted); font: 13px var(--sans); }
.hsteps__toggle svg { transition: transform var(--dur) var(--settle); }
.hsteps.open .hsteps__toggle svg { transform: rotate(90deg); }
.hsteps__list { list-style: none; margin: 0 0 0 5px; padding: 2px 0 2px 16px; border-left: 1px solid var(--line); display: none; flex-direction: column; gap: 6px; }
.hsteps.open .hsteps__list, .hsteps.live .hsteps__list { display: flex; }
.hstep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.hstep__mark { flex: none; width: 13px; height: 13px; transform: translateY(2px); }
.hstep__label { font-weight: 600; }
.hstep__detail { color: var(--muted); overflow-wrap: anywhere; }
.hstep.failed .hstep__detail { color: var(--bad); }
.hstep__spin { animation: hspin 900ms linear infinite; transform-origin: 50% 50%; }
@keyframes hspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hstep__spin { animation: none; } }

.hanswer { display: flex; flex-direction: column; gap: 10px; max-width: 68ch; line-height: 1.6; }
.hanswer p, .hanswer ul, .hanswer ol { margin: 0; }
.hanswer ul, .hanswer ol { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.hanswer.preview::after { content: ""; display: inline-block; width: 8px; height: 16px; margin-left: 2px; background: var(--ink); vertical-align: -3px; }
@media (prefers-reduced-motion: no-preference) { .hanswer.preview::after { animation: hcaret 1s steps(2) infinite; } }
@keyframes hcaret { 50% { opacity: 0; } }
.htable { overflow-x: auto; border-top: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
.htable table { border-collapse: collapse; width: 100%; }
.htable th, .htable td { text-align: left; padding: 8px 10px 8px 2px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.htable th { font-size: 12px; font-weight: 600; color: var(--muted); }
.hsources { margin: 0; font-size: 12px; color: var(--muted); }
.hdead { margin: 0; font-size: 13px; color: var(--decide); }

/* the capability answer */
.hcaps { border-top: 1px solid var(--line); font-size: 14px; }
.hcap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 9px 2px; border-bottom: 1px solid var(--hair); }
.hcap__what { flex: 1 1 280px; min-width: 0; }
.hcap__state { font-size: 13px; font-weight: 600; }
.hcap__state.yes { color: var(--ok); }
.hcap__state.second, .hcap__state.approval { color: var(--accent-ink); }
.hcap__state.not_for_you { color: var(--muted); }
.hcap__state.setup { color: var(--decide); }
.hcap__state.not_built { color: var(--bad); }

/* ── the change card ───────────────────────────────────────────────────────── */
.hcard { background: var(--raised); border-radius: var(--r-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.hcard__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.hcard__where { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.hpill { font-size: 12px; font-weight: 600; border: 1px solid currentColor; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.hpill.wait { color: var(--decide); }
.hpill.done { color: var(--ok); }
.hpill.bad { color: var(--bad); }
.hpill.quiet { color: var(--muted); }
.hpill.run { color: var(--accent-ink); }
.hcard__title { margin: 0; font-size: 17px; font-weight: 600; }
.hcard__lines { background: var(--ground); border-radius: var(--r); padding: 2px 14px; overflow-x: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.hline { display: grid; grid-template-columns: minmax(170px, 1fr) 96px 96px 80px; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); min-width: 480px; }
.hline:last-child { border-bottom: 0; }
.hline.head { color: var(--muted); font-size: 12px; font-weight: 600; }
.hline span:not(:first-child) { text-align: right; }
.hline .now { color: var(--muted); }
.hline .next { font-weight: 600; }
.hline .diff { color: var(--muted); }
.hcard__note { margin: 0; font-size: 13px; color: var(--ink-2); }
.hcard__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.hcard__say { margin: 0; flex: 1 1 260px; font-size: 13.5px; }
.hcard__why { margin: 0; flex-basis: 100%; font-size: 13px; color: var(--bad); }

/* the memory note on a turn */
.hmem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-size: 13px; }
.hmem__head { font-weight: 600; color: var(--accent-ink); }
.hmem__head.wait { color: var(--decide); }
.hmem__src { color: var(--muted); }
.hmem button { margin-left: auto; }

/* ── the composer ──────────────────────────────────────────────────────────── */
.hx__foot { padding: 10px 28px 18px; }
.hcomposer { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.hcomposer__box { border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--ground); transition: border-color var(--dur); }
.hcomposer__box:focus-within { border-color: var(--muted); }
.hcomposer__input { border: 0; resize: none; font: 15px/1.5 var(--sans); color: var(--ink); background: transparent; padding: 4px; min-height: 48px; max-height: 200px; }
.hcomposer__input:focus { outline: none; }
.hcomposer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.hcomposer__scope { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.hcomposer__scope select { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; background: var(--ground); font: 13px var(--sans); color: var(--ink); }
.hcomposer__send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; }
.hcomposer__send:hover { background: #000; }
.hcomposer__send:focus-visible { outline: 3px solid var(--accent-edge); outline-offset: 2px; }
.hcomposer__send.stop { background: var(--ground); color: var(--ink); border: 1px solid var(--line); }
/* The mic sits beside Send: quiet until it is listening, and red only while recording, so
   "you are being recorded" is never mistaken for the send button. */
.hcomposer__acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hcomposer__mic { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color var(--dur), background var(--dur); }
.hcomposer__mic[hidden] { display: none; }
.hcomposer__mic:hover { color: var(--ink); background: var(--raised); }
.hcomposer__mic:focus-visible { outline: 3px solid var(--accent-edge); outline-offset: 2px; }
.hcomposer__mic[data-state="arming"], .hcomposer__mic[data-state="working"] { color: var(--ink); animation: hmicPulse .8s ease-in-out infinite; }
.hcomposer__mic[data-state="recording"] { color: #D7263D; background: rgba(215, 38, 61, .08); animation: hmicPulse 1.6s ease-in-out infinite; }
@keyframes hmicPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .hcomposer__mic[data-state] { animation: none; } }
.hcomposer__hint { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.hvh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── the Memory panel ──────────────────────────────────────────────────────── */
.hmempanel { border-left: 1px solid var(--line); height: 100vh; overflow-y: auto; padding: 18px; display: none; flex-direction: column; gap: 14px; background: var(--ground); }
.hx.mem-open .hmempanel { display: flex; }
.hmempanel__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hmempanel__head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.hmempanel__lead { margin: 0; font-size: 13px; color: var(--ink-2); }
.hseg { display: flex; gap: 4px; background: var(--raised); border-radius: var(--r); padding: 3px; }
.hseg button { flex: 1; border: 0; border-radius: 8px; padding: 7px; background: transparent; font: 600 13px var(--sans); color: var(--ink-2); cursor: pointer; }
.hseg button[aria-pressed="true"] { background: var(--ground); color: var(--ink); }
.hmemrow { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.hmemrow__kind { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hmemrow__kind.preference { color: var(--accent-ink); }
.hmemrow__kind.constraint, .hmemrow__kind.suggested { color: var(--decide); }
.hmemrow__kind.decision { color: var(--ink); }
.hmemrow__fact { margin: 0; font-size: 14px; }
.hmemrow__src { font-size: 12px; color: var(--muted); }
.hmemrow__acts { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 2px; }
.hlink { border: 0; background: transparent; padding: 2px 0; font: 12.5px var(--sans); color: var(--accent-ink); text-decoration: underline; cursor: pointer; }
.hmemadd { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.hmemadd textarea { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; font: 13.5px var(--sans); resize: vertical; min-height: 60px; }

@media (max-width: 900px) {
  .hx.mem-open { grid-template-columns: minmax(0, 1fr); }
  .hmempanel { border-left: 0; border-top: 1px solid var(--line); height: auto; }
  .hx__thread, .hx__head, .hx__foot, .hx__below { padding-left: 16px; padding-right: 16px; }
}

/* ── "What can you do?": the header menu, and the feedback form inside it ───── */
.hmenu { position: relative; }
.hmenu > .btn svg { transform: rotate(90deg); margin-left: 2px; transition: transform var(--dur) var(--settle); }
.hmenu > .btn[aria-expanded="true"] svg { transform: rotate(-90deg); }
.hmenu__pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 320px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--ground); box-shadow: 0 12px 32px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06); transform-origin: top right; animation: hmenu-in 160ms var(--settle) both; }
.hmenu__pop.hidden { display: none; }
@keyframes hmenu-in { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hmenu__pop { animation: none; } }
.hmenu__pop [role=menuitem] { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font: 600 13.5px var(--sans); color: var(--ink); cursor: pointer; }
.hmenu__pop [role=menuitem] span { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.hmenu__pop [role=menuitem]:hover, .hmenu__pop [role=menuitem]:focus-visible { background: var(--raised); outline: none; }
.hmenu__pop [role=menuitem][aria-disabled="true"] { color: var(--muted); cursor: default; }
.hmenu__pop [role=menuitem][aria-disabled="true"]:hover { background: transparent; }
.hfeedback { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 6px; }
.hfeedback__head { margin: 0; font-weight: 600; font-size: 13.5px; }
.hfeedback label { font-size: 12.5px; color: var(--ink-2); }
.hfeedback textarea { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; font: 13.5px var(--sans); resize: vertical; min-height: 70px; }
.hfeedback textarea:focus-visible { outline: 3px solid var(--accent-edge); outline-offset: 1px; }
.hfeedback__why { margin: 0; font-size: 12px; color: var(--muted); }
.hfeedback__acts { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Feedback, the developer page ───────────────────────────────────────────── */
.fb { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.fb__item { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.fb__item.done { opacity: .62; }
.fb__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fb__who { font-size: 12.5px; color: var(--muted); }
.fb__note { margin: 0; font-size: 14.5px; }
.fb__note.none { color: var(--muted); font-style: italic; }
.fb__turns summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.fb__turn { border-top: 1px solid var(--hair); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.fb__q { font-weight: 600; font-size: 13.5px; }
.fb__a { font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap; }
.fb__acts { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Ask on a phone and a tablet ──────────────────────────────────────────────
   The workspace fills what is left between the app bar and (on a phone) the tab bar, so the
   box stays at the thumb and the thread scrolls on its own without dragging the page. The app
   bar names the conversation, so the workspace's own title goes. */
@media (max-width: 1023px) {
  .hx, .hx__col { height: calc(100dvh - 52px - env(safe-area-inset-top, 0px)); }
  .hx__head { padding-top: 8px; padding-bottom: 8px; border-bottom-color: transparent; justify-content: flex-end; }
  .hx__headl { display: none; }
  .hx__thread { overscroll-behavior: contain; padding-top: 16px; }
  .hx.is-new .hx__thread { padding-top: 24px; }
  .hx.is-new .hx__col { overscroll-behavior: contain; }
  .hmempanel { height: auto; max-height: 60dvh; }
  .hx__foot { padding-bottom: 12px; }
  .hmenu__pop { width: min(320px, calc(100vw - 24px)); }
  .cvall__acts .hlink { padding: 8px 4px; }
}
@media (max-width: 640px) {
  .hx, .hx__col { height: calc(100dvh - 52px - 55px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .hx__hello h2 { font-size: 19px; }
  .hcomposer__hint { display: none; }
  .hx__foot { padding: 8px 12px 10px; }
  .hcomposer__box { border-radius: 22px; }
  .cvall__row { padding: 12px 2px; }
}

/* "Not what you needed?" under an answer: quiet until wanted, then the form opens in place. */
.hfb { margin-top: 2px; }
.hfb__open { border: 0; background: none; padding: 6px 0; font: 12.5px var(--sans); color: var(--muted); cursor: pointer; }
.hfb__open span { color: var(--accent-ink); }
.hfb__open:focus-visible { outline: 3px solid var(--accent-edge); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .hfb__open:hover span { text-decoration: underline; } }
.hfb .hfeedback { max-width: 520px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.hfb__sent { margin: 6px 0 0; font-size: 12.5px; color: var(--ok); }

/* ── where each return is: its stages with dates, under an answer (Daniel, 2026-11-03) ── */
.hanswer b { font-weight: 600; color: var(--ink); }
.hjourney { margin: 1rem 0 .4rem; padding: 14px 18px 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; max-width: 40rem; }
.hjourney__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; font-size: 12.5px; color: var(--muted); }
.hjourney__head b { font-size: 15px; color: var(--ink); letter-spacing: .01em; }
.hjourney__now { margin: .45rem 0 .7rem; font-size: 14px; color: var(--ink-2); }
.hjourney__now span { display: inline-block; margin-right: .5rem; padding: 2px 8px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.hjourney__now b { color: var(--ink); font-weight: 600; }
.hjourney__stages { list-style: none; margin: 0; padding: 0; }
.hjourney__stages li { position: relative; display: grid; grid-template-columns: 18px 1fr auto; column-gap: .6rem; padding: .32rem 0; font-size: 13.5px; }
.hjourney__stages li::before { content: ''; position: absolute; left: 5px; top: 1.15rem; bottom: -.4rem; width: 2px; background: var(--line); }
.hjourney__stages li:last-child::before { display: none; }
.hjourney__stages li.is-done::before { background: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.hjourney__dot { width: 12px; height: 12px; margin-top: .25rem; border-radius: 50%; border: 2px solid var(--line); background: #fff; position: relative; z-index: 1; box-sizing: border-box; }
.is-done .hjourney__dot { background: var(--accent); border-color: var(--accent); }
.is-now .hjourney__dot { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); }
.hjourney__stage { color: var(--ink-2); }
.is-done .hjourney__stage { color: var(--ink); }
.is-now .hjourney__stage { color: var(--ink); font-weight: 600; }
.is-next .hjourney__stage { color: var(--muted); }
.hjourney__on { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.is-now .hjourney__on { color: var(--ink); font-weight: 600; }
.hjourney__note { grid-column: 2 / 4; color: var(--muted); font-size: 12px; margin-top: .05rem; }
@media (max-width: 640px) { .hjourney { padding: 12px 14px 10px; } .hjourney__stages li { grid-template-columns: 18px 1fr; } .hjourney__on { grid-column: 2; } }