/* ============================================================================
   THE QUESTION SITS ON THE BOX (owner, Sept 29) — js/chat.js #ask
   "The text that's up there should be further down, close to where the typing
   box is ... so the question comes up there, and it's more obvious that you're
   answering it." The question being asked right now is pinned directly above
   the input, in the largest type in the chat; the history keeps a quiet trace
   of each question once it has been answered. With nothing left to ask, the
   same spot offers three examples that fill the box when tapped.
   Every colour is a tenant token (no literals: the gate sweeps for green).
   ========================================================================== */

.ask {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px 2px;
  transition: opacity var(--dur) var(--ease);
}
.ask[hidden] { display: none; }
/* a turn is in flight: the question stays put, but reads as "being answered" */
.dock.is-busy .ask { opacity: .55; }

.ask__intro {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-70);
  padding-bottom: 2px;
}
.ask__q,
.ask .logoq__q {
  font-size: var(--fs-hero);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.ask__q strong,
.ask .logoq__q strong { font-weight: 700; }
.ask__hint,
.ask .logoq__hint {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--muted);
  padding-top: 1px;
}

/* "Upload my logo" / "Design one for me", with the question they answer */
.ask .guide__acts { padding: 8px 0 2px; }

/* ---- nothing left to ask: what would you like to change? ---- */
.ask__lead {
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.ask__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 6px;
}
.ask__chip {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ask__chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.ask__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- a logo-interview question, pinned (js/logo-interview.js) ----
   It carries .msg--logo for the gates; the thread's left rule is not its look. */
.ask .logoq { display: flex; flex-direction: column; }
.ask .msg--logo > * { padding-left: 0; border-left: 0; }
.ask .logoq__choices { padding-top: 8px; }

/* ---- the history: a quiet trace of each question, once answered ---- */
.msg--guide .guide__q,
.msg--qtrace .guide__q {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--muted);
  padding-top: 4px;
}
.msg--guide .guide__q strong,
.msg--qtrace .guide__q strong { font-weight: 600; }
/* the hint belonged to the moment it was asked */
.msg--guide .guide__hint { display: none; }
/* never on screen twice: while a question is pinned, its copy here is hidden */
.msg.is-current .guide__q,
.msg.is-current .guide__hint { display: none; }
.msg.is-current.pin-whole { display: none; }

/* ---- a kept logo: the four fold down to the one on the card ---- */
.msg--logo.is-done.has-kept .logotile:not(.is-kept) { display: none; }
.msg--logo.is-done.has-kept .logogrid { grid-template-columns: minmax(0, 150px); }

@media (min-width: 1200px) {
  .ask__q,
  .ask .logoq__q { font-size: clamp(19px, 1.5vw, 22px); }
}

/* ---- the dock as a strip over the card (under 1200px) ----
   The card is sized from the dock's height, and the pinned question used to be
   the bottom of the history strip. So while something is pinned the strip
   gives up exactly that much height (js/chat.js measures it into --ask-h):
   the card keeps its room, and the history still scrolls. */
@media (max-width: 1199px) {
  .dock[data-pinned="true"] .dock__thread {
    max-height: max(60px, calc(min(24dvh, 230px) - var(--ask-h, 0px)));
  }
}

@media (max-width: 899px) {
  .ask { padding: 2px 4px 0; }
  .ask__chip { min-height: 44px; }
  .dock[data-pinned="true"] .dock__thread {
    max-height: max(60px, calc(min(26dvh, 224px) - var(--ask-h, 0px)));
  }
  .dock[data-pinned="true"][data-next="true"] .dock__thread {
    max-height: max(60px, calc(min(17dvh, 150px) - var(--ask-h, 0px)));
  }
  .app.kb-up .dock[data-pinned="true"] .dock__thread {
    max-height: max(60px, calc(min(28dvh, 210px) - var(--ask-h, 0px)));
  }
  /* a hint is two lines at most on a phone */
  .ask__hint {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  /* the examples: a quieter lead and ONE row of chips that scrolls sideways
     (inside itself — the page never scrolls sideways) */
  .ask__lead { font-size: var(--fs-small); font-weight: 600; color: var(--ink-70); }
  .ask__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0 -4px;
    padding: 4px 4px 2px;
  }
  .ask__chips::-webkit-scrollbar { display: none; }
  .ask__chip { flex: 0 0 auto; white-space: nowrap; }
  /* the keyboard is up: the question stays, its preamble steps aside */
  .app.kb-up .ask__intro,
  .app.kb-up .ask__hint { display: none; }
}