/* ==========================================
   DESKTOP RESPONSIVE (768px+)
   All mobile styles untouched — this is purely additive.
   ========================================== */
@media (min-width: 768px) {
  /* --- Layout: center content, max-width --- */
  body {
    position: static;
    overflow: auto;
    height: auto;
  }
  html {
    overflow: auto;
    height: auto;
  }
  #app {
    position: static;
    max-width: 600px;
    margin: 0 auto;
    height: 100vh;
    border-left: 1px solid var(--divider);
    border-right: 1px solid var(--divider);
  }

  /* --- Tab bar: constrain to app width --- */
  .tab-bar {
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* --- Mini player: constrain --- */
  .mini-player {
    max-width: 576px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translate3d(0,0,0);
    width: calc(100% - 16px);
    background: var(--bg-elevated);
  }
  .mini-player.hidden {
    transform: translateX(-50%) translateY(100px);
  }

  /* --- Quickplay grid: 3 columns on desktop --- */
  .quickplay-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* --- Cards --- */
  .track-card {
    width: 150px;
  }

  /* --- Scrollbar visible on desktop --- */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  /* Show horizontal scrollbar on card-scroll sections */
  .card-scroll,
  .queue-suggestions-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
  }
  .card-scroll::-webkit-scrollbar,
  .queue-suggestions-scroll::-webkit-scrollbar {
    height: 4px;
    display: block;
  }

  /* --- Hover states (desktop only, no touch) --- */
  @media (hover: hover) {
    .track-item:hover {
      background: var(--bg-hover);
    }
    .quickplay-tile:hover {
      background: var(--bg-active);
    }
    .playlist-item:hover {
      background: var(--bg-hover);
    }
    .library-nav-item:hover {
      background: var(--bg-hover);
    }
    .settings-row-action:hover {
      background: var(--bg-hover);
    }
    .tab-bar-item:hover {
      color: var(--text-primary);
    }
    .mini-ctrl-btn:hover {
      background: var(--bg-hover);
    }
    .np-secondary-btn:hover {
      color: var(--text-secondary);
    }
    .np-main-btn:hover {
      transform: scale(1.05);
    }
    .np-play-btn:hover {
      transform: scale(1.05);
    }
    .mini-play-btn:hover {
      transform: scale(1.05);
    }
    .filter-pill:hover {
      background: var(--bg-active);
    }
    .context-menu-item:hover {
      background: var(--bg-hover);
    }
    .search-playlist-item:hover {
      background: var(--bg-hover);
    }
    .search-recent-track:hover {
      background: var(--bg-hover);
      border-radius: var(--radius-sm);
    }
    .recent-search-chip:hover {
      background: var(--bg-active);
    }
    .accent-dot:hover {
      transform: scale(1.2);
    }
    .admin-user-menu-btn:hover {
      background: var(--bg-hover);
    }
    .btn-secondary:hover {
      background: var(--bg-hover);
    }
    .smart-playlist-card:hover .smart-playlist-cover {
      transform: scale(1.03);
    }
    .queue-suggest-card:hover {
      background: var(--bg-hover);
    }
    .queue-suggest-add:hover {
      background: var(--bg-active);
      color: var(--accent);
    }
    .text-btn:hover {
      opacity: 0.8;
    }
    .btn-primary:hover {
      opacity: 0.9;
    }
    .track-more-btn:hover {
      color: var(--text-primary);
    }
    .genre-chip:hover {
      background: var(--bg-active);
    }
    .playlist-delete-btn:hover {
      color: var(--accent);
    }
    .pl-shuffle-btn:hover {
      transform: scale(1.05);
    }
    .np-close-btn:hover {
      opacity: 0.8;
    }
    /* Show remove button on desktop instead of swipe */
    .queue-remove-btn {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  /* --- Overlays: constrain to app width --- */
  .playlist-detail-overlay {
    max-width: 600px;
    left: 50%;
    right: auto;
    width: 100%;
    transform: translate(-50%, 0) translate3d(100%, 0, 0);
  }
  .playlist-detail-overlay.visible {
    transform: translate(-50%, 0) translate3d(0, 0, 0);
  }

  .fullscreen-overlay {
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* --- Now Playing: centered on desktop --- */
  .now-playing {
    max-width: 600px;
    left: 50%;
    right: auto;
    width: 100%;
    transform: translateX(-50%) translate3d(0, 100%, 0);
  }
  .now-playing.visible {
    transform: translateX(-50%) translate3d(0, 0, 0);
  }

  /* Better proportions inside NP on desktop */
  .np-content {
    padding: calc(var(--safe-top) + 20px) 36px calc(var(--safe-bottom) + 28px);
    max-width: 480px;
    margin: 0 auto;
  }
  .np-artwork {
    max-width: 400px;
  }
  .np-artwork-container {
    padding: 0;
  }

  /* --- Queue: constrain --- */
  .queue-overlay {
    max-width: 600px;
    left: 50%;
    right: auto;
    width: 100%;
    transform: translateX(-50%);
  }

  /* --- Context menu: centered, wider --- */
  .context-menu {
    max-width: 360px;
    left: 50% !important;
    transform: translateX(-50%);
  }

  /* --- About modal: same --- */
  .about-modal {
    max-width: 600px;
    margin: 0 auto;
  }

  /* --- Admin dialog: wider --- */
  .admin-dialog {
    max-width: 380px;
  }

  /* --- Gate screen: nicer on desktop --- */
  #gate-screen {
    max-width: 600px;
    margin: 0 auto;
    border-left: 1px solid var(--divider);
    border-right: 1px solid var(--divider);
  }

  /* --- Download progress bar: constrain --- */
  .dl-progress-bar {
    max-width: 560px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 32px);
  }

  /* --- Toast: constrain --- */
  .toast {
    max-width: 400px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(20px);
  }
  .toast.visible {
    transform: translateX(-50%) translateY(0);
  }

  /* --- Gesture hint: constrain --- */
  .gesture-hint-overlay {
    max-width: 600px;
    left: 50%;
    right: auto;
    width: 100%;
    transform: translateX(-50%);
  }
}

/* ==========================================
   LARGE DESKTOP (1024px+)
   Now Playing can breathe more on wide screens
   ========================================== */
@media (min-width: 1024px) {
  .now-playing {
    max-width: 700px;
  }
  .np-content {
    max-width: 540px;
  }
  .np-artwork {
    max-width: 440px;
  }
}