/* CDMP3 — Player Global · Dark Theme */

/* ─── MINIMIZED BAR ────────────────────────────────────────── */
.player-mini {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 32px;
  background: rgba(18,18,18,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.06);
  z-index: 92;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.player-mini.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.player-mini-btn {
  background: none; border: none; color: #727272;
  cursor: pointer; padding: 4px 16px; font-size: .8rem;
  transition: color .2s;
  display: flex; align-items: center; gap: 6px;
}
.player-mini-btn:hover { color: var(--accent, #e50914); }
.player-mini-btn::before {
  content: 'Player de Música';
  font-size: .68rem;
  color: #555;
  font-weight: 500;
}
.player-mini-btn:hover::before { color: #888; }

/* Minimize button inside player bar */
.player-btn-minimize {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  background: rgba(18,18,18,.95); border: 1px solid rgba(255,255,255,.08);
  border-bottom: none; border-radius: 6px 6px 0 0;
  color: #727272; cursor: pointer; width: 36px; height: 26px;
  font-size: .7rem; z-index: 93;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, color .2s;
}
.player-btn-minimize:hover { color: var(--accent, #e50914); }
.player-bar.active .player-btn-minimize {
  opacity: 1; pointer-events: auto;
}

/* Player states — desliza por cima do menu */
.player-bar {
  position:fixed;bottom:0;left:0;right:0;
  height:var(--player-h,80px);
  background:rgba(18,18,18,.98);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.08);
  z-index:91;
  display:flex;align-items:center;padding:0 20px;gap:20px;
  box-shadow:0 -4px 24px rgba(0,0,0,.5);
  transform:translateY(100%);
  opacity:0;
  transition:transform .3s ease,opacity .3s ease;
}
.player-bar.active {
  transform:translateY(0);
  opacity:1;
}
.player-bar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent,#e50914),transparent)}

/* Info (left) */
.player-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0;position:relative}
.player-cover{width:50px;height:50px;border-radius:6px;object-fit:cover;background:var(--bg3,#1a1a1a);flex-shrink:0;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.4);transition:transform .2s;border:1px solid rgba(255,255,255,.08)}
.player-cover:hover{transform:scale(1.05)}
.player-meta{min-width:0}
.player-title{font-size:.84rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:#fff;transition:color .2s}
.player-title:hover{color:var(--accent,#e50914)}
.player-artist{font-size:.73rem;color:#727272;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.player-artist a{color:inherit;transition:color .2s}
.player-artist a:hover{color:var(--accent,#e50914)}
.player-like-btn{background:none;border:none;color:#727272;cursor:pointer;padding:7px;font-size:.95rem;transition:.18s;flex-shrink:0;border-radius:50%}
.player-like-btn:hover{color:#dc2626;background:rgba(220,38,38,.1)}
.player-like-btn.liked{color:#dc2626}
.player-like-btn.liked i{animation:heartPop .35s ease}
@keyframes heartPop{0%{transform:scale(1)}30%{transform:scale(1.35)}100%{transform:scale(1)}}

/* Controls (center) */
.player-controls{display:flex;flex-direction:column;align-items:center;gap:7px;flex:2;min-width:0;max-width:520px}
.player-btns{display:flex;align-items:center;gap:6px}
.player-btn{background:none;border:none;color:#727272;cursor:pointer;font-size:.95rem;width:34px;height:34px;border-radius:50%;transition:.18s;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.player-btn:hover{color:#fff;background:rgba(255,255,255,.07)}
.player-btn.active{color:var(--accent,#e50914)}
.player-btn-main{width:42px;height:42px;background:var(--accent,#e50914);color:#fff !important;border-radius:50%;font-size:.95rem;box-shadow:0 4px 16px rgba(229,9,20,.4);transition:transform .15s,box-shadow .15s,background .15s}
.player-btn-main:hover{transform:scale(1.08);box-shadow:0 6px 22px rgba(229,9,20,.55);background:#ff2030 !important}
.player-btn-main:active{transform:scale(.97)}

/* Progress bar */
.player-progress{display:flex;align-items:center;gap:9px;width:100%}
.player-time{font-size:.7rem;color:#727272;width:36px;text-align:center;flex-shrink:0;font-variant-numeric:tabular-nums}
.progress-bar{flex:1;height:3px;background:rgba(255,255,255,.1);border-radius:99px;cursor:pointer;position:relative;transition:height .15s}
.progress-bar:hover{height:5px}
.progress-fill{height:100%;background:var(--accent,#e50914);border-radius:99px;width:0%;pointer-events:none;position:relative;transition:width .1s linear}
.progress-bar:hover .progress-fill::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;background:var(--accent,#e50914);border-radius:50%;box-shadow:0 0 6px rgba(229,9,20,.6)}

/* Volume (right) */
.player-volume{display:flex;align-items:center;gap:7px;flex:1;justify-content:flex-end}
.player-volume .player-btn{font-size:.9rem}
.volume-bar{width:76px;height:3px;background:rgba(255,255,255,.1);border-radius:99px;cursor:pointer;position:relative;transition:height .15s}
.volume-bar:hover{height:5px}
.volume-fill{height:100%;background:rgba(255,255,255,.3);border-radius:99px;width:80%;pointer-events:none;transition:background .2s}
.volume-bar:hover .volume-fill{background:var(--accent,#e50914)}

.player-queue-btn{background:none;border:none;color:#727272;cursor:pointer;padding:7px;font-size:.85rem;border-radius:50%;transition:.18s}
.player-queue-btn:hover{color:#fff;background:rgba(255,255,255,.07)}
.player-queue-btn.active{color:var(--accent,#e50914)}

/* Queue drawer */
.queue-drawer{position:fixed;bottom:var(--player-h,80px);right:14px;width:320px;max-height:460px;background:#1e1e1e;border:1px solid rgba(255,255,255,.08);border-radius:10px 10px 0 0;overflow:hidden;z-index:999;display:none;box-shadow:0 -4px 24px rgba(0,0,0,.6);animation:queueSlideUp .2s ease}
@keyframes queueSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.queue-drawer.open{display:flex;flex-direction:column}
.queue-header{padding:12px 16px;font-size:.84rem;font-weight:700;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:#1a1a1a}
.queue-header .queue-count{color:#727272;font-size:.72rem;font-weight:400}
.queue-list{padding:6px;overflow-y:auto;flex:1}
.queue-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:7px;cursor:pointer;transition:background .15s}
.queue-item:hover{background:#282828}
.queue-item.active{background:rgba(229,9,20,.1)}
.queue-item img{width:40px;height:40px;border-radius:5px;object-fit:cover;flex-shrink:0}
.queue-item-info{flex:1;min-width:0}
.queue-item-title{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.queue-item-artist{font-size:.72rem;color:#727272;margin-top:1px}
.queue-item.active .queue-item-title{color:var(--accent,#e50914)}
.queue-item-num{font-size:.72rem;color:#727272;width:18px;text-align:center;flex-shrink:0}
.queue-item.active .queue-item-num{display:none}
.queue-item .eq-icon{display:none}
.queue-item.active .eq-icon{display:inline-flex}

/* Equalizer */
.eq-icon{display:inline-flex;gap:2px;align-items:flex-end;height:13px}
.eq-icon span{width:3px;background:var(--accent,#e50914);border-radius:1px;animation:eqBar .8s ease infinite}
.eq-icon span:nth-child(1){animation-duration:.9s}
.eq-icon span:nth-child(2){animation-delay:.15s;animation-duration:.7s}
.eq-icon span:nth-child(3){animation-delay:.3s;animation-duration:1s}
@keyframes eqBar{0%,100%{height:3px}50%{height:13px}}

/* ─── RESPONSIVO ────────────────────────────────────────────── */

/* Tablet: esconde volume, distribui espaço */
@media (max-width: 900px) {
  .player-bar { padding: 0 14px; gap: 10px; }
  .player-volume { display: none; }
  .player-info { flex: 0 1 auto; }
  .player-controls { flex: 2 1 auto; max-width: 440px; }
  .player-meta { max-width: 160px; }
}

/* Mobile (até 600px): layout mais compacto */
@media (max-width: 600px) {
  .player-bar {
    padding: 0 10px;
    gap: 8px;
    height: var(--player-h, 72px);
  }

  /* Info: cover menor + meta truncado */
  .player-info {
    flex: 0 1 auto;
    gap: 8px;
    max-width: 46%;
  }
  .player-cover {
    width: 40px;
    height: 40px;
    border-radius: 5px;
  }
  .player-meta {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .player-title {
    font-size: .78rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .player-artist {
    font-size: .68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Like: botão pequeno, fixo à direita da capa */
  .player-like-btn {
    position: absolute;
    right: -4px;
    top: -4px;
    padding: 5px 6px;
    font-size: .72rem;
    background: rgba(18,18,18,.9);
    border-radius: 50%;
    color: #727272;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
  }
  .player-like-btn:hover { background: rgba(40,40,40,.95); }
  .player-like-btn.liked { color: #dc2626; background: rgba(220,38,38,.12); }

  /* Controles: compactos */
  .player-controls {
    flex: 2 1 auto;
    gap: 4px;
    min-width: 0;
  }
  .player-btns { gap: 2px; }
  .player-btn { width: 30px; height: 30px; font-size: .82rem; }
  .player-btn-main { width: 36px; height: 36px; font-size: .85rem; }

  /* Progresso */
  .player-progress { gap: 5px; }
  .player-time { width: 28px; font-size: .64rem; }

  /* Queue drawer full-width */
  .queue-drawer {
    width: 100%;
    right: 0;
    left: 0;
    border-radius: 12px 12px 0 0;
  }
}

/* Pequeno (até 420px): máxima compactação */
@media (max-width: 420px) {
  .player-bar {
    padding: 0 8px;
    gap: 6px;
    height: 64px;
  }
  :root { --player-h: 64px; }

  /* Info: micro */
  .player-info {
    max-width: 44%;
    gap: 6px;
  }
  .player-cover {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }
  .player-title { font-size: .73rem; }
  .player-artist { font-size: .64rem; }

  .player-like-btn {
    right: -3px;
    top: -3px;
    width: 22px;
    height: 22px;
    padding: 3px 4px;
    font-size: .65rem;
  }

  /* Botões: esconde shuffle/repeat */
  #btn-shuffle, #btn-repeat { display: none; }
  .player-btns { gap: 4px; }
  .player-btn { width: 28px; height: 28px; font-size: .76rem; }
  .player-btn-main { width: 34px; height: 34px; font-size: .8rem; }

  /* Sem labels de tempo */
  .player-time { display: none; }
  .player-progress { gap: 0; }
}

/* Menu mobile sempre no fundo */
.mobile-bottom-nav{bottom:0 !important;z-index:90}