/* Contenedor fijo (respeta safe-area) */
#bb-audio{
  position:fixed;
  right:max(1rem, env(safe-area-inset-right));
  bottom:max(1rem, env(safe-area-inset-bottom));
  z-index:2147483647;
  --bb-offset: 0px;               /* lo actualiza JS si pisa el footer */
  transform:translate3d(0, calc(-1 * var(--bb-offset)), 0);
  transition:transform .18s cubic-bezier(.2,0,0,1);
  pointer-events:auto;
}

/* Cajón de lista */
.bb-drawer{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(72px + var(--bb-offset));
  width:min(900px, calc(100vw - 2rem));
  background:rgba(10,10,10,.96);
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px; padding:.75rem; display:none;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.bb-drawer.open{ display:block; animation:bb-pop 140ms ease-out; }
@keyframes bb-pop{ from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)} }

.bb-now{ display:flex; align-items:center; gap:.5rem; }
.bb-chip{
  font-size:.75rem; opacity:.75; color:#F6F1E9;
  border:1px solid rgba(255,255,255,.18); padding:.1rem .4rem; border-radius:.5rem;
}
.bb-list{ margin:.5rem 0 0 0; padding:0; list-style:none; max-height:220px; overflow:auto; }
.bb-item{
  display:flex; gap:.6rem; align-items:center; padding:.4rem .55rem;
  border-radius:.6rem; cursor:pointer; color:#F6F1E9;
}
.bb-item:hover{ background:rgba(255,255,255,.06); }
.bb-item[aria-current="true"]{ background:rgba(255,225,0,.15); }
.bb-title-tr{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Pill flotante */
.bb-pill{
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  color:#F6F1E9;
  padding:.45rem .8rem; border-radius:9999px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  max-width:min(520px, calc(100vw - 2rem)); /* no tapar enlaces largos */
}

/* Botones: sin círculo sólido, sólo tinte al hover */
.bb-btn{
  appearance:none; background:transparent; border:0; color:inherit;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  padding:6px; border-radius:8px;
}
.bb-btn:hover{ background:rgba(255,255,255,.10); }

/* Iconos */
.bb-ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

/* Pulso si autoplay bloqueado */
.bb-pulse{ animation:bbpulse 1.2s ease-in-out infinite }
@keyframes bbpulse{
  0%{ box-shadow:0 0 0 0 rgba(255,225,0,.6) }
  70%{ box-shadow:0 0 0 12px rgba(255,225,0,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,225,0,0) }
}

audio{ width:100%; margin-top:.5rem }

/* Mobile: oculta título si no cabe */
@media (max-width:640px){
  .bb-drawer{ bottom:calc(64px + var(--bb-offset)); }
  .bb-title{ display:none }
}