/* Statement screens: the 1–7 slider 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}
#quiz-dialog .chat-statement-quip{margin-top:10px}
#quiz-dialog .chat-statement-quip .chat-preface{font-size:16px;padding:9px 13px;max-width:100%;background:var(--q-pink);color:#4a2a3b;transform:rotate(-.6deg)}
#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-scale-readout{font-size:18px}
  #quiz-dialog .chat-scale-ends{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  #quiz-dialog .chat-statement{transition:none}
}