/*
 * BAOMBOE WPIKO Mobile Sheet 1.0.1
 * Adaptado a los selectores reales de WPiko Chatbot 2.0.4.
 */

@media screen and (max-width: 767px) {
    :root {
        --bmb-wpiko-visible-height: 100dvh;
        --bmb-wpiko-sheet-height: 72dvh;
        --bmb-wpiko-sheet-gap: 8px;
        --bmb-wpiko-sheet-radius: 22px;
        --bmb-wpiko-backdrop-z: 2147483000;
        --bmb-wpiko-sheet-z: 2147483200;
    }

    html.chatbot-open,
    body.chatbot-open {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    #bmb-wpiko-mobile-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: var(--bmb-wpiko-backdrop-z) !important;
        display: block !important;
        background: rgba(10, 18, 14, 0.30) !important;
        -webkit-backdrop-filter: blur(1.5px);
        backdrop-filter: blur(1.5px);
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition:
            opacity 180ms ease,
            visibility 180ms ease !important;
    }

    body.chatbot-open #bmb-wpiko-mobile-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /*
     * Selector exacto del panel flotante de WPiko 2.0.4.
     */
    #wpiko-chatbot-floating-container {
        position: fixed !important;
        top: auto !important;
        right: max(
            var(--bmb-wpiko-sheet-gap),
            env(safe-area-inset-right)
        ) !important;
        bottom: 0 !important;
        left: max(
            var(--bmb-wpiko-sheet-gap),
            env(safe-area-inset-left)
        ) !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: min(
            var(--bmb-wpiko-sheet-height),
            calc(var(--bmb-wpiko-visible-height) - 10px)
        ) !important;
        min-height: 340px !important;
        max-height: calc(
            var(--bmb-wpiko-visible-height) - 10px
        ) !important;

        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius:
            var(--bmb-wpiko-sheet-radius)
            var(--bmb-wpiko-sheet-radius)
            0
            0 !important;

        background: #ffffff !important;
        box-shadow:
            0 -14px 42px rgba(0, 0, 0, 0.24),
            0 0 0 1px rgba(0, 0, 0, 0.06) !important;

        transform: none !important;
        translate: none !important;
        z-index: var(--bmb-wpiko-sheet-z) !important;
        overflow: hidden !important;
        isolation: isolate !important;
    }

    /*
     * La barra superior indica visualmente que se trata de un panel.
     */
    #wpiko-chatbot-floating-container::before {
        content: "" !important;
        position: absolute !important;
        top: 7px !important;
        left: 50% !important;
        width: 42px !important;
        height: 5px !important;
        border-radius: 999px !important;
        background: rgba(31, 72, 50, 0.32) !important;
        transform: translateX(-50%) !important;
        z-index: 2147483600 !important;
        pointer-events: none !important;
    }

    #wpiko-chatbot-floating-container #wpiko-chatbot-container {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        border-radius: inherit !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    #wpiko-chatbot-floating-container #chatbot-header {
        position: relative !important;
        flex: 0 0 auto !important;
        min-height: 64px !important;
        padding-top: 13px !important;
        z-index: 4 !important;
    }

    #wpiko-chatbot-floating-container #chatbot-messages {
        position: relative !important;
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #wpiko-chatbot-floating-container #input-container {
        position: relative !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: max(
            8px,
            env(safe-area-inset-bottom)
        ) !important;
        z-index: 4 !important;
        background: #ffffff !important;
    }

    #wpiko-chatbot-floating-container #chatbot-input-container {
        width: 100% !important;
        min-width: 0 !important;
    }

    /*
     * En móvil dejamos visible la X oficial de WPiko y ocultamos expandir,
     * ya que el panel ya tiene un tamaño optimizado.
     */
    #wpiko-chatbot-floating-container #wpiko-chatbot-mobile-close {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #wpiko-chatbot-floating-container #wpiko-chatbot-expand {
        display: none !important;
    }

    /*
     * Evita que WhatsApp y el carrito queden encima del panel.
     */
    body.chatbot-open .ht_ctc_chat,
    body.chatbot-open #ht-ctc-chat,
    body.chatbot-open [class*="ht_ctc_chat"],
    body.chatbot-open .xoo-wsc-basket,
    body.chatbot-open #xoo-wsc-basket,
    body.chatbot-open [class*="xoo-wsc-basket"] {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    @media (max-height: 620px) {
        :root {
            --bmb-wpiko-sheet-height: 82dvh;
        }

        #wpiko-chatbot-floating-container {
            min-height: 300px !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #bmb-wpiko-mobile-backdrop {
            transition: none !important;
        }
    }
}