/* Mobile-specific styles */
@media (max-width: 640px) {
    /* Force mobile layout */
    .player-bar {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        padding: 0.25rem !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1001 !important;
    }

    .main-content {
        height: calc(100vh - 120px) !important;
        margin-top: 70px !important;
        padding-bottom: 60px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .sidebar {
        height: auto !important;
        max-height: 25vh !important;
        min-height: auto !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        overflow-y: auto !important;
    }

    .content-area {
        flex: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        order: 2 !important;
    }

    .header {
        height: 60px !important;
        padding: 0.5rem !important;
    }

    /* Force playlist visibility */
    #playlists-section {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 300px !important;
    }

    .playlists-grid {
        display: grid !important;
        visibility: visible !important;
        min-height: 200px !important;
    }

    /* Mobile video player optimizations */
    .video-player {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
    }

    .video-player.active {
        display: block !important;
    }

    .video-container {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
    }

    .video-container iframe {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        background: #000 !important;
    }

    /* Mobile video controls */
    .video-control-panel-mini {
        position: absolute !important;
        bottom: 20px !important;
        left: 20px !important;
        right: 20px !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border-radius: 8px !important;
        padding: 10px !important;
    }
}