/* =========================
   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;
}

.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) {
    /* 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;
    }
    
    /* Mobile vertical scroll-snap layout */
    .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;
        scroll-snap-type: y mandatory !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Mobile focus state control */
    body.bb-mobile-focus-selection .bb-shell {
        overflow-y: hidden !important;
    }
    
    body.bb-mobile-focus-video .bb-shell {
        overflow-y: hidden !important;
    }
    
    /* Selection panel - snap to top */
    .bb-attempts {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: calc(var(--app-vh, 1vh) * 100 - 120px) !important;
        max-height: calc(var(--app-vh, 1vh) * 100 - 120px) !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        scroll-snap-align: start !important;
        flex-shrink: 0 !important;
        transition: transform 0.3s ease !important;
        position: fixed !important;
        top: 120px !important;
        left: 0 !important;
        transform: translateY(0) !important;
        z-index: 10 !important;
    }
    
    /* When video is focused, move selection panel up (off-screen) */
    body.bb-mobile-focus-video .bb-attempts,
    body.bb-mobile-focus-video #routed-page .bb-attempts,
    body.bb-mobile-focus-video div.bb-attempts {
        transform: translateY(calc(-1 * (var(--app-vh, 1vh) * 100 - 120px))) !important;
    }
    
    /* When fullscreen is focused, move selection panel further up */
    body.bb-mobile-focus-fullscreen .bb-attempts,
    body.bb-mobile-focus-fullscreen #routed-page .bb-attempts,
    body.bb-mobile-focus-fullscreen div.bb-attempts {
        transform: translateY(calc(-2 * (var(--app-vh, 1vh) * 100 - 120px))) !important;
    }
    
    /* When selection is focused, keep it at top */
    body.bb-mobile-focus-selection .bb-attempts,
    body.bb-mobile-focus-selection #routed-page .bb-attempts,
    body.bb-mobile-focus-selection div.bb-attempts {
        transform: translateY(0) !important;
    }
    
    /* Edit panel - fixed positioning on mobile */
    .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;
    }
    
    /* Show editor when focused */
    body.bb-mobile-focus-editor .bb-editor,
    body.bb-mobile-focus-editor #routed-page .bb-editor,
    body.bb-mobile-focus-editor div.bb-editor {
        transform: translateY(0) !important;
    }
    
    /* Video content area - snap to bottom, fills screen */
    .bb-detail {
        width: 100% !important;
        height: calc(var(--app-vh, 1vh) * 100 - 120px) !important;
        min-height: calc(var(--app-vh, 1vh) * 100 - 120px) !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        transition: transform 0.3s ease !important;
        position: fixed !important;
        top: 120px !important;
        left: 0 !important;
        transform: translateY(calc(var(--app-vh, 1vh) * 100 - 120px)) !important;
    }
    
    /* When video is focused, move video up to visible area */
    body.bb-mobile-focus-video .bb-detail,
    body.bb-mobile-focus-video #routed-page .bb-detail,
    body.bb-mobile-focus-video div.bb-detail {
        transform: translateY(0) !important;
        top: 120px !important;
    }
    
    /* When fullscreen is focused, cover entire viewport including header */
    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; /* Fixed position so content doesn't scroll with page */
        top: 0 !important; /* Start at top of viewport */
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important; /* Full viewport height */
        transform: none !important; /* No transform needed with fixed position */
        z-index: 1001 !important; /* Above everything including header */
    }
    
    /* When selection is focused, move video down (off-screen) */
    body.bb-mobile-focus-selection .bb-detail,
    body.bb-mobile-focus-selection #routed-page .bb-detail,
    body.bb-mobile-focus-selection div.bb-detail {
        transform: translateY(calc(var(--app-vh, 1vh) * 100 - 120px)) !important;
        top: 120px !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;
    }
    
    /* Focus indicator for mobile */
    .bb-mobile-focus-indicator {
        position: fixed !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        gap: 8px !important;
        z-index: 1000 !important;
        pointer-events: none !important;
    }
    
    .bb-mobile-focus-indicator .dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.3) !important;
        transition: background-color 0.3s ease, transform 0.3s ease !important;
    }
    
    body.bb-mobile-focus-selection .bb-mobile-focus-indicator .dot:nth-child(1) {
        background-color: rgba(255, 255, 255, 0.9) !important;
        transform: scale(1.3) !important;
    }
    
    body.bb-mobile-focus-video .bb-mobile-focus-indicator .dot:nth-child(2) {
        background-color: rgba(255, 255, 255, 0.9) !important;
        transform: scale(1.3) !important;
    }
    
    body.bb-mobile-focus-fullscreen .bb-mobile-focus-indicator .dot:nth-child(3) {
        background-color: rgba(255, 255, 255, 0.9) !important;
        transform: scale(1.3) !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;
    }
}