/* Native category disclosure: desktop retains the existing category carousel. */
.caxtube-watch-categories {
    display: none;
}

@media (max-width: 767px) {
    .home-fluid .home-header > .tag_sliders {
        display: none;
    }

    .caxtube-watch-categories {
        display: block;
        position: relative;
        margin: 0 12px 8px;
        color: var(--caxtube-text);
    }

    .caxtube-watch-categories > summary {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 10px 12px;
        border: 1px solid var(--caxtube-border);
        border-radius: 8px;
        background: var(--caxtube-panel-2);
        cursor: pointer;
        list-style: none;
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
    }

    .caxtube-watch-categories > summary::-webkit-details-marker {
        display: none;
    }

    .caxtube-watch-categories > summary svg {
        flex: 0 0 20px;
    }

    .caxtube-watch-categories__chevron {
        margin-left: auto;
    }

    .caxtube-watch-categories[open] .caxtube-watch-categories__chevron {
        transform: rotate(180deg);
    }

    .caxtube-watch-categories__panel {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        z-index: 10;
        max-height: min(50vh, 352px);
        max-height: min(50dvh, 352px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 6px;
        border: 1px solid var(--caxtube-border);
        border-radius: 8px;
        background: var(--caxtube-panel);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    }

    .caxtube-watch-categories__panel a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 4px;
        color: var(--caxtube-text);
        font-size: 14px;
        line-height: 24px;
        overflow-wrap: anywhere;
    }

    .caxtube-watch-categories__panel a:hover,
    .caxtube-watch-categories__panel a[aria-current="page"] {
        background: var(--caxtube-panel-2);
    }

    .caxtube-watch-categories__panel a[aria-current="page"] {
        font-weight: 700;
    }

    .caxtube-watch-categories summary:focus-visible,
    .caxtube-watch-categories__panel a:focus-visible {
        outline: 2px solid var(--caxtube-text);
        outline-offset: -3px;
    }
}

@media (max-width: 575px) {
    /* A filtered ancestor traps fixed descendants in its own box, including in
       iOS Safari. Keep this header opaque and the toolbar fixed to the viewport. */
    .home-fluid .home-header {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--caxtube-bg) !important;
    }

    /* Retire the AI page's spacing workaround now that the toolbar is separate. */
    .home-fluid:has(.caxtube-ask) .home-header {
        padding-bottom: 0;
    }

    .home-fluid .home-header__right {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-height: 60px;
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--caxtube-bg);
        border-top: 1px solid var(--caxtube-border);
        flex-wrap: nowrap;
        justify-content: space-around;
    }

    .home-fluid .home-header__right .sm-bottom-nav__link,
    .home-fluid .home-header__right .create__btn,
    .home-fluid .home-header__right .user-info__button {
        min-height: 44px;
    }

    .home-fluid .home-header__right .user-info__button {
        min-width: 44px;
    }

    .home-fluid .home-header__right .sm-bottom-nav__link {
        font-size: 11px;
        line-height: 16px;
    }

    .home-fluid .home-header__right .user-info .user-info-list {
        bottom: calc(100% + 8px);
        max-height: calc(100vh - 160px - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 160px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body:has(.home-fluid .home-header) {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .scroll-top.show {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}