/* Cameos (quiz-cameos.js): another host barges into the chat. Their lines sit on the right, your host's on
   the left, and each line lands a beat after the last. Loads after quiz-90s.css. */
#quiz-dialog .cameo{display:flex;flex-direction:column;gap:12px;padding-top:2px}
#quiz-dialog .cameo-tape{align-self:center;margin:0 0 4px;background:#101010;color:#fff2d6;font-family:var(--display);font-size:20px;font-weight:400;padding:4px 14px 6px;transform:rotate(-1.5deg);box-shadow:0 0 3px 2px #15121980;outline:none}
#quiz-dialog .cameo-lines{display:flex;flex-direction:column;gap:8px}
#quiz-dialog .cameo-line{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:88%;animation:cameo-in .35s ease-out both;animation-delay:calc(var(--i) * .9s)}
#quiz-dialog .cameo-them{align-self:flex-end;align-items:flex-end}
#quiz-dialog .cameo-them .chat-host{flex-direction:row-reverse}
#quiz-dialog .cameo-line .chat-bubble{margin:0;font-size:19px;line-height:1.25;padding:11px 16px}
/* the intruder talks in pink, tail on the right */
#quiz-dialog .cameo-them .chat-bubble{background:var(--q-pink);color:#4a2a3b;border-radius:20px 20px 6px 20px;transform:rotate(.6deg)}
#quiz-dialog .cameo-host .chat-bubble{transform:rotate(-.4deg)}
#quiz-dialog .cameo-actions{display:flex;flex-direction:column;gap:8px;animation:cameo-in .35s ease-out both;animation-delay:calc(var(--i) * .9s)}
#quiz-dialog .cameo-actions .chat-start{justify-content:center;gap:10px}
#quiz-dialog .cameo-share{background:var(--q-paper)}
#quiz-dialog .cameo-share:hover{background:#fff}
#quiz-dialog .cameo .chat-fine{margin-top:0}
#quiz-dialog .cameo .chat-fine:empty{display:none}
/* result screen: the share button sits above "save the evidence" in paper instead of pink */
#quiz-dialog .chat-share{justify-content:center;gap:10px;background:var(--q-paper)}
#quiz-dialog .chat-share:hover{background:#fff}

@keyframes cameo-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#quiz-dialog .cameo-line,#quiz-dialog .cameo-actions{animation:none}}
@media(max-height:760px){
  #quiz-dialog .cameo-line .chat-bubble{font-size:17px;padding:9px 14px}
  #quiz-dialog .cameo-lines{gap:6px}
}