/* =====================================================================
   audio-player.css — player flutuante na barra inferior
   ===================================================================== */

.audio-player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 62;
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem max(1rem, env(safe-area-inset-left)) calc(.5rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0,0,0,.12);
}
.audio-player[hidden] { display: none; }

/* empurra o conteúdo para o player não cobrir o rodapé */
body.has-player .app-footer { margin-bottom: 76px; }
body.has-player .resume-toast,
body.has-player .toast { bottom: 5.5rem; }

/* ---------- Controles ---------- */
.ap-controls { display: flex; align-items: center; gap: .15rem; flex: 0 0 auto; }
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ap-btn:hover { background: var(--accent-soft); color: var(--accent); }
.ap-btn:disabled { opacity: .35; cursor: default; }
.ap-btn:disabled:hover { background: transparent; color: var(--text); }

.ap-btn.play {
  width: 48px; height: 48px;
  background: var(--accent); color: #fff;
}
.ap-btn.play:hover { background: var(--accent); filter: brightness(1.1); color: #fff; }

/* ---------- Parte central (título + seek) ---------- */
.ap-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.ap-title {
  font-size: .9rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-title.unavailable { color: var(--muted); font-weight: 500; font-style: italic; }
.ap-seek { display: flex; align-items: center; gap: .6rem; }
.ap-time { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; min-width: 2.4rem; }
.ap-time:last-child { text-align: right; }

/* barra de progresso (range estilizado) */
#apSeek {
  flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
  background: var(--border); border-radius: 4px; cursor: pointer;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat; background-size: 0% 100%;
}
#apSeek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#apSeek::-moz-range-thumb {
  width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%;
  background: var(--accent);
}

/* ---------- Extra (velocidade / fechar) ---------- */
.ap-extra { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
.ap-rate {
  border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text); cursor: pointer;
  font-weight: 700; font-size: .8rem; padding: .35rem .5rem; min-width: 40px;
}
.ap-rate:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Mobile ---------- */
@media (max-width: 680px) {
  .audio-player { gap: .5rem; padding: .4rem .6rem calc(.4rem + env(safe-area-inset-bottom)); }
  .ap-btn.back15, .ap-btn.fwd15 { display: none; } /* economiza espaço */
  .ap-btn { width: 36px; height: 36px; }
  .ap-btn.play { width: 44px; height: 44px; }
  .ap-title { font-size: .82rem; }
  body.has-player .app-footer { margin-bottom: 70px; }
}