/* ==========================================================================
   MOBILE & TABLET RESPONSIVENESS
   ========================================================================== */
@media (max-width: 900px) {
    .app-container { flex-direction: column; }
    
    /* Show Mobile Header */
    .mobile-header { display: flex; }
    
    /* Convert Sidebar to Slide-Out Overlay */
    .glass-sidebar {
        position: fixed;
        top: 0;
        left: -100%; /* Hidden by default */
        width: 280px;
        height: 100vh;
        z-index: 1001;
        transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        background: rgba(10, 15, 29, 0.95);
        border-right: 1px solid var(--glass-border);
    }
    
    .glass-sidebar.active { left: 0; }
    
    /* Dark Overlay for background when menu is open */
    .menu-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: rgba(0,0,0,0.5); z-index: 1000; display: none; opacity: 0;
        transition: opacity 0.3s ease;
    }
    .menu-overlay.active { display: block; opacity: 1; }

    /* Adjust Main Content to account for mobile header */
    .main-content {
        padding: 6rem 1.5rem 120px 1.5rem; /* Space for top header and bottom audio player */
    }

    h1 { font-size: 2.2rem; }
    
    /* Mobile Audio Player Fixes */
    .premium-player {
        bottom: 10px !important; width: 92% !important; padding: 0.5rem 1rem !important;
    }
    .compact-wrapper { gap: 10px !important; }
    .compact-meta h4 { max-width: 100px; font-size: 0.8rem; }
    .compact-play { width: 30px !important; height: 30px !important; }
    .player-actions-right { display: none; } /* Hide volume/fullscreen on mini mobile view to save space */
    .compact-progress { display: none; } /* Hide progress bar on mini mobile view */
    
    /* Make sure Fullscreen player still looks good on mobile */
    .premium-player.fullscreen .player-actions-right { display: flex; flex-direction: column; }
    .premium-player.fullscreen .compact-progress { display: flex; width: 100%; margin-top: 2rem !important; }
    .premium-player.fullscreen .player-avatar-img { width: 250px !important; height: 250px !important; }
}