/* WhatsApp chat bubble (include/whatsapp-bubble.php).
   This file is loaded only when the bubble is shown (Admin → Footer Settings → WhatsApp Chat Bubble),
   so the back-to-top rules at the bottom apply only then. */

.wa-bubble {
    position: fixed;
    right: calc(24px + env(safe-area-inset-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 999; /* under the header (1001), menus, modals and toasts */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366; /* WhatsApp brand green */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.wa-bubble i {
    font-size: 30px;
    line-height: 1;
}

.wa-bubble:focus-visible {
    outline: 3px solid #128c7e;
    outline-offset: 3px;
}

/* A soft ring that pulses a few times after the page loads */
.wa-bubble::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25d366;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    animation: waBubblePulse 2s ease-out 1.5s 3;
}

@keyframes waBubblePulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

/* Label beside the bubble, shown on mouse hover and keyboard focus */
.wa-bubble__label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translate(8px, -50%);
    padding: 9px 14px;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.wa-bubble:focus-visible .wa-bubble__label {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

@media (hover: hover) {
    .wa-bubble:hover {
        background: #1ebe57;
        color: #fff;
        transform: scale(1.08);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    }

    .wa-bubble:hover .wa-bubble__label {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%);
    }
}

[data-theme="dark"] .wa-bubble__label {
    background: #1e293b;
    color: #f1f5f9;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* The back-to-top button shares the bottom-right corner: lift it above the bubble and centre
   it on the bubble's vertical line (translate keeps it centred whatever its size) */
html body .back-to-top,
html body #backToTop {
    right: calc(52px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    translate: 50% 0;
}

@media (max-width: 767px) {
    .wa-bubble {
        right: calc(16px + env(safe-area-inset-right, 0px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
    }

    .wa-bubble i {
        font-size: 28px;
    }

    .wa-bubble__label {
        display: none;
    }

    /* Phones: the back-to-top sits to the left of the bubble, centred on the same line
       (bubble centre = 16px + 52px / 2), so both buttons stay within the bubble's height */
    html body .back-to-top,
    html body #backToTop {
        right: calc(80px + env(safe-area-inset-right, 0px)) !important;
        bottom: calc(42px + env(safe-area-inset-bottom, 0px)) !important;
        translate: 0 50%;
    }

    /* Room under the footer's last line, so at the end of the page the buttons
       (top edge 68px up) never sit on it */
    .footer .footer-bottom {
        padding-bottom: calc(1.5rem + 24px + env(safe-area-inset-bottom, 0px));
    }

    body .auth-footer {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}

/* Same rule as tokens.css, for layouts that do not load it (the auth pages):
   reduced motion stops the pulse except on the home page */
@media (prefers-reduced-motion: reduce) {
    body:not(.homepage) .wa-bubble::before {
        animation: none;
    }

    body:not(.homepage) .wa-bubble,
    body:not(.homepage) .wa-bubble__label {
        transition: none;
    }
}

@media print {
    .wa-bubble {
        display: none;
    }
}