/* ============================================================================
   MUSICA DE LA COMUNIDAD EN EL FEED (diapositiva tt-slide-music)
   ============================================================================

   El problema del disco anterior: todas las pistas se veian IGUAL. Casi ninguna
   trae caratula, asi que el vinilo salia siempre con el mismo logo verde sobre
   el mismo panel morado, y la pantalla se leia como un widget de ajustes que se
   pasa de largo.

   Aqui la pista pone el color (su caratula hace de fondo), el titulo pesa, hay
   prueba social de que alguien la escucha y el boton dice con palabras lo que
   va a pasar. Va despues de 14/15, que definen `.tt-player` y `.tt-vinyl`.
   ========================================================================== */

.tt-player {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* El reproductor ocupa el alto libre y su contenido se centra: antes quedaba
     una tarjeta corta arriba y media pantalla en negro debajo, que es justo lo
     que invita a pasar de largo. */
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  gap: 10px;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + 2px);
  border-radius: 26px;
  /* El morado fijo del panel competia con la caratula. Base neutra y que el
     color lo ponga la pista. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)), var(--surface);
  border-color: var(--line);
}

/* Sin portada del proveedor, el "fondo" seria el avatar de quien la comparte, y
   como casi todos usan el mismo logo, todas las pistas salian identicas. En ese
   caso manda el tono derivado del titulo (`--tt-hue`): cada pista llega con su
   color y siempre con el mismo. */
.tt-player.no-art {
  background:
    radial-gradient(120% 80% at 50% 0%, hsl(var(--tt-hue, 84) 62% 42% / 0.42), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    var(--surface);
}

.tt-player.no-art .tt-player-bg {
  display: none;
}

/* El disco tambien toma el tono: es lo primero que mira el ojo. */
.tt-player.no-art .tt-vinyl-disc {
  background:
    repeating-radial-gradient(circle at 50% 50%, hsl(var(--tt-hue, 84) 28% 12%) 0 2px, hsl(var(--tt-hue, 84) 30% 7%) 2px 4px);
}

/* La caratula, ampliada y desenfocada, tine la pantalla entera. Es lo que hace
   que dos pistas distintas se vean distintas. */
.tt-player-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  filter: blur(46px) saturate(1.5);
  opacity: 0.42;
  transform: scale(1.4);
}

.tt-player-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 9, 12, 0.5), rgba(9, 9, 12, 0.9));
}

/* --- Vinilo --------------------------------------------------------------- */

.tt-slide-music .tt-vinyl {
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.6));
}

/* Aro de luz alrededor del plato mientras suena: la pantalla deja de estar
   quieta y se nota que hay algo reproduciendose. */
.tt-player.is-playing .tt-vinyl::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(210, 243, 101, 0.35);
  animation: tt-music-halo 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes tt-music-halo {
  0% {
    transform: scale(0.96);
    opacity: 0.65;
  }
  70%, 100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

/* --- Titulo y autoria ----------------------------------------------------- */

.tt-player-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* Ecualizador: solo aparece cuando suena de verdad. */
.tt-player-eq {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 15px;
  flex: 0 0 auto;
}

.tt-player.is-playing .tt-player-eq {
  display: inline-flex;
}

.tt-player-eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--primary);
  transform-origin: bottom;
  animation: tt-music-eq 780ms ease-in-out infinite alternate;
}

.tt-player-eq i:nth-child(1) { animation-delay: 0ms; }
.tt-player-eq i:nth-child(2) { animation-delay: 160ms; }
.tt-player-eq i:nth-child(3) { animation-delay: 340ms; }
.tt-player-eq i:nth-child(4) { animation-delay: 110ms; }

@keyframes tt-music-eq {
  from { transform: scaleY(0.25); }
  to { transform: scaleY(1); }
}

.tt-player-user-name {
  font-size: 13px;
}

/* --- Prueba social -------------------------------------------------------- */

.tt-player-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tt-player-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tt-player-proof-item i {
  font-size: 11px;
  color: var(--text-soft);
}

/* --- Controles ------------------------------------------------------------ */

/* El boton principal deja de ser un triangulo suelto: con la palabra al lado se
   entiende que es LA accion de la pantalla, no un icono mas. */
.tt-player-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
  min-width: 150px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 800;
}

.tt-player-play-label {
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

.tt-player-controls {
  gap: 18px;
  margin-top: 2px;
}

/* --- Cola ----------------------------------------------------------------- */

/* La cola no pelea por el alto con el reproductor: se queda con lo suyo y hace
   scroll dentro si trae muchas pistas. */
.tt-slide-music .tt-music-list {
  flex: 0 1 auto;
  max-height: 38%;
}

.tt-queue-label {
  color: var(--primary);
}

.tt-slide-music .tt-queue-row {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.tt-slide-music .tt-queue-row:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
}

.tt-slide-music .tt-queue-art {
  border-radius: 12px;
  overflow: hidden;
  /* Misma idea en la cola: sin portada, el hueco toma el color de la pista en
     vez de quedarse en un cuadro gris repetido. */
  background: linear-gradient(160deg, hsl(var(--tt-hue, 84) 55% 34%), hsl(var(--tt-hue, 84) 45% 18%));
  color: rgba(255, 255, 255, 0.85);
}

.tt-slide-music .tt-queue-title {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .tt-player.is-playing .tt-vinyl::after,
  .tt-player-eq i {
    animation: none;
  }

  .tt-player-eq i {
    transform: scaleY(0.6);
  }
}