/* Het chatvenster: het groeigesprek plannen met Emma zonder de pagina te verlaten (assets/js/chat.js).
 *
 * Op de computer een venster rechtsonder, zoals de klantenservice van een webwinkel: de pagina blijft zichtbaar en
 * bruikbaar. Op de telefoon schuift het van onderen omhoog tot 90% van het scherm; bovenin blijft een strook van de
 * site te zien, en een tik daarop sluit het (besluit Koen, 25 september 2026). Het venster groeit uit de knop
 * rechtsonder en gaat dezelfde weg terug. Met minder beweging (prefers-reduced-motion) alleen een vervaging.
 */

/* Het venster. */
.lf-chat { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.lf-chat[hidden] { display: none; }
.lf-chat-scrim { position: absolute; inset: 0; background: rgba(14, 24, 19, 0.38); opacity: 0; transition: opacity 260ms var(--ease-calm); display: none; }
.lf-chat-paneel {
  position: absolute; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  width: 400px; height: min(680px, calc(100dvh - 40px));
  border-radius: 20px; overflow: hidden; pointer-events: auto;
  background: #F8F6F1; border: 1px solid rgba(23, 32, 27, 0.08);
  box-shadow: 0 24px 64px rgba(23, 32, 27, 0.22), 0 4px 14px rgba(23, 32, 27, 0.10);
  transform-origin: bottom right;
  opacity: 0; transform: translateY(12px) scale(0.94);
  transition: opacity 220ms var(--ease-calm), transform 320ms var(--ease-calm);
}
.lf-chat.open .lf-chat-paneel { opacity: 1; transform: none; }
.lf-chat-paneel iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; background: transparent; }
/* Wat er staat tot het gesprek geladen is. */
.lf-chat-laden { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; color: #57635C; font-size: 0.9rem; }
.lf-chat-laden img { width: 56px; height: 56px; border-radius: 50%; background: #F3EBD9; }
.lf-chat-laden span::after { content: "..."; }

@media (max-width: 720px) {
  .lf-chat { pointer-events: auto; }
  .lf-chat-scrim { display: block; }
  .lf-chat.open .lf-chat-scrim { opacity: 1; }
  .lf-chat-paneel {
    left: 0; right: 0; bottom: 0; width: auto; height: 90dvh;
    border-radius: 20px 20px 0 0; border-bottom: 0;
    opacity: 1; transform: translateY(100%);
    transition: transform 340ms var(--ease-calm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf-chat-paneel, .lf-chat-scrim { transition: opacity 180ms ease; }
  .lf-chat-paneel { transform: none; }
  .lf-chat.open .lf-chat-paneel { opacity: 1; }
  @media (max-width: 720px) { .lf-chat-paneel { opacity: 0; transform: none; } }
}

/* Op de telefoon scrolt de pagina achter het venster niet mee. */
@media (max-width: 720px) { html.lf-chat-open, html.lf-chat-open body { overflow: hidden; } }