/* ╔══════════════════════════════════════════╗
   ║  Desktop layout (>= 768px)              ║
   ║  Single column + playlist overlay       ║
   ╚══════════════════════════════════════════╝ */

#app-screen {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 1fr auto auto auto auto;
  height: 100dvh;
}

#top-bar           { grid-row: 1; }
#now-bar           { grid-row: 2; }
#visualizer-wrap   { grid-row: 3; }
#chat-container    { grid-row: 4; }
#input-area        { grid-row: 5; }
#queue-preview     { grid-row: 6; }
#progress-bar-area { grid-row: 7; }
#player-controls   { grid-row: 8; }

/* ── Playlist overlay ── */
#playlist-panel {
  width: 300px;
}

/* ── Backdrop for playlist ── */
#playlist-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 149;
}

#playlist-backdrop.show {
  display: block;
}

/* ── Sizing tweaks ── */
#chat-input { font-size: 14px; }
.chat-msg { max-width: 65%; }

@media (min-width: 1400px) {
  #playlist-panel { width: 340px; }
}