/* ─── Mobile Player Takeover ─── */
/* When the mobile player is active, the app-shell becomes a single full-screen
   area with no BottomNav or PlayerBar — just the main content. */
.app-shell[data-mobile-player] {
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "main";
}

.app-shell[data-mobile-player] .content-header {
  display: none;
}

.app-shell[data-mobile-player] .content-body {
  padding: 0 !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE PLAYER VIEW  (MobilePlayerView.tsx)
   ═══════════════════════════════════════════════════════════════════════════ */

.mp-view {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background: var(--bg-app); /* fallback; overridden by dynamic gradient via inline style */
  overflow: hidden !important;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding: 0 20px env(safe-area-inset-bottom, 0);
  box-sizing: border-box;
  transition: background 0.8s ease;
  z-index: 10;
}

.mp-view::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Tauri/WebKitGTK */
}

