/* ===== MOBILE CSS COMPLET ===== */
@layer components {
  @media (max-width: 600px) {
    /* --- FORCER L'AFFICHAGE DES ÉLÉMENTS --- */
    .pixel-action-btn#open-history-btn,
    .pixel-action-btn#open-timer-btn,
    .pixel-action-btn#open-podcasts-btn {
      display: flex !important;
      visibility: visible !important;
    }


    /* --- BOTTOM BAR BUTTONS --- */
.bottom-menu {
  gap: 4px !important;
  padding: 4px 6px !important;
}

.bottom-menu .menu-btn {
  font-size: 8px !important;
  padding: 2px 5px !important;
  height: auto !important;
  line-height: 1.4 !important;
}


    /* --- RÉORGANISATION PRINCIPALE --- */
    #system-bar {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: flex-start !important;
      padding: 5px 5px !important;
      gap: 8px !important;
      height: auto !important;
    }

    /* --- MASQUER LOGO --- */
    #system-right {
      display: none !important;
    }

    /* --- PLAYER PLEINE LARGEUR --- */
    #system-left {
      width: 100% !important;
      flex: 0 0 100% !important;
      order: 1 !important;
      padding: 0 !important;
      margin: 0 !important;
      margin-bottom: 5px !important;
    }

    .player-wrapper {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    #radio-player {
  
     
      padding: 10px !important;
      width: 100% !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 8px !important;
    }

    .info-box {
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 9px !important;
}

.track-info {
  min-width: 0 !important;
  flex: 1 !important;
}

.track-info-line {
  min-width: 0 !important;
  width: 100% !important;
}

  /* --- SORTIR LES BOUTONS DE SYSTEM-RIGHT --- */
#system-right {
  display: contents !important;
}

.zz-logo-simple {
  display: none !important;
}

/* ============================================================
   BOUTONS SOUS LE PLAYER (mobile) — BLOC UNIQUE / CONSOLIDÉ
   copy / like / timer / account : même taille, sans bordure
   (héritent de la bordure/rayon définis dans le CSS de base)
   ============================================================ */

/* --- BOUTONS CARRÉS : copy / like / timer / account --- */
#player-copy-btn,
#like-current-btn,
#open-timer-btn,
#open-account-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  box-sizing: border-box !important;
  height: 40px !important;
  width: 40px !important;
  flex: 0 0 40px !important;
  background: var(--da-panel) !important;
  border: 2px solid var(--da-line) !important;
  box-shadow:
    inset 1px 1px 0 var(--da-hi),
    inset -1px -1px 0 var(--da-lo) !important;
}

#player-copy-btn img,
#like-current-btn img,
#open-timer-btn img {
  width: 16px !important;
  height: 16px !important;
}

/* --- BOUTON PODCASTS : prend l'espace restant --- */
#open-podcasts-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  box-sizing: border-box !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 12px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* --- ORDRE : copy, like, timer, account, podcasts --- */
#player-copy-btn   { order: 2 !important; }
#like-current-btn  { order: 3 !important; }
#open-timer-btn    { order: 4 !important; }
#open-account-btn  { order: 5 !important; }
#open-podcasts-btn { order: 6 !important; }

#account-status-dot {
  width: 10px !important;
  height: 10px !important;
}
/* S'assurer que system-bar wrappe bien sur 2 lignes */
#system-bar {
  flex-wrap: wrap !important;
  justify-content: center !important;
  padding: 20px 10px !important;
}

/* Le player prend toute la première ligne */
#system-left {
  flex: 0 0 100% !important;
  order: 1 !important;
}

    /* --- INFO SCREEN MASQUÉ --- */
    #system-center {
      display: none !important;
    }

    #info-marquee {
      display: none !important;
    }

    /* --- POPUPS --- */
    .popup {
      position: fixed !important;
      top: 55% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: 90vw !important;
      max-height: 80vh !important;
      overflow-y: auto !important;
      z-index: 99999 !important;
    }

    #propose-window {
  max-height: 60vh !important;
  height: 60vh !important;
}

#propose-window {
  height: auto !important;
  max-height: 60vh !important;
  top: 55% !important;
}

#propose-window .popup-content {
  height: auto !important;
  max-height: calc(60vh - 40px) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

#propose-container {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

#propose-list {
  overflow-y: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}

#account-window {
  height: auto !important;
  max-height: 70vh !important;
  overflow: hidden !important;
}

#account-window .popup-content {
  overflow: hidden !important;
  max-height: calc(70vh - 40px) !important;
}

/* --- POPUP ACCOUNT : -30% hauteur, légèrement moins large --- */
#account-window {
  width: 82vw !important;
  max-height: 49vh !important; /* 70vh de base - 30% = 49vh */
}

/* --- POPUP HISTORY : -30% hauteur, légèrement moins large --- */
#history-window {
  width: 82vw !important;
  max-height: 56vh !important; /* 80vh de base (taille générique .popup) - 30% = 56vh */
}


/* --- PODCAST MOBILE --- */

#title-container,
#artist-container {
  max-width: calc(100vw - 220px) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  flex: 1 !important;
}

#title-text,
#artist-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 100% !important;
}

.track-info-line {
  display: flex !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

.info-box {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
#title-text,
#artist-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
}




#podcast-sidebar {
  transform: none !important;
  transition: none !important;
  flex-direction: column !important;
  right: -100% !important;

  height: 100% !important;
  width: 100% !important;
  
}

body.podcast-mode-active #podcast-sidebar {
  right: 0 !important;
  transform: none !important;
}

#podcast-sidebar-left {
  display: none !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;

  left: 0 !important;
  z-index: 10 !important;
   padding-top: 0 !important;
  opacity: 1 !important;
  padding-top: 0 !important;
  background: rgba(0, 0, 0, 0.15) !important; /* transparent au lieu de var(--ui-base-0) */
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
}

body.podcast-episode-selected #podcast-sidebar-left {
  display: flex !important;
  height: 100vh !important;
}

#podcast-back-btn {
  display: none !important;
}

body.podcast-episode-selected #podcast-sidebar-left {
  display: flex !important;
}

body.podcast-episode-selected #podcast-sidebar-right {
  display: none !important;
}

#podcast-sidebar-right {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: unset !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-top: 0 !important;
}

#podcast-sidebar-right .sidebar-tools {
  margin-top: 12px !important;
}

#podcast-explorer-content {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  padding-bottom: 60px !important;
}

#podcast-mobile-back {
  display: none !important;
  margin: 8px !important;
}

body.podcast-episode-selected #podcast-mobile-back {
  display: block !important;
}


#sidebar-player {
  padding: 12px 16px !important;
  margin: 0 12px !important;
  box-sizing: border-box !important;
}



#podcast-left-detail *,
#podcast-left-description,
#sidebar-player *,
#sp-title,
#sp-time {
  color: white !important;
}

#podcast-tags-available {
  display: none !important;
}

/* --- SIDEBAR PLAYER MOBILE --- */
#sidebar-player {
  padding: 12px !important;
  margin: 0 12px !important;
  box-sizing: border-box !important;
  width: calc(100% - 24px) !important;
}

#sidebar-player .sp-main-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

#sidebar-player .retro-btn-play {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 10px !important;
}

#sidebar-player .retro-btn-play img {
  width: 16px !important;
  height: 16px !important;
}

.sp-cover {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
}

#sidebar-player .sp-info {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#sidebar-player .sp-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#podcast-mobile-back {
  display: none !important;
}

body.podcast-episode-selected #podcast-mobile-back {
  display: none !important;
}

#podcast-mobile-folder-back {
  visibility: visible !important;
}

/* --- PLANNING MOBILE (SCROLL HORIZONTAL, 1 jour à la fois) --- */

/* Popup planning : plus étroite et décalée vers le bas */
#planning-window {
  width: 74vw !important;   /* 92vw - 20% ≈ 74vw */
  max-height: 64vh !important; /* 80vh de base - 20% = 64vh */
  top: 58% !important;
}

#planning-window .popup-content {
  padding: 0 !important;
  overflow: hidden !important;
}

#planning-window .blue-bar {
  flex-shrink: 0 !important;
}

#planning-window .popup-content {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

/* Le scroll horizontal se fait sur #planning-wrapper lui-même :
   header et grid sont tous les deux élargis à 700vw, donc ils
   dépassent leur conteneur et déclenchent le scroll-x avec effet aimant */
#planning-wrapper {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Header et grid doivent avoir la même largeur totale pour rester synchronisés */
#pz-header {
  width: calc(32px + 700vw) !important;
  grid-template-columns: 32px repeat(7, 100vw) !important;
  flex-shrink: 0 !important;
}

#pz-scroll {
  overflow-x: visible !important;
  width: calc(32px + 700vw) !important;
  flex-shrink: 0 !important;
}

#pz-grid {
  width: calc(32px + 700vw) !important;
}

/* Chaque jour fait 100vw, c'est lui qui sert de point d'aimantation */
.pz-day-head {
  width: 100vw !important;
  scroll-snap-align: start;
  font-size: 14px !important;
}

/* Heures + labels figés à gauche pendant le scroll horizontal */
.pz-hour-label {
  position: sticky !important;
  left: 0 !important;
  z-index: 2 !important;
  background: var(--ui-base-1) !important;
}

#pz-header .pz-spacer {
  position: sticky !important;
  left: 0 !important;
  z-index: 3 !important;
  background: var(--ui-base-1) !important;
}

/* Slots un peu plus lisibles en plein écran */
.pz-slot-name {
  font-size: 13px !important;
}
.pz-slot-time {
  font-size: 10px !important;
}

    #master-menu-popup,
#appearance-popup {
  z-index: 999999 !important;
}

    /* --- AUTRES MASQUAGES --- */
    #open-namibie-btn,
    #open-visualizers-btn,
    #toggle-info-btn,
    #draw-mode-btn,
    #open-legacy-btn {
      display: none !important;
    }
  }
}