/* ============================================
   GLOBAL MUSIC PLAYER - MODAL & MINI PLAYER
   ============================================ */

/* Global Music Player Modal */
.global-music-player-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 99999;
   display: none;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
}

/* Playlist Modal - must be above global player */
#music_playlist_modal {
   z-index: 100000 !important;
}

#music_playlist_modal .modal-backdrop {
   z-index: 99999 !important;
}

/* Desktop only - Add padding to track-header-info to avoid overlap with modal buttons */
@media (min-width: 769px) {
   .music-modal-content .track-header-info {
      padding-right: 120px;
   }
}

.global-music-player-modal.active {
   opacity: 1;
}

/* Backdrop Overlay */
.music-modal-backdrop {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.85);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   z-index: 1;
}

/* Music Modal Content Container */
.music-modal-content {
   position: relative; /* Required for absolute positioned processing overlay */
   z-index: 2;
   width: 90%;
   max-width: 1000px;
   min-height: 600px; /* Ensure overlay has height to cover */
   /* max-height removed - let content determine height */
   background: rgba(18, 18, 18, 0.95);
   border-radius: 20px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
   overflow: hidden; /* Keep hidden for rounded corners */
   transform: scale(0.9);
   transition: transform 0.3s ease;
}

.global-music-player-modal.active .music-modal-content {
   transform: scale(1);
}

/* Modal Header (Minimize/Close buttons) */
.music-modal-header {
   position: absolute;
   top: 15px;
   right: 15px;
   z-index: 10;
   display: flex;
   gap: 10px;
}

.music-modal-minimize,
.music-modal-close {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
}

.music-modal-minimize:hover {
   background: rgba(255, 152, 0, 0.2);
   border-color: rgba(255, 152, 0, 0.5);
}

.music-modal-close:hover {
   background: rgba(244, 67, 54, 0.2);
   border-color: rgba(244, 67, 54, 0.5);
}

/* Mobile Close Button (inline flexbox item in track-details) */
.music-player-mobile-close {
   display: none; /* Hidden on desktop */
   width: 30px;
   height: 30px;
   min-width: 30px; /* Prevent flex shrink */
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(244, 67, 54, 0.3);
   color: #f44336;
   cursor: pointer;
   transition: all 0.2s ease;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
}

.music-player-mobile-close:active {
   background: rgba(244, 67, 54, 0.3);
   border-color: rgba(244, 67, 54, 0.6);
   transform: scale(0.95);
}

/* Show mobile close button only on mobile devices */
@media (max-width: 768px) {
   .music-player-mobile-close {
      display: flex !important;
   }

   /* Hide desktop header buttons on mobile */
   .music-modal-header {
      display: none;
   }
}

/* Loading Spinner */
.music-loading-spinner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 400px;
   color: #fff;
}

.music-loading-spinner p {
   margin-top: 20px;
   font-size: 16px;
   color: rgba(255, 255, 255, 0.7);
}

/* Music Modal Content Adjustments */
.music-modal-content .top-video {
   margin: 0;
   padding: 0;
}

.music-modal-content .audio-player-container {
   border-radius: 0;
   box-shadow: none;
   margin-bottom: 0; /* Remove bottom margin that creates black bar */
}

.music-modal-content .audio-player-content {
   padding: 20px;
}

/* ============================================
   MINI MUSIC PLAYER (Bottom Left)
   ============================================ */

.mini-music-player {
   position: fixed;
   bottom: 20px;
   left: 20px;
   z-index: 99998;
   display: none;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.3s ease;
}

.mini-music-player.active {
   opacity: 1;
   transform: translateY(0);
}

/* Mini Vinyl Container */
.mini-vinyl-container {
   position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
   background: rgba(18, 18, 18, 0.95);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   padding: 10px;
   border-radius: 50px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mini Navigation Arrows */
.mini-nav-arrow {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
}

.mini-nav-arrow:hover {
   background: rgba(255, 152, 0, 0.2);
   border-color: rgba(255, 152, 0, 0.5);
   transform: scale(1.1);
}

/* Mini Vinyl Record */
.mini-vinyl-record {
   width: 55px;
   height: 55px;
   position: relative;
   border-radius: 50%;
   background: radial-gradient(
      circle at 30% 30%,
      #1a1a1a 0%,
      #0a0a0a 50%,
      #000000 100%
   );
   box-shadow:
      inset 0 0 20px rgba(0, 0, 0, 0.9),
      inset 0 0 10px rgba(255, 255, 255, 0.05),
      0 5px 20px rgba(0, 0, 0, 0.7);
   cursor: pointer;
   transition: transform 0.2s ease;
   animation: vinylRotate 3s linear infinite paused;
}

.mini-vinyl-record:hover {
   transform: scale(1.05);
}

.mini-vinyl-record.playing {
   animation-play-state: running;
}

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

/* Mini Vinyl Grooves */
.mini-vinyl-grooves {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background-image:
      repeating-radial-gradient(
         circle at 50% 50%,
         transparent 0px,
         transparent 1px,
         rgba(255, 255, 255, 0.03) 1px,
         rgba(255, 255, 255, 0.03) 2px
      );
   opacity: 0.8;
   pointer-events: none;
}

/* Mini Vinyl Label (Album Cover) */
.mini-vinyl-label {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 50%;
   height: 50%;
   border-radius: 50%;
   overflow: hidden;
   box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 0 10px rgba(0, 0, 0, 0.8);
   z-index: 3;
}

.mini-vinyl-label img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* Mini Vinyl Center Hole */
.mini-vinyl-center-hole {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 10%;
   height: 10%;
   border-radius: 50%;
   background: radial-gradient(
      circle at 40% 40%,
      #0a0a0a 0%,
      #000000 60%,
      #1a1a1a 100%
   );
   box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 1px 4px rgba(0, 0, 0, 0.9);
   z-index: 4;
}

/* Mini Player Info (shown on hover) */
.mini-player-info {
   background: rgba(18, 18, 18, 0.95);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   padding: 10px 15px;
   border-radius: 10px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.1);
   opacity: 0;
   transform: translateX(-10px);
   transition: all 0.2s ease;
   pointer-events: none;
}

.mini-music-player:hover .mini-player-info {
   opacity: 1;
   transform: translateX(0);
}

.mini-track-title {
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 4px;
   white-space: nowrap;
   max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
}

.mini-track-artist {
   color: rgba(255, 255, 255, 0.6);
   font-size: 12px;
   white-space: nowrap;
   max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Mini Player Close Button */
.mini-player-close {
   position: absolute;
   top: -8px;
   right: -8px;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: rgba(244, 67, 54, 0.9);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   opacity: 0;
   transform: scale(0.8);
   transition: all 0.2s ease;
   pointer-events: none;
}

.mini-music-player:hover .mini-player-close {
   opacity: 1;
   transform: scale(1);
   pointer-events: auto;
}

.mini-player-close:hover {
   background: rgba(244, 67, 54, 1);
   transform: scale(1.1);
   box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
   /* Full screen modal on mobile */
   .music-modal-content {
      width: 100%;
      max-width: 100%;
      height: 100vh;
      max-height: 100vh;
      border-radius: 0;
      transform: none !important; /* Disable scale animation on mobile */
      transition: none !important; /* Disable transition - swipe handles animation */
   }

   .global-audio-player-container .audio-player-content {
      padding: 20px 15px;
      min-height: 100vh;
   }

   /* Smaller mini player on mobile */
   .mini-music-player {
      bottom: 10px;
      left: 10px;
   }

   .mini-vinyl-record {
      width: 45px;
      height: 45px;
   }

   .mini-nav-arrow {
      width: 28px;
      height: 28px;
   }

   .mini-nav-arrow svg {
      width: 16px;
      height: 16px;
   }

   /* Hide info on mobile (too much space) */
   .mini-player-info {
      display: none;
   }

   /* Hide close button on mobile */
   .mini-player-close {
      display: none;
   }
}

/* ============================================
   SWIPE TO MINIMIZE (Mobile)
   ============================================ */

@media (max-width: 768px) {
   .music-modal-content {
      touch-action: pan-y;
   }
}

/* ============================================
   INTEGRATION WITH EXISTING LISTEN PLAYER CSS
   ============================================ */

/* All player styles are inherited from listen-player.css */
/* No additional overrides needed - using exact same structure */