/* Floating WhatsApp button for reaching platform support.
   Stacked just above the AI chat widget's launcher, which sits at bottom/right 24px and is
   46px tall. Both are anchored to the physical right, so the button stays clear of Metronic's
   scroll-top button, which moves to the left in RTL. */
.support-whatsapp-fab {
    position: fixed;
    right: calc(24px + env(safe-area-inset-right, 0px));
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 9998; /* under the chat widget (9999), so its open panel covers this */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #25d366;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.support-whatsapp-fab[hidden] {
    display: none;
}

.support-whatsapp-fab i {
    font-size: 1.75rem;
    line-height: 1;
    color: inherit;
}

.support-whatsapp-fab:hover,
.support-whatsapp-fab:focus-visible {
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.support-whatsapp-fab:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.45);
    outline-offset: 3px;
}

/* Tucked away while the user scrolls down a page, back as soon as they scroll up. */
.support-whatsapp-fab.is-tucked {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
    pointer-events: none;
}

/* Phones: the chat launcher shrinks to a 50px circle 16px from the corner, so the button
   follows it down and centres on it. 46px keeps a comfortable tap target without
   crowding the content. */
@media (max-width: 640px) {
    .support-whatsapp-fab {
        right: calc(18px + env(safe-area-inset-right, 0px));
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        width: 46px;
        height: 46px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    }

    .support-whatsapp-fab i {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .support-whatsapp-fab,
    .support-whatsapp-fab.is-tucked {
        transition: none;
        transform: none;
    }
}

@media print {
    .support-whatsapp-fab {
        display: none;
    }
}