/* ── Q&A overlay (footer "Questions & answers" link) ──────────────────────── */
/* The overlay covers the viewport with a solid-white surface. Inside, the
   chat's own scoped CSS (qa-chat.css) flex-centers the .chat-widget at its
   source dimensions (max-width: 450px, max-height: 95vh). */

.maison-energy-qa-overlay-container {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ffffff;
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Use display:flex (not visibility) so closing the overlay collapses the DOM
   instantly. With visibility:hidden, child elements with their own
   `transition: all .2s` (e.g. .scroll-btn) played the cascaded visibility
   change as a 200 ms fade, making them linger after the container disappeared.
   align-items/justify-content/etc. still come from the .qa-chat-host class. */
.maison-energy-qa-overlay-container.visible {
    display: flex;
}

/* Mobile: chat-widget gets `min-height: 100dvh` and can grow taller than the
   overlay when messages pile up. `align-items: center` (inherited from the
   chat's body-equivalent rule) would push the top of an overflowing child
   above the container's scroll boundary, making the chat header unreachable.
   Anchor the child at the top instead — flex-centering is a no-op on mobile
   anyway since chat-widget is always at least viewport-height. */
@media (max-width: 600px) {
    .maison-energy-qa-overlay-container.qa-chat-host {
        align-items: flex-start;
    }
}