/* Bible Audio Player - Modern Glass Morphism Design with Drag Support */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* Audio play button on verses */
.audio-play-btn {
   opacity: 0.4;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   border-radius: 50%;
}

.audio-play-btn:hover {
   opacity: 1;
   transform: scale(1.15);
   filter: drop-shadow(0 0 8px hsl(var(--p) / 0.5));
}

.audio-play-btn.playing {
   opacity: 1;
   color: hsl(var(--su));
   animation: audio-glow 2s ease-in-out infinite;
}

/* Verse playing state */
.verse-container.playing,
.verse-card.verse-playing {
   background: linear-gradient(135deg, hsl(var(--su) / 0.1) 0%, hsl(var(--su) / 0.05) 100%) !important;
   border-left: 3px solid hsl(var(--su)) !important;
   box-shadow: 0 4px 20px hsl(var(--su) / 0.15);
   border-radius: 8px;
}

/* Glow animation */
@keyframes audio-glow {
   0%, 100% { 
      transform: scale(1);
      filter: drop-shadow(0 0 4px hsl(var(--su) / 0.4));
   }
   50% { 
      transform: scale(1.1);
      filter: drop-shadow(0 0 12px hsl(var(--su) / 0.6));
   }
}

/* ============================================
   Floating Player - Glass Morphism Style
   ============================================ */

#floating-audio-player {
   font-family: 'Plus Jakarta Sans', sans-serif;
   background: linear-gradient(
      135deg,
      rgba(30, 30, 40, 0.95) 0%,
      rgba(20, 20, 30, 0.98) 100%
   );
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 24px;
   box-shadow: 
      0 25px 50px -12px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
   /* Allow absolute positioning when dragged */
   will-change: transform, left, top;
}

#floating-audio-player::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

#floating-audio-player.hidden {
   transform: translateY(120%);
   opacity: 0;
   pointer-events: none;
}

/* ============================================
   Drag-specific Styles
   ============================================ */

/* Dragging state */
#floating-audio-player.dragging {
   transition: none !important;
   box-shadow: 
      0 35px 60px -15px rgba(0, 0, 0, 0.6),
      0 0 0 2px hsl(var(--p) / 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
   transform: scale(1.02);
   z-index: 9999;
}

/* Drag handle indicator in header */
.audio-player-header {
   cursor: grab;
   user-select: none;
   -webkit-user-select: none;
   position: relative;
}

.audio-player-header:active {
   cursor: grabbing;
}

/* Drag indicator icon */
.drag-indicator {
   transition: opacity 0.2s ease;
}

.audio-player-header:hover .drag-indicator {
   opacity: 0.7;
}

#floating-audio-player.dragging .drag-indicator {
   opacity: 1;
   color: hsl(var(--p));
}

/* Visual hint for draggable area */
.audio-player-header::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 40px;
   height: 3px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 3px;
   opacity: 0;
   transition: opacity 0.2s ease;
}

.audio-player-header:hover::after {
   opacity: 1;
}

/* Inner container */
.audio-player-inner {
   padding: 20px;
   position: relative;
}

/* Header section */
.audio-player-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
}

.audio-player-label {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.4);
}

/* Source badge */
.audio-badge {
   padding: 4px 10px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 600;
   background: linear-gradient(135deg, hsl(var(--p)) 0%, hsl(var(--p) / 0.8) 100%);
   color: white;
   box-shadow: 0 2px 8px hsl(var(--p) / 0.3);
}

/* Live indicator */
.audio-live-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #ef4444;
   box-shadow: 0 0 12px #ef4444;
   animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.5; transform: scale(0.8); }
}

/* Close button */
.audio-close-btn {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   border: none;
   color: rgba(255, 255, 255, 0.6);
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
}

.audio-close-btn:hover {
   background: rgba(255, 255, 255, 0.2);
   color: white;
   transform: rotate(90deg);
}

/* Reset position button specific style */
.audio-close-btn[title="Reset Position"]:hover {
   transform: rotate(-180deg);
}

/* Now playing info */
.audio-now-playing {
   margin-bottom: 20px;
}

.audio-now-playing-ref {
   font-size: 16px;
   font-weight: 700;
   color: white;
   margin-bottom: 4px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.audio-now-playing-ref::before {
   content: '♪';
   font-size: 14px;
   color: hsl(var(--p));
}

.audio-now-playing-text {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.5);
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* ============================================
   Playback Controls
   ============================================ */

.audio-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin-bottom: 20px;
}

.audio-control-btn {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   background: rgba(255, 255, 255, 0.08);
   color: rgba(255, 255, 255, 0.8);
}

.audio-control-btn:hover {
   background: rgba(255, 255, 255, 0.15);
   color: white;
   transform: scale(1.08);
}

.audio-control-btn:active {
   transform: scale(0.95);
}

.audio-control-btn svg {
   width: 18px;
   height: 18px;
}

/* Main play button */
.audio-main-btn {
   width: 64px;
   height: 64px;
   background: linear-gradient(135deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
   color: white;
   box-shadow: 
      0 8px 24px hsl(var(--p) / 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
   position: relative;
   overflow: hidden;
}

.audio-main-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
   transition: left 0.5s ease;
}

.audio-main-btn:hover {
   transform: scale(1.1);
   box-shadow: 
      0 12px 32px hsl(var(--p) / 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.audio-main-btn:hover::before {
   left: 100%;
}

.audio-main-btn svg {
   width: 28px;
   height: 28px;
}

/* Small control buttons */
.audio-sm-btn {
   width: 36px;
   height: 36px;
}

.audio-sm-btn svg {
   width: 16px;
   height: 16px;
}

/* ============================================
   Volume Control
   ============================================ */

.audio-volume-container {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 16px;
   padding: 12px 16px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 16px;
}

.audio-volume-btn {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: none;
   background: transparent;
   color: rgba(255, 255, 255, 0.6);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
}

.audio-volume-btn:hover {
   color: white;
   background: rgba(255, 255, 255, 0.1);
}

.audio-volume-btn svg {
   width: 18px;
   height: 18px;
}

/* Custom range slider */
.audio-volume-slider {
   flex: 1;
   height: 6px;
   -webkit-appearance: none;
   appearance: none;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 3px;
   cursor: pointer;
   position: relative;
}

.audio-volume-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: linear-gradient(135deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
   cursor: pointer;
   box-shadow: 0 2px 8px hsl(var(--p) / 0.4);
   transition: transform 0.2s ease;
}

.audio-volume-slider::-webkit-slider-thumb:hover {
   transform: scale(1.2);
}

.audio-volume-slider::-moz-range-thumb {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: linear-gradient(135deg, hsl(var(--p)) 0%, hsl(var(--s)) 100%);
   cursor: pointer;
   border: none;
   box-shadow: 0 2px 8px hsl(var(--p) / 0.4);
}

.audio-volume-value {
   font-size: 12px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.5);
   min-width: 40px;
   text-align: right;
}

/* ============================================
   Footer / Status Bar
   ============================================ */

.audio-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.audio-auto-next {
   display: flex;
   align-items: center;
   gap: 8px;
}

.audio-auto-next input[type="checkbox"] {
   width: 16px;
   height: 16px;
   border-radius: 4px;
   accent-color: hsl(var(--p));
}

.audio-auto-next label {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.5);
   cursor: pointer;
}

/* Visualizer */
.audio-visualizer {
   display: flex;
   align-items: flex-end;
   justify-content: center;
   gap: 3px;
   height: 24px;
}

.visualizer-bar {
   width: 4px;
   background: linear-gradient(to top, hsl(var(--p)), hsl(var(--s)));
   border-radius: 2px;
   transition: height 0.1s ease;
}

/* Status badge */
.audio-status {
   padding: 4px 12px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 600;
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.6);
}

.audio-status.playing {
   background: linear-gradient(135deg, hsl(var(--su) / 0.2) 0%, hsl(var(--su) / 0.1) 100%);
   color: hsl(var(--su));
}

.audio-status.loading {
   background: linear-gradient(135deg, hsl(var(--wa) / 0.2) 0%, hsl(var(--wa) / 0.1) 100%);
   color: hsl(var(--wa));
}

.audio-status.error {
   background: linear-gradient(135deg, hsl(var(--er) / 0.2) 0%, hsl(var(--er) / 0.1) 100%);
   color: hsl(var(--er));
}

/* ============================================
   Mobile Responsive
   ============================================ */

@media (max-width: 640px) {
   #floating-audio-player {
      left: 8px;
      right: 8px;
      bottom: 8px;
      border-radius: 20px;
   }
   
   .audio-player-inner {
      padding: 16px;
   }
   
   .audio-controls {
      gap: 8px;
   }
   
   .audio-main-btn {
      width: 56px;
      height: 56px;
   }
   
   .audio-control-btn {
      width: 40px;
      height: 40px;
   }
   
   .audio-sm-btn {
      width: 32px;
      height: 32px;
   }
   
   /* Larger drag area for touch */
   .audio-player-header {
      padding: 4px 0;
   }
}

/* ============================================
   Animations
   ============================================ */

@keyframes slide-up {
   from {
      transform: translateY(100%);
      opacity: 0;
   }
   to {
      transform: translateY(0);
      opacity: 1;
   }
}

#floating-audio-player:not(.hidden):not(.dragging) {
   animation: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   Touch Device Optimizations
   ============================================ */

@media (hover: none) and (pointer: coarse) {
   /* Touch devices: larger touch targets */
   .audio-player-header {
      min-height: 48px;
      padding: 8px 0;
   }
   
   .audio-close-btn {
      width: 36px;
      height: 36px;
   }
   
   /* Show drag indicator on touch devices */
   .drag-indicator {
      opacity: 0.5;
   }
}

/* ============================================
   Reduced Motion Support
   ============================================ */

@media (prefers-reduced-motion: reduce) {
   #floating-audio-player,
   .audio-control-btn,
   .audio-close-btn,
   .visualizer-bar {
      transition: none;
      animation: none;
   }
   
   #floating-audio-player:not(.hidden) {
      animation: none;
   }
}