:root{
  --rv-bg:#0a0a12;
  --rv-panel:#111222;
  --rv-ink:#e3d7ff;
  --rv-primary:#ff00ff;
  --rv-primary-2:#a66bff;
  --rv-border:#2a2142;

  /* Menu */
  --menu-w: 200px;     
  --menu-gap: 12px;    
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:transparent;
  color:var(--rv-ink);
  font:14px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  height:140px;                 
  overflow:hidden;
}

button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }

/* ====== PLAYER WRAPPER ====== */
.rvp{
  width:100%;
  max-width:440px;
  height:140px;
  padding:4px 8px;
  background:transparent;
  overflow:hidden;
}
.rvp-right{
  height:100%;
  background:linear-gradient(180deg,#0e0e16,#101024);
  border:1px solid #1b1630;
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 8px 28px rgba(0,0,0,.45);
  padding:10px;
  overflow:hidden;
  position:relative;
  display:flex; flex-direction:column;
}

.rvp-content{
  height:100%;
  display:flex; flex-direction:column;
  transition:transform .25s ease;
}
.rvp-right.menu-open .rvp-content{
  transform:translateX(calc(-1 * (var(--menu-w) + var(--menu-gap))));
}

/* ====== HEADER ====== */
.rvp-top{
  flex:0 0 40px; min-height:40px;
  background:#121228;
  border:1px solid var(--rv-border);
  border-radius:10px;
  padding:3px 8px;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
}
.rvp-controls{ display:flex; align-items:center; gap:4px; }
.rvp-btn{
  width:36px; height:28px;
  color:var(--rv-primary);
  background:#14142a;
  border:1px solid var(--rv-primary);
  border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:filter .15s ease, transform .05s ease;
}
.rvp-btn:hover{ filter:brightness(1.15) }
.rvp-btn:active{ transform:scale(.98) }
.rvp-btn--sm{ width:28px; height:24px; }

.rvp-title{
  flex:1; display:flex; flex-direction:column; gap:2px;
  min-width:0; overflow:hidden; text-align:center;
}
.rvp-title>*{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rvp-status{ color:var(--rv-primary); font-weight:700; font-size:10px; letter-spacing:.45px; text-transform:uppercase; }
.rvp-modname{ color:#00f8ff; font-weight:800; font-size:12px; text-shadow:0 0 6px rgba(0,248,255,.5); }

/* ====== ZONE VU ====== */
.rvp-vu{
  flex:1 1 auto; min-height:78px; margin-top:8px;
  background:#0e0e18; border:1px solid var(--rv-border); border-radius:10px;
  position:relative; overflow:hidden;
}
.chip{
  background:#0e0e16; color:var(--rv-primary);
  border:1px solid var(--rv-primary); border-radius:8px;
  padding:4px 8px; font-size:12px; cursor:pointer;
}
.chip:hover{ filter:brightness(1.15); }
.rvp-vu .chip{ position:absolute; right:6px; bottom:6px; }

.hidden{ display:none !important; }

/* ====== MENU ====== */
.rvp-menu{
  position:absolute; top:10px; right:var(--menu-gap);
  width:var(--menu-w); height:calc(100% - 20px);
  background:#0e0e16;
  border:1px solid var(--rv-primary);
  border-radius:12px;
  padding:8px;
  box-shadow:0 10px 24px rgba(0,0,0,.55);
  transform:translateX(calc(100% + var(--menu-gap)));
  transition:transform .25s ease;
  z-index:50;
  overflow:hidden;   
}
.rvp-right.menu-open .rvp-menu{ transform:translateX(0); }

/* --- Tabs header --- */
.menu-tabs{
  display:flex; gap:6px; margin-bottom:6px;
}
.tab-btn{
  flex:1 1 0;
  background:#14142a; border:1px solid var(--rv-primary); border-radius:8px;
  padding:5px 6px; font-size:11px; color:#d9eaff; text-align:center; cursor:pointer;
}
.tab-btn.active{ outline:2px solid #00f8ff; }

/* --- Viewport + track --- */
.menu-viewport{
  position:relative; width:100%; height:calc(100% - 24px);
  overflow:hidden;
  border-radius:8px;
  background:#0e0e16;
}
.menu-track{
  display:flex; width:calc(2 * var(--menu-w)); height:100%;
  transform:translateX(0); transition:transform .25s ease;
}
.menu-track.show-controls{ transform:translateX(calc(-1 * var(--menu-w))); }

/* --- Panel commun --- */
.menu-panel{
  width:var(--menu-w); height:100%;
  padding-right:4px; box-sizing:border-box;
  display:flex; flex-direction:column; gap:6px;
}

/* --- Panel TRACK --- */
.rvp-filebox{
  background:#0b0b18; border:1px solid #1d1532; border-radius:8px;
  padding:6px; flex:1 1 auto; overflow:auto;
}
.rvp-file{
  display:block; width:100%;
  padding:6px 8px; margin:0 0 4px 0;
  background:#121228; border:1px solid #2a2142; border-radius:6px;
  color:#d9eaff; font-size:12px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  text-align:left; cursor:pointer;
}
.rvp-file:hover{ filter:brightness(1.1); }

/* --- Panel MORE (3 boutons centrés, serrés) --- */
.btn-row{
  display:flex;
  flex-wrap:nowrap;            /* jamais de retour ligne */
  justify-content:center;      /* stop au space-between */
  align-items:center;
  gap:2px;                     /* petit espace fixe entre boutons */
}

.rvp-toggle{
  background:#14142a;
  border:1px solid var(--rv-primary);
  border-radius:8px;
  padding:2px 4px;             /* compact */
  font-size:9.5px;
  line-height:1.1;
  text-align:center;
  white-space:nowrap;
  box-sizing:border-box;
  width:auto;                  /* largeur naturelle */
}

#btnShuffle{ /* pas de largeur forcée, juste centré visuellement */
  margin:0 2px;
}

.rvp-toggle.active{ outline:2px solid #00f8ff; }

/* Pied + bouton Close */
.menu-spacer{ flex:1 1 auto; }
.rvp-menu-footer{
  margin-top:auto;
  position:sticky;
  bottom:6px;
  background:#0e0e16;
  padding-top:4px;
  text-align:center;
}
.rvp-menu .chip--full{
  width:auto;
  padding:4px 10px;
  display:inline-block;
  background:#0e0e16; border:1px solid var(--rv-primary); border-radius:8px;
  color:#var(--rv-primary);
}
.rvp-menu .chip--full:hover{ filter:brightness(1.15); }