/* ==========================================================
   KETOZONA MOBILE ASSISTANCE HUB V1
   Mobile only
   ========================================================== */


/*
 * Nothing changes on desktop.
 */
#kz-assistance-hub {
    display: none;
}


@media (max-width: 767px) {

    /*
     * Hide the TWO historical floating launchers only when
     * our replacement hub has successfully initialized.
     *
     * IMPORTANT:
     * Do NOT hide #bp-web-widget. It is the Botpress system.
     */
    body.kz-assistance-hub-ready #bp-toggle-chat,
    body.kz-assistance-hub-ready a.telegram-floating {

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        animation: none !important;

        width: 1px !important;
        height: 1px !important;

        min-width: 0 !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }


    #kz-assistance-hub {

        display: block;

        position: fixed;

        left: 16px;

        bottom:
            calc(
                82px +
                env(safe-area-inset-bottom, 0px)
            );

        z-index: 100050;

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Arial,
            sans-serif;
    }


    /* =============================================
       MAIN BUTTON
       ============================================= */

    #kz-assistance-toggle {

        position: relative;

        width: 60px;
        height: 60px;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 1px;

        margin: 0;

        padding: 0;

        border:
            2px solid rgba(221,181,55,.95);

        border-radius: 50%;

        background:
            linear-gradient(
                145deg,
                #063f37 0%,
                #075b4e 100%
            );

        color: #ffffff;

        cursor: pointer;

        box-shadow:
            0 10px 25px
            rgba(3,52,44,.28),
            0 0 0 4px
            rgba(255,255,255,.75);

        -webkit-tap-highlight-color:
            transparent;

        transition:
            transform .2s ease,
            box-shadow .2s ease,
            background .2s ease;
    }


    #kz-assistance-toggle:active {

        transform:
            scale(.95);
    }


    #kz-assistance-toggle svg {

        width: 25px;
        height: 25px;

        fill: none;

        stroke: currentColor;
        stroke-width: 2.2;

        stroke-linecap: round;
        stroke-linejoin: round;
    }


    #kz-assistance-toggle .kz-help-label {

        color: #ffffff;

        font-size: 8px;

        line-height: 1;

        font-weight: 900;

        letter-spacing: .08em;

        text-transform: uppercase;
    }


    /*
     * Gold status dot.
     */
    #kz-assistance-toggle::after {

        content: "";

        position: absolute;

        top: 3px;
        right: 3px;

        width: 10px;
        height: 10px;

        border:
            2px solid #ffffff;

        border-radius: 50%;

        background:
            #d6a72a;

        box-shadow:
            0 2px 5px
            rgba(0,0,0,.18);
    }


    /*
     * Active state.
     */
    #kz-assistance-hub.kz-open
    #kz-assistance-toggle {

        background:
            linear-gradient(
                145deg,
                #09594d 0%,
                #087364 100%
            );

        transform:
            rotate(-4deg);
    }


    /* =============================================
       ACTION PANEL
       ============================================= */

    #kz-assistance-actions {

        position: absolute;

        left: 0;

        bottom: 72px;

        width:
            min(
                270px,
                calc(100vw - 32px)
            );

        display: flex;

        flex-direction: column;

        gap: 9px;

        pointer-events: none;

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(13px)
            scale(.96);

        transform-origin:
            left bottom;

        transition:
            opacity .2s ease,
            visibility .2s ease,
            transform .2s ease;
    }


    #kz-assistance-hub.kz-open
    #kz-assistance-actions {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0)
            scale(1);
    }


    /* =============================================
       ACTION PILLS
       ============================================= */

    .kz-assistance-action {

        min-height: 54px;

        display: grid;

        grid-template-columns:
            42px
            minmax(0,1fr)
            20px;

        align-items: center;

        gap: 10px;

        width: 100%;

        margin: 0;

        padding:
            7px
            12px
            7px
            8px;

        border:
            1px solid
            rgba(6,63,55,.14);

        border-radius: 16px;

        background:
            rgba(255,255,255,.98);

        color:
            #073f37 !important;

        text-align: left;

        text-decoration:
            none !important;

        box-shadow:
            0 10px 28px
            rgba(23,50,45,.18);

        cursor: pointer;

        -webkit-tap-highlight-color:
            transparent;

        transition:
            transform .16s ease,
            box-shadow .16s ease;
    }


    .kz-assistance-action:active {

        transform:
            scale(.98);
    }


    .kz-assistance-action-icon {

        width: 42px;
        height: 42px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background:
            #eef5f2;

        color:
            #075247;
    }


    .kz-assistance-action-icon svg {

        width: 23px;
        height: 23px;

        fill: none;

        stroke: currentColor;
        stroke-width: 2;

        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .kz-assistance-action-copy {

        min-width: 0;

        display: flex;

        flex-direction: column;

        gap: 2px;
    }


    .kz-assistance-action-title {

        color:
            #063f37;

        font-size:
            14px;

        line-height:
            1.15;

        font-weight:
            800;
    }


    .kz-assistance-action-subtitle {

        color:
            #71807c;

        font-size:
            10px;

        line-height:
            1.2;

        font-weight:
            500;
    }


    .kz-assistance-arrow {

        color:
            #bd9426;

        font-size:
            25px;

        line-height:
            1;

        font-weight:
            400;
    }


    /*
     * Telegram identity.
     */
    #kz-assistance-telegram
    .kz-assistance-action-icon {

        background:
            #e9f6fc;

        color:
            #0788c9;
    }


    /* =============================================
       SMALL PHONE
       ============================================= */

    @media (max-width: 380px) {

        #kz-assistance-hub {

            left: 12px;

            bottom:
                calc(
                    76px +
                    env(
                        safe-area-inset-bottom,
                        0px
                    )
                );
        }


        #kz-assistance-toggle {

            width: 56px;
            height: 56px;
        }


        #kz-assistance-actions {

            bottom: 67px;

            width:
                min(
                    245px,
                    calc(100vw - 24px)
                );
        }

    }

}

/* === END KETOZONA MOBILE ASSISTANCE HUB V1 === */