#whatsapp-widget {
        position: fixed;
        right: 24px;
        bottom: 24px;
        right: max(24px, env(safe-area-inset-right));
        bottom: max(24px, env(safe-area-inset-bottom));
        z-index: 1050;
        font-size: 15px;
        color: #233b35;
    }

    #whatsapp-widget svg {
        flex-shrink: 0;
        fill: currentColor;
    }

    #whatsapp-widget-button {
        width: 60px;
        height: 60px;
        box-shadow: 0 6px 24px rgba(18, 87, 63, 0.25);
    }

    #whatsapp-widget .btn-success {
        background-color: #14c656;; 
        border-color: #128c5e;
    }

    #whatsapp-widget .btn-success:hover,
    #whatsapp-widget .btn-success:active {
        background-color: #14c656;
        border-color: #0b754e;
    }

    #whatsapp-widget-button[aria-expanded="true"] {
        background: #14c656;
    }

    #whatsapp-widget button:focus-visible,
    #whatsapp-widget a:focus-visible {
        outline: 3px solid #157bda;
        outline-offset: 4px;
    }

    #whatsapp-widget-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 0;
        bottom: 40px;
        width: 400px;
        /* Overrides the site-wide `html, section { height: 100% }` in style_19.css. */
        height: auto !important;
        max-width: calc(100vw - 48px - env(safe-area-inset-right, 0px));
        max-height: calc(100vh - 124px - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 124px - env(safe-area-inset-bottom, 0px));
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 0 16px 48px rgba(24, 55, 44, 0.18);
    }

    #whatsapp-widget-box[hidden] {
        display: none;
    }

    /* Header and call to action never shrink; only the message scrolls. */
    #whatsapp-widget .whatsapp-header,
    #whatsapp-widget .card-footer {
        flex-shrink: 0;
    }

    #whatsapp-widget .whatsapp-header {
        background: #075e54;
        border-radius: 0;
    }

        #whatsapp-widget .whatsapp-avatar {
        width: 70px;
        height: 70px;
        background: rgba(255, 255, 255, 0.12);
        flex: 0 0 70px;
    }

    #whatsapp-widget .whatsapp-avatar img {
        object-fit: cover;
    }

    #whatsapp-widget-close {
        width: 70px;
        height: 70px;
        flex: 0 0 70px;
    }

    #whatsapp-widget-close:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    #whatsapp-widget .whatsapp-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        background-color: #eef3ef;
        background-image: radial-gradient(#d9e3dc 1px, transparent 1px);
        background-size: 16px 16px;
    }
    #whatsapp-widget .whatsapp-message {
        border-radius: 0 14px 14px;
    }
    #whatsapp-widget .whatsapp-message::before {
        position: absolute;
        top: 0;
        left: -8px;
        border-top: 8px solid #fff;
        border-left: 8px solid transparent;
        content: "";
    }

    #whatsapp-contact-button {
        min-height: 48px;
        border-radius: 12px;
    }

    @media (max-width: 480px) {
        #whatsapp-widget {
            right: max(16px, env(safe-area-inset-right));
            bottom: max(16px, env(safe-area-inset-bottom));
        }

        #whatsapp-widget-box {
            max-width: 350px;
            max-width: calc(100vw - 32px - env(safe-area-inset-right, 0px));
            max-height: calc(100vh - 108px - env(safe-area-inset-bottom, 0px));
            max-height: calc(100dvh - 108px - env(safe-area-inset-bottom, 0px));
        }
    }
    /* Short viewports: open beside the launcher to use the full height. */
    @media (max-height: 420px) {
        #whatsapp-widget {
            right: max(16px, env(safe-area-inset-right));
            bottom: max(16px, env(safe-area-inset-bottom));
        }
        #whatsapp-widget-box {
            max-width: 320px;
            right: 76px;
            bottom: 0;
            max-width: calc(100vw - 108px - env(safe-area-inset-right, 0px));
            max-height: calc(100vh - 32px - env(safe-area-inset-bottom, 0px));
            max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px));
        }
    }
    /* Very short viewports: keep only the header and call to action. */
    @media (max-height: 260px) {
        #whatsapp-widget .whatsapp-body,
        #whatsapp-widget .whatsapp-header .small {
            display: none;
        }
        #whatsapp-widget .whatsapp-header {
            padding: .5rem 1rem !important;
        }
        #whatsapp-widget .card-footer {
            padding: .5rem 1rem !important;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        #whatsapp-widget .btn { transition: none; }
    }