/*
 * ALBARON OPTIONS V34
 * Mobile sticky header visibility/layout.
 *
 * Mobile layout:
 * 1. Brand
 * 2. Home | Ai Bot | Logout
 * 3. Shadow | Refresh
 */

@media (max-width: 760px) {

    /*
     * Keep the already-approved sticky behavior.
     */

    .topbar {
        position: -webkit-sticky !important;
        position: sticky !important;

        top: 6px !important;
        z-index: 2000 !important;

        display: flex !important;
        flex-wrap: wrap !important;

        align-items: center !important;
        justify-content: space-between !important;

        gap: 9px !important;

        min-height: 0 !important;

        padding:
            9px
            9px
            10px !important;

        overflow: visible !important;

        background:
            rgba(4, 8, 17, .94) !important;

        backdrop-filter:
            blur(18px) !important;

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

    /*
     * Brand occupies first row.
     */

    .topbar > .brand {
        display: flex !important;

        flex:
            1 1 100% !important;

        width: 100% !important;

        min-width: 0 !important;

        align-items: center !important;
    }

    /*
     * All controls below the brand.
     */

    .top-actions {
        display: grid !important;

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

        width: 100% !important;

        flex:
            1 1 100% !important;

        align-items: stretch !important;

        gap:
            7px !important;
    }

    /*
     * Row 2:
     * Home | Ai Bot | Logout
     */

    .portal-nav-actions {
        grid-column:
            1 / -1 !important;

        display: grid !important;

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

        width: 100% !important;

        order: 1 !important;

        gap:
            6px !important;
    }

    .portal-nav-actions .portal-nav-button {
        display: inline-flex !important;

        visibility: visible !important;
        opacity: 1 !important;

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

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

        min-height:
            39px !important;

        margin: 0 !important;

        padding:
            0
            6px !important;

        white-space:
            nowrap !important;

        font-size:
            11px !important;

        line-height:
            1 !important;
    }

    /*
     * Row 3:
     * Shadow | Refresh
     *
     * This explicitly overrides the old:
     * .mode-badge { display:none; }
     */

    .mode-badge {
        display: flex !important;

        visibility: visible !important;
        opacity: 1 !important;

        order: 2 !important;

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

        min-height:
            39px !important;

        margin: 0 !important;

        padding:
            0
            7px !important;

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

        gap:
            6px !important;

        font-size:
            10.5px !important;

        line-height:
            1.15 !important;

        white-space:
            nowrap !important;
    }

    .mode-badge i {
        flex:
            0 0 auto !important;
    }

    .refresh-button {
        display: inline-flex !important;

        visibility: visible !important;
        opacity: 1 !important;

        order: 3 !important;

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

        min-height:
            39px !important;

        margin: 0 !important;

        padding:
            0
            7px !important;

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

        font-size:
            11px !important;

        white-space:
            nowrap !important;
    }
}

/*
 * Extra compact treatment for very narrow phones.
 */

@media (max-width: 390px) {

    .topbar {
        gap:
            7px !important;

        padding:
            8px !important;
    }

    .top-actions {
        gap:
            5px !important;
    }

    .portal-nav-actions {
        gap:
            4px !important;
    }

    .portal-nav-actions .portal-nav-button {
        padding:
            0
            4px !important;

        font-size:
            10px !important;
    }

    .mode-badge {
        padding:
            0
            4px !important;

        gap:
            4px !important;

        font-size:
            9.5px !important;
    }

    .refresh-button {
        padding:
            0
            4px !important;

        font-size:
            10px !important;
    }
}