/* =============================================================================================
   ARQUIVO: css/componentes/player.css - CONSOLE RÁDIO PRO (GRID INDESTRUTÍVEL) v0.3.2
   ============================================================================================= */

   .floating-player {
    position: fixed;
    bottom: 1rem;
    left: 4%;
    width: 92%;
    height: 4.6rem; /* Altura perfeita para abrigar a excursão do fader vertical */
    background: rgba(46, 46, 46, 0.2); /* Grafite analógico denso translúcido */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(0, 255, 255, 0.35); /* Linha de LED ciano superior */
    border-radius: 0.8rem;
    box-sizing: border-box;
    z-index: 1000;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.75);
  
    /* 📊 MATRIZ GRID: Divisão milimétrica indestrutível para mobile portrait */
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.6fr; /* Letreiro / Botões / Fader + Ícone */
    align-items: center;
    padding: 0 1.15rem;
    gap: 0.4rem;
  
    /* 🟢 TRANSIÇÃO REVERSA SUAVE: Garante o retorno macio ao Modo Painel (0.8 segundos) */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease !important;
  }
  
  /* --------------------------------------------------------------------------
     1️⃣ COLUNA ESQUERDA: LETREIRO FLUTUANTE PREMIUM VERDE NEON BLINDADO
     -------------------------------------------------------------------------- */
  .player-track-info { 
    display: flex; 
    align-items: center; 
    gap: 0.4rem; 
    width: 100%; 
    position: relative; /* Base estável para a órbita do letreiro */
    cursor: pointer;
    min-width: 0; /* 🔒 FORÇA CENTRAL DO GRID: Permite que o texto quebre e respeite a fração 1.3fr */
    overflow: visible !important; 
  }
  
  /* ⚡ FILETE DE LED: Indicador marginal vertical de presença de sinal */
  .mini-led-status { 
    width: 4px; 
    height: 1.8rem; 
    background: var(--neon-cyan); 
    border-radius: 2px; 
    box-shadow: 0 0 6px var(--neon-cyan); 
    transition: background-color 0.2s, box-shadow 0.2s; 
    flex-shrink: 0; 
  }
  
  /* Estado Pausado (Standby vermelho) */
  .mini-led-status.paused { 
    background: #ff3b30; 
    box-shadow: 0 0 6px #ff3b30; 
  }
  
  /* Caixa de gerenciamento de textos - Fluida e limpa em repouso */
  .text-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0; /* Impede o avanço do texto sobre o layout externo */
    overflow: hidden; /* Mantém o corte limpo em repouso */
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* ⚡ O SALTO DO TEXTO: Eleva o bloco. Removido o ":active" para não prender no toque do celular */
  .player-track-info:hover .text-info {
    transform: translateY(-16px); /* Eleva o bloco acima da linha de corte do footer */
    overflow: visible !important; /* Desativa o corte para o texto aparecer por inteiro */
    z-index: 1020;
  }
  
  .text-info p.audio-title { 
    color: #fff; 
    font-size: 0.72rem; 
    font-family: monospace; 
    margin: 0; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; /* Reticências ativas em repouso */
    transition: all 0.2s ease;
    max-width: 100%; /* Força o limite rígido da largura do contêiner pai */
  }
  
  /* 🟢 EXIBIÇÃO DO TEXTO VERDE NEON EXPANDIDO SEM ESMAGAR O CONSOLE */
  .player-track-info:hover p.audio-title {
    color: #00ff66 !important; /* Verde nível seguro analógico */
    text-shadow: 0 0 6px #00ff66 !important; /* Brilho de fósforo digital */
    white-space: normal; /* Rompe o corte horizontal e abre o texto todo */
    overflow: visible !important;
    background: #1a1a1a; /* Caixa preta protetora para isolar a leitura de fundos do site */
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #00ff66;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); /* Destaca a caixa acima do chassi */
    margin-top: -10px; 
    display: block;
    
    /* 🔒 REGLA ANTIESMAGAMENTO: Garante leitura total em pop-up sem alargar a coluna mestre */
    position: absolute;
    left: 12px;
    width: 170px;
    max-width: 170px; 
  }
  
  /* Ajuste fino para telas extremamente pequenas de celulares compactos */
  @media screen and (max-width: 360px) {
    .player-track-info:hover p.audio-title {
      width: 160px;
      max-width: 160px;
    }
  }
  
  .text-info small.audio-category { 
    color: var(--text-muted); 
    font-size: 0.8rem; 
    font-family: sans-serif; 
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* --------------------------------------------------------------------------
     2️⃣ COLUNA CENTRAL: BOTOEIRA DE COMANDO DE ALTA USABILIDADE DE METAL
     -------------------------------------------------------------------------- */
  .player-hardware-controls { 
    display: flex; 
    gap: 0.45rem; 
    align-items: center; 
    justify-content: center;
    min-width: 85px; /* Não deixa os botões centrais sumirem ou esmagarem */
    flex-shrink: 0;
  }
  
  /* Corpo físico esférico dos botões */
  .player-btn {
    background: #181818;
    border: 1px solid #282828;
    border-radius: 50%;
    width: 2.3rem; 
    height: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 4px #0a0a0a, inset 1px 1px 1px rgba(255,255,255,0.03);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    flex-shrink: 0;
  }
  .player-btn svg { width: 1rem; height: 1rem; fill: #aaa; transition: fill 0.2s; }
  
  .player-btn:active {
    box-shadow: inset 2px 2px 4px #0a0a0a;
    transform: scale(0.92);
  }
  
  .player-btn.active-led svg {
    fill: var(--neon-cyan);
    filter: drop-shadow(0 0 4px var(--neon-cyan));
  }
  
  #btn-play { width: 2.5rem; height: 2.5rem; }
  #btn-play svg { width: 1.15rem; height: 1.15rem; }
  
  /* --------------------------------------------------------------------------
     3️⃣ COLUNA DIREITA: FADER LONGO COM ÍCONE EM ALTA USABILIDADE À DIREITA
     -------------------------------------------------------------------------- */
  .volume-hardware-rack {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 0.4rem; 
    min-width: 65px; /* Protege a área do potenciômetro vertical */
    flex-shrink: 0;
    position: relative;
  }
  
  /* Sob interação na área de volume, o fader se projeta para cima sem amassar o grid */
  .volume-hardware-rack:hover,
  .volume-hardware-rack:focus-within {
    z-index: 1030;
  }
  
  .volume-svg-wrapper { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0;
  }
  
  .volume-svg-wrapper svg {
    width: 1.1rem; 
    height: 1.1rem;
    fill: var(--neon-cyan);
    filter: drop-shadow(0 0 3px var(--neon-cyan));
    opacity: 0.7;
  }
  
  .console-fader {
    -webkit-appearance: none;
    appearance: none;
    writing-mode: vertical-lr; 
    direction: rtl; 
    width: 0.25rem; 
    height: 3.1rem; 
    background: #0d0d0d;
    border-radius: 2px;
    border: 1px solid #222;
    outline: none;
    transition: width 0.15s ease-in-out, height 0.2s ease, transform 0.15s ease-in-out;
    cursor: pointer;
    flex-shrink: 0;
  }
  
  /* ⚡ O SALTO DO POTENCIÔMETRO: Expansão vertical confortável sob interação */
  .volume-hardware-rack:hover .console-fader,
  .volume-hardware-rack:focus-within .console-fader {
    height: 4.8rem; /* Estende o curso físico para calibração milimétrica */
    width: 0.55rem;
    background: #000;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 8px rgba(0,255,255,0.2);
    margin-top: -15px; /* Projeta suavemente para fora do chassi */
  }
  
  .console-fader::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0.8rem; 
    height: 0.4rem; 
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 1px;
    box-shadow: 1px 1px 3px #000, inset 1px 1px 1px rgba(255,255,255,0.1);
    cursor: pointer;
  }