/* Fair questions — the chat plays out as you scroll (driven by faq.js).
   Nothing here hides anything until faq.js has added .faq-on, so without JS the chat is simply there. */

/* the last answer is the one that matters: Headroom's own colour */
.msgs .a.faq-last { background: var(--crimson); color: #fff; transition: background-color 0.32s var(--out) 0.2s, color 0.32s var(--out) 0.2s, opacity 0.18s ease, transform 0.22s var(--out); }
.msgs .a.faq-last::before { background: var(--crimson); transition: background-color 0.32s var(--out) 0.2s; }
.msgs .a.faq-last a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.7); transition: color 0.32s var(--out) 0.2s; }

/* the slam lands at 1.7x; clip it here so it never widens the page (iOS lets you pan sideways) */
#questions { overflow-x: clip; }

/* hidden until revealed; the slot keeps its size so the card never changes height */
.faq-on .msgs { position: relative; }
.faq-on .msgs > p { opacity: 0; transform: scale(0.6); transition: opacity 0.18s ease, transform 0.22s var(--out); }
.faq-on .msgs > p.faq-in { opacity: 1; transform: none; }

/* questions: the iOS send spring, out of the tail corner */
.faq-on .msgs > .q.faq-in { transform-origin: 100% 100%; animation: faq-send 0.56s var(--spring) both, faq-fade 0.14s ease-out both; }
@supports (animation-timing-function: linear(0, 1)) {
  .faq-on .msgs > .q.faq-in {
    animation-timing-function: linear(0, 0.21 6%, 0.65 15%, 0.94 24%, 1.07 32%, 1.09 38%, 1.05 48%, 1.01 58%, 0.995 70%, 1), ease-out;
  }
}
/* answers grow out of the typing bubble that held their place */
.faq-on .msgs > .a.faq-in { transform-origin: 0 0; animation: faq-grow 0.42s var(--out) both, faq-fade 0.12s ease-out both; }

/* the last answer slams: drops in big, hits, the card takes the hit */
.faq-on .msgs > .a.faq-last.faq-in { transform-origin: 30% 50%; animation: faq-slam 0.62s both, faq-fade 0.12s ease-out both; }
.faq-on .msgs > .a.faq-last:not(.faq-in) { background: #efeee9; color: inherit; transition: opacity 0.18s ease, transform 0.22s var(--out); }
.faq-on .msgs > .a.faq-last:not(.faq-in)::before { background: #efeee9; transition: none; }
.faq-on .msgs > .a.faq-last:not(.faq-in) a { color: var(--crimson); transition: none; }
.chat.faq-hit { animation: faq-hit 0.5s var(--out); }

/* pinned: the card holds the middle of the screen while the scroll plays the conversation (faq.js sets top + the runway) */
.faq-pin .faq-stage { position: sticky; }
.faq-typing[hidden] { display: none; }

/* already above the fold when the page loaded: no show */
.faq-on .msgs > p.faq-now, .faq-on .msgs > p.faq-now::before, .faq-on .msgs > p.faq-now a { animation: none; transition: none; }

@keyframes faq-send { from { transform: scale(0.5) translateY(6px); } to { transform: none; } }
@keyframes faq-grow { from { transform: scale(0.55, 0.5); } to { transform: none; } }
@keyframes faq-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes faq-slam {
  0% { transform: translateY(-34px) scale(1.7); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  34% { transform: translateY(2px) scale(0.96); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  58% { transform: translateY(-1px) scale(1.012); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
@keyframes faq-hit {
  0%, 30% { transform: none; }
  42% { transform: translateY(4px) scale(0.995); }
  64% { transform: translateY(-1.5px); }
  100% { transform: none; }
}

/* typing indicator: grey bubble, three dots, the two-circle tail iMessage uses */
.faq-typing {
  position: absolute; display: flex; gap: 5px; align-items: center;
  padding: 13px 15px; border-radius: 20px; background: #efeee9;
  transform-origin: 0 100%; animation: faq-send 0.44s var(--spring) both, faq-fade 0.12s ease-out both;
  pointer-events: none;
}
.faq-typing::before, .faq-typing::after { content: ""; position: absolute; border-radius: 50%; background: #efeee9; }
.faq-typing::before { width: 11px; height: 11px; left: -2px; bottom: -2px; }
.faq-typing::after { width: 5.5px; height: 5.5px; left: -7px; bottom: -6px; }
.faq-typing i { width: 8px; height: 8px; border-radius: 50%; background: #8f8e88; opacity: 0.35; animation: faq-dot 1.2s ease-in-out infinite; }
.faq-typing i:nth-child(2) { animation-delay: 0.18s; }
.faq-typing i:nth-child(3) { animation-delay: 0.36s; }
.faq-typing.faq-gone { animation: faq-gone 0.16s ease-in both; }
@keyframes faq-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 0.9; transform: translateY(-1.5px); } }
@keyframes faq-gone { to { opacity: 0; transform: scale(0.85); } }

@media (prefers-reduced-motion: reduce) {
  .faq-on .msgs > p { opacity: 1; transform: none; }
  .faq-typing { display: none; }
}