.nexus-music-control {
  position: fixed;
  z-index: 120;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(111, 216, 255, .55);
  border-radius: 50%;
  color: #dff8ff;
  background: rgba(3, 14, 31, .68);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .32), inset 0 0 18px rgba(69, 183, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.nexus-music-control:hover,
.nexus-music-control:focus-visible {
  border-color: rgba(255, 224, 151, .9);
  background: rgba(7, 31, 58, .86);
  transform: translateY(-1px);
  outline: none;
}

.nexus-music-control span {
  font: 700 20px/1 Georgia, serif;
  transform: translateY(-1px);
}

.nexus-music-control i {
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #78e3ff;
  box-shadow: 0 0 8px #5cd7ff;
  opacity: .35;
}

.nexus-music-control.is-playing i {
  opacity: 1;
  animation: nexus-music-pulse 1.8s ease-in-out infinite;
}

.nexus-music-control.is-muted::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 1px;
  background: rgba(255, 183, 183, .92);
  transform: rotate(-45deg);
}

@keyframes nexus-music-pulse {
  50% { transform: scale(1.45); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .nexus-music-control,
  .nexus-music-control i { transition: none; animation: none; }
}