/**
 * Lyrics Modal Styles
 * Side-by-side lyrics panel for now playing page
 */

/* Main container adjustments when lyrics are shown */
.now-playing.with-lyrics .ui {
    transform: translateX(-77.5%);
    transition: transform 0.3s ease-in-out;
}

.now-playing.with-lyrics .background-artwork {
    transform: translateX(0%);
    transition: transform 0.3s ease-in-out;
}

/* Lyrics Panel Styles */
.lyrics-panel {
    position: fixed;
    top: 0;
    right: -50%;
    width: 50%;
    height: 100vh;
    background: transparent;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(0px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: right 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lyrics-panel.open {
    right: 0;
}

/* Mobile-first approach for lyrics panel */
@media (max-width: 768px) {
    .lyrics-panel {
        right: -100%;
        width: 100%;
        background: linear-gradient(135deg, #1a1a1a 0%, #2d1b69 50%, #1a1a1a 100%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-left: 3px solid #00A4DC;
        border-radius: 0;
    }

    .lyrics-panel.open {
        right: 0;
    }
}

/* Add background artwork for lyrics panel */
.lyrics-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    z-index: -1;
}

.lyrics-panel .lyrics-background-artwork {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.3;
    filter: blur(40px) brightness(0.4);
}

.lyrics-panel.open {
    transform: translateX(0);
}

/* Lyrics Panel Header */
.lyrics-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.lyrics-panel-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--font-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.close-lyrics {
    background: none;
    border: none;
    color: var(--font-color-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    line-height: 1;
}

.close-lyrics:hover {
    background: var(--bg-color-secondary);
    color: var(--font-color);
}



/* Lyrics Panel Content */
.lyrics-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--font-color-tertiary) transparent;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--font-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    line-height: 1.6;
}



.lyrics-panel-content::-webkit-scrollbar {
    width: 6px;
}

.lyrics-panel-content::-webkit-scrollbar-track {
    background: transparent;
}

.lyrics-panel-content::-webkit-scrollbar-thumb {
    background: var(--font-color-tertiary);
    border-radius: 3px;
}

.lyrics-panel-content::-webkit-scrollbar-thumb:hover {
    background: var(--font-color-secondary);
}


/* Responsive adjustments */
@media (max-width: 1200px) {
    .now-playing.with-lyrics .ui {
        transform: translateX(-77.5%);
    }

    .now-playing.with-lyrics .background-artwork {
        transform: translateX(0%);
    }

    .lyrics-panel {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .now-playing.with-lyrics .ui {
        transform: translateX(-77.5%);
    }

    .now-playing.with-lyrics .background-artwork {
        transform: translateX(0%);
    }

    .lyrics-panel {
        width: 60%;
    }

    .close-lyrics,
    .close-queue {
        font-size: 28px;
        padding: 8px 12px;
    }

    .lyrics-panel-content,
    .queue-panel-content {
        padding: 0 20px 20px;
        font-size: 16px;
    }

    /* Add swipe hint */
    .lyrics-panel::after,
    .queue-panel::after {
        content: 'Swipe right to close';
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        color: var(--font-color-tertiary);
        text-align: center;
    }
}

@media (max-width: 480px) {
    .now-playing.with-lyrics .ui {
        transform: translateX(-40.5%);
    }

    .now-playing.with-lyrics .background-artwork {
        transform: translateX(0%);
    }

    .lyrics-panel {
        width: 70%;
    }

    .lyrics-panel-header h3 {
        font-size: 16px;
    }

    .close-lyrics {
        font-size: 20px;
    }
}

/* Queue Panel - Same styling as lyrics panel */
.queue-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100vh;
    background: transparent;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    overflow: hidden;
}

/* Mobile styling for queue panel */
@media (max-width: 768px) {
    .queue-panel {
        width: 100%;
        background: linear-gradient(135deg, #1a1a1a 0%, #2d1b69 50%, #1a1a1a 100%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-left: 3px solid #00A4DC;
        border-radius: 0;
    }
}

.queue-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    backdrop-filter: inherit;
    z-index: -1;
}

.queue-panel.open {
    transform: translateX(0);
}

/* Queue Panel Header */
.queue-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.queue-panel-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--font-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.close-queue {
    background: none;
    border: none;
    color: var(--font-color-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.close-queue:hover {
    background: var(--bg-color-secondary);
    color: var(--font-color);
}

/* Queue Panel Content */
.queue-panel-content {
    padding: 0 24px 24px;
    height: calc(100vh - 80px);
    overflow-y: auto;
    color: var(--font-color);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.current-track-section {
    margin-bottom: 30px;
}

.current-track-section h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--font-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.current-track {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.current-track .track-info {
    flex: 1;
}

.current-track .track-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--font-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.current-track .track-artist {
    font-size: 12px;
    color: var(--font-color-secondary);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.next-tracks-section h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--font-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.queue-track {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 8px;
    margin: 0 -8px;
    padding: 12px 8px;
}

.queue-track:hover {
    background: rgba(255, 255, 255, 0.05);
}

.queue-track:active {
    background: rgba(0, 164, 220, 0.2);
    transform: scale(0.98);
}

.queue-track:last-child {
    border-bottom: none;
}

/* Mobile queue track styling */
@media (max-width: 768px) {
    .queue-track {
        padding: 16px 12px;
        margin: 0 -12px;
        border-radius: 12px;
    }

    .queue-track:active {
        background: rgba(0, 164, 220, 0.2);
        transform: scale(0.98);
    }
}

.queue-track .track-number {
    font-size: 12px;
    color: var(--font-color-tertiary);
    width: 20px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.queue-track .track-info {
    flex: 1;
}

.queue-track .track-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--font-color);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.queue-track .track-artist {
    font-size: 11px;
    color: var(--font-color-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.queue-more {
    text-align: center;
    padding: 16px;
    color: var(--font-color-tertiary);
    font-size: 12px;
}

/* Main container adjustments when queue is shown (match NowPlaying.css) */
.now-playing.with-queue .ui {
    transform: translateX(-77.5%);
    transition: transform 0.3s ease-in-out;
}

.now-playing.with-queue .background-artwork {
    transform: translateX(0%);
    transition: transform 0.3s ease-in-out;
}

.queue-panel-content::-webkit-scrollbar-track {
    background: transparent;
}

.queue-panel-content::-webkit-scrollbar-thumb {
    background: var(--font-color-tertiary);
    border-radius: 3px;
}

.queue-panel-content::-webkit-scrollbar-thumb:hover {
    background: var(--font-color-secondary);
}/*
 Queue drag and drop styles */
.queue-track {
    position: relative;
    transition: all 0.2s ease;
}

.queue-track.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.queue-track.drag-over {
    background: rgba(0, 164, 220, 0.2) !important;
    border: 2px dashed var(--brand-color);
    border-radius: 8px;
}

.drag-handle {
    color: var(--font-color-tertiary);
    font-size: 12px;
    cursor: grab;
    padding: 0 4px;
    user-select: none;
    line-height: 1;
}

.drag-handle:active {
    cursor: grabbing;
}

/* Mobile drag handle */
@media (max-width: 768px) {
    .drag-handle {
        font-size: 14px;
        padding: 0 6px;
    }
}

/* Queue track hover states */
.queue-track:hover .drag-handle {
    color: var(--font-color-secondary);
}

/* Long press feedback */
.queue-track:active {
    background: rgba(0, 164, 220, 0.1) !important;
}

/* Improved queue track layout with drag handle */
.queue-track {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    border-radius: 8px;
    margin: 0 -8px;
    padding: 12px 8px;
}

.queue-track .track-number {
    font-size: 12px;
    color: var(--font-color-tertiary);
    width: 20px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Drag and drop visual feedback */
.queue-track[draggable="true"] {
    cursor: grab;
}

.queue-track[draggable="true"]:active {
    cursor: grabbing;
}

/* Enhanced mobile touch feedback */
@media (max-width: 768px) {
    .queue-track {
        padding: 16px 12px;
        margin: 0 -12px;
        border-radius: 12px;
        min-height: 60px;
    }
    
    .queue-track:active {
        background: rgba(0, 164, 220, 0.2) !important;
        transform: scale(0.98);
    }
    
    /* Long press visual feedback */
    .queue-track.long-pressing {
        background: rgba(0, 164, 220, 0.3) !important;
        transform: scale(0.95);
    }
}