/* The quiz as a full page on wide screens (user, 2026-10-12: like Marriage Pact on a Mac): one centered column,
   screens that slide out and in, and the cast standing in the margins (quiz-page.js). Phones keep the sheet. */
@media (min-width: 561px) {
  #quiz-dialog { inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none }
  #quiz-dialog::backdrop { background: #120f1c }
  #quiz-dialog .chat-shell { width: 100%; max-width: 760px; margin: 0 auto }
  #quiz-dialog .chat-header { padding: 22px 16px 6px }
  #quiz-dialog #quiz-content { padding: 18px 28px 90px; scroll-behavior: smooth }
  #quiz-dialog .chat-progress { margin-left: 28px; margin-right: 28px }
  #quiz-dialog .chat-messages h2.chat-bubble { font-size: 34px }
  #quiz-dialog .chat-preface { font-size: 20px }
  #quiz-dialog .chat-option { font-size: 17px; min-height: 54px }
  #quiz-dialog .chat-field { font-size: 18px }
  #quiz-dialog .chat-next { height: 56px; font-size: 20px; width: auto; padding: 0 28px }
  #quiz-dialog .chat-block-title { font-size: 23px }
}

/* Screen transitions: the finished screen slides up and away, the next slides up into place (app.js frame/advance). */
#quiz-content > * { animation: none }
#quiz-content.is-entering > * { animation: q-enter .34s cubic-bezier(.2,.8,.2,1) both }
#quiz-content.is-entering > :nth-child(2) { animation-delay: .04s }
#quiz-content.is-entering > :nth-child(3) { animation-delay: .08s }
#quiz-content.is-leaving > * { animation: q-leave .17s ease-in both; pointer-events: none }
@keyframes q-enter { from { opacity: 0; transform: translateY(36px) } }
@keyframes q-leave { to { opacity: 0; transform: translateY(-36px) } }

/* The cast in the margins. */
.chat-side { display: none }
@media (min-width: 1100px) {
  /* The cast fits whatever is left beside the column (--q-col, set below), never over it. */
  .chat-side { position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: min(300px, calc((100vw - var(--q-col)) / 2 - 28px)); height: min(70vh, 640px); pointer-events: none; z-index: 1 }
  .chat-side-left { left: 14px }
  .chat-side-right { right: 14px }
  .chat-side.is-empty { visibility: hidden }
  .chat-side-art { width: 100%; display: flex; justify-content: center; align-items: flex-end; min-height: 320px }
  .chat-side-svg { width: 100%; max-height: 420px; height: auto; overflow: visible; filter: drop-shadow(6px 8px 0 #0e0c1466); animation: side-sway 5s ease-in-out infinite; transform-origin: 50% 100% }
  .chat-side-right .chat-side-svg { animation-delay: -2.2s }
  .chat-side-bubble { position: relative; max-width: 100%; margin: 0 0 18px; padding: 12px 16px; background: #eee8d9; color: #38303e; border: 2.5px solid #1a1720; border-radius: 18px 18px 18px 4px; box-shadow: 4px 5px 0 #1a172099; font-family: var(--display); font-size: 20px; line-height: 1.2; text-align: left }
  .chat-side-right .chat-side-bubble { border-radius: 18px 18px 4px 18px }
  .chat-side-bubble:empty { visibility: hidden }
  .chat-side-bubble::after { content: ''; position: absolute; bottom: -14px; left: 26px; width: 16px; height: 14px; background: #eee8d9; border-left: 2.5px solid #1a1720; border-bottom: 2.5px solid #1a1720; clip-path: polygon(0 0, 100% 0, 0 100%); transform: skewX(-18deg) }
  .chat-side-right .chat-side-bubble::after { left: auto; right: 26px; transform: skewX(18deg) scaleX(-1) }
  .chat-side-bubble.is-new { animation: side-pop .28s cubic-bezier(.3,.9,.3,1.3) both }
}
@keyframes side-sway { 0%, 100% { transform: rotate(-1deg) } 50% { transform: rotate(1.2deg) translateY(-3px) } }
@keyframes side-pop { from { opacity: 0; transform: translateY(8px) scale(.94) } }
@media (prefers-reduced-motion: reduce) {
  #quiz-content.is-entering > *, #quiz-content.is-leaving > *, .chat-side-svg, .chat-side-bubble.is-new { animation: none !important }
}

/* Phones: the text box sits right under the question, not at the bottom edge where the keyboard covers it
   (user, 2026-10-12). Focusing it scrolls it into view above the keyboard. */
@media (max-width: 560px) {
  #quiz-dialog .chat-composer { margin-top: 14px; padding-top: 0 }
  #quiz-dialog #quiz-content { scroll-padding-bottom: 120px }
}

/* Wide screens: the host already repeats the quip in her bubble on the left (quiz-page.js), so the inline "↳" line
   under the question goes (user, 2026-10-12). A cameo's face and line stay, since nobody else shows those. */
@media (min-width: 1100px) {
  #quiz-dialog .chat-reaction > .chat-bubble:not(.chat-cameo-line) { display: none }
  #quiz-dialog .chat-reaction:not(:has(.chat-cameo)) { display: none }
  #quiz-dialog .chat-block-sub:has(.chat-reaction:not(:empty)) .chat-block-note { visibility: visible }
}

/* Mac-sized screens (user, 2026-10-12): every answer in view at once, as little scrolling as possible. A wider
   column, combined screens in two columns, a smaller thread up top, and compact blocks. Phones keep their stack. */
@media (min-width: 1100px) {
  #quiz-dialog { --q-col: min(980px, 100vw - 440px) }
  #quiz-dialog .chat-shell { max-width: var(--q-col) }
  #quiz-dialog #quiz-content { padding: 8px 28px 40px }
  #quiz-dialog .chat-progress { margin-top: 6px }
  #quiz-dialog .chat-messages { margin-bottom: 8px; gap: 6px }
  #quiz-dialog .chat-messages h2.chat-bubble { font-size: 24px; padding: 8px 16px }
  /* The host says the intro line from the margin already, so it leaves the column. */
  #quiz-dialog .chat-messages .chat-preface { display: none }
  #quiz-dialog .chat-thread .chat-sender { display: none }
  #quiz-dialog .chat-avatar { width: 44px; height: 44px }
  #quiz-dialog .chat-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: start }
  #quiz-dialog .chat-block:has(.chat-statements), #quiz-dialog .chat-block:has(textarea) { grid-column: 1 / -1 }
  /* The vices grid: two substances per line, you and your date side by side inside each. */
  #quiz-dialog .chat-rows { display: contents }
  #quiz-dialog .chat-row { padding: 6px 10px 8px }
  #quiz-dialog .chat-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px }
  #quiz-dialog .chat-block.chat-cell { padding: 4px 6px 6px }
  #quiz-dialog .chat-cell .chat-chip { min-height: 32px; padding: 5px 10px; font-size: 14px }
  #quiz-dialog .chat-block { padding: 8px 12px 8px }
  #quiz-dialog .chat-block-title { font-size: 19px }
  #quiz-dialog .chat-block .chat-chips .chat-chip { min-height: 36px; font-size: 15px }
  #quiz-dialog .chat-option { min-height: 42px; font-size: 16px }
  #quiz-dialog .chat-block .chat-options { gap: 6px }
  #quiz-dialog .chat-statements { gap: 8px }
  #quiz-dialog .chat-statement { padding: 9px 12px 8px }
  #quiz-dialog .chat-rows { gap: 8px; margin: 4px 0 8px }
  #quiz-dialog .chat-footer { padding-top: 8px; gap: 2px }
  #quiz-dialog .chat-footer .chat-next { height: 48px; font-size: 20px }
}