/* Mobile-specific styles for improved touch interactions
 * These styles enhance button interactions on iOS and Android devices
 */

/* Active state for buttons when touched */
.button-active,
button:active,
a.btn:active,
[role="button"]:active {
  transform: scale(0.97);
  opacity: 0.9;
  transition:
    transform 0.1s ease,
    opacity 0.1s ease;
}

/* Feedback for player controls */
.player-control-highlight {
  transform: scale(0.97);
  opacity: 0.8;
  background-color: rgba(128, 128, 128, 0.1);
  border-radius: 9999px;
  transition: all 0.2s ease;
}

/* Prevent unintended zooming and double-tap behaviors on iOS */
button,
[role="button"],
.fixed-header a,
input[type="button"],
input[type="submit"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Enhanced touch targets for mobile - make interactive elements easier to touch */
@media (max-width: 767px) {
  button,
  [role="button"],
  .fixed-header a,
  input[type="button"],
  input[type="submit"],
  input[type="range"],
  .play-button {
    min-height: 44px; /* Apple's recommended minimum touch target size */
    min-width: 44px;
  }

  /* Ensure proper spacing between touch targets */
  nav button,
  nav [role="button"],
  nav a {
    margin: 0.25rem 0;
  }

  /* Fix for iOS Safari inputs */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
  }

  /* Fix for button icon alignment on small screens */
  button svg,
  [role="button"] svg {
    pointer-events: none;
  }

  /* Improve scrolling behavior */
  .overflow-scroll {
    -webkit-overflow-scrolling: touch;
  }

  /* iOS Safari specific enhancements */
  @supports (-webkit-touch-callout: none) {
    /* Safari iOS specific styles */
    #player-seek,
    #player-volume {
      opacity: 0.85; /* Make range inputs slightly more visible */
    }

    /* Fix for text selection on double-tap */
    * {
      -webkit-touch-callout: none;
    }
  }
}

/* Animated feedback for audio player buttons */
#player-play-pause:active,
#player-backward:active,
#player-forward:active,
#player-mini-play-pause:active,
#player-expand-collapse:active {
  transform: scale(0.95);
  opacity: 0.85;
  transition:
    transform 0.1s ease,
    opacity 0.1s ease;
}

#player-expand-collapse:active {
  transform: rotate(0deg);
}

/* Make sure all play buttons respond well on touch */
[data-play-button-stream-url-value] {
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

[data-play-button-stream-url-value]:active,
[data-play-button-stream-url-value].button-active {
  transform: scale(0.97);
  background-color: rgba(13, 148, 136, 0.1); /* teal-500 with low opacity */
}

/* Apply playing state visually for audio play buttons */
[data-play-button-stream-url-value].playing {
  color: #0d9488 !important; /* teal-600 */
}

.dark [data-play-button-stream-url-value].playing {
  color: #2dd4bf !important; /* teal-400 for dark mode */
}

/* Mobile player layout */
#mobile-mini-player {
  position: relative;
  align-items: center;
  width: 100%;
  min-height: 60px;
  margin: 1px 0;
  gap: 0.5rem;
}

/* Title block styles */
.title-block {
  min-width: 0em;
  flex: 1;
  transition: all 0.5s ease;
}

/* Hide title when controls are visible */
.mobile-controls.visible-controls ~ .title-block {
  min-width: 1rem;

  pointer-events: none;
  position: absolute;
}

/* Title text truncation */
#player-mini-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
}

/* Controls positioning */
.mobile-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
  padding-right: 0.5rem;
  background: var(--background);
  z-index: 20;
}

.mobile-controls.hidden-controls {
  transform: translateX(calc(100% + 0.5rem));
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.mobile-controls.visible-controls {
  transform: translateX(0);
  opacity: 1;
  width: 100%;
  justify-content: space-between;
  pointer-events: auto;
  position: relative;
}

/* Show controls button positioning and animation */
.show-controls-button {
  position: relative;
  right: 0.5rem;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.3s ease;
  padding: 0.5rem;
  border-radius: 9999px;
  background-color: rgba(128, 128, 128, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mobile-controls.visible-controls ~ .show-controls-button {
  transform: scaleX(-1);
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

/* Ensure all mobile player buttons have proper touch targets */
#mobile-mini-player button {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure expand/collapse button is always visible and touchable */
#player-expand-collapse {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 25;
  transform: rotate(180deg);
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Add touch feedback for mobile buttons */
#mobile-mini-player button:active {
  transform: scale(0.95);
  opacity: 0.9;
  transition:
    transform 0.1s ease,
    opacity 0.1s ease;
}

/* Slide animation for volume control */
.mobile-volume-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transform-origin: right;
  transition: all 0.3s ease;
  overflow: hidden;
  width: auto;
  opacity: 1;
  margin-right: 0.5rem;
  background-color: rgba(128, 128, 128, 0.1);
  padding: 0.25rem;
  border-radius: 9999px;
}

.mobile-volume-control.collapsed {
  width: 44px;
  margin-right: 0;
  padding: 0;
}

.mobile-volume-control.collapsed .volume-slider-container {
  width: 0;
  margin: 0;
  opacity: 0;
}

.mobile-volume-control .volume-slider-container {
  position: relative;
  width: 80px;
  height: 44px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  opacity: 1;
}

.mobile-volume-control .volume-slider-bg {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background-color: rgba(128, 128, 128, 0.2);
  border-radius: 2px;
}

.mobile-volume-control .volume-slider-fill {
  position: absolute;
  left: 0;
  height: 4px;
  background-color: currentColor;
  border-radius: 2px;
  transition: width 0.1s ease;
}

.mobile-volume-control .volume-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* Active state feedback for volume controls */
#player-mobile-mute:active,
.mobile-volume-control .volume-slider:active + .volume-slider-fill {
  transform: scale(0.95);
  opacity: 0.8;
}