.audio-player-widget {
  position: fixed;
  z-index: var(--z-audio-player);
  background: transparent;
  transition: all 0.3s ease;
  border:none;
}

.audio-player-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 3px dashed rgb(220, 150, 150);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  box-shadow: var(--shadow-lg);
}

.audio-player-title {
  font-size: clamp(0.75rem, 2vw, 1rem);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 auto var(--space-sm) auto;
  text-align: center;
  width: max-content;
  max-width: 100%;
}

.audio-player-controls {
  width: 100%;
  margin: 0;
  border-radius: var(--radius-lg);
  filter: sepia(20%) saturate(80%) hue-rotate(180deg) brightness(1.1) invert(1);
}

@media (max-width: 240px) {
  .audio-player-widget {
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 1rem);
    max-width: 230px;
  }
  
  .audio-player-card {
    padding: 0.5rem;
  }
  
  .audio-player-title {
    font-size: 0.625rem;
  }
}

@media (min-width: 241px) and (max-width: 767px) {
  .audio-player-widget {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(400px, calc(100vw - 2rem));
  }
}

@media (min-width: 768px) {
  .audio-player-widget {
    top: 7rem;
    right: 1.5rem;
    width: 340px;
  }
  
  .audio-player-card {
    padding: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .audio-player-widget {
    top: 5rem;
    right: 2rem;
    width: 380px;
  }
}

@supports (backdrop-filter: blur(10px)) {
  .audio-player-card {
    background: rgba(255, 255, 255, 0.85);
  }
}