/* ============================================================
   GospelKingz - Mobile Responsive Styles
   Breakpoints: 992px (tablet), 768px (phone), 480px (small phone)
   ============================================================ */

/* Sidebar overlay backdrop */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9998;
    backdrop-filter: blur(2px);
}
body.sidebar-open #sidebar-overlay { display: block; }

.mobile-menu-btn { display: none; }

/* Tablet + Mobile (<=992px) */
@media (max-width: 992px) {
    .mobile-menu-btn { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 22px; }
    .ms_sidemenu_wrapper { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; left: -280px !important; bottom: 0 !important; width: 280px !important; height: 100vh !important; background: var(--surface) !important; z-index: 100000 !important; transition: left 0.3s ease !important; transform: none !important; overflow-y: auto !important; box-shadow: 4px 0 40px rgba(0,0,0,0.7); padding: 0 !important; }
    body.sidebar-open .ms_sidemenu_wrapper { left: 0 !important; }
    .ms_sidemenu_inner { flex: 1 !important; overflow-y: auto !important; padding-top: 10px !important; padding-bottom: 50px !important; }
    .ms_nav_close { display: flex !important; align-items: center; justify-content: flex-end; padding: 16px 16px 0; font-size: 26px; color: var(--text); cursor: pointer; }
    .playcloud-sidebar, .global-right-sidebar-wrapper { display: none !important; }
    .ms_content_wrapper { width: 100% !important; margin-left: 0 !important; min-width: 0 !important; }
    .ms_header { padding: 0 16px !important; height: 64px !important; }
    .ms_header nav, .desktop-back-btn { display: none !important; }
    .page-content { padding: 16px !important; padding-bottom: 100px !important; }
    .app-container, .ms_main_wrapper { overflow-x: hidden !important; max-width: 100vw !important; }
    .chat-container { height: calc(100vh - 140px) !important; max-height: none !important; border-radius: 12px !important; }
    .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-cols-2 { grid-template-columns: 1fr !important; }
    .artist-hero-inner { flex-direction: column !important; text-align: center !important; gap: 16px !important; }
    .stat-bar { flex-wrap: wrap; gap: 12px; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    h1 { font-size: clamp(22px, 6vw, 40px) !important; }
    h2 { font-size: clamp(18px, 5vw, 32px) !important; }
    .ms_player_wrapper { padding: 0 12px !important; }
    .ms_bottom_player { display: flex !important; }
    #songs-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; width: 100% !important; box-sizing: border-box !important; }
}

/* Phone (<=768px) */
@media (max-width: 768px) {
    .ms_header { display: none !important; }
    .ms_main_wrapper { padding-bottom: 0 !important; }
    /* Removed: overflow-y: auto here creates a nested scroll trap that clips sidebar content on mobile */
    /* .ms_content_wrapper { overflow-y: auto !important; } */
    .mobile-theme-toggle { display: flex !important; }
    .chat-container { height: calc(100vh - 140px) !important; max-height: none !important; border-radius: 12px !important; }
    .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-cols-2 { grid-template-columns: 1fr !important; }
    .artist-hero-inner { flex-direction: column !important; text-align: center !important; gap: 16px !important; }
    .stat-bar { flex-wrap: wrap; gap: 12px; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    h1 { font-size: clamp(22px, 6vw, 40px) !important; }
    h2 { font-size: clamp(18px, 5vw, 32px) !important; }
    .ms_player_wrapper { padding: 0 12px !important; }
    .ms_bottom_player { display: flex !important; }
    #songs-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; width: 100% !important; box-sizing: border-box !important; }
}

/* Small phone (<=480px) */
@media (max-width: 480px) {
    .page-content { padding: 12px !important; padding-bottom: 110px !important; }
    .ms_header { height: 56px !important; }
    .grid-cols-3, .grid-cols-4, .grid-cols-2 { grid-template-columns: 1fr !important; }
    #songs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .btn-group-mobile { flex-direction: column; }
    .btn-group-mobile .btn { width: 100%; justify-content: center; }
    .message-bubble { max-width: 88% !important; }
}