/* =====================================================
   VARIÁVEIS GLOBAIS (responsivas)
   -----------------------------------------------------
   - Todas as proporções fluem via clamp(), vw e vh
   - Controlam espaçamentos, tipografia e tamanhos de botões
   ===================================================== */

:root {
  --pad-sm: clamp(4px, 0.5vw, 12px);
  --pad-md: clamp(6px, 0.8vw, 18px);
  --pad-lg: clamp(10px, 1.2vw, 28px);

  --radius-sm: clamp(4px, 0.4vw, 10px);
  --radius-md: clamp(6px, 0.6vw, 14px);
  --radius-lg: clamp(12px, 1vw, 25px);

  --fs-xs: clamp(10px, 0.65vw, 14px);
  --fs-sm: clamp(12px, 0.8vw, 16px);
  --fs-md: clamp(14px, 1vw, 20px);
  --fs-lg: clamp(16px, 1.2vw, 24px);

  --btn-size-sm: clamp(26px, 2vw, 42px);
  --btn-size-md: clamp(32px, 2.5vw, 52px);
  --btn-size-lg: clamp(42px, 3vw, 68px);

  --grid-gap: clamp(6px, 0.7vw, 16px);
}

/* =====================================================
   SISTEMA DE CLASSES POR MÍDIA E MODO
   -----------------------------------------------------
   - Permite individualizar: áudio, vídeo e YouTube
   - Permite individualizar: normal vs fullscreen
   - NÃO altera nada ainda. Apenas cria estrutura.
   ===================================================== */

/* 🎧 MODO ÁUDIO — qualquer arquivo MP3/OGG/WAV */
.player-container.media-audio {}

/* 🎬 MODO VÍDEO LOCAL — MP4/MKV */
.player-container.media-video {}

/* ▶️ MODO YOUTUBE — iframe */
.player-container.media-youtube {}

/* 🌗 MODO VISUAL NORMAL */
.player-container.view-normal {}

/* 🌕 MODO FULLSCREEN */
.player-container.view-fullscreen {}


/* =====================================================
   LAYOUT BASE (estrutura do painel duplo)
   -----------------------------------------------------
   - Divisão esquerda/direita do módulo Áudios/Vídeos
   ===================================================== */

.audios-wrap {
  flex: 1;
  display: flex;
  gap: var(--grid-gap);
  min-height: 0;
  overflow: hidden;
}

/* Painel esquerdo: lista/grid */
.audios-left {
  flex: 0 0 55%;
  max-width: 55%;
  display: flex;
  flex-direction: column;
  background: rgba(30,30,30,0.85);
  border-radius: var(--radius-lg);
  padding: var(--pad-sm);
}

/* Painel direito: player */
.audios-right {
  flex: 0 0 45%;
  max-width: 45%;
  display: flex;
  flex-direction: column;
  background: rgba(30,30,30,0.85);
  border-radius: var(--radius-lg);
  padding: 0;
}

/* =====================================================
   🔵 MÓDULO 2 — LISTA, GRID E CARDS
   -----------------------------------------------------
   - Toolbar de ações
   - Exibição em lista
   - Exibição em grid
   - Cards do modo grid
   ===================================================== */

/* -------------------------------
   Toolbar superior (botões gerais)
   ------------------------------- */
.audios-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pad-md);
  margin-bottom: var(--pad-md);
}

.audios-toolbar button {
  padding: var(--pad-sm) var(--pad-md);
  font-size: var(--fs-sm);
  border: none;
  border-radius: var(--radius-sm);
  background: #333;
  color: #eee;
  cursor: pointer;
  transition: 0.15s ease;
}

.audios-toolbar button:hover {
  background: #444;
  filter: brightness(1.15);
  transform: translateY(-2px);
}

/* -------------------------------
   LISTA (modo clássico)
   ------------------------------- */
.audios-row {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--pad-md);
  border-bottom: 1px solid #333;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: var(--fs-md);
}

.audios-row:hover {
  background: rgba(255,255,255,0.05);
}

.audios-icon {
  margin-right: clamp(6px, 0.8vw, 14px);
  font-size: var(--fs-lg);
}

.audios-name {
  flex: 1;
  font-size: var(--fs-md);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* -------------------------------
   Menu ⋮ (ações sobre o item)
   ------------------------------- */
.menu-btn {
  background: transparent;
  border: none;
  font-size: clamp(18px, 1.2vw, 26px);
  color: #eee;
  cursor: pointer;
  transition: 0.15s;
}

/* -------------------------------
   GRID (modo thumbnail)
   ------------------------------- */
.audios-list.grid-mode {
  display: grid;
  grid-template-columns: repeat(auto-fill,
    minmax(clamp(80px, 9vw, 150px), 1fr));
  grid-auto-rows: minmax(
    clamp(70px, 7vw, 160px),
    max-content
  );
  gap: var(--grid-gap);
  margin-bottom: clamp(30px, 4vh, 60px);
}

/* -------------------------------
   CARDS (modo grid — itens)
   ------------------------------- */
.audios-card {
  background: rgba(40,40,40,0.9);
  border-radius: var(--radius-sm);
  padding: var(--pad-sm);
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: transform .15s ease, background .20s ease;
}

.audios-card .card-icon {
  font-size: clamp(18px, 1.9vw, 30px);
  margin-bottom: var(--pad-sm);
}

.audios-card .card-name {
  font-size: clamp(10px, 0.9vw, 16px);
  line-height: 1.3em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

/* -------------------------------
   Estado visual: arquivo “tocando”
   ------------------------------- */
.audios-row.playing,
.audios-card.playing {
  background: rgba(255, 100, 100, 0.30);
}

/* =====================================================
🔵 MÓDULO 15 — MENUS ⋮ + DIALOG BOXES + GRID NAV
--------------------------------------
- Estilização de menus suspensos (⋮)
- Ajuste de botões em caixas de diálogo
- Navegação "Anterior / Próximo" no Grid
===================================================== */

/* ------------------------------
MENU ⋮ — Estilos principais
------------------------------ */

.menu-actions {
min-width: clamp(120px, 18vw, 180px);
border-radius: clamp(6px, 1vw, 10px);
overflow: hidden;
background: #222;
border: 1px solid #333;
display: none;
flex-direction: column;
z-index: 9999;
position: absolute;
right: 0;
top: 100%;
}

.menu-actions.show {
display: flex;
}

.menu-actions button {
padding: clamp(6px, 1vh, 10px) clamp(10px, 2vw, 16px);
font-size: clamp(12px, 1.4vw, 14px);
border: none;
background: transparent;
color: #eee;
text-align: left;
cursor: pointer;
}

.menu-actions button:hover {
background: rgba(255,255,255,0.08);
}

/* ---------------------------------------------
Dialog genérico (caso exista .dialog-box)
--------------------------------------------- */

.dialog-box button.btn {
padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 18px);
border-radius: 6px;
font-size: clamp(12px, 1.6vw, 14px);
background: #444;
color: #eee;
border: 1px solid #555;
cursor: pointer;
transition: 0.15s ease;
}

.dialog-box button.btn:hover {
background: #555;
transform: translateY(-1px);
}

.dialog-box button.btn:active {
transform: scale(0.94) translateY(1px);
}

/* ---------------------------------------------
Grid Nav (Próximo / Anterior)
--------------------------------------------- */

.grid-nav {
margin-top: clamp(6px, 1vh, 10px);
}

.grid-nav-inner button {
padding: clamp(5px, 0.8vh, 8px) clamp(12px, 2vw, 16px);
font-size: clamp(12px, 1.5vw, 14px);
border-radius: 6px;
border: 1px solid #444;
background: #2a2a2a;
color: #eee;
cursor: pointer;
transition: 0.15s ease;
}

.grid-nav-inner button:hover {
background: #333;
transform: translateY(-1px);
}

.grid-nav-inner button:active {
transform: scale(0.94) translateY(1px);
}

/* =====================================================
🔵 MÓDULO 16 — MODAL “MOVER ARQUIVO”
-------------------------------------
- Modal centralizado
- Caixa com rolagem interna
- Botões responsivos
===================================================== */

.move-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.65);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(12px, 3vw, 28px);
z-index: 10000;
}

.move-box {
background: #222;
color: #eee;
width: min(420px, 90vw);
max-height: 82vh;
padding: clamp(16px, 2vw, 28px);
border-radius: clamp(8px, 1.2vw, 14px);
overflow-y: auto;
box-shadow: 0 6px 22px rgba(0,0,0,0.75);
}

.move-box h3 {
margin: 0 0 clamp(12px, 1.6vh, 16px);
font-size: clamp(14px, 1.8vw, 18px);
}

/* Lista dentro do modal */
.move-list {
display: flex;
flex-direction: column;
gap: clamp(6px, 1vh, 10px);
margin-bottom: clamp(12px, 1.6vh, 18px);
}

/* Cada destino possível */
.move-dest {
background: #333;
color: #eee;
border: 1px solid #444;
border-radius: 6px;

padding: clamp(6px, 1vh, 10px) clamp(10px, 2vw, 16px);
text-align: left;
cursor: pointer;

transition: transform .15s ease, filter .15s ease, background .15s ease;
}

.move-dest:hover {
background: #444;
transform: translateY(-1px);
filter: brightness(1.10);
}

.move-dest:active {
transform: scale(0.94) translateY(1px);
filter: brightness(0.8);
}

/* Botões de confirmação / cancelar */
.move-actions {
text-align: right;
margin-top: clamp(10px, 1.4vh, 16px);
}

.move-actions button {
background: crimson;
border: none;
padding: clamp(6px, 1vh, 10px) clamp(12px, 2vw, 18px);
border-radius: 6px;
color: #fff;
cursor: pointer;
transition: transform .15s ease, filter .15s ease;
}

.move-actions button:hover {
background: #e33;
transform: translateY(-1px);
}

.move-actions button:active {
transform: scale(0.94) translateY(1px);
filter: brightness(0.85);
}

/* =====================================================
   PLAYER CONTAINER (estrutura geral)
   -----------------------------------------------------
   - Caixa principal do player do lado direito
   - Recebe classes dinâmicas via JS (media-video, fullscreen-mode, active/inactive)
   ===================================================== */

.player-container {
  position: relative;
  background: rgba(15,15,15,0.95);
  color: #eee;
  padding: clamp(10px, 1.5vw, 24px);
  border-radius: clamp(10px, 1vw, 24px);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* garante que o padding entre na conta */
  align-items: center;
  transition: all 0.35s ease;
}

/* Bloco que agrupa vinil + controles superiores */
.player-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
}

/* BOTÃO FULLSCREEN */
.player-container .btn-fullscreen{
  position:absolute;
  top:clamp(8px,1vw,18px);
  left:clamp(10px,1.2vw,20px);
  width:var(--btn-size-md);
  aspect-ratio:1;
  border-radius:50%;
  border:clamp(2px,.25vw,3px) solid #555;
  background:radial-gradient(circle at 30% 30%,#444,#111);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(14px,1.3vw,26px);
  cursor:pointer;
  box-shadow:
    inset -2px -2px 6px rgba(0,0,0,.8),
    inset 2px 2px 6px rgba(80,80,80,.3);
  z-index:500;
  transition:transform .15s ease, filter .15s ease, border-color .2s ease;
}
.player-container .btn-fullscreen:hover{
  transform:scale(1.15);
  border-color:crimson;
  filter:brightness(1.12);
}
.player-container .btn-fullscreen:active{
  transform:scale(.92) translateY(1px);
  filter:brightness(.85);
}
.player-container.fullscreen-mode .btn-fullscreen{
  position:fixed;
  top:clamp(14px,2vh,26px);
  left:clamp(18px,2vw,30px);
  z-index:100000;
}

/* =====================================================
   CONTROLES SUPERIORES — BASE (normal horizontal)
   ===================================================== */
.vinil-controls{
  position:absolute;
  top: -12px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:row;

  gap:clamp(8px,1.4vw,18px);
  padding:clamp(4px,0.6vh,8px) clamp(10px,1.6vw,18px);

  border-radius:999px;
  background:rgba(15,15,15,0.15);
  backdrop-filter:blur(clamp(2px,0.5vw,6px));

  z-index:400;
}

/* Botões */
.vinil-controls button{
  width:var(--btn-size-md);
  height:var(--btn-size-md);
  font-size:clamp(14px,1.4vw,24px);

  border-radius:50%;
  border:clamp(1px,0.12vw,2px) solid #444;
  background:rgba(20,20,20,0.38);
  color:#eee;
  backdrop-filter:blur(clamp(2px,0.5vw,6px));
  cursor:pointer;

  box-shadow:
    inset -2px -2px 6px rgba(0,0,0,.6),
    inset 2px 2px 6px rgba(80,80,80,.25);

  transition:transform .15s ease, filter .15s ease,
             box-shadow .15s ease, border-color .15s ease;
}
.vinil-controls button:hover{
  transform:scale(1.10);
  border-color:crimson;
  filter:brightness(1.12);
}
.vinil-controls button:active{
  transform:scale(.92) translateY(1px);
  filter:brightness(.9);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.65);
}

/* Slider horizontal (normal) */
#volume-slider{
  -webkit-appearance:none;
  appearance:none;
  width:clamp(90px,14vw,160px);
  height:clamp(5px,0.7vw,9px);
  background:#333;
  border-radius:999px;
  cursor:pointer;
  margin:0;
  accent-color:#708090;
  outline:none;
  transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
#volume-slider::-webkit-slider-runnable-track,
#volume-slider::-moz-range-track{
  height:100%;
  border-radius:inherit;
}
#volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:clamp(6px,0.4vw,8px);
  height:clamp(22px,2.4vh,30px);
  border-radius:999px;
  background:#ccc;
  box-shadow:0 0 4px rgba(0,0,0,.5);
}
#volume-slider::-moz-range-thumb{
  width:clamp(6px,0.4vw,8px);
  height:clamp(22px,2.4vh,30px);
  border-radius:999px;
  background:#ccc;
  box-shadow:0 0 4px rgba(0,0,0,.5);
}
#volume-slider:hover{
  filter:brightness(1.20);
  transform:scale(1.04);
  box-shadow:0 0 6px rgba(255,255,255,.25);
}
#volume-slider:active{
  transform:scale(.97);
  filter:brightness(.9);
}

/* =====================================================
   FULLSCREEN — painel lateral vertical (todos)
   ===================================================== */
.player-container.fullscreen-mode:is(
  .media-youtube,
  .media-video,
  .media-audio.view-fullscreen
) .vinil-controls{
  position:fixed;
  top:50% !important;
  right:clamp(8px,2vw,20px) !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  opacity:.95;

  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:clamp(290px,36vh,280px);
  gap:clamp(8px,0.9vh,12px);

  padding:clamp(6px,0.7vh,10px) clamp(2px,0.3vw,4px)
          clamp(22px,3vh,28px);

  background:rgba(15,15,15,.10);
  border-radius:clamp(20px,3vh,28px);
  box-shadow:none;
}

/* slider vira vertical em fullscreen */
.player-container.fullscreen-mode:is(
  .media-youtube,
  .media-video,
  .media-audio.view-fullscreen
) #volume-slider{
  width:clamp(110px,18vh,150px) !important;
  height:clamp(8px,0.7vw,12px) !important;
  transform:rotate(-90deg);
  transform-origin:center;
  margin-top:auto !important;
  margin-bottom:clamp(40px,6.4vh,72px);
}

/* opacidade suave em fullscreen (todos) */
.player-container.fullscreen-mode:hover .vinil-controls{ opacity:1; }

/* =====================================================
   VINIL & LABEL (Capa do Álbum)
   ===================================================== */

.vinil{
  width:clamp(215px,35vmin,345px);
  height:clamp(215px,35vmin,345px);
  border-radius:50%;
  margin:clamp(70px,13vh,100px) auto clamp(20px,2.2vh,32px);
  position:relative;
  z-index:3; /* acima da névoa */

  background:radial-gradient(circle,#000 30%,#111 100%);
  border:clamp(4px,0.5vw,8px) solid #222;

  /* estado “apagado” (sem neon) */
  box-shadow:0 0 clamp(12px,2vw,32px) rgba(255,60,60,0);

  transition:box-shadow .4s ease-in-out;

  /* rotação padrão, pausada até entrar o .playing */
  animation:spin 4s linear infinite;
  animation-play-state:paused;
}

/* Capa circular aplicada sobre o vinil */
.label{
  width:clamp(195px,31vmin,325px);
  height:clamp(195px,31vmin,325px);
  border-radius:50%;

  background-size:cover;
  background-position:center;

  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);

  box-shadow:inset 0 0 clamp(10px,1vw,22px) rgba(0,0,0,.7);
}

/* Animação de rotação */
@keyframes spin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

/* Sombra pulsante neon */
@keyframes pulseNeon{
  0%  { box-shadow:0 0 10px rgba(255,60,60,.3); }
  50% { box-shadow:0 0 26px rgba(255,60,60,.6); }
  100%{ box-shadow:0 0 10px rgba(255,60,60,.3); }
}

/* 🔥 Neon global para ÁUDIO (normal + fullscreen) */
.player-container.media-audio .vinil.playing {
  /* roda sempre as duas animações */
  animation-play-state: running !important;
  animation: spin 4s linear infinite,
             pulseNeon 2.5s ease-in-out infinite !important;

  /* glow forte no disco em qualquer modo */
  box-shadow:
    0 0 clamp(18px, 2.4vw, 36px) rgba(255,60,60,0.8),
    0 0 clamp(32px, 3.4vw, 64px) rgba(255,60,60,0.5) !important;
}

/* =====================================================================
   INDIVIDUALIZAÇÃO DO MODO ÁUDIO
   ===================================================================== */

/* Modo normal: vinil um pouco maior que a base */
.player-container.media-audio.view-normal .vinil .vinil{
  width:clamp(260px,48vmin,400px);
  height:clamp(260px,48vmin,400px);
}

.player-container.media-audio.view-normal .vinil .label{
  width:clamp(245px,44vmin,380px);
  height:clamp(245px,44vmin,380px);
}

/* ==========================================================
   ÁUDIO — FULLSCREEN
   ========================================================== */

.player-container.media-audio.view-fullscreen .vinil .vinil{
  width:min(72vh,72vw);
  height:min(72vh,72vw);
}

.player-container.media-audio.view-fullscreen .vinil .label{
  width:min(60vh,60vw);
  height:min(60vh,60vw);
}

/* ==========================================================
   🎧 ÁUDIO — REMOVE ÁREAS DE VÍDEO
   (Evita espaços vazios quando áudio está tocando)
   ========================================================== */

.player-container.media-audio #video-container,
.player-container.media-audio .yt-wrap{
  display:none !important;
}

/* ==========================================================
   🎧 ÁUDIO — Distância do vinil ao topo
   ========================================================== */

/* 🎧 ÁUDIO — MODO NORMAL: só o vinil sobe um pouco */
.player-container.media-audio.view-normal .vinil {
  /* garante que usamos as margens padrão novamente */
  margin-top: clamp(70px, 13vh, 100px);
  margin-bottom: clamp(20px, 2.2vh, 32px);

  /* empurra só o desenho do vinil pra cima,
     sem mexer nos controles abaixo */
  top: -16px;  /* ajuste fino: pode testar -16px, -20px, -30px... */
}

/* 🎧 FULLSCREEN ÁUDIO — subir só o vinil */
.player-container.fullscreen-mode.media-audio.view-fullscreen .vinil {
  /* garante que o layout continue o mesmo,
     só mexemos na “pintura” do vinil */
  position: relative; /* já tem na base, mas não custa reforçar */
  top: -2px;         /* ajuste fino: -20, -28, -36... testa no olho */

  /* se quiser dar um respiro extra embaixo do vinil
     sem mexer nos outros elementos, pode usar só margin-bottom */
  margin-bottom: clamp(18px, 3vh, 28px);
}


/* ============================================================
   NEON — ÁUDIO em FULLSCREEN
   ------------------------------------------------------------
   Glow dedicado só pro modo fullscreen de áudio,
   ============================================================ */

.player-container.fullscreen-mode.media-audio.view-fullscreen .vinil {
  position: relative;
  z-index: 500; /* acima da névoa e confortável abaixo dos controles */
}

/* Aura extra em volta do disco quando estiver tocando */
.player-container.fullscreen-mode.media-audio.view-fullscreen .vinil.playing::before {
  content: "";
  position: absolute;
  inset: -45px;             /* aumenta o "tamanho" da aura */
  border-radius: 50%;
  pointer-events: none;

  box-shadow:
    0 0 40px rgba(255, 60, 60, 0.90),
    0 0 80px rgba(255, 60, 60, 0.75),
    0 0 120px rgba(255, 60, 60, 0.55);

  animation: vinilNeonFull 2.6s ease-in-out infinite;
}

/* Pulsação específica do fullscreen */
@keyframes vinilNeonFull {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
}

/* ✨ Neon extra (halo) só no modo normal */
.player-container.media-audio.view-normal .vinil {
  position: relative;
  z-index: 500; /* acima da névoa */
}

.player-container.media-audio.view-normal .vinil.playing::before {
  content: "";
  position: absolute;
  inset: -28px;        /* halo menor que o fullscreen */
  border-radius: 50%;
  pointer-events: none;

  box-shadow:
    0 0 30px rgba(255, 60, 60, 0.9),
    0 0 60px rgba(255, 60, 60, 0.7),
    0 0 90px rgba(255, 60, 60, 0.55);

  animation: vinilNeonNormal 2.6s ease-in-out infinite;
}

@keyframes vinilNeonNormal {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
}

.yt-wrap{
  width:100%;
  max-width:min(95%, 80vw);
  aspect-ratio:16/9;

  margin:clamp(4px,1vh,10px) auto clamp(6px,1.2vh,12px);
  border-radius:clamp(8px,1.2vw,16px);
  overflow:hidden;
  background:#000;

  display:flex;
  justify-content:center;
  align-items:center;
}

/* ============================
   YOUTUBE — MODO NORMAL
   ============================ */
.player-container.media-youtube .yt-wrap{
  display:flex !important;                 /* reativa se veio do modo áudio */
  min-height:min(40vh, 300px) !important;

  width:min(92%, 72vw); 
  margin:clamp(28px,14vh,38px) auto clamp(18px,4vh,30px);
  border-radius:clamp(8px,1vw,16px);

  position:relative;
  z-index:20;
}

/* iframe — regra única (vale normal + fullscreen) */
.player-container.media-youtube .yt-wrap iframe{
  width:100%;
  height:100%;
  border:0;
  object-fit:contain;
  display:block;
  pointer-events:auto !important;
}

/* ============================
   YOUTUBE — FULLSCREEN
   ============================ */
.player-container.fullscreen-mode.media-youtube{
  justify-content:center !important;
  align-items:center !important;
  padding:clamp(10px,2vh,24px) clamp(10px,2vw,32px);
  overflow:hidden;
}

.player-container.fullscreen-mode.media-youtube .yt-wrap{
  position:relative;
  width:min(70vw, 70vh * (16/9));
  height:min(70vh, 70vw * (9/16));
  margin:0 auto !important;
  transform:translateY(-20px);

  border-radius:clamp(6px,1vw,18px);
  background:rgba(14,14,14,0.96);
}

/* 🔧 Reorganiza a ordem visual no modo YouTube */

.player-container.media-youtube #video-player {
    display: none !important;
}

.player-container.media-youtube video {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Garante que o container continue em coluna */
.player-container.media-youtube {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wrapper do vinil + vinil-controls continua no topo */
.player-container.media-youtube > div:first-child {
  order: 0;
}
/* YouTube logo abaixo do topo */
.player-container.media-youtube .yt-wrap {
  order: 1;
}
/* Controles centrais, progress bar e barra Now Playing vêm depois */
.player-container.media-youtube .player-controls-center {
  order: 2;
}
.player-container.media-youtube .player-progress {
  order: 3;
}
.player-container.media-youtube .player-nowplaying {
  order: 4;
}
/* Só por garantia, o botão fullscreen pode ficar por cima e livre do fluxo */
.player-container.media-youtube .btn-fullscreen {
  order: 5;
}

/* =====================================================
   VÍDEO LOCAL — base
   ===================================================== */
#video-container{
  display:none;
  width:min(95%, 80vw);
  aspect-ratio:16/9;
  margin:clamp(8px,1.6vh,16px) auto clamp(6px,1.2vh,12px);
  border-radius:clamp(8px,1.2vw,16px);
  overflow:hidden;
  background:#000;
}

#video-container video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* =====================================================
   VÍDEO LOCAL — modo normal (media-video)
   ===================================================== */
.player-container.media-video #video-container{
  display:block !important;
  width:min(92%, 72vw);
  margin:clamp(44px,5vh,60px) auto clamp(10px,2vh,20px);
  border-radius:clamp(8px,1vw,16px);
  background:rgba(15,15,15,0.15);
  position:relative;
  z-index:20;
}


/* ============================================================
   FULLSCREEN — VÍDEO LOCAL
   ============================================================ */

.player-container.fullscreen-mode.media-video{
  justify-content:center !important;
  align-items:center !important;
  padding:clamp(10px,2vh,24px) clamp(10px,2vw,28px);
  background:rgba(15,15,15,0.90);
}

.player-container.fullscreen-mode.media-video #video-container{
  width: min(70vw, 70vh * (16/9)) !important;
  height: min(70vh, 70vw * (9/16)) !important;
  margin: 0 auto !important;
  transform: translateY(-20px);
}

.player-container.fullscreen-mode.media-video #video-container video{
  background:rgba(15,15,15,0.15);
}

/* =====================================================
   CONTROLES CENTRAIS (Prev / Play / Next)
   -----------------------------------------------------
   - As dimensões são ajustadas separadamente do áudio
   ===================================================== */
   
/* 'Container' dos botões (Prev / Play / Next) */
.player-controls-center {
  margin-top: clamp(1px, 0.2vw, 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.5vw, 22px);
}

.player-container.media-video .player-controls-center,
.player-container.media-youtube .player-controls-center {
  margin-top: clamp(8px, 1vh, 14px) !important;
  gap: clamp(14px, 1.8vw, 26px) !important;
}

.player-container.fullscreen-mode.media-audio.view-fullscreen .player-controls-center {
  margin-top: clamp(120px, 26vh, 140px) !important;
}

.player-container.media-audio.view-normal .player-controls-center {
  margin-top: clamp(12px, 5vh, 28px);
}

/* =====================================================
   CONTROLES CENTRAIS (Prev / Play / Next) modo normal
   ===================================================== */

/* Botão base circular */
.player-controls-center button {
  width: calc(var(--btn-size-sm) * 1.3);
  height: calc(var(--btn-size-sm) * 1.3);
  border-radius: 50%;

  border: clamp(2px, 0.2vw, 3px) solid #555;
  background: radial-gradient(circle at 30% 30%, #444, #111);
  color: #eee;

  font-size: clamp(14px, 1.4vw, 22px);
  cursor: pointer;

  box-shadow:
    inset -2px -2px 6px rgba(0,0,0,.8),
    inset 2px 2px 6px rgba(80,80,80,.3);

  transition: transform .2s,
              border-color .2s,
              filter .15s ease,
              box-shadow .15s ease;

  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0; /* centralização absoluta do ícone */
  padding: 0;
}

/* Botão PLAY/Pause — Versão Oval */
.player-controls-center #btn-play {
  width: calc(var(--btn-size-md) * 3.30);
  height: var(--btn-size-md);

  border-radius: 999px; /* formato oval */
  font-size: clamp(15px, 1.5vw, 26px);
}

/* ============================================================
      CONTROLES CENTRAIS (Prev / Play / Next) modo fullscreen
   ============================================================ */

/* Botão base circular */
.player-container.fullscreen-mode.media-youtube .player-controls-center button,
.player-container.fullscreen-mode.media-video .player-controls-center button {
  width: calc(var(--btn-size-sm) * 1.8);
  height: calc(var(--btn-size-sm) * 1.8);
  font-size: clamp(17px, 1.6vw, 28px);
}

/* Botão PLAY/Pause — Versão Oval */
.player-container.fullscreen-mode.media-youtube #btn-play,
.player-container.fullscreen-mode.media-video #btn-play {
  width: calc(var(--btn-size-md) * 4.4);
  height: calc(var(--btn-size-md) * 1.4);
  font-size: clamp(18px, 1.8vw, 28px);
}

/* Hover elegante */
.player-controls-center button:hover {
  transform: scale(1.12);
  border-color: crimson;
  filter: brightness(1.15);
}

/* Clique — efeito “botão afundando” */
.player-controls-center button:active {
  transform: scale(0.92) translateY(1px);
  filter: brightness(0.85);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);
}

/* =====================================================
   BARRA DE PROGRESSO (timeline/seek) — BASE ÚNICA
   ===================================================== */

.player-progress {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.6vw, 12px);
  width: 100%;
  margin: clamp(2px, 0.4vw, 6px) 0 !important;
}

.player-progress .time-start,
.player-progress .time-end {
  font-size: var(--fs-xs);
  min-width: clamp(30px, 4vw, 50px);
  text-align: center;
  color: #ccc;
}

.progress-bar {
  flex: 1;
  height: clamp(4px, 0.5vw, 8px);
  background: #333;
  border-radius: clamp(2px, 0.4vw, 6px);
  cursor: pointer;
  position: relative;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: crimson;
  border-radius: inherit;
  transition: width 0.1s linear;
}

/* =====================================================
   LAYOUT DA PROGRESS POR MODO (NORMAL)
   -----------------------------------------------------
   - Áudio normal: um pouco mais compacta e centralizada
   - Vídeo / YouTube normal: espaço extra em cima/baixo
   ===================================================== */

/* ÁUDIO — modo normal */
.player-container.media-audio.view-normal .player-progress {
  width: 92%;
  margin-top: clamp(8px, 1.2vh, 18px);
}

/* Vídeo + YouTube — modo normal */
.player-container.media-video .player-progress,
.player-container.media-youtube .player-progress {
  margin-top: clamp(6px, 1vh, 10px) !important;
  margin-bottom: clamp(6px, 1vh, 12px) !important;
}

/* Vídeo local — barra ligeiramente mais espessa no modo normal */
.player-container.media-video .progress-bar {
  height: clamp(5px, 0.6vw, 10px);
}

/* =====================================================
   FULLSCREEN — MODELO ÚNICO DE PROGRESS
   -----------------------------------------------------
   - Mesma “espessura” visual para áudio, vídeo e YouTube
   - Larguras e offsets específicos só quando necessário
   ===================================================== */

/* Espessura padrão fullscreen (todos os modos) */
.player-container.fullscreen-mode .progress-bar {
  height: clamp(6px, 0.6vw, 12px);
}

/* ÁUDIO — fullscreen: barra bem larga */
.player-container.media-audio.view-fullscreen .player-progress {
  width: 85vw !important;
  margin-top: clamp(18px, 3vh, 40px) !important;
}

/* =====================================================
   BARRA "NOW PLAYING" — BASE + AJUSTES POR MODO
   -----------------------------------------------------
   - Tamanho de fonte igual em todos
   - Só o espaçamento varia
   ===================================================== */

/* Base para todos os modos */
.player-container .player-nowplaying {
  font-size: clamp(13px, 1.1vw, 16px);
  margin-top: clamp(5px, 1vh, 12px);
}

/* Vídeo local — um pouco mais próximo da barra de progresso */
.player-container.media-video .player-nowplaying {
  margin-top: clamp(4px, 0.8vh, 10px);
}

/* YouTube — normal: mais distante do player, por causa do iframe */
.player-container.media-youtube .player-nowplaying {
  margin-top: clamp(12px, 1.4vh, 18px);
}

/* YouTube — fullscreen: aproxima da barra de progresso */
.player-container.fullscreen-mode.media-youtube .player-nowplaying {
  margin-top: clamp(4px, 0.7vh, 10px);
}

/* 🎧 ÁUDIO — fullscreen: sobe um pouco a barra "Now Playing"
   e mantém largura confortável */
.player-container.fullscreen-mode.media-audio.view-fullscreen .player-nowplaying {
  width: 80vw;
  margin-top: clamp(4px, 1vh, 10px) !important;
}

.player-container.fullscreen-mode.media-audio.view-fullscreen .player-nowplaying {
  margin-top: clamp(2px, 0.6vh, 8px) !important;
}

/* =====================================================
   FIX GLOBAL — PROGRESS NÃO FICA “APAGADA” PELO AUTO-HIDE
   ===================================================== */
.player-container .player-progress,
.player-container .progress-bar {
  position: relative;
  z-index: 20;
  pointer-events: auto;
}

/* ============================================================
   AUTO-HIDE — controles do player (todos os modos)
   ============================================================ */

/* Base: todo mundo que participa do auto-hide */
.player-container .player-controls-center,
.player-container .vinil-controls,
.player-container .btn-fullscreen,
.player-container #volume-slider {
  transition: opacity 0.55s ease-in-out !important;
}

/* Estado ativo — sempre visível */
.player-container.active .player-controls-center,
.player-container.active .vinil-controls,
.player-container.active .btn-fullscreen,
.player-container.active #volume-slider {
  opacity: 1 !important;
  pointer-events: auto;
}

/* Estado inativo — fade suave padrão */
.player-container.inactive .player-controls-center,
.player-container.inactive .vinil-controls,
.player-container.inactive .btn-fullscreen,
.player-container.inactive #volume-slider {
  opacity: 0 !important;
  pointer-events: none;
}

/* Fullscreen inativo — ainda mais “apagado” */
.player-container.fullscreen-mode.inactive .player-controls-center button,
.player-container.fullscreen-mode.inactive .vinil-controls button,
.player-container.fullscreen-mode.inactive .btn-fullscreen,
.player-container.fullscreen-mode.inactive #volume-slider {
  opacity: 0 !important;
}

/* =====================================================================
   INTEGRAÇÃO FINAL / FIXES / ISOLAÇÃO ENTRE MODOS
   ---------------------------------------------------------------------
   - Garante que Áudio, Vídeo Local e YouTube não se misturem
   - Centraliza tudo no fullscreen sem conflitos
   - Neutraliza regras duplicadas antigas (sobrescritas seguras)
   - Ajustes finais de UX, espaçamentos, z-index e responsividade
   ===================================================================== */

/* ================================================================
   1) ISOLAÇÃO ABSOLUTA ENTRE MODOS
   ----------------------------------------------------------------
   YouTube não interfere em vídeo local
   Vídeo local não interfere em áudio
   Áudio não interfere em YouTube
   ================================================================ */

.player-container.media-video .yt-wrap {
  display: none !important;
}

.player-container.media-youtube .vinil {
  display: none !important;
}

.player-container.media-youtube #video-container {
  display: none !important;
}


/* ================================================================
   2) CENTRALIZAÇÃO DEFINITIVA NO FULLSCREEN (GLOBAL)
   ----------------------------------------------------------------
   - YouTube, vídeo local e áudio seguem regras limpas
   - Evita deslocamentos em qualquer resolução
   ================================================================ */

.player-container.fullscreen-mode {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
}

/* No fullscreen de ÁUDIO eu assumo o controle do eixo vertical */
.player-container.fullscreen-mode.media-audio.view-fullscreen {
  justify-content: center !important;
  padding-top: clamp(10px, 4vh, 30px);
}

/* ================================================================
   3) CORREÇÃO GLOBAL DO POSICIONAMENTO DO GRUPO DE CONTROLES
   ----------------------------------------------------------------
   (Para evitar conflitos entre modos)
   ================================================================ */

.player-container.fullscreen-mode .player-controls-center {
  z-index: 2000;
}

.player-container.fullscreen-mode .vinil-controls {
  z-index: 3000;
}

.player-container.fullscreen-mode .btn-fullscreen {
  z-index: 4000;
}

/* ================================================================
   4) FULLSCREEN — AJUSTE FINAL DE ESPAÇAMENTO (MULTIMODO)
   ----------------------------------------------------------------
   Cada modo ganha seu próprio espaçador vertical se precisar.
   ================================================================ */

.player-container.fullscreen-mode.media-audio::before {
  content: "";
  display: block;
  height: clamp(10px, 4vh, 40px);
}

.player-container.fullscreen-mode.media-video::before {
  content: "";
  display: block;
  height: clamp(10px, 4vh, 40px);
  width: 100%;
  flex-shrink: 0;
}

.player-container.fullscreen-mode.media-youtube::before {
  content: "";
  display: block;
  height: clamp(10px, 6vh, 60px);
  width: 100%;
  flex-shrink: 0;
}

/* =====================================================
   AJUSTES FINAIS & SUAVIZAÇÕES (UX)
   -------------------------------------------------
   - Pequenas melhorias em cards, lista, scroll e playlist
   ===================================================== */

.audios-card:hover {
  transform: translateY(-2px);
  background: rgba(60,60,60,0.9);
}

/* Playlist — realce no hover */
#playlist li {
  transition: background .15s ease;
}
#playlist li:hover {
  background: rgba(255,255,255,0.08);
}

/* Suaviza comportamento de scroll geral */
html, body {
  scroll-behavior: smooth;
}


/* =====================================================
   ⚡  Fios de energia (linhas que passam pelo fundo devagar)
   ===================================================== */

/* BASE FIXA — não mexer */
.player-container.fullscreen-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,60,60,0.05) 0,
      rgba(255,60,60,0.05) 10px,
      transparent 2px,
      transparent 30px
    );
  animation: wires 14s linear infinite;
}

@keyframes wires {
  0%   { background-position: 0 0; }
  100% { background-position: 200px 0; }
}

/* Estilo trazido do .js */

.player-nowplaying {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(0,0,0,0.4);
  padding: 6px 10px;
  margin-top: 7px;
  border-radius: 6px;
  color: #eee;
}

.now-playing-text {
  display: inline-block;
  padding-left: 100%;
  animation: np_marquee 15s linear infinite;
  letter-spacing: 0.5px;
}

@keyframes np_marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}


.audios-floating-menu {
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: 99999;
  background: #222;
  border: 1px solid #333;
  border-radius: 6px;
  display: none;
  min-width: 140px;
  box-shadow: 0 8px 16px rgba(0,0,0,.5);
}

.audios-floating-menu button {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: #eee;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}

.audios-floating-menu button:hover {
  background: rgba(255,255,255,0.1);
}


/* ============================
   Modal YouTube — Aparência
   ============================ */

.dialog-box.yt-dialog {
  width: 680px;
  max-width: 95%;
}

/* Título e label (se usou classes) */
.dialog-box.yt-dialog .dialog-title {
  margin-top: 0;
}

.dialog-box.yt-dialog .dialog-label {
  display: block;
  margin-bottom: 6px;
}

/* Linha com botão "Colar" + textarea */
.dialog-box.yt-dialog .dialog-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.dialog-box.yt-dialog .dialog-textarea {
  flex: 1;
  width: 100%;
}

/* Espaço nas ações */
.dialog-box.yt-dialog .dialog-actions,
.dialog-box.yt-dialog .dialog-actions-yt {
  margin-top: 12px;
}

/* Botões do diálogo (equivalente ao que estava no JS) */
.dialog-box.yt-dialog button.btn {
  transition: transform 0.2s ease, background 0.2s ease;
}

.dialog-box.yt-dialog button.btn:hover {
  transform: scale(1.06);
  filter: brightness(1.1);
}

.dialog-box.yt-dialog button.btn-primary {
  background: #007bff;
  color: #fff;
  border: none;
}

.dialog-box.yt-dialog button.btn-primary:hover {
  background: #2196f3;
}

.dialog-box.yt-dialog button.btn-cancel {
  background: #a11;
  color: #fff;
  border: none;
}

.dialog-box.yt-dialog button.btn-cancel:hover {
  background: #d33;
}

/* ============================
   Modal mover arquivo/pasta (moveItem)
   ============================ */

.move-box {
  max-width: 480px;
  width: 100%;
  background: #111;
  border-radius: 8px;
  padding: 16px;
}

/* Barra de navegação: botão voltar + caminho */
.move-box .move-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.move-box #currentPath {
  font-family: monospace;
  font-size: 0.9rem;
}

/* Lista de pastas */
.move-box .move-list {
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 12px;
}

/* Botão de destino (subpasta) */
.move-box .move-list .move-dest {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid #333;
  border-radius: 4px;
  color: #eee;
  cursor: pointer;
  margin-bottom: 4px;
}

.move-box .move-list .move-dest:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Texto quando não há subpastas */
.move-box .move-list .move-empty {
  opacity: 0.6;
  padding: 8px;
  font-size: 0.9rem;
}

/* Ações de mover / cancelar */
.move-box .move-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.input-hidden {
  display: none !important;
}


#btn-repeat,
#btn-shuffle,
#btn-mute {
  border: 1px solid #555;
}

#btn-repeat.is-on,
#btn-shuffle.is-on,
#btn-mute.is-on {
  border-color: crimson;
}

/* Por padrão, nada disso aparece (a gente liga por tipo) */
.player-container .vinil,
.player-container #video-container,
.player-container .yt-wrap {
  display: none;
}

.player-container.media-audio .vinil {
  display: block;
}

/* Se quiser garantir: */
.player-container.media-audio #video-container,
.player-container.media-audio .yt-wrap {
  display: none;
}

.player-container.media-video #video-container {
  display: block;
}

.player-container.media-video .vinil,
.player-container.media-video .yt-wrap {
  display: none;
}

.player-container.media-youtube .yt-wrap {
  display: block;
}

.player-container.media-youtube .vinil,
.player-container.media-youtube #video-container {
  display: none;
}

/* Centraliza o miolo do player no painel direito (modo normal) */
.player-container.media-audio.view-normal,
.player-container.media-video.view-normal,
.player-container.media-youtube.view-normal {
  justify-content: center;
}

/* Coluna esquerda: empilha toolbar + lista + paginação */
.audios-left {
  display: flex;
  flex-direction: column;

  /* permite que os filhos “encolham” para o scroll funcionar */
  min-height: 0;
}

/* Toolbar não encolhe nem rola */
.audios-toolbar {
  flex-shrink: 0;
}

/* AQUI nasce a barra de rolagem só da lista/grid */
.audios-list {
  flex: 1 1 auto;
  min-height: 0;          /* bug clássico do flex: sem isso, não rola */
  overflow-y: auto;       /* gera a barra vertical quando precisar */
  overflow-x: hidden;     /* só pra garantir que não apareça scroll horizontal feio */
  padding-right: 4px;     /* espaço pro scroll não “comer” os cards */
}


/* =========================
   Scrollbar do painel esquerdo
   ========================= */
.audios-list {
  /* Firefox */
  scrollbar-width: auto;                         /* mais grossa que o "thin" */
  scrollbar-color: rgba(160,160,160,0.8)
                   transparent;
}

/* Chrome, Edge, Opera, etc. */
.audios-list::-webkit-scrollbar {
  width: 16px;                                   /* ← AQUI você engrossa */
}

.audios-list::-webkit-scrollbar-track {
  background: transparent;                       /* trilho discreto */
}

.audios-list::-webkit-scrollbar-thumb {
  background: rgba(180,180,180,0.75);           /* “cor” da barra */
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.4);            /* cria efeito de barra arredondada */
}

.audios-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.9);            /* destaque ao passar o mouse */
}

/* Deixar os cards/pastas imunes a seleção de texto */
.audios-left,
.audios-left * {
  -webkit-user-select: none;  /* Chrome / Edge / Safari */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* IE/Edge velho */
  user-select: none;

  -webkit-touch-callout: none; /* bloqueia menu de toque em mobile/iOS */
}

/* Botões de navegação do player nascem sempre escondidos.
   Quem decide mostrar é só o CSS mobile. */
.audios-back-btn,
.audios-floating-player-btn {
  display: none;
}

#neo-global-player-host.neo-docked .player-container.view-normal .vinil-controls{
  position: absolute !important;
  top: clamp(-28px, -8vh, 1px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 50 !important;
}

/* garante que o topo use a mesma largura do painel */
#neo-global-player-host.neo-docked .player-container.view-normal .player-top{
  width: 100% !important;
}


/* 2) Estrutura do painel direito: o slot precisa ser o "corpo" (flex:1) */
.audios-right{
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;          /* elimina a folga que vira “sobra à direita” */
  overflow: hidden !important;
}

/* 3) O slot precisa ocupar tudo */
#audios-player-slot{
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}



/* ============================================================
   PATCH (DESKTOP) — GRID: toolbar em 2 linhas + pager fixo no fundo
   IMPORTANTe: seu DOM usa .audios-wrap (NÃO existe #audios-root)
   ============================================================ */

/* Left panel vira coluna “real” e não deixa filhos empurrarem o rodapé */
.audios-wrap .audios-left{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

/* Toolbar pode quebrar em 2 linhas */
.audios-wrap .audios-toolbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--pad-sm);
  flex-wrap:wrap;
}

/* No desktop, o caminho vira uma linha “de baixo” (abaixo dos botões) */
@media (min-width: 900px){
  

  /* força o caminho a ocupar a linha de baixo inteira */
  .audios-wrap .audios-toolbar .audios-path{
    flex: 1 1 100%;
    order: 99;
    text-align: left;
    margin: 0;
    padding: 6px 2px 0;
    opacity: .92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* A lista ocupa “todo o meio” entre toolbar e pager */
.audios-wrap .audios-list{
  flex:1 1 auto;
  min-height:0;
}

/* No grid com paginação: sem scroll empurrando o pager pra fora */
.audios-wrap .audios-list.grid-mode{
  overflow: hidden;
  align-content: start !important;
  grid-auto-flow: row !important;
}

/* Estabiliza altura do card no GRID para evitar cálculo/encaixe irregular */
.audios-wrap .audios-list.grid-mode .audios-card{
  height: clamp(92px, 11vh, 118px);
}

/* Pager sempre dentro do painel, colado no fundo e centralizado */
.grid-nav{
  flex:0 0 auto;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 8px 10px;
  margin-top: 8px;

  position: sticky;
  bottom: 0;
  z-index: 20;

  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.audios-grid-nav:empty{ display:none; }

.audios-grid-nav .grid-pager{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

.audios-grid-nav .grid-pager .grid-page-indicator{
  min-width: 70px;
  text-align:center;
}


/* ============================================================
   DESKTOP — Toolbar em 2 linhas
   (botões em cima / caminho da pasta embaixo)
   ============================================================ */

@media (min-width: 1001px){

  /* a toolbar precisa permitir quebra de linha */
  .audios-left .audios-toolbar{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;          /* ajuda se existirem subgrupos */
    padding-left: 10px !important; /* ajuste aqui */
    padding-right: 10px !important;
  }

  .audios-left .audios-toolbar .audios-path{
    display: block !important;
    width: 100% !important;
    margin-top: .25rem !important;
    padding: .15rem .25rem !important;

    text-align: center !important;
    font-size: clamp(12px, 0.9vw, 14px) !important;
    opacity: .9 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .audios-toolbar .toolbar-left{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px !important;          /* ajuste aqui */
  }

  /* caminho da pasta embaixo (segunda linha) */
  .audios-toolbar .toolbar-right{
    flex: 0 0 100%;
    order: 2;
    margin-top: 8px;
    justify-content: flex-start; /* se quiser à direita: flex-end */
  }

  /* garante que o botão YouTube NÃO ganhe espaçamento “auto” */
  #audios-yt-add{
    margin-left: 0 !important;
  }

  /* Visual de “apagado” quando desativado */
  .audios-wrap #audios-upload:disabled{
    opacity: .35;
    filter: grayscale(1);
    cursor: not-allowed;
  }
    
}


/* ============================================================
   FIX: “MENU ⋮ FANTASMA” NO GRID (sobreposição / tremedeira)
   - Prende o botão ⋮ dentro de cada .audios-card no modo Grid
   ============================================================ */

.audios-list.grid-mode .audios-card{
  position: relative; /* âncora para posicionamento do menu do card */
}

.audios-list.grid-mode .audios-card .card-menu{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* “hitbox” estável (evita tremedeira por variação de layout) */
.audios-list.grid-mode .audios-card .menu-btn{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 10px;
  background: transparent !important;
  box-shadow: none !important;
}

.audios-list.grid-mode .audios-card .menu-btn:hover{
  background: rgba(255,255,255,0.10) !important;
}

/* opcional: evita o ⋮ “empurrar” o conteúdo do card no grid */
.audios-list.grid-mode .audios-card .card-icon{
  margin-top: 10px;
}

/* Grid: NÃO use margin-bottom para “reservar espaço” (isso reduz clientHeight e derruba pageSize) */
.audios-list.grid-mode{
  margin-bottom: 0 !important;
}