/* ═══════════════════════════════════════════════════════════════
   PLAYER GLOBAL — Le Tidiane v3
   ═══════════════════════════════════════════════════════════════ */

:root {
  --gp-mint:      #8EB69B;
  --gp-green:     #074c2a;
  --gp-green-mid: #235347;
  --gp-bg:        #0b1a12;
  --gp-border:    rgba(255,255,255,0.07);
  --gp-text:      #e8eaed;
  --gp-muted:     rgba(232,234,237,0.45);
  --gp-track-bg:  rgba(255,255,255,0.13);
}
body.light-mode {
  --gp-bg:       #ffffff;
  --gp-border:   #d0e8d8;
  --gp-text:     #1a2e25;
  --gp-muted:    rgba(26,46,37,0.45);
  --gp-track-bg: #c8e0d0;
  --gp-green:    #235347;
}

/* ── MINI LECTEUR — barre inférieure style QuranPro ─────────── */
#mini-player-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9997;
  background: rgba(11,26,18,0.97);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.45);
  border-radius: 16px 16px 0 0;
}
body.light-mode #mini-player-bar {
  background: rgba(244,246,243,0.97);
  border-top-color: rgba(0,0,0,0.08);
}

/* Barre de progression fine sur le bord supérieur */
.mini-progress-track {
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
body.light-mode .mini-progress-track { background: rgba(0,0,0,0.08); }

.mini-player-progress-fill {
  height: 100%;
  background: var(--gp-mint);
  border-radius: inherit;
  transition: width 0.5s linear;
  width: 0%;
}

.mini-player-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 14px;
  min-height: 64px;
}

/* Pochette miniature */
.mini-thumb {
  width: 42px; height: 42px;
  border-radius: 9px;
  background: var(--gp-green);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-size: 18px; color: rgba(142,182,155,0.6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Infos titre + artiste */
.mini-player-info {
  flex: 1; min-width: 0; cursor: pointer;
}
.mini-player-title {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--gp-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
body.light-mode .mini-player-title { color: var(--gp-text); }
.mini-player-artist {
  display: block;
  font-size: 11px;
  color: var(--gp-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}

/* Contrôles prev / play / next */
.mini-controls {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.mini-ctrl-btn {
  background: none; border: none; color: var(--gp-muted);
  cursor: pointer; padding: 6px;
  display: flex; align-items: center;
  border-radius: 50%; transition: color 0.2s, background 0.2s;
}
.mini-ctrl-btn:hover { color: var(--gp-text); background: rgba(255,255,255,0.07); }
body.light-mode .mini-ctrl-btn { color: rgba(26,46,37,0.5); }
body.light-mode .mini-ctrl-btn:hover { color: var(--gp-text); }

.mini-play-pause-btn {
  background: var(--gp-mint);
  border: none; color: #0b1a12;
  cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 2px 10px rgba(142,182,155,0.3);
}
.mini-play-pause-btn:hover { background: #a6ccb3; transform: scale(1.05); }
body.light-mode .mini-play-pause-btn { background: var(--gp-green-mid); color: white; }

/* Bouton fermer */
.mini-close-btn {
  background: none; border: none;
  color: var(--gp-muted); cursor: pointer;
  padding: 6px; display: flex; align-items: center;
  border-radius: 50%; flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
}
.mini-close-btn:hover { color: var(--gp-text); background: rgba(255,255,255,0.07); }

/* ── PLAYER BAR GLOBAL ──────────────────────────────────────── */
#global-player-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 9998;
  background: var(--gp-bg);
  border-top: 1px solid var(--gp-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.45);
}

/* ── Barre progression — tout en haut du player, avant le reste ── */
.global-progress-wrap {
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
  margin-top: -1px; /* colle au bord supérieur du player bar */
}
.gp-time {
  font-size: 10px; color: var(--gp-muted); flex-shrink: 0;
  min-width: 32px; font-variant-numeric: tabular-nums;
}

/* ── Sliders deux tons ── */
#gp-progress,
#gp-volume-slider,
#gp-zikr-volume {
  -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 3px; outline: none; cursor: pointer;
  background: linear-gradient(
    to right,
    var(--gp-mint) 0%, var(--gp-mint) var(--fill-pct, 0%),
    var(--gp-track-bg) var(--fill-pct, 0%), var(--gp-track-bg) 100%
  );
  transition: height .15s;
}
#gp-progress:hover, #gp-volume-slider:hover, #gp-zikr-volume:hover { height: 5px; }
#gp-progress::-webkit-slider-thumb,
#gp-volume-slider::-webkit-slider-thumb,
#gp-zikr-volume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gp-mint); border: 2px solid var(--gp-bg);
  cursor: pointer; transition: transform .15s;
}
#gp-progress::-webkit-slider-thumb:hover,
#gp-volume-slider::-webkit-slider-thumb:hover,
#gp-zikr-volume::-webkit-slider-thumb:hover { transform: scale(1.3); }
#gp-progress::-moz-range-thumb,
#gp-volume-slider::-moz-range-thumb,
#gp-zikr-volume::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gp-mint); border: 2px solid var(--gp-bg); cursor: pointer;
}
#gp-progress { flex: 1; }

/* ── Partie principale ── */
.global-player-main {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px;
}

/* Sur mobile : titre sur sa propre ligne, puis boutons en dessous */
@media (max-width: 520px) {
  .global-player-main {
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 10px 6px;
  }
  .gp-thumb { order: 0; }
  .gp-info  {
    order: 1;
    flex: 1 1 calc(100% - 52px); /* prend toute la largeur dispo à côté de la vignette */
    min-width: 0;
  }
  .gp-controls {
    order: 2;
    flex: 0 0 100%; /* pleine largeur, en dessous */
    justify-content: center;
    padding: 2px 0 0;
  }
}

/* Thumbnail */
.gp-thumb {
  width: 42px; height: 42px; border-radius: 9px;
  background: var(--gp-green);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0; font-size: 18px;
}
.gp-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Infos — titre pleine largeur, scroll CSS propre sens unique */
.gp-info {
  flex: 1; min-width: 0; cursor: pointer;
  overflow: hidden;
  /* masque de fondu sur les bords pour un rendu propre */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 88%, transparent 100%);
}
.gp-title {
  font-size: 13px; font-weight: 600; color: var(--gp-text);
  white-space: nowrap;
  display: inline-block;
  /* scroll CSS sens unique via animation — le JS override si besoin */
  will-change: transform;
}
.gp-artist {
  font-size: 11px; color: var(--gp-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Contrôles */
.gp-controls {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.gp-btn {
  background: none; border: none; color: var(--gp-text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  transition: background .2s; opacity: .8;
}
.gp-btn:hover { background: rgba(255,255,255,0.08); opacity: 1; }
body.light-mode .gp-btn:hover { background: rgba(35,83,71,0.08); }
.gp-play-main {
  background: var(--gp-green) !important; width: 38px !important; height: 38px !important;
  opacity: 1 !important; color: white !important;
}
.gp-play-main:hover { background: var(--gp-green-mid) !important; }

/* ── PANEL ÉTENDU ───────────────────────────────────────────── */
.gp-expanded-panel {
  border-top: 1px solid var(--gp-border); padding: 12px 10px 14px;
}
.gp-expanded-inner {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 680px; margin: 0 auto;
}

/* Contrôles avancés — ligne unique centrée */
.gp-advanced-controls {
  display: flex; align-items: center; justify-content: center; gap: 18px;
}

/* Boutons -15/+15 : assez grands pour afficher le "15" */
.gp-adv-btn {
  background: none; border: none; color: var(--gp-text); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; opacity: .7; transition: opacity .2s, background .2s;
  min-height: 42px; border-radius: 50%; padding: 0;
}
.gp-adv-btn:hover { opacity: 1; background: rgba(255,255,255,0.06); }
body.light-mode .gp-adv-btn { color: var(--gp-green-mid); }
.gp-adv-btn span { font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: -.5px; }

/* Bouton play centré — SUPPRIMÉ du HTML, mais gardé au cas où */
.gp-play-large {
  background: var(--gp-green) !important; border-radius: 50% !important;
  width: 52px !important; height: 52px !important; min-width: 52px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  opacity: 1 !important; color: white !important; flex-direction: row !important;
}
.gp-play-large:hover { background: var(--gp-green-mid) !important; }

/* Actif (shuffle, repeat) */
.gp-active { color: var(--gp-mint) !important; opacity: 1 !important; }
.gp-active svg { fill: var(--gp-mint) !important; }

/* ── LIGNE VITESSE + VOLUME ─────────────────────────────────── */
.gp-sliders-row {
  display: flex; align-items: center; gap: 20px;
  max-width: 580px; margin: 0 auto; width: 100%;
}

/* Vitesse — bouton cyclique unique */
.gp-speed-control { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gp-control-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gp-muted); font-weight: 700; white-space: nowrap;
}
.gp-speed-cycle-btn {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: var(--gp-text); border-radius: 20px; padding: 4px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s;
  min-width: 52px; text-align: center;
}
.gp-speed-cycle-btn:hover { background: rgba(255,255,255,0.12); }
.gp-speed-active {
  background: var(--gp-green) !important;
  border-color: var(--gp-mint) !important;
  color: white !important;
}
body.light-mode .gp-speed-cycle-btn { background: #eef6f1; border-color: #d0e8d8; color: var(--gp-green-mid); }
body.light-mode .gp-speed-active    { background: var(--gp-green-mid) !important; color: white !important; }

/* Volume — largeur max limitée */
.gp-volume-control { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 240px; }
.gp-volume-row { display: flex; align-items: center; gap: 6px; flex: 1; }
.gp-volume-row svg { flex-shrink: 0; opacity: .45; color: var(--gp-text); }
.gp-volume-row svg:last-child { opacity: .85; }
#gp-volume-slider { flex: 1; max-width: 160px; }

/* Séparateur visuel entre vitesse et volume */
.gp-sliders-separator {
  width: 1px; height: 22px; background: var(--gp-border); flex-shrink: 0;
}

/* ── SECTION ZIKR ───────────────────────────────────────────── */
.gp-zikr-section {
  border-top: 1px solid var(--gp-border); padding-top: 12px;
  max-width: 580px; margin: 0 auto; width: 100%;
}
.gp-zikr-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.gp-zikr-toggle-btn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--gp-mint); border-radius: 20px; padding: 4px 11px; font-size: 11px;
  cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all .2s;
}
.gp-zikr-toggle-btn:hover { background: rgba(142,182,155,0.1); }
body.light-mode .gp-zikr-toggle-btn { background: #eef6f1; border-color: #d0e8d8; color: var(--gp-green-mid); }

.gp-zikr-picker {
  background: rgba(255,255,255,0.04); border: 1px solid var(--gp-border);
  border-radius: 10px; overflow: hidden; margin-bottom: 8px;
}
body.light-mode .gp-zikr-picker { background: #f7faf8; border-color: #d0e8d8; }
.gp-zikr-search { padding: 7px 10px; border-bottom: 1px solid var(--gp-border); }
body.light-mode .gp-zikr-search { border-bottom-color: #d0e8d8; }
.gp-zikr-search input {
  width: 100%; background: rgba(255,255,255,0.07); border: none; border-radius: 7px;
  padding: 5px 9px; color: var(--gp-text); font-size: 12px; outline: none;
}
body.light-mode .gp-zikr-search input { background: white; color: #1a2e25; border: 1px solid #d0e8d8; }
.gp-zikr-list { max-height: 140px; overflow-y: auto; }
.gp-zikr-item {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--gp-text); font-size: 12px; cursor: default;
  transition: background .15s;
}
.gp-zikr-item:hover { background: rgba(142,182,155,0.07); }
body.light-mode .gp-zikr-item { color: #1a2e25; border-bottom-color: #eef6f1; }
.gp-zikr-item-info { flex: 1; min-width: 0; }
.gp-zikr-item-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-zikr-item-folder { font-size: 10px; opacity: .45; }
.gp-zikr-play-item {
  background: var(--gp-green); border: none; color: white; border-radius: 50%;
  width: 20px; height: 20px; font-size: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gp-zikr-loading { padding: 12px; text-align: center; font-size: 12px; color: var(--gp-muted); }

.gp-zikr-playing {
  display: flex; align-items: center; gap: 8px;
  background: rgba(142,182,155,0.07); border: 1px solid rgba(142,182,155,0.15);
  border-radius: 9px; padding: 7px 10px;
}
body.light-mode .gp-zikr-playing { background: #eef6f1; border-color: #d0e8d8; }
.gp-zikr-playing-info { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.gp-zikr-current-title {
  font-size: 12px; font-weight: 500; color: var(--gp-mint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.light-mode .gp-zikr-current-title { color: var(--gp-green-mid); }
.gp-zikr-volume-row {
  display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--gp-muted); flex-shrink: 0;
}
#gp-zikr-volume { width: 70px; flex: none; }
.gp-zikr-stop-btn {
  background: rgba(255,255,255,0.07); border: none; color: var(--gp-text);
  border-radius: 50%; width: 22px; height: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.light-mode .gp-zikr-stop-btn { background: #d0e8d8; color: var(--gp-green-mid); }

/* ── TRACK ACTIVE DANS LA LISTE ─────────────────────────────── */
.song-list-item.playing {
  background: rgba(142,182,155,0.07) !important;
  border-left: 3px solid var(--gp-mint) !important;
}
body.light-mode .song-list-item.playing {
  background: #eef6f1 !important; border-left-color: var(--gp-green-mid) !important;
}

/* Indicateur "1" repeat */
.gp-repeat-dot {
  display: none; position: absolute; top: 2px; right: 2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gp-mint); font-size: 5px; font-weight: 800;
  line-height: 7px; text-align: center; color: #000;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 520px) {
  .gp-artist         { display: none; }

  /* Vitesse + contrôles avancés sur UNE seule ligne */
  .gp-expanded-inner { gap: 10px; }
  .gp-advanced-controls { gap: 12px; }

  /* Regroupement vitesse + advanced + volume sur une ligne unique */
  .gp-panel-mobile-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; width: 100%;
  }

  /* Inline : bouton vitesse intégré avant les contrôles avancés */
  .gp-speed-control   { flex-shrink: 0; }
  .gp-sliders-row     { flex-direction: row; gap: 8px; align-items: center; flex-wrap: nowrap; }
  .gp-sliders-separator { display: none; }
  .gp-volume-control  { flex: 1; max-width: none; min-width: 0; max-width: fit-content !important;}
  #gp-volume-slider   { flex: 1; }

  /* La ligne gp-advanced-controls et gp-sliders-row fusionnées : */
  .gp-advanced-controls,
  .gp-sliders-row {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* Tout sur une seule ligne compacte */
  .gp-expanded-inner > .gp-advanced-controls,
  .gp-expanded-inner > .gp-sliders-row {
    /* on les fusionne visuellement côte-à-côte */
    display: inline-flex;
    vertical-align: middle;
  }

  /* Wrapper flex ligne unique généré par JS ou via CSS flex sur expanded-inner */
  .gp-expanded-inner {
    display: flex; flex-direction: column; gap: 10px;
  }

  /* Forcer advanced-controls + sliders-row sur la MÊME rangée */
  .gp-row-merged {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; width: 100%; flex-wrap: nowrap;
  }
  .gp-row-merged .gp-advanced-controls { flex-shrink: 0; gap: 8px; }
  .gp-row-merged .gp-sliders-row { flex: 1; min-width: 0; flex-direction: row; gap: 8px; }
  .gp-row-merged .gp-sliders-separator { display: none; }
  .gp-row-merged .gp-volume-control { flex: 1; max-width: none; }
  .gp-row-merged #gp-volume-slider  { flex: 1; }

  .gp-zikr-section { max-width: 100%; }
  .gp-adv-btn { min-width: 16   px; min-height: 36px; }
}

.gp-controls-bis {
    display: flex;
    flex-direction: row;
}

@keyframes gp-scroll-title {
  0%,  15% { transform: translateX(0); }
  85%, 100% { transform: translateX(var(--gp-scroll-dist, 0px)); }
}

.gp-title.is-scrolling {
  animation: gp-scroll-title 9s ease-in-out infinite;
}
/* ══════════════════════════════════════════════════════════════
   DÉFILEMENT DU TITRE — à coller dans player-global.css
   ══════════════════════════════════════════════════════════════

   PROBLÈME PRÉCÉDENT : overflow:visible !important sur .gp-title
   → avec will-change:transform, le titre crée un layer de composition
     et s'échappe à gauche au-dessus de la vignette lors de l'animation.

   CORRECTION : on garde overflow:hidden sur .gp-title (scrollWidth
   fonctionne correctement même avec overflow:hidden — le vrai bug
   initial était la mesure avant display:block, pas l'overflow).
   Seul text-overflow:ellipsis est supprimé pour ne pas tronquer
   le texte avec "..." avant l'animation.
   ══════════════════════════════════════════════════════════════ */

/* 1. Conteneur parent : clip + fondu aux bords */
#gp-info,
.gp-info {
  overflow: hidden;
  position: relative;
  padding-left: inherit;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10px,
    black calc(100% - 10px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10px,
    black calc(100% - 10px),
    transparent 100%
  );
}

/* 2. Titre : PAS overflow:visible (sinon il déborde sur la vignette) */
#gp-title,
.gp-title {
  overflow: hidden;            /* clippé par .gp-info */
  text-overflow: clip !important; /* supprime le "…" de 481750522.css */
  white-space: nowrap;
  display: inline-block;
  will-change: transform;
}

/* 3. Animation */
@keyframes gp-scroll-title {
  0%,  15% { transform: translateX(0); }
  85%, 100% { transform: translateX(var(--gp-scroll-dist, 0px)); }
}

.gp-title.is-scrolling {
  animation: gp-scroll-title 9s ease-in-out infinite;
}

.gp-title:not(.is-scrolling) {
  animation: none;
  transform: translateX(0);
}