:root {
    --il-mobile-nav-height: 68px;
}


/*
 * Desktop stays unchanged.
 */
#il-mobile-app-nav,
#il-mobile-search-sheet,
#il-mobile-install-help {
    display: none;
}


@media (max-width: 820px) {

    html {
        scroll-padding-bottom:
            calc(
                var(--il-mobile-nav-height)
                + 92px
                + env(safe-area-inset-bottom)
            );
    }


    body {
        padding-bottom:
            calc(
                var(--il-mobile-nav-height)
                + env(safe-area-inset-bottom)
            );
    }


    /*
     * ---------------------------------------------------------
     * ANDROID-STYLE BOTTOM APP BAR
     * ---------------------------------------------------------
     */

    #il-mobile-app-nav {
        position: fixed;
        z-index: 999997;

        left: 0;
        right: 0;
        bottom: 0;

        height:
            calc(
                var(--il-mobile-nav-height)
                + env(safe-area-inset-bottom)
            );

        padding:
            7px 8px
            calc(7px + env(safe-area-inset-bottom));

        display: grid;

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

        align-items: stretch;

        background:
            rgba(8, 12, 20, .96);

        border-top:
            1px solid
            rgba(255,255,255,.10);

        box-shadow:
            0 -12px 32px
            rgba(0,0,0,.28);

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);
    }


    .il-mobile-nav-item {
        appearance: none;

        border: 0;
        background: transparent;

        color:
            rgba(255,255,255,.72);

        text-decoration: none;

        min-width: 0;
        min-height: 52px;

        border-radius: 15px;

        display: flex;
        flex-direction: column;

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

        gap: 3px;

        font:
            600 10px/1.1
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

        cursor: pointer;

        -webkit-tap-highlight-color:
            transparent;

        touch-action:
            manipulation;
    }


    .il-mobile-nav-item:active {
        background:
            rgba(255,255,255,.10);

        transform:
            scale(.97);
    }


    .il-mobile-nav-item[aria-current="page"] {
        color: #ffffff;

        background:
            rgba(255,255,255,.08);
    }


    .il-mobile-nav-icon {
        width: 23px;
        height: 23px;

        display: grid;
        place-items: center;
    }


    .il-mobile-nav-icon svg {
        width: 22px;
        height: 22px;

        fill: none;
        stroke: currentColor;

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


    /*
     * Install gets subtle emphasis.
     */

    #il-mobile-install-button.is-installable {
        color: #ffffff;
    }


    #il-mobile-install-button.is-installed {
        opacity: .55;
    }


    /*
     * ---------------------------------------------------------
     * KEEP RADIO ABOVE BOTTOM NAV
     * ---------------------------------------------------------
     */

    


    /*
     * Improve all radio buttons for thumbs.
     */

    #il-public-radio button,
    #il-public-radio a {
        min-height: 44px;

        touch-action:
            manipulation;

        -webkit-tap-highlight-color:
            transparent;
    }


    /*
     * ---------------------------------------------------------
     * MOBILE SEARCH SHEET
     * ---------------------------------------------------------
     */

    #il-mobile-search-sheet {
        position: fixed;

        inset: 0;

        z-index: 999999;

        background:
            rgba(0,0,0,.58);

        padding:
            14px;

        align-items:
            flex-end;
    }


    #il-mobile-search-sheet.is-open {
        display: flex;
    }


    .il-mobile-search-card {
        width: 100%;

        border-radius:
            24px 24px 18px 18px;

        background:
            #101722;

        color:
            #ffffff;

        padding:
            18px;

        padding-bottom:
            calc(
                18px
                + env(safe-area-inset-bottom)
            );

        box-shadow:
            0 -20px 70px
            rgba(0,0,0,.35);
    }


    .il-mobile-search-head {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 12px;

        margin-bottom: 14px;
    }


    .il-mobile-search-title {
        margin: 0;

        font:
            700 18px/1.2
            system-ui,
            sans-serif;
    }


    .il-mobile-search-close {
        width: 44px;
        height: 44px;

        border: 0;

        border-radius: 50%;

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

        color: #fff;

        font-size: 22px;
    }


    .il-mobile-search-form {
        display: grid;

        grid-template-columns:
            1fr auto;

        gap: 8px;
    }


    .il-mobile-search-input {
        min-width: 0;

        height: 52px;

        border:
            1px solid
            rgba(255,255,255,.13);

        border-radius: 15px;

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

        color: #ffffff;

        padding:
            0 15px;

        font-size: 16px;

        outline: none;
    }


    .il-mobile-search-submit {
        min-width: 72px;

        height: 52px;

        border: 0;

        border-radius: 15px;

        background: #ffffff;

        color: #080c14;

        font-weight: 800;

        padding: 0 18px;
    }


    /*
     * ---------------------------------------------------------
     * INSTALL HELP SHEET
     * ---------------------------------------------------------
     */

    #il-mobile-install-help {
        position: fixed;

        inset: 0;

        z-index: 1000000;

        background:
            rgba(0,0,0,.62);

        padding: 16px;

        align-items:
            flex-end;
    }


    #il-mobile-install-help.is-open {
        display: flex;
    }


    .il-install-card {
        width: 100%;

        background: #101722;

        color: #fff;

        border-radius: 24px;

        padding: 22px;

        padding-bottom:
            calc(
                22px
                + env(safe-area-inset-bottom)
            );
    }


    .il-install-card h2 {
        margin:
            0 0 8px;

        font-size: 21px;
    }


    .il-install-card p {
        color:
            rgba(255,255,255,.72);

        line-height: 1.5;
    }


    .il-install-close {
        width: 100%;

        min-height: 50px;

        margin-top: 10px;

        border: 0;

        border-radius: 15px;

        background: #fff;

        color: #080c14;

        font-weight: 800;
    }
}












/*
 * ============================================================
 * INSIGHTLINKS — MOBILE DOCK V3
 * Unified radio + navigation surface
 * ============================================================
 */

@media (max-width: 820px) {

    :root {
        --il-mobile-nav-height: 68px;
        --il-mobile-radio-height: 68px;
        --il-mobile-dock-edge: 8px;
    }


    body {
        padding-bottom:
            calc(
                var(--il-mobile-nav-height)
                + var(--il-mobile-radio-height)
                + env(safe-area-inset-bottom)
                + 18px
            ) !important;
    }


    html {
        scroll-padding-bottom:
            calc(
                var(--il-mobile-nav-height)
                + var(--il-mobile-radio-height)
                + env(safe-area-inset-bottom)
                + 18px
            );
    }


    /*
     * RADIO — upper section
     */

    #il-public-radio {
        position: fixed !important;

        z-index: 999996 !important;

        left:
            max(
                var(--il-mobile-dock-edge),
                env(safe-area-inset-left)
            ) !important;

        right:
            max(
                var(--il-mobile-dock-edge),
                env(safe-area-inset-right)
            ) !important;

        bottom:
            calc(
                var(--il-mobile-nav-height)
                + env(safe-area-inset-bottom)
            ) !important;

        top: auto !important;

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

        margin: 0 !important;

        transform: none !important;

        border-radius:
            18px 18px 0 0 !important;

        overflow: hidden !important;

        box-shadow:
            0 -8px 24px
            rgba(0,0,0,.18) !important;
    }


    #il-public-radio .il-radio-shell {
        display: grid !important;

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

        align-items: center !important;

        gap: 10px !important;

        min-height:
            var(--il-mobile-radio-height) !important;

        padding:
            8px 12px !important;

        border-radius:
            18px 18px 0 0 !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.08) !important;

        box-shadow:
            none !important;
    }


    #il-public-radio .il-radio-open {
        display: none !important;
    }


    #il-public-radio .il-radio-play {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
        min-height: 44px !important;

        flex-shrink: 0;
    }


    #il-public-radio .il-radio-copy {
        min-width: 0;
    }


    #il-public-radio .il-radio-title,
    #il-public-radio .il-radio-meta {
        min-width: 0;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;
    }


    #il-public-radio .il-radio-title {
        font-size: 13px !important;
        line-height: 1.25;
    }


    #il-public-radio .il-radio-meta {
        font-size: 11px !important;
    }


    /*
     * NAVIGATION — lower section
     */

    #il-mobile-app-nav {
        z-index: 999997 !important;

        left:
            max(
                var(--il-mobile-dock-edge),
                env(safe-area-inset-left)
            ) !important;

        right:
            max(
                var(--il-mobile-dock-edge),
                env(safe-area-inset-right)
            ) !important;

        bottom: 0 !important;

        width: auto !important;

        border-top: 0 !important;

        border-radius:
            0 0 18px 18px !important;

        overflow: hidden;

        background:
            rgba(8,12,20,.98);

        box-shadow:
            0 12px 30px
            rgba(0,0,0,.24);
    }


    #il-mobile-app-nav::before {
        content: "";

        position: absolute;

        left: 14px;
        right: 14px;
        top: 0;

        height: 1px;

        background:
            rgba(255,255,255,.08);
    }


    .il-mobile-nav-item {
        position: relative;
        z-index: 1;
    }


    @media (max-width: 390px) {

        :root {
            --il-mobile-dock-edge: 6px;
            --il-mobile-radio-height: 64px;
        }


        #il-public-radio,
        #il-public-radio .il-radio-shell {
            border-radius:
                16px 16px 0 0 !important;
        }


        #il-mobile-app-nav {
            border-radius:
                0 0 16px 16px !important;
        }

    }

}