/* Desktop version revechat styles */
@media(min-width: 992px){
    body div[id*="reve-chat-container"],
body div#reve-chat-container-div {
    position: fixed !important;
    bottom: -2px !important;
    left: 24px !important;
    right: auto !important;
    top: auto !important;
    width: 400px !important;
    max-width: 550px !important;
    height: 400px !important;
    max-height: 400px !important;
    min-height: 400px !important;
    border-radius: 12px !important;
    
    overflow: hidden !important;
    z-index: 2147483646 !important;
    
}

html body iframe#reve-chat-widget-holder {
    width: 100% !important;
    height: 100% !important;
    min-width: unset !important;
    min-height: unset !important;
    position: absolute !important;
    inset: 0 !important;
    border: none !important;
    border-radius: 12px !important;
   
}
}

/*Mobile version revechat styles*/
@media (max-width: 576px) {
    /* Above Bootstrap .modal-backdrop (1040) and .modal (1050) so the header chat stays clickable when any modal is open */
    .mobileNav {
        position: relative !important;
        z-index: 1080 !important;
    }
    #mobile-chat-trigger {
        position: relative !important;
        z-index: 1081 !important;
        pointer-events: auto !important;
    }

    .mobile-chat-trigger {
        background: transparent;
        border: 0;
        padding: 4px 8px;
        margin-left: auto;
        margin-right: 4px;
        line-height: 1;
        cursor: pointer;
        visibility: hidden;
    }
    body.page-loaded .mobile-chat-trigger {
        visibility: visible;
    }
    .mobile-chat-trigger img {
        width: 36px;
        height: 36px;
        display: block;
    }

    /* Hide ReveChat default launcher (floating blue chat bubble) on mobile – use header icon only */
    #reve-chat-launcher,
    div#reve-chat-launcher,
    body > div[id*="reve-chat-launcher"],
    [id*="reve-chat-launcher"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    /* When chat is open on teal backdrop, ensure launcher never shows on top */
    html body:not(.reve-chat-closed) [id*="reve-chat-launcher"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Teal backdrop (parent) – full width #028398, chat window will sit centered on top */
    /* Teal backdrop – hidden when chat closed; extra translate + opacity avoids a coloured line after refresh */
    #reve-chat-teal-backdrop {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 43vh !important;
        max-height: 43vh !important;
        background: #028398 !important;
        z-index: 2147483645 !important;
        transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease !important;
        transform: translateY(calc(100% + 8px)) !important;
        pointer-events: none !important;
    }
    html body:not(.reve-chat-closed) #reve-chat-teal-backdrop {
        transform: translateY(0) !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* ReveChat container: slide down when closed (keep display:block so transition runs) */
    /* ReveChat container when closed – push past viewport + hide (ReveChat may restore open state after refresh) */
    html body.reve-chat-closed div#reve-chat-container-div {
        display: block !important;
        transform: translate(-50%, calc(100% + 24px)) translateZ(0) !important;
        pointer-events: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* When chat is open, force container visible and slide up */
    html body:not(.reve-chat-closed) div#reve-chat-container-div {
        display: block !important;
        transform: translate(-50%, 0) translateZ(0) !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Chat window centered on teal backdrop – transparent so teal shows on sides */
    /* Layout only – transform/visibility come from .reve-chat-closed / :not() rules above */
    html body div#reve-chat-container-div {
        position: fixed !important;
        bottom: 10px !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 400px !important;
        height: 40vh !important;
        max-height: 40vh !important;
        background: transparent !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 2147483646 !important;
        transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease !important;
    }

    html body iframe#reve-chat-widget-holder {
        width: 100% !important;
        height: 100% !important;
        min-width: unset !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        border: none !important;
        border-radius: 16px 16px 0 0 !important;
        background: transparent !important;
    }
    
}