/* MeTube v2.9.0 mobile experience
   Loaded last by ViewRenderer so one coherent responsive layer can correct
   legacy page-specific breakpoints without changing the dark GHPHouse theme. */

:root {
    color-scheme: dark;
    --mobile-bg: #08070d;
    --mobile-surface: #12131b;
    --mobile-surface-raised: #191b25;
    --mobile-line: rgba(255, 255, 255, .11);
    --mobile-text: #f8f8fb;
    --mobile-muted: #b5b8c5;
    --mobile-accent: #ff2d55;
    --mobile-dock-height: 68px;
}

html {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(255, 75, 114, .78) !important;
    outline-offset: 3px;
}

.ghp-mobile-dock,
.ghp-mobile-sidebar-scrim,
.ghp-pwa-install-card,
.ghp-pwa-status {
    display: none;
}

.ghp-mobile-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.ghp-pwa-status {
    position: fixed;
    right: 16px;
    bottom: 18px;
    z-index: 12050;
    max-width: min(390px, calc(100vw - 32px));
    padding: 12px 15px;
    border: 1px solid rgba(255, 45, 85, .32);
    border-radius: 14px;
    color: var(--mobile-text);
    background: #17131b;
    box-shadow: 0 20px 54px rgba(0, 0, 0, .55);
    font-size: 13px;
    font-weight: 750;
}

.ghp-pwa-status.is-visible { display: block; }
.ghp-pwa-status.is-online { border-color: rgba(61, 214, 133, .45); }

.ghp-pwa-install-card {
    position: fixed;
    right: 16px;
    bottom: 18px;
    z-index: 12040;
    width: min(390px, calc(100vw - 32px));
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 45, 85, .34);
    border-radius: 18px;
    color: var(--mobile-text);
    background: linear-gradient(145deg, #20131a, #11131b);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}

.ghp-pwa-install-card.is-visible { display: grid; }
.ghp-pwa-install-card > i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #ff2d55, #9b001f);
}
.ghp-pwa-install-card strong,
.ghp-pwa-install-card small { display: block; }
.ghp-pwa-install-card small { margin-top: 3px; color: var(--mobile-muted); line-height: 1.35; }
.ghp-pwa-install-actions { display: flex; gap: 7px; }
.ghp-pwa-install-actions button {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--mobile-line);
    border-radius: 11px;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    font-weight: 850;
}
.ghp-pwa-install-actions button:first-child {
    border-color: transparent;
    background: linear-gradient(135deg, #ff2d55, #b6002b);
}

@media (max-width: 900px) {
    :root {
        --ghp-topbar-height: calc(60px + env(safe-area-inset-top));
    }

    body {
        min-width: 0;
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--mobile-bg) !important;
    }

    body.mobile-navigation-open,
    body.sidebar-open,
    body.premium-sidebar-open { overflow: hidden; }

    .app,
    .ghp-app,
    body > .app {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: var(--ghp-topbar-height) minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .topbar,
    .ghp-topbar {
        min-width: 0;
        height: var(--ghp-topbar-height) !important;
        min-height: var(--ghp-topbar-height) !important;
        padding: env(safe-area-inset-top) 10px 0 !important;
        gap: 8px !important;
        background: var(--mameada-nav-background) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .48) !important;
    }

    .topbar-left,
    .topbar-right,
    .ghp-header-actions { min-width: 0; gap: 7px !important; }
    .topbar-left { flex: 1 1 auto; }
    .topbar-right { flex: 0 0 auto; }
    .topbar-center { display: none !important; }

    .topbar .topbar-left .menu-btn:not(.mobile-menu) { display: none !important; }
    .topbar .mobile-menu {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
    }

    .brand { min-width: 0; }
    .brand a { min-width: 0; }

    .ghp-header-premium-btn,
    .ghp-header-upload-btn { display: none !important; }

    .ghp-header-actions .profile-avatar-btn,
    .topbar .topbar-right .ghp-header-actions .account-popup-wrap,
    .topbar .topbar-right .ghp-header-actions .ghp-notification-wrap,
    .topbar .topbar-right .ghp-header-actions .account-popup-wrap #accountPopupBtn.profile-avatar-btn,
    .topbar .topbar-right .ghp-header-actions .ghp-notification-btn {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        flex-basis: 42px !important;
    }

    .app > .sidebar,
    .ghp-app > .sidebar,
    .app > .ghp-sidebar,
    .ghp-app > .ghp-sidebar {
        top: 0 !important;
        width: min(330px, 88vw) !important;
        min-width: min(330px, 88vw) !important;
        height: 100dvh !important;
        padding-top: calc(16px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(24px + var(--mobile-dock-height) + env(safe-area-inset-bottom)) !important;
        z-index: 12010 !important;
        transform: translate3d(-105%, 0, 0);
        visibility: hidden;
        box-shadow: 26px 0 70px rgba(0, 0, 0, .72) !important;
    }

    body.sidebar-open .app > .sidebar,
    body.sidebar-open .ghp-app > .sidebar,
    body.sidebar-open .app > .ghp-sidebar,
    body.sidebar-open .ghp-app > .ghp-sidebar {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible;
    }

    .ghp-mobile-sidebar-scrim {
        position: fixed;
        inset: 0;
        z-index: 12000;
        width: 100%;
        height: 100%;
        border: 0;
        background: rgba(0, 0, 0, .7);
        backdrop-filter: blur(3px);
    }
    body.sidebar-open .ghp-mobile-sidebar-scrim { display: block; }

    .app > .main,
    .app > main,
    .app > .main-content,
    .app > .content,
    .ghp-app > .main,
    .ghp-app > main,
    .ghp-app > .main-content,
    .ghp-app > .content,
    .premium-main,
    .premium-watch-main {
        min-width: 0 !important;
        max-width: 100% !important;
        padding-right: 14px !important;
        padding-bottom: calc(var(--mobile-dock-height) + 28px + env(safe-area-inset-bottom)) !important;
        padding-left: 14px !important;
        overflow-x: hidden !important;
    }

    .home-discovery-page { padding-right: 0 !important; padding-left: 0 !important; }
    .discovery-home-content { padding-right: 14px !important; padding-left: 14px !important; }

    main :where(h1) { overflow-wrap: anywhere; font-size: clamp(1.65rem, 7vw, 2.25rem) !important; line-height: 1.12; }
    main :where(h2) { overflow-wrap: anywhere; font-size: clamp(1.15rem, 5vw, 1.55rem); }
    main :where(p, li, dd, small) { overflow-wrap: anywhere; }

    main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        width: 100%;
        max-width: 100%;
        min-height: 46px;
        box-sizing: border-box;
        font-size: 16px !important;
    }

    main :where(button, .btn, [class*="-btn"], [role="button"]) { min-height: 44px; }

    :where(.hero, .ops-hero, .security-hero, .safety-hero, .creator-premium-hero,
        .premium-admin__hero, .media-hero, .discovery-hero, .admin-dashboard-hero) {
        align-items: flex-start !important;
        grid-template-columns: minmax(0, 1fr) !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 20px !important;
        border-radius: 20px !important;
    }

    :where(.admin-management-grid, .admin-directory-grid, .security-grid,
        .ops-grid, .ops-metrics, .media-grid, .media-metrics, .safety-grid,
        .publishing-edit-grid, .publishing-review-grid, .creator-premium-grid,
        .premium-subscription-grid, .settlement-grid, .wallet-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :where(.admin-directory, .admin-panel-card, .ops-panel, .security-panel,
        .media-panel, .safety-panel, .publishing-panel, .premium-panel) {
        min-width: 0;
        padding: 16px !important;
        border-radius: 18px !important;
    }

    :where(.admin-directory-heading, .admin-panel-head, .ops-panel-head,
        .security-panel-head, .media-panel-head, .safety-panel-head,
        .publishing-calendar-nav, .premium-section-heading) {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    :where(.admin-filter-bar, .ops-filters, .media-filters, .publishing-filter,
        .security-form-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :where(.admin-filter-bar, .ops-filters, .media-filters) > * { width: 100% !important; }

    :where(.admin-table-wrap, .ops-table-wrap, .media-table-wrap,
        .publishing-table-wrap, .premium-discovery-table-wrap,
        .discovery-table-wrap, .ghp-mobile-table-scroll) {
        margin-right: -4px;
        padding-bottom: 6px;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    :where(.admin-table, .ops-table, .media-table, .publishing-table) { min-width: 680px; }

    :where(.ops-nav, .safety-nav, .media-nav, .security-tabs,
        .creator-premium-nav, .premium-tabs, .category-bar, .discovery-chips) {
        display: flex !important;
        max-width: 100%;
        padding-bottom: 5px;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    :where(.ops-nav, .safety-nav, .media-nav, .security-tabs,
        .creator-premium-nav, .premium-tabs, .category-bar, .discovery-chips) > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .admin-control-board { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .admin-control-card { min-height: 138px; padding: 15px; border-radius: 19px; }
    .admin-control-card i { width: 42px; height: 42px; border-radius: 14px; }
    .admin-control-card strong { margin-top: 13px; }
    .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .admin-stat-card { min-height: 110px; padding: 14px; border-radius: 18px; }
    .admin-directory-count { align-self: flex-start; }

    .ghp-mobile-dock {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 11950;
        height: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: start;
        padding: 7px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
        border-top: 1px solid rgba(255, 45, 85, .27);
        background: rgba(10, 9, 15, .96);
        box-shadow: 0 -14px 38px rgba(0, 0, 0, .58);
        backdrop-filter: blur(20px);
    }

    .ghp-mobile-dock > a,
    .ghp-mobile-dock > button {
        position: relative;
        min-width: 0;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        padding: 0 3px;
        border: 0;
        border-radius: 13px;
        color: #aeb1be;
        background: transparent;
        text-decoration: none;
        font: inherit;
        cursor: pointer;
    }

    .ghp-mobile-dock i { font-size: 17px; }
    .ghp-mobile-dock span { overflow: hidden; width: 100%; font-size: 10px; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
    .ghp-mobile-dock > .is-active { color: #fff; background: rgba(255, 45, 85, .12); }
    .ghp-mobile-dock__primary i,
    .ghp-mobile-dock__primary img {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        margin-top: -18px;
        border: 3px solid #0b0a10;
        border-radius: 50%;
        color: #fff;
        background: #151012;
        box-shadow: 0 9px 24px rgba(255, 45, 85, .38);
        object-fit: contain;
    }

    .ghp-pwa-install-card,
    .ghp-pwa-status {
        right: 10px;
        bottom: calc(var(--mobile-dock-height) + 12px + env(safe-area-inset-bottom));
        max-width: calc(100vw - 20px);
    }

    .premium-topbar {
        padding-top: calc(10px + env(safe-area-inset-top)) !important;
    }
    .premium-sidebar { padding-top: env(safe-area-inset-top); padding-bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom)); }
    .premium-sidebar-overlay { bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
    :root { --mobile-dock-height: 64px; }

    .ghp-mobile-search-btn { display: none !important; }

    .app > .main,
    .app > main,
    .app > .main-content,
    .app > .content,
    .ghp-app > .main,
    .ghp-app > main,
    .premium-main,
    .premium-watch-main {
        padding-right: 11px !important;
        padding-left: 11px !important;
    }

    .discovery-home-content { padding-right: 11px !important; padding-left: 11px !important; }

    .admin-control-board,
    .admin-stat-grid,
    .admin-directory-links,
    .publishing-metrics,
    .discovery-metrics { grid-template-columns: minmax(0, 1fr) !important; }

    .admin-control-card { min-height: 122px; }

    .account-popup,
    .ghp-notification-dropdown {
        position: fixed !important;
        right: 8px !important;
        bottom: calc(var(--mobile-dock-height) + 9px + env(safe-area-inset-bottom)) !important;
        left: 8px !important;
        top: auto !important;
        width: auto !important;
        max-height: min(72dvh, 620px);
        overflow-y: auto !important;
        border-radius: 20px !important;
    }

    .ghp-pwa-install-card {
        grid-template-columns: 40px minmax(0, 1fr);
    }
    .ghp-pwa-install-actions { grid-column: 1 / -1; }
    .ghp-pwa-install-actions button { flex: 1; }
}

@media (display-mode: standalone) {
    body::before {
        content: "";
        position: fixed;
        z-index: 13000;
        inset: 0 0 auto;
        height: env(safe-area-inset-top);
        pointer-events: none;
        background: #5b0015;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}