/*
 * ============================================================
 * UAPIK_MOBILE_BOTTOM_NAV_MODERN_V1
 * ============================================================
 *
 * Mobile-only floating glass dock.
 *
 * Existing DOM and navigation behavior are preserved.
 * Tablet / desktop remain untouched.
 * ============================================================
 */


@media (max-width: 767.98px) {

    /*
     * Give floating dock breathing room.
     */
    .app-content {
        padding-bottom:
            calc(
                var(--bottom-nav-height) +
                var(--safe-bottom) +
                45px
            ) !important;
    }


    /*
     * FLOATING DOCK
     */
    .app-bottom-nav {
        box-sizing:
            border-box;

        left:
            max(
                12px,
                var(--safe-left)
            ) !important;

        right:
            max(
                12px,
                var(--safe-right)
            ) !important;

        bottom:
            calc(
                10px +
                var(--safe-bottom)
            ) !important;

        width:
            auto !important;

        min-height:
            72px !important;

        padding:
            7px !important;

        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            ) !important;

        gap:
            2px;

        overflow:
            hidden;

        border:
            1px solid
            rgba(255, 255, 255, .70) !important;

        border-radius:
            25px !important;

        background:
            rgba(255, 255, 255, .84) !important;

        backdrop-filter:
            blur(28px)
            saturate(155%) !important;

        -webkit-backdrop-filter:
            blur(28px)
            saturate(155%) !important;

        box-shadow:
            0 18px 50px
                rgba(35, 40, 78, .15),
            0 3px 14px
                rgba(35, 40, 78, .06),
            inset 0 1px 0
                rgba(255, 255, 255, .82) !important;
    }


    /*
     * Animated active capsule.
     *
     * Geometry is supplied by the tiny presentation JS.
     */
    .uapik-bottom-nav-indicator {
        position:
            absolute;

        z-index:
            0;

        left:
            0;

        top:
            0;

        width:
            var(
                --uapik-nav-indicator-width,
                0px
            );

        height:
            var(
                --uapik-nav-indicator-height,
                0px
            );

        opacity:
            0;

        pointer-events:
            none;

        transform:
            translate3d(
                var(
                    --uapik-nav-indicator-x,
                    0px
                ),
                var(
                    --uapik-nav-indicator-y,
                    0px
                ),
                0
            );

        border:
            1px solid
            rgba(113, 89, 255, .08);

        border-radius:
            19px;

        background:
            linear-gradient(
                145deg,
                rgba(236, 242, 255, .97),
                rgba(237, 232, 255, .97)
            );

        box-shadow:
            inset 0 1px 0
                rgba(255, 255, 255, .92),
            0 8px 22px
                rgba(95, 77, 224, .11);

        transition:
            transform
                .42s
                cubic-bezier(
                    .22,
                    1,
                    .36,
                    1
                ),
            width
                .36s
                cubic-bezier(
                    .22,
                    1,
                    .36,
                    1
                ),
            height
                .36s
                cubic-bezier(
                    .22,
                    1,
                    .36,
                    1
                ),
            opacity
                .18s
                ease;
    }


    .uapik-bottom-nav-indicator.is-visible {
        opacity:
            1;
    }


    /*
     * NAV ITEMS
     */
    .bottom-nav-item {
        position:
            relative;

        z-index:
            1;

        min-height:
            58px !important;

        padding:
            5px 2px 4px;

        gap:
            2px !important;

        border:
            0;

        border-radius:
            19px !important;

        color:
            #9299aa !important;

        background:
            transparent !important;

        font-size:
            9.5px !important;

        font-weight:
            650 !important;

        -webkit-tap-highlight-color:
            transparent;

        transition:
            color
                .22s
                ease,
            transform
                .18s
                ease !important;
    }


    .bottom-nav-item svg {
        width:
            22px !important;

        height:
            22px !important;

        flex:
            0 0 22px;

        stroke-width:
            1.85;

        transition:
            transform
                .38s
                cubic-bezier(
                    .22,
                    1,
                    .36,
                    1
                ),
            filter
                .28s
                ease;
    }


    .bottom-nav-item span {
        line-height:
            1.15;

        transition:
            transform
                .32s
                cubic-bezier(
                    .22,
                    1,
                    .36,
                    1
                ),
            opacity
                .2s
                ease,
            font-weight
                .2s
                ease;
    }


    /*
     * ACTIVE
     */
    .bottom-nav-item.is-active {
        color:
            #655cff !important;

        background:
            transparent !important;

        font-weight:
            800 !important;
    }


    .bottom-nav-item.is-active svg {
        transform:
            translateY(-3px)
            scale(1.09);

        filter:
            drop-shadow(
                0 4px 7px
                rgba(101, 92, 255, .18)
            );
    }


    .bottom-nav-item.is-active span {
        transform:
            translateY(-1px);

        font-weight:
            800;
    }


    /*
     * TACTILE PRESS
     */
    .bottom-nav-item:active {
        transform:
            scale(.93) !important;
    }


    /*
     * Tiny devices.
     */
    @media (max-width: 360px) {

        .app-bottom-nav {
            left:
                max(
                    7px,
                    var(--safe-left)
                ) !important;

            right:
                max(
                    7px,
                    var(--safe-right)
                ) !important;

            padding:
                6px 4px !important;
        }


        .bottom-nav-item {
            font-size:
                8.5px !important;
        }


        .bottom-nav-item svg {
            width:
                20px !important;

            height:
                20px !important;
        }
    }
}


/*
 * ============================================================
 * REDUCED MOTION
 * ============================================================
 */


@media
(max-width: 767.98px)
and
(prefers-reduced-motion: reduce) {

    .uapik-bottom-nav-indicator,
    .bottom-nav-item,
    .bottom-nav-item svg,
    .bottom-nav-item span {
        transition:
            none !important;
    }


    .bottom-nav-item.is-active svg {
        transform:
            none;
    }
}


/*
 * ============================================================
 * UAPIK_MOBILE_BOTTOM_NAV_MODERN_V1B
 * ============================================================
 *
 * Final compact visual polish:
 * - stronger glass surface;
 * - less background bleed;
 * - smaller active capsule;
 * - calmer icon lift;
 * - slightly tighter dock.
 * ============================================================
 */

@media (max-width: 767.98px) {

    .app-content {
        padding-bottom:
            calc(
                var(--bottom-nav-height) +
                var(--safe-bottom) +
                40px
            ) !important;
    }


    .app-bottom-nav {
        min-height:
            68px !important;

        padding:
            6px 7px !important;

        bottom:
            calc(
                9px +
                var(--safe-bottom)
            ) !important;

        background:
            rgba(
                255,
                255,
                255,
                .95
            ) !important;

        border:
            1px solid
            rgba(
                218,
                221,
                235,
                .86
            ) !important;

        backdrop-filter:
            blur(26px)
            saturate(145%) !important;

        -webkit-backdrop-filter:
            blur(26px)
            saturate(145%) !important;

        box-shadow:
            0 16px 42px
                rgba(
                    29,
                    34,
                    72,
                    .13
                ),
            0 4px 12px
                rgba(
                    29,
                    34,
                    72,
                    .055
                ),
            inset 0 1px 0
                rgba(
                    255,
                    255,
                    255,
                    .96
                ) !important;

        isolation:
            isolate;
    }


    .bottom-nav-item {
        min-height:
            54px !important;

        padding:
            4px 2px 3px !important;

        gap:
            1px !important;

        border-radius:
            17px !important;
    }


    .uapik-bottom-nav-indicator {
        border-radius:
            17px !important;

        background:
            linear-gradient(
                145deg,
                rgba(
                    241,
                    243,
                    255,
                    .99
                ),
                rgba(
                    235,
                    232,
                    255,
                    .99
                )
            ) !important;

        border:
            1px solid
            rgba(
                108,
                92,
                255,
                .08
            ) !important;

        box-shadow:
            inset 0 1px 0
                rgba(
                    255,
                    255,
                    255,
                    .98
                ),
            0 6px 16px
                rgba(
                    89,
                    76,
                    207,
                    .09
                ) !important;
    }


    .bottom-nav-item svg {
        width:
            21px !important;

        height:
            21px !important;

        flex:
            0 0 21px !important;
    }


    .bottom-nav-item.is-active svg {
        transform:
            translateY(-2px)
            scale(1.055) !important;

        filter:
            drop-shadow(
                0 3px 5px
                rgba(
                    101,
                    92,
                    255,
                    .15
                )
            ) !important;
    }


    .bottom-nav-item span {
        font-size:
            9.25px;
    }


    .bottom-nav-item.is-active span {
        transform:
            none !important;
    }
}