/* ================================================================
   mobile.css — Mobile panel modes & 3-button nav styles
   ================================================================ */

/* ----------------------------------------------------------------
   PANEL MODES  (only active on ≤640 px via mobileNav.js classes)
   ---------------------------------------------------------------- */

/* --- Users-only mode --- */
#ct_main_left.mob-users-mode .ct_room_list_header,
#ct_main_left.mob-users-mode #ct_room_list {
    display: none;
}

/* Hide the room-list collapse chevron in users mode */
#ct_main_left.mob-users-mode .ct_user_list_pos {
    display: none;
}

/* Styled panel header for users */
#ct_main_left.mob-users-mode .ct_user_list_header {
    background: linear-gradient(90deg, #00608a 0%, #13161d 100%);
    border-bottom: 1px solid rgba(77, 184, 232, 0.25);
    letter-spacing: 0.3px;
}

/* --- Rooms-only mode --- */
#ct_main_left.mob-rooms-mode #ct_user_list_header,
#ct_main_left.mob-rooms-mode #ct_user_list {
    display: none;
}

/* No need for the splitter-hide chevron in rooms mode */
#ct_main_left.mob-rooms-mode .ct_left_hide {
    display: none;
}

/* Expand room list to fill the full panel height */
#ct_main_left.mob-rooms-mode #ct_room_list {
    bottom: 0;
    height: auto;
}

/* Styled panel header for rooms */
#ct_main_left.mob-rooms-mode .ct_room_list_header {
    background: linear-gradient(90deg, #00608a 0%, #13161d 100%);
    border-bottom: 1px solid rgba(77, 184, 232, 0.25);
}

/* ----------------------------------------------------------------
   ACTIVE STATE for mobile nav buttons (set by mobileNav.js)
   ---------------------------------------------------------------- */
#ct_mobile_nav button.mob-active {
    color: #4db8e8;
    background: rgba(77, 184, 232, 0.12);
    border-top: 2px solid #4db8e8;
}

/* ================================================================
   MOBILE-ONLY OVERRIDES  (≤640 px)
   ================================================================ */

@media (max-width: 640px) {

    /* ----------------------------------------------------------------
       TOPNAV — compact height to reclaim vertical space
       ---------------------------------------------------------------- */

    /* Do NOT set a fixed height on .topnav itself — it must grow when
       respmenu() adds .responsive and all items become display:block.
       Only constrain the icon button so the collapsed bar is 36px. */

    /* Center the hamburger icon vertically in the slim bar */
    .topnav a.icon {
        padding: 0 14px;
        height: 36px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

    /* Logo image in responsive hamburger row */
    .cabecera img {
        height: 36px;
        width: 36px;
    }

    /* Allow the expanded menu to grow beyond the bar height */
    .topnav.responsive {
        overflow: visible;
    }

    /* Shift body up to match new topnav height (was 48px) */
    div.body {
        top: 36px;
    }

    /* ----------------------------------------------------------------
       CT_MOBILE_NAV — frosted glass, modern design
       ---------------------------------------------------------------- */

    /* Frosted glass background + gradient top border */
    #ct_mobile_nav {
        background: rgba(13, 15, 22, 0.90);
        backdrop-filter: blur(24px) saturate(1.6);
        -webkit-backdrop-filter: blur(24px) saturate(1.6);

        /* Gradient top border via gradient + 1px solid layering */
        border-top: none;
        box-shadow:
            0 -1px 0 0 rgba(77, 184, 232, 0.22),
            0 -6px 28px rgba(0, 0, 0, 0.55);

        /* Safe-area padding for iPhone notch / home-bar */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left:   env(safe-area-inset-left,   4px);
        padding-right:  env(safe-area-inset-right,  4px);
    }

    /* Subtle gradient line along the top edge of the nav bar */
    #ct_mobile_nav::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(77, 184, 232, 0.55) 35%,
            rgba(0, 168, 224, 0.70) 50%,
            rgba(77, 184, 232, 0.55) 65%,
            transparent 100%
        );
        pointer-events: none;
    }

    /* Individual buttons */
    #ct_mobile_nav button {
        position: relative;
        border-radius: 14px;
        margin: 5px 3px;
        gap: 2px;
        transition:
            background  0.18s ease,
            color       0.18s ease,
            transform   0.15s ease;
        overflow: visible;
    }

    #ct_mobile_nav button span {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.25px;
        opacity: 0.85;
    }

    #ct_mobile_nav button i {
        font-size: 19px;
        transition: transform 0.2s ease, filter 0.2s ease;
    }

    /* Hover / press feedback */
    #ct_mobile_nav button:hover,
    #ct_mobile_nav button:active {
        background: rgba(77, 184, 232, 0.10);
        color: #4db8e8;
        transform: translateY(-2px);
    }

    /* ── Active state — pill + glow ── */
    #ct_mobile_nav button.mob-active {
        color: #4db8e8;
        background: rgba(77, 184, 232, 0.14);

        /* Remove the old flat top border */
        border-top: none;
    }

    /* Glowing pill indicator at the top of the active button */
    #ct_mobile_nav button.mob-active::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 3px;
        background: linear-gradient(90deg, #4db8e8, #00c8ff);
        border-radius: 0 0 4px 4px;
        box-shadow:
            0 0 6px  rgba(77, 184, 232, 0.8),
            0 0 14px rgba(77, 184, 232, 0.4);
    }

    /* Icon lift + glow on active */
    #ct_mobile_nav button.mob-active i {
        transform: translateY(-2px);
        filter: drop-shadow(0 0 5px rgba(77, 184, 232, 0.75));
    }

    #ct_mobile_nav button.mob-active span {
        opacity: 1;
        font-weight: 600;
    }
}