/* =========================
   BB RESPONSIVE LAYOUT
   Projects v2 and Forum page responsive styles
   BUILD: 2026-01-22-v4
   ========================= */

/* Verify CSS loaded */
body::after {
    content: "bb-responsive-loaded";
    display: none;
}

/* Desktop defaults */
.bb-shell {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
    height: calc(var(--app-vh, 1vh) * 100 - 120px);
    min-height: 0;
}

/* When inside projects v2 content area, shell fills remaining space (no page scroll) */
.projects-v2-content-wrap .bb-shell {
    height: 100%;
    min-height: 0;
}

.bb-attempts {
    width: 200px;
    min-width: 180px;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-right: 10px;
}

.bb-editor {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bb-detail {
    flex: 1;
    min-width: 0;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bb-detail-main {
    display: flex;
    flex: 1;
    min-height: 0;
}

.bb-iframe-wrapper {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#projects-v2-empty-state {
    flex: 1;
    min-height: 0;
}

/* Mobile breakpoint */
@media (max-width: 900px) {
    /* Hide video list panel on mobile - gallery click goes straight to video focus */
    .bb-attempts,
    #routed-page .bb-attempts,
    div.bb-attempts {
        display: none !important;
    }
    
    /* Ensure no horizontal overflow on mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        /* Allow vertical scroll to trigger iOS Safari UI auto-hide */
        overflow-y: auto !important;
        min-height: 100vh !important;
    }
    
    /* Add padding to make body scrollable for iOS Safari UI auto-hide */
    body {
        padding-bottom: 1px !important;
    }
    
    #routed-page {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Projects v2 mobile: maximise screen - no padding, stretch to fill, view switcher always on top */
    .routed-page:has(#projects-v2-page) {
        padding: 0 !important;
    }
    .main-content:has(#projects-v2-page) {
        padding: 0 !important;
    }
    #projects-v2-page {
        padding: 0 !important;
        height: 100% !important;
        min-height: 100vh !important;
        max-width: 100vw !important;
    }
    #projects-v2-view-switch-panel {
        position: fixed !important;
        top: 80px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 25 !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
        padding: 8px 10px !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }
    #projects-v2-content-wrap {
        flex: 1 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    #projects-v2-gallery-container {
        flex: 1 !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        padding: 56px 10px 0 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    #projects-v2-video-view-container {
        flex: 1 !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Mobile video view: same width as switch panel, no gaps, header flush with switch panel */
    /* Video header: left/right indent so title isn't flush at 0px */
    .bb-detail > div:first-child {
        margin-bottom: 0 !important;
        padding: 8px 10px !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .bb-detail-main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    #projects-v2-iframe-container.bb-iframe-wrapper,
    .bb-detail .bb-iframe-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Mobile: single video view - no focus switching */
    .bb-shell {
        position: relative !important;
        flex-direction: column !important;
        height: calc(var(--app-vh, 1vh) * 100 - 120px) !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    
    /* Edit panel - fixed positioning on mobile (off-screen; opened by Dash when Edit clicked) */
    .bb-editor {
        width: 100% !important;
        height: calc(var(--app-vh, 1vh) * 100 - 120px) !important;
        min-height: calc(var(--app-vh, 1vh) * 100 - 120px) !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        position: fixed !important;
        top: 120px !important;
        left: 0 !important;
        transition: transform 0.3s ease !important;
        transform: translateY(calc(var(--app-vh, 1vh) * 100 - 120px)) !important; /* Off-screen by default */
        background-color: #1C1C1C !important;
        overflow-y: auto !important;
        z-index: 15 !important; /* Above video panel */
        padding: 15px !important;
    }
    
    /* Hide editor when Dash sets width: 0 */
    .bb-editor[style*="width: 0"],
    .bb-editor[style*="width:0"] {
        display: none !important;
    }
    
    /* Video content area - always visible; same horizontal inset (10px) as switch panel for alignment
       top = 80px (header) + 56px (switch panel height) = 136px */
    .bb-detail {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        height: calc(var(--app-vh, 1vh) * 100 - 136px) !important;
        min-height: calc(var(--app-vh, 1vh) * 100 - 136px) !important;
        flex-shrink: 0 !important;
        position: fixed !important;
        top: 136px !important;
        transform: translateY(0) !important;
        box-sizing: border-box !important;
    }
    
    /* Fullscreen from iframe: disable background layer scrolling */
    html.bb-mobile-focus-fullscreen,
    body.bb-mobile-focus-fullscreen {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        height: 100% !important;
    }
    body.bb-mobile-focus-fullscreen #routed-page,
    body.bb-mobile-focus-fullscreen .main-content,
    body.bb-mobile-focus-fullscreen .app-shell {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }
    body.bb-mobile-focus-fullscreen .bb-detail,
    body.bb-mobile-focus-fullscreen #routed-page .bb-detail,
    body.bb-mobile-focus-fullscreen div.bb-detail {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        transform: none !important;
        z-index: 1001 !important;
    }
    
    .bb-detail-main {
        flex-direction: column !important;
        gap: 0 !important;
        flex: 1 !important;
        min-height: 0 !important;
        display: flex !important;
    }
    
    .bb-iframe-wrapper {
        flex: 1 !important;
        width: 100% !important;
        min-height: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
    }
    
    /* Hide the entire timeline container on mobile - timeline is integrated in iframe */
    #projects-v2-timeline-container {
        display: none !important;
    }
    
    /* Hide video header in fullscreen mode */
    body.bb-mobile-focus-fullscreen #projects-v2-video-header {
        display: none !important;
    }
    
    /* Hide main header in fullscreen mode */
    body.bb-mobile-focus-fullscreen #page-title-header {
        display: none !important;
    }
    
    /* Hide burger menu in fullscreen */
    body.bb-mobile-focus-fullscreen #test-sidebar-indicator,
    body.bb-mobile-focus-fullscreen div#test-sidebar-indicator {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    #projects-v2-empty-state {
        min-height: 200px;
    }

    /* =========================
       FORUM PAGE MOBILE LAYOUT
       Simple vertical stack - categories at top, feed below
       ========================= */

    /* Forum shell becomes vertical stack */
    .forum-shell {
        flex-direction: column !important;
        height: auto !important;
        min-height: calc(var(--app-vh, 1vh) * 100 - 120px) !important;
        overflow-y: auto !important;
    }

    /* Categories sidebar at top */
    .forum-sidebar {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        border-right: none !important;
        border-bottom: 1px solid #1a1a2e !important;
        position: relative !important;
    }

    /* Feed below categories */
    .forum-main-content {
        width: 100% !important;
        height: auto !important;
        flex: 1 !important;
    }

    .forum-feed {
        height: auto !important;
        overflow-y: visible !important;
    }

    /* Active category styling */
    .forum-category-item.active {
        background-color: #795EB6 !important;
        border-color: #795EB6 !important;
    }

    .forum-category-item:hover {
        background-color: #2a2a3e !important;
    }

    .forum-category-item.active:hover {
        background-color: #8a6ec6 !important;
    }
}