/* Profile Music Styles - Enhanced with Prior prefix */
.music-upload-container {
   margin-top: 10px;
   padding: 20px;
   background: rgba(var(--rgb-theme-color), 0.1);
   border-radius: 15px;
   border: 1px solid var(--theme-color);
   position: relative;
   overflow: hidden;
}

.music-upload-container::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgba(var(--rgb-theme-color), 0.05) 0%, transparent 50%, rgba(var(--rgb-theme-color), 0.05) 100%);
   pointer-events: none;
   z-index: 0;
}

.music-upload-container > * {
   position: relative;
   z-index: 1;
}

#currentMusic {
   margin-bottom: 20px;
}

#musicFileName {
   margin-bottom: 15px;
   color: var(--theme-color);
   font-weight: bold;
   font-size: 14px;
}

.music-upload-buttons {
   display: flex;
   align-items: center;
   gap: 15px;
}

.form-hint {
   margin-top: 15px;
   font-size: 0.8rem;
   color: rgba(var(--rgb-theme-color), 0.8);
   line-height: 1.4;
}

.upload-status {
   margin-left: 10px;
   font-size: 0.9rem;
   color: var(--theme-color);
   display: flex;
   align-items: center;
}

.upload-status .spinner {
   width: 16px;
   height: 16px;
   margin-right: 5px;
   border: 2px solid rgba(var(--rgb-theme-color), 0.3);
   border-top: 2px solid var(--theme-color);
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

/* Enhanced Search Section with Prior prefix */
.prior-music-search-section {
    margin-bottom: 25px !important; /* More spacing */
    background: rgba(0, 0, 0, 0.25) !important; /* Slightly more visible */
    border-radius: 15px !important; /* More rounded */
    padding: 20px !important; /* More padding */
    border: 2px solid rgba(var(--rgb-theme-color), 0.3) !important; /* Thicker border */
}

.prior-search-input-container {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
    align-items: center !important;
}

.prior-music-search-input {
    flex: 3 !important; /* Changed from flex: 1 to flex: 3 to make it 3x wider */
    padding: 15px 20px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 2px solid rgba(var(--rgb-theme-color), 0.3) !important;
    border-radius: 30px !important;
    color: white !important;
    font-size: 16px !important;
    outline: none !important;
    box-sizing: border-box !important;
    height: 55px !important;
    min-width: 300px !important; /* Increased from 250px to 300px */
    transition: all 0.3s ease !important;
}

.prior-music-search-input:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 4px rgba(var(--rgb-theme-color), 0.2) !important; /* Larger glow */
    background: rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-2px) !important; /* More lift */
}

.prior-music-search-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important; /* More visible placeholder */
    font-size: 15px !important;
}

.prior-search-btn, .prior-convert-btn {
    padding: 15px 20px !important; /* Reduced from 25px to 20px */
    font-size: 15px !important;
    min-width: 120px !important; /* Reduced from no limit to 120px max */
    max-width: 140px !important; /* Added max-width to prevent button from getting too wide */
    height: 55px !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important; /* Prevent buttons from shrinking */
}

.prior-search-btn:hover, .prior-convert-btn:hover {
    transform: translateY(-3px) !important; /* More lift on hover */
    box-shadow: 0 8px 20px rgba(var(--rgb-theme-color), 0.4) !important; /* Bigger shadow */
}

.prior-search-results {
   max-height: 300px !important;
   overflow-y: auto !important;
   background: rgba(0, 0, 0, 0.4) !important;
   border-radius: 12px !important;
   border: 1px solid rgba(var(--rgb-theme-color), 0.3) !important;
   margin-bottom: 10px !important;
}

.prior-search-result {
   display: flex !important;
   padding: 12px !important;
   border-bottom: 1px solid rgba(var(--rgb-theme-color), 0.2) !important;
   cursor: pointer !important;
   transition: all 0.3s ease !important;
}

.prior-search-result:hover {
   background: rgba(var(--rgb-theme-color), 0.15) !important;
   transform: translateX(5px) !important;
}

.prior-search-result:last-child {
   border-bottom: none !important;
}

.prior-search-result-thumbnail {
   width: 60px !important;
   height: 45px !important;
   border-radius: 8px !important;
   overflow: hidden !important;
   margin-right: 12px !important;
   flex-shrink: 0 !important;
   border: 1px solid rgba(var(--rgb-theme-color), 0.3) !important;
}

.prior-search-result-thumbnail img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   transition: transform 0.3s ease !important;
}

.prior-search-result:hover .prior-search-result-thumbnail img {
   transform: scale(1.1) !important;
}

.prior-search-result-details {
   flex: 1 !important;
   overflow: hidden !important;
}

.prior-search-result-title {
   font-size: 14px !important;
   color: white !important;
   margin-bottom: 4px !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   font-weight: 500 !important;
}

.prior-search-result-channel {
   font-size: 12px !important;
   color: rgba(var(--rgb-theme-color), 0.8) !important;
}

.prior-music-divider {
   display: flex !important;
   align-items: center !important;
   gap: 20px !important;
   margin: 25px 0 !important;
   color: rgba(var(--rgb-theme-color), 0.7) !important;
   font-size: 14px !important;
   font-weight: bold !important;
   text-align: center !important;
}

.prior-music-divider::before,
.prior-music-divider::after {
   content: '' !important;
   flex: 1 !important;
   height: 2px !important;
   background: linear-gradient(90deg, transparent, rgba(var(--rgb-theme-color), 0.4), transparent) !important;
}

.prior-upload-status {
   margin-left: 10px !important;
   font-size: 0.9rem !important;
   color: var(--theme-color) !important;
   display: flex !important;
   align-items: center !important;
}

.prior-upload-status.loading::before {
   content: '' !important;
   display: inline-block !important;
   width: 16px !important;
   height: 16px !important;
   margin-right: 8px !important;
   border: 2px solid rgba(var(--rgb-theme-color), 0.3) !important;
   border-top: 2px solid var(--theme-color) !important;
   border-radius: 50% !important;
   animation: priorMusicSpin 1s linear infinite !important;
}

@keyframes priorMusicSpin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

.hidden {
   display: none !important;
}

/* Prior Custom Audio Player Styles */
.prior-custom-audio-player {
   background: rgba(0, 0, 0, 0.3);
   border-radius: 15px;
   padding: 20px;
   border: 1px solid rgba(var(--rgb-theme-color), 0.3);
   margin-top: 10px;
}

.prior-audio-player-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
}

.prior-audio-title {
   font-size: 16px;
   font-weight: bold;
   color: var(--theme-color);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 70%;
}

.prior-audio-duration {
   font-size: 14px;
   color: rgba(var(--rgb-theme-color), 0.8);
   font-family: monospace;
}

.prior-audio-waveform-container {
   position: relative;
   background: rgba(0, 0, 0, 0.4);
   border-radius: 8px;
   margin-bottom: 15px;
   overflow: hidden;
   border: 1px solid rgba(var(--rgb-theme-color), 0.2);
   cursor: pointer;
   transition: all 0.3s ease;
}

.prior-audio-waveform {
   width: 100%;
   height: 60px;
   display: block;
   background: rgba(0, 0, 0, 0.2);
}

.prior-audio-progress-overlay {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   background: rgba(var(--rgb-theme-color), 0.3);
   width: 0%;
   transition: width 0.1s ease;
   pointer-events: none;
}

.prior-trim-handles {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: none;
}

.prior-trim-handles.active {
   display: block;
}

.prior-trim-handle {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 3px;
   background: var(--theme-color);
   cursor: ew-resize;
   z-index: 10;
   transition: all 0.2s ease;
}

.prior-trim-handle::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 12px;
   height: 20px;
   background: var(--theme-color);
   border-radius: 2px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.prior-trim-handle:hover {
   background: rgba(var(--rgb-theme-color), 1);
   width: 4px;
}

.prior-trim-handle:hover::before {
   width: 14px;
   height: 24px;
}

.prior-trim-start {
   left: 0%;
}

.prior-trim-end {
   right: 0%;
}

.prior-audio-controls {
   display: flex;
   align-items: center;
   gap: 15px;
   flex-wrap: wrap;
}

.prior-audio-btn {
   background: rgba(var(--rgb-theme-color), 0.1);
   border: 1px solid rgba(var(--rgb-theme-color), 0.3);
   color: var(--theme-color);
   border-radius: 8px;
   padding: 8px;
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 500;
}

.prior-audio-btn:hover {
   background: rgba(var(--rgb-theme-color), 0.2);
   transform: translateY(-1px);
}

.prior-audio-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none;
}

.prior-play-pause-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   padding: 0;
   justify-content: center;
}

.prior-play-pause-btn svg {
   fill: var(--theme-color);
}

.prior-audio-time-info {
   display: flex;
   align-items: center;
   gap: 5px;
   color: rgba(var(--rgb-theme-color), 0.8);
   font-size: 14px;
   font-family: monospace;
}

.prior-time-separator {
   color: rgba(var(--rgb-theme-color), 0.5);
}

.prior-volume-control {
   display: flex;
   align-items: center;
   gap: 8px;
}

.prior-volume-btn {
   padding: 6px;
}

.prior-volume-btn svg {
   fill: var(--theme-color);
}

.prior-volume-slider {
   width: 80px;
   height: 4px;
   appearance: none;
   background: rgba(var(--rgb-theme-color), 0.3);
   border-radius: 2px;
   outline: none;
   cursor: pointer;
}

.prior-volume-slider::-webkit-slider-thumb {
   appearance: none;
   width: 12px;
   height: 12px;
   background: var(--theme-color);
   border-radius: 50%;
   cursor: pointer;
   transition: transform 0.2s ease;
}

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

.prior-volume-slider::-moz-range-thumb {
   width: 12px;
   height: 12px;
   background: var(--theme-color);
   border-radius: 50%;
   border: none;
   cursor: pointer;
}

.prior-trim-btn {
   font-size: 12px;
   font-weight: bold;
}

.prior-trim-btn svg {
   fill: var(--theme-color);
}

/* Save Profile Music Button Styles */
.prior-save-profile-btn {
   background: var(--theme-color) !important;
   color: #000 !important;
   font-weight: bold !important;
   border: none !important;
   padding: 10px 16px !important;
}

.prior-save-profile-btn:hover {
   background: rgba(var(--rgb-theme-color), 0.9) !important;
   transform: translateY(-2px) !important;
   box-shadow: 0 4px 12px rgba(var(--rgb-theme-color), 0.3) !important;
}

.prior-save-profile-btn svg {
   fill: #000 !important;
}

/* Undo Trim Button Styles */
.prior-undo-trim-btn {
   background: rgba(255, 193, 7, 0.1) !important;
   border-color: #ffc107 !important;
   color: #ffc107 !important;
}

.prior-undo-trim-btn:hover {
   background: rgba(255, 193, 7, 0.2) !important;
}

.prior-undo-trim-btn svg {
   fill: #ffc107 !important;
}

.prior-trim-info {
   margin-top: 15px;
   padding: 15px;
   background: rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   border: 1px solid rgba(var(--rgb-theme-color), 0.3);
}

.prior-trim-times {
   display: flex;
   justify-content: space-between;
   margin-bottom: 15px;
   font-size: 14px;
   color: rgba(var(--rgb-theme-color), 0.8);
   font-family: monospace;
}

.prior-trim-times > div {
   text-align: center;
}

.prior-trim-actions {
   display: flex;
   gap: 10px;
   justify-content: center;
}

.prior-trim-apply-btn, .prior-trim-cancel-btn {
   padding: 8px 16px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: bold;
   transition: all 0.3s ease;
}

.prior-trim-apply-btn {
   background: var(--theme-color);
   color: #000;
   border: none;
}

.prior-trim-apply-btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(var(--rgb-theme-color), 0.3);
}

.prior-trim-apply-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
   transform: none;
}

.prior-trim-cancel-btn {
   background: transparent;
   color: var(--theme-color);
   border: 1px solid var(--theme-color);
}

.prior-trim-cancel-btn:hover {
   background: rgba(var(--rgb-theme-color), 0.1);
   transform: translateY(-1px);
}


/* ─── LIGHT THEME ──────────────────────────────────────────── */
body.light-theme .music-upload-container {
    background: rgba(var(--rgb-theme-color), 0.07);
    border-color: rgba(var(--rgb-theme-color), 0.50);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

body.light-theme .prior-music-search-section {
    background: #ffffff !important;
    border: 2px solid rgba(var(--rgb-theme-color), 0.55) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
}

body.light-theme .prior-music-search-input {
    background: #f5f5ff !important;
    color: #1a1a2e !important;
    border-color: rgba(var(--rgb-theme-color), 0.40) !important;
}

body.light-theme .prior-music-search-input:focus {
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(var(--rgb-theme-color), 0.15) !important;
}

body.light-theme .prior-music-search-input::placeholder {
    color: #8888a8 !important;
}

body.light-theme .prior-search-results {
    background: #f5f5ff !important;
    border-color: rgba(var(--rgb-theme-color), 0.35) !important;
}

body.light-theme .prior-search-result:hover {
    background: rgba(var(--rgb-theme-color), 0.10) !important;
}

body.light-theme .prior-search-result {
    border-bottom-color: rgba(var(--rgb-theme-color), 0.15) !important;
}

body.light-theme .prior-search-result-title {
    color: #1a1a2e !important;
}

body.light-theme .prior-custom-audio-player {
    background: #ffffff;
    border-color: rgba(var(--rgb-theme-color), 0.45);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

body.light-theme .prior-audio-waveform-container {
    background: #ebebf5;
    border-color: rgba(var(--rgb-theme-color), 0.25);
}

body.light-theme .prior-audio-waveform {
    background: #e0e0f0;
}

body.light-theme .prior-trim-info {
    background: #f0f0fa;
    border-color: rgba(var(--rgb-theme-color), 0.30);
}

body.light-theme .prior-trim-times {
    color: #4a4a6a;
}

body.light-theme .prior-audio-time-info {
    color: #4a4a6a;
}

/* Scrollbar customization */
.prior-search-results::-webkit-scrollbar {
   width: 8px;
}

.prior-search-results::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 4px;
}

.prior-search-results::-webkit-scrollbar-thumb {
   background: rgba(var(--rgb-theme-color), 0.5);
   border-radius: 4px;
}

.prior-search-results::-webkit-scrollbar-thumb:hover {
   background: var(--theme-color);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
   .prior-search-input-container {
        flex-direction: column !important;
        gap: 12px !important;
    }
   
   .prior-music-search-input {
        height: 50px !important;
        font-size: 15px !important;
        padding: 12px 18px !important;
    }
   
   .prior-search-btn, .prior-convert-btn {
        width: 100% !important;
    }
   
   .prior-audio-controls {
       flex-wrap: wrap;
       gap: 10px;
   }
   
   .prior-volume-control {
       order: 1;
       width: 100%;
       justify-content: center;
   }
   
   .prior-volume-slider {
       width: 120px;
   }
   
   .prior-trim-times {
       flex-direction: column;
       gap: 8px;
       text-align: center;
   }
   
   .prior-audio-title {
       max-width: 60%;
       font-size: 14px;
   }
   
   .prior-audio-waveform {
       height: 50px;
   }
   
   .prior-trim-actions {
       flex-direction: column;
       align-items: center;
   }
   
   .prior-trim-apply-btn, .prior-trim-cancel-btn {
       width: 100%;
       max-width: 200px;
   }

   .prior-save-profile-btn, .prior-undo-trim-btn {
       width: 100%;
       max-width: 200px;
   }

   .prior-trim-instructions {
       font-size: 12px;
       padding: 10px 12px;
   }

   .prior-instruction-text {
       flex-direction: column;
       gap: 6px;
       text-align: center;
   }
}

/* Tablet responsiveness */
@media (max-width: 1024px) and (min-width: 769px) {
   .prior-audio-controls {
       gap: 12px;
   }
   
   .prior-volume-slider {
       width: 100px;
   }
}

/* Enhanced animations */
@keyframes priorFadeIn {
   from {
       opacity: 0;
       transform: translateY(10px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

.prior-custom-audio-player {
   animation: priorFadeIn 0.5s ease;
}

.prior-search-result {
   animation: priorFadeIn 0.3s ease;
}

/* Focus states for accessibility */
.prior-audio-btn:focus,
.prior-volume-slider:focus,
.prior-trim-apply-btn:focus,
.prior-trim-cancel-btn:focus,
.prior-save-profile-btn:focus,
.prior-undo-trim-btn:focus {
   outline: 2px solid var(--theme-color);
   outline-offset: 2px;
}

.prior-music-search-input:focus {
   outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
   .prior-custom-audio-player {
       border-color: var(--theme-color);
   }
   
   .prior-audio-btn {
       border-color: var(--theme-color);
   }
   
   .prior-trim-handle {
       box-shadow: 0 0 0 2px #000;
   }

   .prior-trim-instructions {
       border-color: var(--theme-color);
   }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
   .prior-search-result,
   .prior-audio-btn,
   .prior-trim-apply-btn,
   .prior-trim-cancel-btn,
   .prior-save-profile-btn,
   .prior-undo-trim-btn {
       transition: none;
   }
   
   .prior-custom-audio-player {
       animation: none;
   }

   .prior-audio-waveform-container.trim-mode-active::after {
       animation: none;
   }
}

/* Loading states */
.prior-audio-btn.loading {
   opacity: 0.7;
   pointer-events: none;
}

.prior-audio-btn.loading::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 16px;
   height: 16px;
   border: 2px solid transparent;
   border-top: 2px solid currentColor;
   border-radius: 50%;
   animation: priorMusicSpin 1s linear infinite;
}

/* Success states */
.prior-audio-btn.success {
   background: rgba(34, 197, 94, 0.2) !important;
   border-color: #22c55e !important;
   color: #22c55e !important;
}

.prior-audio-btn.success svg {
   fill: #22c55e !important;
}

/* Error states */
.prior-audio-btn.error {
   background: rgba(239, 68, 68, 0.2) !important;
   border-color: #ef4444 !important;
   color: #ef4444 !important;
}

.prior-audio-btn.error svg {
   fill: #ef4444 !important;
}

.upload-status svg,
.prior-upload-status svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    flex-shrink: 0;
}

.upload-status.loading svg {
    animation: spin 1s linear infinite;
}

.upload-status.success svg {
    color: #16a34a;
}

.upload-status.error svg {
    color: #dc2626;
}

.prior-upload-status.loading svg {
    animation: spin 1s linear infinite;
}