/* Audio Player Styles */
[data-controller="audio-player"] {
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

/* iOS Safari viewport fix */
@supports (-webkit-touch-callout: none) {
  html {
    height: -webkit-fill-available;
  }

  body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

[data-controller="audio-player"]:not(.minimized) {
  transform: translateY(0);
}

[data-controller="audio-player"].minimized {
  transform: translateY(calc(100% - 60px));
}

/* Loading animation for play button */
.btn .loading {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Progress bar */
[data-audio-player-target="progressBar"] {
  transition: width 0.5s linear;
}

/* Minimize/maximize button */
.minimize-btn {
  position: absolute;
  top: -24px;
  right: 1rem;
  background: white;
  border-radius: 50% 50% 0 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Status message */
.status-message {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  margin: 0 auto;
  max-width: 80%;
  z-index: 10;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  [data-controller="audio-player"] {
    padding: 0.75rem;
  }

  .song-info {
    max-width: 180px;
  }
}