/* =========================================================
   Mini reproductor — lo comparten la landing y /hazeandverd,
   por eso vive aparte y trae sus propias variables de repuesto.
   ========================================================= */

.mini {
  --mini-fg:    var(--fg, #f4f4f4);
  --mini-dim:   var(--fg-dim, #6b6b6b);
  --mini-linea: var(--line, rgba(244, 244, 244, 0.1));
  --mini-vivo:  var(--red, #ff2b2b);

  position: fixed; left: var(--pad, 1.5rem); bottom: 1.2rem;
  z-index: 400;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.6rem 1rem 0.6rem 0.6rem;
  background: rgba(14, 14, 14, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid var(--mini-linea);
  border-radius: 100px;
  max-width: min(420px, calc(100vw - 2 * var(--pad, 1.5rem)));
  color: var(--mini-fg);
  font-family: inherit;
}
.mini[hidden] { display: none; }
.mini.is-playing { border-color: color-mix(in srgb, var(--mini-vivo) 40%, transparent); }

.mini__grip {
  width: 10px; height: 22px; flex: none;
  cursor: grab;
  background-image: radial-gradient(circle, var(--mini-dim) 1px, transparent 1px);
  background-size: 4px 5px;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.mini__grip:hover { opacity: 1; }
.mini__grip:active { cursor: grabbing; }

.mini__btn, .mini__next {
  background: none; border: 0; cursor: pointer;
  color: var(--mini-fg);
  display: grid; place-items: center;
  transition: color 0.3s, transform 0.3s;
}
.mini__btn {
  width: 34px; height: 34px;
  border: 1px solid var(--mini-linea); border-radius: 50%;
  font-size: 0.7rem;
}
.mini.is-playing .mini__btn { border-color: var(--mini-vivo); color: var(--mini-vivo); }
.mini__btn:hover, .mini__next:hover { color: var(--mini-vivo); transform: scale(1.08); }
.mini__next { font-size: 0.8rem; color: var(--mini-dim); }

.mini__bars { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.mini__bars i {
  width: 2px; height: 100%;
  transform: scaleY(0.3);
  transform-origin: bottom;
  background: var(--mini-dim);
  transition: background 0.3s;
}
.mini.is-playing .mini__bars i {
  background: var(--mini-vivo);
  animation: miniEq 0.9s ease-in-out infinite alternate;
}
.mini.is-playing .mini__bars i:nth-child(2) { animation-delay: 0.15s; }
.mini.is-playing .mini__bars i:nth-child(3) { animation-delay: 0.3s; }
.mini.is-playing .mini__bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes miniEq {
  from { transform: scaleY(0.25); }
  to   { transform: scaleY(1); }
}

.mini__info { min-width: 0; display: grid; }
.mini__label {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mini-dim);
}
.mini.is-playing .mini__label { color: var(--mini-vivo); }
.mini__title {
  font-size: 0.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 860px) {
  .mini { left: 0.7rem; right: 0.7rem; bottom: 0.7rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mini.is-playing .mini__bars i { animation: none; }
}