/* ========== FOUC PREVENTION ========== */
/* Hide content until JavaScript initializes to prevent flash of unstyled content */
/* The js-ready class is added by main.js on successful initialization */
/* Fallback animation reveals content after 2s if JS fails */
html:not(.js-ready) body {
    visibility: hidden;
    animation: fouc-fallback 0s 2s forwards;
}
@keyframes fouc-fallback {
    to { visibility: visible; }
}

/* ========== RESET STYLES ========== */
* {
    /* Remove default margins from all elements */
    margin: 0;
    /* Remove default padding from all elements */
    padding: 0;
    /* Include padding and border in element's total width and height */
    box-sizing: border-box;
}

/* ========== BODY STYLES ========== */
body {
    /* Create a diagonal gradient background from dark blue to slightly lighter blue */
    background: linear-gradient(135deg, #1e2030 0%, #2f354d 100%);
    /* Set text color to white */
    color: #ffffff;
    /* Make body at least full viewport height */
    /* Make body at least full viewport height, using dvh for mobile browsers */
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    /* Use flexbox for vertical layout */
    display: flex;
    flex-direction: column;
    /* System font stack for optimal performance and fallbacks */
    /* Uses CSS variable from fonts.css, set dynamically by api.js */
    font-family: var(--ui-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
    /* Prevent scrollbars from appearing */
    overflow: hidden;
    /* Prevent overscroll bounce on Android Chrome */
    overscroll-behavior: contain;
}

/* ========== PWA FULLSCREEN MODE ========== */
/* Safe area insets for Android fullscreen mode (no status bar, no nav bar) */
@media (display-mode: fullscreen) {
    body {
        /* Add padding for safe areas (notches, rounded corners) */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ========== LOGO STYLES ========== */
.logo {
    /* Set fixed dimensions for logo */
    width: 20px;
    height: 20px;
}

/* ========== MAIN LYRICS CONTAINER ========== */
#lyrics {
    /* Take up remaining vertical space */
    flex: 1;
    /* Center content vertically and horizontally */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Responsive spacing between lyrics lines */
    gap: clamp(0.8rem, 3vh, 2rem);
    /* Responsive padding */
    padding: clamp(1rem, 3vw, 2rem);
    min-height: 100vh;
    width: 100%;
    /* Maximum width to maintain readability */
    max-width: 1200px;
    margin: 0 auto;
}

/* ========== LYRICS LINE STYLING ========== */
.lyric-line {
    text-align: center;
    /* Smooth transition for all animations */
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    padding: 0.2rem;
    max-width: 90%;
    /* Performance optimizations */
    will-change: opacity, transform;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    position: relative;
    /* Subtle text glow effect - REVERTED to original elegant style */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* ========== LYRICS STATES ========== */
/* Lines far from current (2+ lines away) */
.far-previous,
.far-next {
    opacity: 0.40;
    /* Responsive font size with configurable scale */
    font-size: calc(clamp(0.8rem, 2vw, 1.4rem) * var(--lyrics-font-scale-far, 1));
    transform: translateY(10px);
    filter: blur(1px);
    /* Configurable styling */
    font-family: var(--lyrics-font-family, inherit);
    color: var(--lyrics-text-color, #ffffff);
    font-weight: var(--lyrics-font-weight, 400);
}

/* Lines immediately before/after current */
.previous,
.next {
    opacity: 0.7; /* Increased from 0.6 for readability */
    font-size: calc(clamp(1rem, 2.5vw, 1.8rem) * var(--lyrics-font-scale-adjacent, 1));
    transform: translateY(5px);
    
    /* STANDARD: No background pill by default */
    background: none;
    margin: 0 auto;
    width: fit-content;
    
    /* STANDARD: Subtle glow with configurable intensity */
    text-shadow: 0 0 calc(10px * var(--lyrics-glow-intensity, 1)) rgba(255, 255, 255, calc(0.1 * var(--lyrics-glow-intensity, 1)));
    
    /* Configurable styling */
    font-family: var(--lyrics-font-family, inherit);
    color: var(--lyrics-text-color, #ffffff);
    font-weight: var(--lyrics-font-weight, 400);
}

/* Currently active line */
.current {
    font-size: calc(clamp(1.5rem, 4vw, 3rem) * var(--lyrics-font-scale-current, 1));
    opacity: 1;
    
    /* STANDARD: Strong glow with configurable intensity */
    text-shadow: 0 0 calc(20px * var(--lyrics-glow-intensity, 1)) rgba(255, 255, 255, calc(0.3 * var(--lyrics-glow-intensity, 1)));
    
    /* Configurable styling */
    font-family: var(--lyrics-font-family, inherit);
    color: var(--lyrics-text-color, #ffffff);
    font-weight: var(--lyrics-font-weight-current, 500);
    
    transform: scale(1.02);
    letter-spacing: 0.5px;
    
    /* Apply floating animation */
    animation: wave 3s ease-in-out infinite;
    position: relative;
    z-index: 10;
    
    /* STANDARD: No background pill by default */
    background: none;
    width: fit-content;
    padding: 0;
    margin: 0 auto;
    box-shadow: none;
    border-radius: 0;
}

/* ========== ANIMATIONS ========== */
@keyframes wave {
    /* Gentle floating animation for current line + Scale */
    0% {
        transform: scale(1.02) translateY(0);
    }

    50% {
        transform: scale(1.02) translateY(-2px);
    }

    100% {
        transform: scale(1.02) translateY(0);
    }
}

.bottom-nav {
    /* Stick to bottom of viewport */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Semi-transparent background with blur effect */
    background: rgba(26, 27, 38, 0.5);
    backdrop-filter: blur(10px);
    /* Thinner padding for compact appearance */
    padding: clamp(0.2rem, 1vh, 0.4rem);
    /* Layout controls */
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    min-height: 30px;
    max-height: 50px;
    /* Subtle top border */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Ensure nav stays above other content */
    z-index: 1000;
}

/* ========== NAVIGATION ELEMENTS ========== */
.nav-controls {
    display: flex;
    align-items: center;
}

.nav {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link {
    /* Merged styles */
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 0.5rem 1rem; /* Kept the more generous padding */
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
}

.nav-link:hover,
.nav-link.active {
    color: white; /* Removed !important as specificity is now clean */
    background: rgba(255, 255, 255, 0.1);
}

.nav-link.exit-link {
    color: rgba(239, 68, 68, 0.8);
}

.nav-link.exit-link:hover {
    color: rgb(239, 68, 68);
    background: rgba(239, 68, 68, 0.1);
}

/* Update content padding to account for bottom nav */
#content {
    padding-bottom: 4rem;
}

/* Exit button styling */
.exit-btn {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

/* Red background on hover for exit button */
.exit-btn:hover {
    color: white;
    background: rgba(255, 0, 0, 0.2);
}

/* Credits section styling */
.credits {
    display: flex;
    align-items: center;
}

/* Repository link styling */
.repo-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.repo-link:hover {
    color: white;
}

/* ========== FORM ELEMENTS ========== */
input[type="range"] {
    width: 75%;
}

/* Cursor pointer for tooltip elements */
*[data-bs-toggle="tooltip"]:hover {
    cursor: pointer;
}

/* ========== RESPONSIVE DESIGN ========== */
/* Adjustments for small screens and embedded views */
@media (max-height: 600px),
(max-width: 600px) {
    #lyrics {
        min-height: 100vh;
        gap: 0.5rem;
        padding: 1rem;
    }
    
    /* Larger lyrics for better readability on mobile (base × mobile scale stacked) */
    .current { font-size: calc(clamp(1.6rem, 4vw, 3rem) * var(--lyrics-font-scale-current, 1) * var(--lyrics-font-scale-mobile, 1)); }
    .previous, .next { font-size: calc(clamp(1rem, 2.5vw, 1.8rem) * var(--lyrics-font-scale-adjacent, 1) * var(--lyrics-font-scale-mobile, 1)); }
    .far-previous, .far-next { font-size: calc(clamp(0.8rem, 2vw, 1.4rem) * var(--lyrics-font-scale-far, 1) * var(--lyrics-font-scale-mobile, 1)); }
}

/* ========== HOME ASSISTANT MODE ========== */
/* Hide elements in minimal mode */
body[data-minimal="true"] .bottom-nav,
body[data-minimal="true"] #header,
body[data-minimal="true"] #footer {
    display: none !important;
}

/* Adjust lyrics container in minimal mode */
body[data-minimal="true"] #lyrics {
    min-height: 100vh;
    padding: 0;
}

/* ========== ACCESSIBILITY ========== */
/* Respect user's reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .lyric-line {
        transition: opacity 0.5s ease-out;
        animation: none !important;
    }
}

/* ========== UTILITY CLASSES ========== */
/* Helper classes for common styling needs */
.text-center {
    text-align: center;
}

.mt-auto {
    margin-top: auto;
}

.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

/* ========== HOME ASSISTANT SPECIFIC STYLES ========== */

/* Minimal Mode overrides: Restore colored gradient background + Hidden UI */
body[data-minimal="true"] {
    /* Restore the default gradient background (same as normal mode) */
    background: linear-gradient(135deg, #1e2030 0%, #2f354d 100%);
}

body[data-minimal="true"] #lyrics {
    background: none;
    min-height: 100vh;
    padding: 0;
}

/* Hide elements in minimal mode */
body[data-minimal="true"] .bottom-nav,
body[data-minimal="true"] #header,
body[data-minimal="true"] #footer,
body[data-minimal="true"] .settings-toggle,
body[data-minimal="true"] .source-toggle,
body[data-minimal="true"] .track-header,
body[data-minimal="true"] #player-ui-container,
body[data-minimal="true"] .album-art,
body[data-minimal="true"] .background-layer,
body[data-minimal="true"] .background-overlay {
    display: none !important;
}

/* ========== TOP RIGHT CONTROLS CONTAINER ========== */
/* Container for audio source toggle and settings gear - ensures vertical alignment */
.top-right-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 200;
    display: flex;
    align-items: center;  /* KEY: Vertical center alignment regardless of child heights */
    gap: 10px;
    pointer-events: none;  /* Allow clicks to pass through container gaps */
}

.top-right-controls > * {
    pointer-events: auto;  /* But children (buttons) are clickable */
}

/* Responsive: Mobile */
/* @media (max-width: 480px) {
    .top-right-controls {
        top: 0.5rem;
        right: 0.5rem;
    }
} */

/* Hide container in minimal mode */
body[data-minimal="true"] .top-right-controls {
    display: none !important;
}

/* ========== SETTINGS TOGGLE ========== */
.settings-toggle {
    /* Now relative within the flex container, not fixed */
    position: relative;
    z-index: 1;  /* Stacking within container */
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(90deg);
}

/* Settings gear icon sizing */
.settings-toggle i {
    font-size: 1.1rem;
/*    display: inline-block; /* Required for transforms to work */
}

/* .settings-toggle:hover i {
    transform: translateY(-1.5px); /* Shift up, adjust as needed */
/*   transform: translateY(-0.085em); /* Shift up, adjust as needed */

/* ========== SETTINGS PANEL ========== */
.settings-panel {
    position: fixed;
    top: 80px;
    right: 1rem;
    background: rgba(26, 27, 38, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: clamp(1rem, 2vw, 1.5rem);
    width: clamp(280px, 25vw, 360px);
    max-height: calc(100vh - 100px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
    flex-shrink: 0;
}

.settings-header h3 {
    margin: 0;
    color: white;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

.settings-header-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-header-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.settings-options {
    flex: 1;
    overflow-y: auto;
    margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
    min-height: 0;
}

.settings-panel label {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: clamp(0.5rem, 1vw, 0.85rem);
    cursor: pointer;
    font-size: clamp(0.88rem, 1vw, 1rem);
}

.settings-panel input[type="checkbox"] {
    margin-right: 0.5rem;
}

.settings-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: clamp(0.6rem, 1vw, 0.85rem) clamp(0.8rem, 1.5vw, 1rem);
    margin-top: clamp(0.5rem, 1vw, 0.75rem);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    flex-shrink: 0;
}

.settings-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.settings-action-btn svg {
    flex-shrink: 0;
}

.url-display {
    margin-top: clamp(0.5rem, 1vw, 0.75rem);
    padding: clamp(0.5rem, 1vw, 0.75rem);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(0.75rem, 0.9vw, 0.9rem);
    word-break: break-all;
    max-height: 80px;
    overflow-y: auto;
    flex-shrink: 0;
}

/* ========== POWER MENU (Settings Header) ========== */
.power-menu-container {
    position: relative;
}

.power-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(26, 27, 38, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    min-width: 160px;
    z-index: 1001;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.power-menu.hidden {
    display: none;
}

.power-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
}

.power-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.power-menu-item.power-menu-danger {
    color: rgba(239, 68, 68, 0.9);
}

.power-menu-item.power-menu-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* ========== TRACK HEADER ========== */
.track-header {
    position: fixed;
    top: 1rem;
    left: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 100;
    max-width: 400px;
}

/* Album Art Link Container */
#album-art-link {
    display: block;
    text-decoration: none;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect for clickable album art */
#album-art-link[href^="spotify:"]:hover,
#album-art-link[href^="https://open.spotify.com"]:hover {
    transform: scale(1.05);
}

#album-art-link[href="#"] {
    cursor: default;
}

.album-art {
    width: clamp(80px, 12vw, 120px);
    height: clamp(80px, 12vw, 120px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    /* Smooth fade transition for image changes (prevents flickering during DB population) */
    transition: opacity 0.3s ease, all 0.5s ease;
    object-fit: cover;
    /* Hide by default until valid src is loaded */
    opacity: 0;
    display: block;
}

/* Show album art only when it has a valid HTTP(S) URL or local path */
.album-art[src^="http"],
.album-art[src^="/"] {
    opacity: 1;
}

/* Fallback: hide empty src to prevent broken image icon */
.album-art:not([src]),
.album-art[src=""] {
    display: none !important;
}

.track-info {
    flex: 1;
    min-width: 0;
}

.track-title {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    font-weight: 600;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-artist {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin-top: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-album {
    font-size: clamp(0.7rem, 2vw, 0.8rem);
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-top: 0.45rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== PLAYER UI CONTAINER ========== */
/* Groups progress bar and controls for dynamic positioning */
#player-ui-container {
    position: fixed;
    bottom: 80px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: bottom 0.3s ease;
    z-index: 900;
    pointer-events: none;
}

/* Move player container down when bottom nav is hidden */
body.hide-nav #player-ui-container {
    bottom: 20px;
}

/* ========== PROGRESS BAR ========== */
.progress-container {
    position: relative;
    width: clamp(300px, 60%, 500px);
    text-align: center;
    margin-bottom: 10px;
    pointer-events: auto;
    /* Add this to center it nicely if the parent is flex */
    margin-left: auto;
    margin-right: auto;

}

.progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 255, 255, 0.7) 100%
    );
    border-radius: 3px;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    position: relative;
}

/* Thumb indicator at end of progress bar */
.progress-fill::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.progress-time {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ========== PLAYBACK CONTROLS ========== */
.playback-controls {
    display: flex;
    justify-content: space-between; /* Spreads Left, Center, Right */
    align-items: center;
    gap: 10px;
    padding: 0.5rem 1.5rem; /* Increased side padding */
    background: rgba(26, 27, 38, 0.7); /* Slightly darker for better contrast */
    backdrop-filter: blur(15px);
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    width: clamp(300px, 90%, 500px); /* Fixed width constraint for centering */
    margin: 0 auto; /* Center the whole bar */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.controls-left,
.controls-right {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;  /* Space between buttons in left/right groups */
}

.controls-left {
    justify-content: space-between;
}

.controls-right {
    justify-content: space-between;
}

.controls-center {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* Space between Prev/Play/Next */
}

/* ========== BOTTOM-LEFT TOGGLE BUTTONS ========== */
/* Visual Mode, Word-Sync (Karaoke), and Slideshow toggle buttons */

/* Visual Mode Toggle Button (Bottom Left) */
.lyrics-toggle-btn {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 150;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.lyrics-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: scale(1.05);
}

/* Visual mode toggle icon sizing */
.lyrics-toggle-btn i {
    font-size: 1.25rem;
}

/* Active state for visual mode (when in visual/art mode) */
.lyrics-toggle-btn.active {
    color: white;
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Hide in minimal mode */
body[data-minimal="true"] .lyrics-toggle-btn {
    display: none !important;
}

/* Word-Sync Toggle Button (next to visual mode) */
.word-sync-toggle-btn {
    position: fixed;
    bottom: 24px;
    left: 76px;
    z-index: 150;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.word-sync-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: scale(1.05);
}

/* Icon sizing for Bootstrap stars icon */
.word-sync-toggle-btn i {
    font-size: 1.2rem;
}

/* Active state when word-sync is enabled and active */
.word-sync-toggle-btn.active {
    color: white;
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Inactive state: word-sync toggle off but available - matches default appearance */
.word-sync-toggle-btn.inactive {
    color: rgba(255, 255, 255, 0.7);
}

/* Unavailable state: no word-sync from any provider */
.word-sync-toggle-btn.unavailable,
.word-sync-toggle-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Diagonal strikethrough line */
.word-sync-toggle-btn.unavailable::after,
.word-sync-toggle-btn:disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 99%;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    transform: translate(-50%, -50%) rotate(45deg);
    pointer-events: none;
}

/* Hide in minimal mode */
body[data-minimal="true"] .word-sync-toggle-btn {
    display: none !important;
}

/* Slideshow Toggle Button (next to word-sync) */
.slideshow-toggle-btn {
    position: fixed;
    bottom: 24px;
    left: 128px;
    z-index: 150;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.slideshow-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: scale(1.05);
}

/* Phosphor icon sizing */
.slideshow-toggle-btn i {
    font-size: 1.2rem;
}

/* Active state when slideshow is enabled */
.slideshow-toggle-btn.active {
    color: white;
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Hide in minimal mode */
body[data-minimal="true"] .slideshow-toggle-btn {
    display: none !important;
}

/* Media Browser styles moved to mediabrowser.css */

/* ========== MOBILE LAYOUT: Stack buttons vertically ========== */
/* Uses CSS variable --buttons-base set by JS based on visible player elements */
@media (max-width: 825px) {
    /* Stack vertically along left edge: Media Browser (top), Slideshow, Karaoke, Visual Mode (bottom) */
    .media-browser-toggle-btn {
        left: 16px;
        bottom: calc(var(--buttons-base, 80px) + 150px);
    }
    .slideshow-toggle-btn {
        left: 16px;
        bottom: calc(var(--buttons-base, 80px) + 100px);
    }
    .word-sync-toggle-btn {
        left: 16px;
        bottom: calc(var(--buttons-base, 80px) + 50px);
    }
    .lyrics-toggle-btn {
        left: 16px;
        bottom: var(--buttons-base, 80px);
    }
}

.control-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Force override Android default button styles */
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Hover effect - only for devices with mouse/trackpad (prevents sticky hover on touch) */
@media (hover: hover) {
    .control-btn:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }
}

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

.control-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.control-btn:focus {
    outline: none;
}

/* Like and Queue buttons - smaller icons */
#btn-like i,
#btn-queue i {
    font-size: 1.1rem;
}

/* Playback controls (prev/next) - slightly larger */
#btn-previous i,
#btn-next i {
    font-size: 1.2rem;
}

.play-pause-btn {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    background: transparent;
    position: relative;
    /* Override any emoji rendering */
    -webkit-tap-highlight-color: transparent;
    -webkit-text-fill-color: white;
}

/* ========== MINIMAL MODE OVERRIDES ========== */
body[data-minimal="true"] .settings-toggle,
body[data-minimal="true"] .track-header,
body[data-minimal="true"] #player-ui-container,
body[data-minimal="true"] .album-art {
    display: none !important;
}

/* ========== BOTTOM NAV TOGGLE ========== */
.bottom-nav.hidden {
    display: none !important;
}

/* ========== BUTTON POSITIONING WHEN BOTTOM NAV VISIBLE ========== */
/* Push bottom-left toggle buttons up when navigation bar is shown */
body:not(.hide-nav) .lyrics-toggle-btn,
body:not(.hide-nav) .word-sync-toggle-btn,
body:not(.hide-nav) .slideshow-toggle-btn,
body:not(.hide-nav) .media-browser-toggle-btn {
    bottom: 56px; /* Above the thinner nav bar */
}

/* ========== RESPONSIVE DESIGN FOR NEW COMPONENTS ========== */
@media (max-width: 768px) {
    /* Hide bottom nav on mobile - it's off by default and causes layout issues */
    .bottom-nav {
        display: none !important;
    }

    .track-header {
        max-width: 250px;
    }

    .album-art {
        width: clamp(80px, 10vw, 120px);
        height: clamp(80px, 10vw, 120px);
    }

    .track-title {
        font-size: 1rem;
    }

    .track-artist {
        font-size: 0.85rem;
    }

    .track-album {
        font-size: 0.7rem;
    }

    /* COMMENTED OUT: Now handled by controls.css @media (max-width: 600px) */
    /*
    .control-btn {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }

    .play-pause-btn {
        width: 48px;
        height: 48px;
        font-size: 1.6rem;
    }
    */

    /* Adjust container position for mobile */
    #player-ui-container {
        bottom: 90px;
    }

    body.hide-nav #player-ui-container {
        bottom: 10px;
    }
}

@media (max-width: 280px) {
    .track-header {
        top: 0.5rem;
        left: 0.5rem;
    }
}

/* ========== SCROLLBAR STYLING ========== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ========== BACKGROUND LAYERS ========== */
.background-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(var(--blur-strength, 20px));
    /* No scaling transform - matches Soft and Sharp modes */
    transform: none;
    -webkit-transform: none;
    display: none;
    /* Hidden by default */
    transition: background-image 0.5s ease-in-out;
    will-change: transform, opacity;
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, var(--overlay-opacity, 0.6));
    display: none;
    /* Hidden by default */
    backdrop-filter: blur(30px) saturate(180%);
    /* Glassmorphism effect */
}

.background-layer.visible,
.background-overlay.visible {
    display: block;
}

/* ========== SHARP MODE (No Blur, High Res) ========== */
/* Sharp mode: Super sharp and clear album art with no blur effects */
/* Maximum sharpness - image rendered at native quality without any blur or scaling */
body.sharp-mode .background-layer {
    /* Micro-blur (0.5px) reduces jagged edges without looking blurry */
    filter: blur(0.0px) !important;

    /* Reset transforms to prevent scaling blur */
    transform: none !important;
    -webkit-transform: none !important;

    /* KEY: Forces browser to use best smoothing algorithm (bicubic/lanczos) */
    image-rendering: high-quality; 
    
    /* Performance hints for smooth transitions */
    will-change: opacity, background-image;
    
    /* Hardware acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

body.sharp-mode .background-overlay {
    /* Remove backdrop blur that causes haziness - this was the main culprit! */
    /* backdrop-filter: none !important; */
    /* -webkit-backdrop-filter: none !important; */
     /* FIX: Override the default flat black 0.6 opacity */
    /* Make it almost transparent to let the art shine */
 /*   background: radial-gradient(circle at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%) !important;*/
    backdrop-filter: blur(0.0px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(0.0px) saturate(130%) !important;
    /* Very transparent background (5%) to let the art shine */
    background: rgba(0, 0, 0, 0.03) !important;

    /* OPTIONAL: If you want it even clearer, use 0.1 or 0.0 */
    /* background: rgba(0, 0, 0, 0.1) !important; */
    /* Vignette gradient: vibrant center, dark edges for text readability */
    /* Keeps the center of the 3000px art vibrant while darkening edges for text contrast */


   /* background: radial-gradient(circle at center, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.75) 100%) !important;*/
}

/* ========== SHARP MODE SPECIFIC OVERRIDES ========== */
/* Since Sharp Mode has almost no global overlay (5%), we need stronger local contrast for text */

body.sharp-mode .current {
    /* RADIAL GRADIENT FADE - Darkest in the very center behind text */
    background: radial-gradient(
        closest-side,
        rgba(0, 0, 0, 0.0) 0%,    /* Very subtle core */
        rgba(0, 0, 0, 0.0) 80%,   /* Extends far out before fading */
        transparent 100%
    ) !important;
    
    /* Blends the dark pill with the album art color */
    mix-blend-mode: luminosity; 
    
    /* Tighter padding = smaller shadow footprint */
    padding: 10px 32px; 
    width: fit-content;
    max-width: 90%;
    margin: 0 auto;
    
    /* Explicitly reset global box/border styles */
    box-shadow: none;
    border-radius: 0; 

    /* HYBRID SHADOW: Crisp Black Definition + Ethereal White Halo */
    text-shadow: 
        /* CHANGE 1: Increase opacity (last number) from 0.5 to 0.8 or 1.0 for darker outline */
        /* You can also increase the blur (3rd number) from 4px to 8px for a wider shadow */
        0 2px 4px rgba(0, 0, 0, 0.9),   

        /* CHANGE 2: Increase white glow opacity from 0.3 to 0.5 for more pop against dark backgrounds */
        0 0 20px rgba(255, 255, 255, 0.5) !important; 
    
    /* Smooth transition for the pill effect */
   /* transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease;*/
}

/* Also slightly darken the adjacent lines in Sharp Mode */
body.sharp-mode .previous,
body.sharp-mode .next {
    /* SUBTLE PILL BACKGROUND for readability on light art */
    background: radial-gradient(
        closest-side,
        rgba(0, 0, 0, 0.0) 0%,
        rgba(0, 0, 0, 0.0) 75%,
        transparent 100%
    ) !important;
    
    /* Inherit blend mode behavior */
    mix-blend-mode: luminosity;
    
    padding: 4px 20px;
    width: fit-content;
    margin: 0 auto;
    
    /* HYBRID SHADOW: Definition + Soft Glow */
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.8), /* Increased from 0.5 to match your strong style */
        0 0 10px rgba(255, 255, 255, 0.2) !important; /* Slight bump for visibility */
        
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sharp Mode word-sync: Inherit parent's text-shadow instead of using generic glow */
/* This ensures word highlights match Sharp Mode's strong contrast styling */
body.sharp-mode .word-active,
body.sharp-mode .word-sung,
body.sharp-mode .word-upcoming {
    text-shadow: inherit;
}


/* ========== SOFT MODE (Medium Blur, No Scaling) ========== */
/* Soft mode: Medium blur album art background - balanced between sharp and blurred */
/* Provides good image clarity with better text readability than sharp mode */
body.soft-mode .background-layer {
    /* Medium blur (6px) - provides softness while maintaining image clarity */
    filter: blur(2px) !important;
    /* Remove scaling transform to show image at native size (no upscaling artifacts) */
    transform: none !important;
    -webkit-transform: none !important;
    /* Use high-quality rendering for photos */
    image-rendering: auto;
}

body.soft-mode .background-overlay {
    /* Light backdrop blur (10px) - softens edges without major haziness */
    backdrop-filter: blur(4px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(140%) !important;
    /* Medium dark overlay for better text contrast and readability */
    background: rgba(0, 0, 0, 0.20) !important;
}

/* ========== SPOTIFY LOGIN OVERLAY ========== */
.spotify-login-overlay {
    /* Full screen overlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /* Dark semi-transparent background */
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    /* Center the login card */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Smooth fade-in animation */
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.spotify-login-card {
    /* Card container */
    background: linear-gradient(135deg, #1e2030 0%, #2f354d 100%);
    border-radius: 16px;
    padding: 40px;
    max-width: 520px;
    width: 95%;
    /* Center content */
    text-align: center;
    /* Subtle shadow for depth */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    /* Border for definition */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Smooth scale-in animation */
    animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.spotify-login-icon {
    /* Large emoji icon */
    font-size: 64px;
    margin-bottom: 20px;
    /* Subtle animation */
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.spotify-login-card h2 {
    /* Heading style */
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

.spotify-login-card p {
    /* Description text */
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 1.5;
}

.spotify-login-button {
    /* Spotify green button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1DB954;
    /* Spotify brand green */
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    /* Hover effect */
    box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3);
}

.spotify-login-button:hover {
    /* Hover state */
    background: #1ed760;
    /* Lighter green on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(29, 185, 84, 0.4);
    color: #ffffff;
    text-decoration: none;
}

.spotify-login-button:active {
    /* Active/pressed state */
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(29, 185, 84, 0.3);
}

.spotify-login-note {
    /* Small note text */
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-top: 16px;
    margin-bottom: 0;
}

/* Dismiss button (top-right X) */
.spotify-skip-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spotify-skip-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Redirect URI hints container */
.spotify-redirect-hints {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    text-align: left;
}

.spotify-redirect-hints .hints-label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}

/* URI row - horizontal layout */
.uri-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
}

.uri-row:last-child {
    margin-bottom: 0;
}

.uri-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    min-width: 85px;
}

.uri-value {
    flex: 1;
    font-family: monospace;
    font-size: 11px;
    color: #1DB954;
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 8px;
    border-radius: 4px;
    word-break: break-all;
    white-space: normal;
}

.uri-copy-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uri-copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Skip option text */
.spotify-skip-note {
    margin-top: 12px;
    margin-bottom: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.spotify-skip-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

.spotify-skip-link:hover {
    color: white;
}

/* Ensure card has relative positioning for dismiss button */
.spotify-login-card {
    position: relative;
}

/* ========== VISUAL MODE STYLES ========== */

/* Visual Mode - Hide Lyrics Container */
.lyrics-container {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    opacity: 1;
    transform: translateY(0);
}

.lyrics-container.visual-mode-hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

/* Like Button Active State */

#btn-like.liked {
    color: rgb(255, 255, 255);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    /* White glow */
}

/* Queue Drawer */
.queue-drawer {
    position: fixed;
    top: 0;
    right: -300px; /* Hidden by default */
    width: 300px; /* Slightly wider */
    max-width: 85vw; /* Responsive on mobile */
    height: 100vh;
    height: 100dvh;
    
    /* Transparent background as requested, slight blur for readability */
    /* background: rgba(0, 0, 0, 0.3); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border-left: 1px solid rgba(255, 255, 255, 0.1); */

    z-index: 2000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /*  box-shadow: -10px 0 40px rgba(0,0,0,0.6); */
    display: flex;
    flex-direction: column;
    padding: 20px;
    /* FIX: Ensure interactions work inside */
    pointer-events: auto; 

    
    /* Add readable background on tablets too */
    background: rgba(15, 17, 25, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(16px);
   /* border-left: 1px solid rgba(255, 255, 255, 0.08); */
}
    
    /* Ensure flush against right edge when open */
    .queue-drawer.open {
        right: 0;
    }
    

/* Queue Backdrop - Disable strictly for the lyrics area interaction */
.queue-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Totally transparent so it doesn't darken the lyrics */
    background: transparent; 
    z-index: 1999; /* Below drawer, above content */
    opacity: 0;
    pointer-events: none; /* Default to pass-through */
    transition: none; /* Instant toggle */
}

.queue-backdrop.visible {
    /* Still transparent, but blocks clicks to content */
    opacity: 1; 
    pointer-events: auto; /* Catch clicks */
}

/* Ensure scrolling works */
.queue-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    pointer-events: auto; /* Explicitly enable pointer events */

    /* Hide Scrollbar - Chrome, Safari, Opera */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
}

.queue-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
    background: transparent;
}

/* RESTORED: Missing Queue Styles */
.queue-drawer.open {
    right: 0;
}

/* Queue Header Controls */
.queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.queue-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: white;
}

#queue-close {
  /*  background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 1.5rem;
    cursor: pointer;
    /* Hide the X button as requested */
    display: none;

}

/* Queue Backdrop for clicking outside */
.queue-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   /* background: rgba(0,0,0,0.5); */
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.queue-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

.queue-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
    -webkit-overflow-scrolling: touch;
    /* FIX: Ensure scrollable area is clickable */
    pointer-events: auto;
}

.queue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: background 0.2s;
}

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

.queue-art {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
}

.queue-info {
    flex: 1;
    min-width: 0;
}

.queue-title {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.queue-artist {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Queue Drawer - Mobile Responsive */
@media (max-width: 600px) {
    .queue-drawer {
        /* Fluid width: scales with viewport */
        width: clamp(160px, 60vw, 240px);
        max-width: 70vw;
        padding: 14px;
        padding-top: 40px; /* Push content below track header area */
        right: calc(-1 * clamp(160px, 60vw, 240px)); /* Match width for hidden state */
        
        /* Add readable background on mobile */
        background: rgba(15, 17, 25, 0.1);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(16px);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }
    
    /* Ensure flush against right edge when open */
    .queue-drawer.open {
        right: 0;
    }
    
    .queue-header {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    
    .queue-header h3 {
        font-size: 1rem;
    }
    
    .queue-item {
        gap: 8px;
        padding: 6px;
        margin-bottom: 4px;
    }
    
    .queue-art {
        width: 32px;
        height: 32px;
        border-radius: 3px;
    }
    
    .queue-title {
        font-size: 0.8rem;
    }
    
    .queue-artist {
        font-size: 0.7rem;
    }
}

/* Very small screens (320px) */
/* @media (max-width: 380px) {
    .queue-drawer {
        width: 65vw;
        max-width: 65vw;
        padding: 12px;
        right: -65vw;
    }
    
    .queue-art {
        width: 28px;
        height: 28px;
    }
    
    .queue-title {
        font-size: 0.75rem;
    }
    
    .queue-artist {
        font-size: 0.65rem;
    }
} */

/* Background Style Controls in Modal */
.style-controls-section {
    /* Remove padding and background for cleaner look */
    padding: 0;
    background: transparent;
    border-radius: 0;
    margin-bottom: 16px;
    text-align: left; /* Align with content */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spread title and buttons */
    /* border-bottom: 1px solid rgba(255,255,255,0.1); */
    padding-bottom: 12px;
}

.style-controls-section h4 {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    /* Renamed "Background Style" to simpler "Style" in your head if desired, or keep as is */
}

.style-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 0; /* Remove margin */
}

.style-btn {
    padding: 4px 12px; /* Smaller padding */
    font-size: 0.75rem; /* Smaller text */
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; /* Less rounded, more sleek */
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(255,255,255,0.7);
}

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

.style-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Hide the hint text */
.style-hint {
    display: none;
}

/* FIX: Grid Overlapping */
.art-grid {
    display: grid;
    /* Use auto-fill with a fixed minimum to ensure consistent rows */
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    margin-top: 16px;
    /* Ensure the grid respects the container width */
    width: 100%; 
    /* Ensure content flows naturally */
    grid-auto-rows: min-content; /* Changed from max-content to min-content to fit content exactly */
    align-items: start; /* Align items to top of their cells */
}

/* Header for Artist Images Section */
.artist-images-header {
    grid-column: 1 / -1; /* Span full width */
    width: 100%;
    margin-top: 24px;
    margin-bottom: 12px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    font-weight: 600;
    /* Ensure it breaks the grid flow visually */
    display: flex;
    align-items: center;
    /* Force it to start on a new row */
    grid-row-start: auto;

}

/* ========== WORD-SYNCED LYRICS STYLES ========== */
/* Karaoke-style word highlighting for providers with word-sync data */

/* Register CSS custom property for smooth gradient animation */
/* This allows browsers to interpolate the percentage value smoothly */
@property --word-progress {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

/* Container for word-synced current line */
.current.word-sync-active {
    /* Override default animation for word-sync mode */
    animation: none;
    
    /* Preserve spaces between word spans - prevents whitespace collapsing on line wrap */
    white-space: pre-wrap;
    
    /* Smooth line transitions - duration controlled by JS via CSS variable
       Default: 0ms (instant) - JS sets value for smooth transitions */
    transition: opacity var(--ws-transition-duration, 0ms) ease-out, 
                transform var(--ws-transition-duration, 0ms) ease-out;
}

/* Fade out old line before replacement */
.current.word-sync-active.line-exiting {
    opacity: 0;
    transform: translateY(-8px);
}

/* Fade in new line after replacement */
.current.word-sync-active.line-entering {
    animation: lineEnter var(--ws-transition-duration, 0ms) ease-out forwards;
}

@keyframes lineEnter {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Instrumental gap (♪) entrance animation - uses line-entering without word-sync-active */
.current.line-entering:not(.word-sync-active) {
    animation: gapEnter 0.2s ease-out forwards;
}

@keyframes gapEnter {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Individual word spans in word-synced mode */
.word-sync-word {
    display: inline-block;
    position: relative;
    padding: 0 0.05em;
    
    /* GPU acceleration hints - only basic layer promotion */
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: layout style;
    
    /* Smooth transitions including transform for de-activation (pop → sung) */
    transition: opacity 0.12s ease-out, color 0.12s ease-out, transform 0.15s ease-out;
    
    /* Prevent subpixel rendering jitter */
    -webkit-font-smoothing: antialiased;
}

/* Words not yet sung (upcoming) */
.word-upcoming {
    opacity: 0.6;
    /* Use lyrics color with reduced opacity */
    color: color-mix(in srgb, var(--lyrics-text-color, white) 70%, transparent);
}

/* Words already sung */
.word-sung {
    opacity: 1;
    color: var(--lyrics-text-color, white);
}

/* Currently active word - FADE style */
/* Uses CSS gradient mask to reveal the word progressively */
.word-active {
    opacity: 1;
    color: var(--lyrics-text-color, white);
    /* font-weight: 600; */  /* Commented out to prevent wrap flicker */
    /* Subtle glow for active word - uses configurable intensity */
    text-shadow: 0 0 calc(15px * var(--lyrics-glow-intensity, 1)) color-mix(in srgb, var(--lyrics-text-color, white) 50%, transparent);
    /* GPU layer promotion - only for the active word, not all words */
    will-change: transform, opacity;
}

/* Fade style: gradient reveal from left to right */
.word-sync-fade .word-active {
    background: linear-gradient(
        90deg,
        var(--lyrics-text-color, white) 0%,
        var(--lyrics-text-color, white) var(--word-progress, 0%),
        color-mix(in srgb, var(--lyrics-text-color, white) 50%, transparent) var(--word-progress, 0%),
        color-mix(in srgb, var(--lyrics-text-color, white) 50%, transparent) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Smooth gradient transition using registered property - 16ms (~1 frame) for minimal lag */
    transition: --word-progress 0.01s linear;
}

/* Pop style: scale animation on active word */
.word-sync-pop .word-active {
    /* Scale is applied via inline style in JS for smooth animation */
    transition: transform 0.08s ease-out;
    will-change: transform;
}

/* Ensure word-sung words have full visibility in both modes */
.word-sync-fade .word-sung,
.word-sync-pop .word-sung {
    opacity: 1;
    color: var(--lyrics-text-color, white);
    /* font-weight: 500; */  /* Commented out to prevent wrap flicker */
}

/* Reduced motion preference - disable word animations */
@media (prefers-reduced-motion: reduce) {
    .word-sync-word {
        transition: none;
        will-change: auto;
    }
    
    .word-sync-pop .word-active {
        transform: none !important;
    }
    
    .word-sync-fade .word-active {
        background: none;
        -webkit-text-fill-color: white;
    }
}

/* ========== DEBUG TIMING OVERLAY ========== */

.debug-timing-overlay {
    position: fixed;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    font-family: 'SF Mono', 'Roboto Mono', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    z-index: 10000;
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-width: 220px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.debug-timing-overlay .debug-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.debug-timing-overlay .debug-label {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.debug-timing-overlay .debug-warn {
    color: #ff6b6b;
    font-weight: 600;
}

/* ========== WAVEFORM SEEKBAR ========== */
.waveform-container {
    position: relative;
    width: clamp(300px, 60%, 500px);
    height: 60px;  /* Increased height for canvas + time display */
    text-align: center;
    margin-bottom: 30px;  /* Ensure time display doesn't overlap controls */
    pointer-events: auto;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
    z-index: 100;  /* Above background layers, below controls */
}

.waveform-container canvas {
    width: 100%;
    height: 40px;
    display: block;
    border-radius: 4px;
    opacity: 1;
    /* Boost brightness and saturation for better visibility */
    filter: brightness(1.2) saturate(1.2);
}

.waveform-container .progress-time {
    margin-top: 6px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ========== SPECTRUM VISUALIZER ========== */
/* Full-width ambient visualizer at bottom edge of screen */
.spectrum-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -40px;  /* Aligned to bottom edge */
    height: 120px;  /* Shorter height, less intrusive */
    z-index: 1;  /* Behind content but above background */
    pointer-events: none;  /* Don't block clicks */
    display: flex;
    align-items: flex-end;  /* Bars grow upward from bottom */
    justify-content: center;
    overflow: hidden;
}

.spectrum-container canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* No position adjustment needed for hide-nav since we're at bottom: 0 */
body.hide-nav .spectrum-container {
    bottom: 0;
}

/* Hide in minimal mode */
body[data-minimal="true"] .spectrum-container,
body[data-minimal="true"] .waveform-container {
    display: none !important;
}

/* ========== ART-ONLY MODE ========== */
/* Long-press visual mode button to enter: hides all UI, shows only background art with auto-sharp */
body.art-only-mode .lyrics-container,
body.art-only-mode .track-header,
body.art-only-mode #player-ui-container,
body.art-only-mode .top-right-controls,
body.art-only-mode .bottom-nav,
body.art-only-mode .lyrics-toggle-btn,
body.art-only-mode .word-sync-toggle-btn,
body.art-only-mode .slideshow-toggle-btn,
body.art-only-mode .media-browser-toggle-btn,
body.art-only-mode #provider-info,
body.art-only-mode #next-up-card,
body.art-only-mode .provider-modal,
body.art-only-mode .settings-panel,
body.art-only-mode .audio-source-modal,
body.art-only-mode .queue-drawer {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Keep background visible in art-only mode and enable zoom/pan */
body.art-only-mode .background-layer {
    display: block !important;
    z-index: 900 !important;  /* Above everything except modals/toast so it receives events */
    pointer-events: auto !important;  /* Ensure it receives touch/mouse events */
    touch-action: none !important;  /* Disable browser's default pan/zoom - JS handles it */
    -webkit-user-select: none !important;  /* Prevent text selection on long-press */
    user-select: none !important;
    /* transform is set by artZoom.js - don't override here */
    /* Slower transition to help mask image loading flicker */
    transition: background-image 0.4s ease-in-out !important;
}

/* Ensure overlay stays visible in art-only mode with saturation boost */
body.art-only-mode .background-overlay {
    display: block !important;
    z-index: 902 !important;  /* Just below background-layer */
    pointer-events: none !important;  /* Let events pass through to background-layer */
}

/* ========== ART MODE ZOOM IMAGES ========== */
/* Hidden by default - shown only in art mode with zoom-out enabled */
.art-zoom-img {
    display: none;
    position: fixed;
    /* Center the image - transform will add scale */
    top: 50%;
    left: 50%;
    /* NO size constraints - image displays at natural dimensions */
    width: auto;
    height: auto;
    z-index: -5;
    pointer-events: none;
    /* Base centering transform - scale added by JS */
    transform: translate(-50%, -50%);
    transform-origin: center center;
    background-color: black;
    /* Smooth transitions for opacity (fade) */
    transition: opacity 0.8s ease;
}

/* When art mode is active AND zoom-out is enabled */
body.art-only-mode.zoom-out-enabled .art-zoom-img {
    display: block;
    z-index: 901;  /* Above background-layer (900) */
    pointer-events: auto;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Hide background layer when zoom imgs are active */
body.art-only-mode.zoom-out-enabled #background-layer {
    visibility: hidden !important;
}

/* Transition for crossfade between zoom imgs */
.art-zoom-img {
    transition: opacity 0.8s ease;  /* Matches slideshowConfig.transitionDuration */
}

/* Apply saturation boost in sharp mode (matches overlay's backdrop-filter effect) */
body.art-only-mode.zoom-out-enabled.sharp-mode .art-zoom-img {
    filter: saturate(110%);
}

/* ========== NEXT-UP PREVIEW CARD ========== */
.next-up-card {
    position: fixed;
    bottom: 110px;
    right: 16px;
    z-index: 150;
    background: transparent;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 160px;
    max-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    /* Slide-in animation */
    animation: slideInRight 0.3s ease-out;
}

/* Mobile: Move next-up card above seekbar/controls */
@media (max-width: 768px) {
    .next-up-card {
        bottom: calc(var(--buttons-base, 180px) + 30px);  /* Same base + offset */
        min-width: 100px;
        max-width: 240px;
        padding: 8px 10px;
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.next-up-card.hidden {
    display: none;
}

.next-up-card:hover {
    background: rgba(30, 33, 45, 0.5);          /* Was: 0.95 - lighter on hover */
    transform: scale(1.02);
}

/* Label hidden - context is clear from position */
.next-up-label {
    display: none;                              /* Hidden - was visible before */
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 6px;
}

.next-up-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.next-up-art {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.next-up-art:not([src]),
.next-up-art[src=""] {
    display: none;
}

.next-up-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.next-up-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.next-up-artist {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Hide next-up card in minimal mode */
body[data-minimal="true"] .next-up-card {
    display: none !important;
}

/* ========== SETTINGS HEADER BUTTONS ========== */
.settings-header-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Style the settings link (anchor) same as button */
a.settings-header-btn {
    text-decoration: none;
}

/* ========== FILL MODE BUTTONS ========== */
/* Match style-btn for consistent look */
.fill-btn {
    padding: 4px 12px;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(255, 255, 255, 0.7);
}

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

.fill-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* ========== BACKGROUND FILL MODES ========== */
.background-layer.fill-cover {
    background-size: cover;
    background-position: center;
}

.background-layer.fill-contain {
    background-size: contain;
    background-position: center;
}

.background-layer.fill-stretch {
    background-size: 100% 100%;
    background-position: center;
}

.background-layer.fill-original {
    background-size: auto;
    background-position: center;
}

/* ========== SLIDESHOW IMAGES ========== */
/* Slideshow images overlay on background-layer for crossfade transitions */
.slideshow-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease;
    will-change: opacity, transform;
    /* Ensure slideshow images are on top of base background */
    z-index: 1;
}

/* Active state - fade in */
.slideshow-image.active {
    opacity: 1;
}

/* ========== MAIN UI LATENCY CONTROLS ========== */
/* Minimalistic controls positioned dynamically by JS relative to provider badge */
.main-latency-controls {
    position: fixed;
    /* Position set dynamically by positionLatencyControls() in latency.js */
    /* Initial fallback values (JS overrides these) */
    bottom: 24px;
    right: 125px;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    background: transparent;
    border: none;
    transition: right 0.15s ease, top 0.15s ease;  /* Smooth repositioning */
}

/* Hidden state */
.main-latency-controls.hidden {
    display: none;
}

/* Hide on mobile/tablet (below 850px) */
@media (max-width: 850px) {
    .main-latency-controls {
        display: none !important;
    }
}

/* Hide in minimal mode */
body[data-minimal="true"] .main-latency-controls {
    display: none !important;
}

/* Hide in art-only mode (visual/slideshow mode) */
body.art-only-mode .main-latency-controls {
    display: none !important;
}

/* Latency buttons - minimal circular style */
.main-latency-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.main-latency-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
}

.main-latency-btn:active {
    transform: scale(0.9);
}

/* Latency value display - subtle */
.main-latency-value {
    min-width: 32px;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

/* Highlight when offset is non-zero */
.main-latency-value.adjusted {
    color: rgba(255, 255, 255, 0.5);
}