/* Statement screens: the hard-no-to-hell-yes cards, pass and dealbreaker controls, and the textarea for long prompts.
   Same 90s cel look as quiz-90s.css (ink outlines, hard shadows, hot pink picks). */
#quiz-dialog .chat-statements{display:flex;flex-direction:column;gap:14px}
#quiz-dialog .chat-statement{background:#2c2a3c;border:2.5px solid var(--q-ink);border-radius:16px 16px 16px 6px;box-shadow:3px 4px 0 #0e0c1499;padding:14px 14px 12px;min-width:0;transition:background .15s}
#quiz-dialog .chat-statement.answered{background:#3a3750}
#quiz-dialog .chat-statement.passed{background:#2c2a3c;opacity:.8}
#quiz-dialog .chat-statement-text{font-size:19px;line-height:1.2;color:var(--q-paper);margin:0 0 12px}
/* the 1–7 slider: paper track filled pink up to the answer, a chunky pink thumb, tick numbers under it.
   Unanswered, the thumb is a ghost in the middle and the readout says "drag it". */
#quiz-dialog .chat-scale-readout{display:block;text-align:center;font-family:var(--display);font-size:20px;line-height:1;color:var(--q-hot);margin:0 0 8px;min-height:20px}
#quiz-dialog .chat-statement:not(.answered) .chat-scale-readout,#quiz-dialog .chat-statement.passed .chat-scale-readout{color:var(--q-soft)}
#quiz-dialog .chat-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:16px;margin:6px 0 0;border:2.5px solid var(--q-ink);border-radius:999px;box-shadow:2px 3px 0 #0e0c1499;cursor:pointer;background:linear-gradient(90deg,var(--q-hot) var(--fill,0%),var(--q-paper) var(--fill,0%))}
#quiz-dialog .chat-range::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;background:var(--q-hot);border:3px solid var(--q-ink);box-shadow:2px 3px 0 #1a172099;cursor:grab}
#quiz-dialog .chat-range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--q-hot);border:3px solid var(--q-ink);box-shadow:2px 3px 0 #1a172099;cursor:grab}
#quiz-dialog .chat-statement:not(.answered) .chat-range::-webkit-slider-thumb,#quiz-dialog .chat-statement.passed .chat-range::-webkit-slider-thumb{background:var(--q-paper);opacity:.55;box-shadow:none}
#quiz-dialog .chat-statement:not(.answered) .chat-range::-moz-range-thumb,#quiz-dialog .chat-statement.passed .chat-range::-moz-range-thumb{background:var(--q-paper);opacity:.55;box-shadow:none}
#quiz-dialog .chat-range:active::-webkit-slider-thumb{cursor:grabbing}
#quiz-dialog .chat-range:focus-visible{outline:3px solid var(--q-hot);outline-offset:6px}
/* tick numbers sit under the thumb positions: inset by half a thumb so 1 and 7 line up with the ends */
#quiz-dialog .chat-scale-ticks{display:flex;justify-content:space-between;padding:0 10px;margin-top:6px;font-size:14px;color:var(--q-soft)}
#quiz-dialog .chat-scale-ticks span{width:12px;text-align:center}
#quiz-dialog .chat-scale-ends{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--q-soft)}
#quiz-dialog .chat-statement-extras{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
#quiz-dialog .chat-pass,#quiz-dialog .chat-flag{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;background:transparent;border:2px solid var(--q-soft);color:var(--q-paper);font-family:var(--display);font-size:15px;cursor:pointer;transition:background .12s,color .12s}
#quiz-dialog .chat-pass:hover,#quiz-dialog .chat-flag:hover{background:#ffffff14}
#quiz-dialog .chat-pass[aria-pressed=true]{background:var(--q-paper);color:var(--q-ink);border-color:var(--q-ink)}
#quiz-dialog .chat-flag input{width:16px;height:16px;margin:0;accent-color:var(--q-hot)}
#quiz-dialog .chat-flag:has(input:checked){background:var(--q-hot);color:var(--q-ink);border-color:var(--q-ink)}
#quiz-dialog .chat-pass:focus-visible,#quiz-dialog .chat-flag:has(input:focus-visible){outline:3px solid var(--q-hot);outline-offset:2px}
/* The quip shares the statement's line (user, 2026-10-12): small, one line, clipped before it can wrap or grow the card. */
#quiz-dialog .chat-statement-head{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
#quiz-dialog .chat-statement-head .chat-statement-text{margin:0;flex:1 1 auto;min-width:0}
#quiz-dialog .chat-statement-quip{margin:0;flex:0 1 auto;max-width:50%;min-width:0;display:block}
#quiz-dialog .chat-statement-quip:empty{display:none}
#quiz-dialog .chat-statement-quip .chat-preface{display:block;font-size:14px;line-height:1.3;padding:0;margin:0;max-width:100%;background:transparent;color:#d9c9ff;border:0;box-shadow:none;transform:none;animation:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#quiz-dialog .chat-statement-quip .chat-preface::before{content:'↳ ';opacity:.6}
#quiz-dialog .chat-composer-long{flex-direction:column;align-items:stretch}
#quiz-dialog .chat-composer-long textarea{height:auto;min-height:124px;padding:12px 16px;line-height:1.3;resize:vertical}
@media (max-width:420px){
  #quiz-dialog .chat-statement{padding:12px 12px 10px}
  #quiz-dialog .chat-statement-text{font-size:17px}
  #quiz-dialog .chat-statement-quip .chat-preface{font-size:13px}
  #quiz-dialog .chat-scale-readout{font-size:18px}
  #quiz-dialog .chat-scale-ends{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  #quiz-dialog .chat-statement{transition:none}
}

/* Five word boxes instead of a slider: hard no, no, eh, yes, hell yes (user, 2026-10-12). */
#quiz-dialog .chat-scale-boxes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:2px}
#quiz-dialog .chat-scale-box{min-height:44px;padding:4px 2px;border:2.5px solid var(--q-ink);border-radius:12px;background:#2c2a3c;color:var(--q-paper);font-family:var(--display);font-size:15px;line-height:1.1;overflow-wrap:anywhere;box-shadow:2px 3px 0 #0e0c1499;transition:transform .12s,background .15s}
#quiz-dialog .chat-scale-box:hover{background:#3a3750;transform:translateY(-1px)}
/* The five boxes run a gradient, hard no to hell yes (user, 2026-10-12): a tint while open, the full color when picked. */
#quiz-dialog .chat-scale-box:nth-child(1){--box:#ff6b8f}
#quiz-dialog .chat-scale-box:nth-child(2){--box:#ff9f7a}
#quiz-dialog .chat-scale-box:nth-child(3){--box:#ffd36b}
#quiz-dialog .chat-scale-box:nth-child(4){--box:#8fd9a8}
#quiz-dialog .chat-scale-box:nth-child(5){--box:#8b5cf6}
#quiz-dialog .chat-scale-box{background:color-mix(in srgb,var(--box) 16%,#2c2a3c)}
#quiz-dialog .chat-scale-box:hover{background:color-mix(in srgb,var(--box) 32%,#2c2a3c)}
#quiz-dialog .chat-scale-box.picked{background:var(--box);color:var(--q-ink);font-weight:700}
#quiz-dialog .chat-scale-box:nth-child(5).picked{color:#fffdf5}
#quiz-dialog .chat-scale-box:focus:not(:focus-visible){outline:none}
#quiz-dialog .chat-statement.passed .chat-scale-box{opacity:.4}
@media(max-width:400px){#quiz-dialog .chat-scale-box{min-height:40px;font-size:13px;border-radius:10px}}