/* ╔══════════════════════════════════════════╗
   ║  Mobile layout (< 768px)                ║
   ║  Single column, playlist bottom sheet    ║
   ╚══════════════════════════════════════════╝ */

/* ── Touch targets ── */
.ctrl-btn {
  width: 52px;
  height: 52px;
  font-size: 20px;
}

#btn-play {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

#now-bar         { padding: 14px 16px; }
#chat-container  { padding: 12px 16px; }
#input-area      { padding: 10px 16px; }

#chat-input { font-size: 16px; }

/* ── Top bar ── */
#top-bar {
  padding: 6px 12px;
  font-size: 9px;
}

#top-bar .top-brand {
  font-size: 10px;
}

/* ── Playlist: bottom sheet + backdrop ── */
#playlist-panel {
  width: 100%;
  right: 0;
  max-height: 55vh;
  top: auto;
  transform: translateY(100%);
  border-left: none;
  border-top: 1px solid var(--border-active);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
}

#playlist-panel.open { transform: translateY(0); }
#playlist-backdrop.show { display: block; }

/* ── Progress + controls ── */
#progress-bar-area {
  padding: 8px 12px 6px;
}

#progress-wrap { max-width: 100%; }
#status-subline { display: none; }

#player-controls {
  padding: 10px 12px 18px;
  gap: 22px;
}

/* ── Login ── */
.login-card { padding: 28px 20px; }
.login-card h1 { font-size: 24px; letter-spacing: 0.15em; }

/* ── Visualizer ── */
#visualizer-wrap { padding: 4px 12px; }
#visualizer { height: 36px; }