/* New Music Player Components - Prefixed with mp- to avoid conflicts */

/* ===================================================================== */
/* === WELCOME SECTION === */
/* ===================================================================== */

.mp-welcome-message {
    text-align: center;
    color: var(--text-secondary);
    margin: 6rem auto;
    padding: 0 1.25rem;
}

    .mp-welcome-message h2 {
        font-family: var(--font-main);
        font-size: 2rem;
        font-weight: 400;
        margin-bottom: 1rem;
        color: var(--text-primary);
    }

    .mp-welcome-message p {
        font-family: var(--font-main);
        font-size: 1rem;
        color: var(--text-secondary);
        max-width: 48rem;
    }

.mp-hero-title {
    font-family: var(--font-inter);
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: 24px;
}

    .mp-hero-title .mp-hero-title-highlight {
        color: #8b5cf6 !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        font-family: inherit !important;
    }

.mp-highlighted-button {
    padding: 0.5rem 1rem;
    background-color: var(--element-hover);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--font-size);
    transition: background-color 0.2s;
}

    .mp-highlighted-button:hover,
    .mp-highlighted-button:focus {
        background-color: #00bf02 !important;
        color: #fff !important;
        text-decoration: none;
    }

/* ===================================================================== */
/* === MUSIC SURVEY PANEL === */
/* ===================================================================== */

/*.mp-music-survey-panel {
    width: 100%;
    max-width: 700px;
    margin: 15px auto;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}
*/

/* Base card with glassmorphism */
.mp-music-survey-panel {
    width: 100%;
    max-width: 700px;
    margin: 15px auto;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(99, 102, 241, 0.2); /* Your light SLM color */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 10px rgba(99, 102, 241, 0.1);
}

/* Dark theme with SLM purple glow */
body[data-theme="dark"] .mp-music-survey-panel {
    background-color: rgba(26, 31, 46, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(111, 55, 216, 0.4); /* Your dark SLM color */
    box-shadow: 0 2px 10px #000000, 0 0 15px rgba(111, 55, 216, 0.5); /* Purple glow */
}

.mp-music-panel-header {
    display: flex;
    flex-direction: column; /* Stack vertically instead of horizontally */
    align-items: center;
    margin-bottom: 15px;
}

    .mp-music-panel-header h1 {
        margin-bottom: 5px;
        font-family: var(--font-inter);
    }

    .mp-music-panel-header p {
        margin-top: 0;
    }

.mp-music-info {
    flex: 1;
}

    .mp-music-info h3 {
        margin: 0 0 5px 0;
        font-size: 18px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .mp-music-info p {
        margin: 0;
        font-size: 14px;
        color: var(--text-secondary);
    }

/* ===================================================================== */
/* === MUSIC CONTROLS === */
/* ===================================================================== */

.mp-music-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
    position: relative;
}

.mp-play-pause-button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    background-color: var(--button);
    color: var(--text-primary);
}

    .mp-play-pause-button:hover {
        transform: scale(1.05);
        background-color: var(--element-hover);
    }

.mp-play-icon, .mp-pause-icon {
    font-size: 24px;
    transform: scale(1.5);
    display: inline-block;
}

.mp-progress-bar {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.mp-progress-fill {
    height: 100%;
    width: 0%;
    background-color: var(--signature-green) !important;
    border-radius: 2px;
}

    /* Buffering sweep — a green comet with a bright core travels the empty
   track while audio loads. Inherently indeterminate: a moving band can
   never read as a completed bar. Reduced-motion users get the old breath. */
    .mp-progress-fill.buffering {
        width: 100% !important;
        opacity: 1;
        background-color: transparent !important;
        background-image: linear-gradient(90deg, transparent 0%, var(--signature-green) 30%, rgba(255, 255, 255, 0.85) 50%, var(--signature-green) 70%, transparent 100%);
        background-size: 45% 100%;
        background-repeat: no-repeat;
        animation: mp-buffering-sweep 1.5s ease-in-out infinite;
    }

@media (prefers-reduced-motion: reduce) {
    .mp-progress-fill.buffering {
        background-image: none;
        background-color: var(--signature-green) !important;
        opacity: 0;
        animation: mp-buffering-breath 1.5s ease-in-out infinite;
    }
}

@keyframes mp-buffering-breath {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
    }
}

@keyframes mp-buffering-sweep {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ===================================================================== */
/* === FEEDBACK SECTION === */
/* ===================================================================== */

/* Rating-slider geometry - single source of truth for the number-row alignment.
   Declared here because .mp-feedback-section is the nearest common ancestor of the
   slider and the number row: the row is a SIBLING of .music-rating-slider-container,
   not of the input, so it does not inherit the container's padding and has to be told
   about it.

   The four values below are everything the alignment depends on. Change a thumb size
   or a container padding here and the row follows; nothing is tuned by hand.
     --slm-thumb          thumb diameter, consumed by both thumb pseudo-elements
     --slm-track-border   the input's own border (the thumb centre travels in the
                          input's CONTENT box, so the border is part of the inset)
     --slm-track-max      the input's max-width
     --slm-container-pad  horizontal padding of .music-rating-slider-container */
.mp-feedback-section {
    --slm-thumb: 36px;
    --slm-track-border: 2px;
    --slm-track-max: 400px;
    --slm-container-pad: 20px;
    text-align: center;
    margin-top: 45px;
    margin-bottom: 25px;
}

    .mp-feedback-section h3 {
        margin: 0 0 10px 0;
        font-size: 18px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .mp-feedback-section p {
        margin: 0 0 20px 0;
        color: var(--text-secondary);
        transition: opacity 0.8s ease;
    }

    .mp-feedback-section p.subtext-fading {
        opacity: 0;
    }

.mp-feedback-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.mp-feedback-button {
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

    .mp-feedback-button:hover {
        transform: scale(1.05);
        background-color: var(--element-hover);
    }

    .mp-feedback-button.mp-like:hover {
        background-color: rgba(76, 175, 80, 0.2);
    }

    .mp-feedback-button.mp-neutral:hover {
        background-color: rgba(158, 158, 158, 0.2);
    }

    .mp-feedback-button.mp-dislike:hover {
        background-color: rgba(244, 67, 54, 0.2);
    }

.mp-button-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

    .mp-button-content .mp-emoji {
        font-size: 24px;
        transform: scale(1.5);
        display: inline-block;
    }

    .mp-button-content .mp-label {
        font-size: 14px;
    }

.mp-feedback-button {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .mp-feedback-button:hover {
        transform: scale(1.1);
        background-color: var(--bg-secondary) !important;
    }

    .mp-feedback-button:active {
        transform: scale(0.95);
    }

    .mp-feedback-button.mp-selected {
        box-shadow: 0 0 8px #a3c2f5 !important;
        transform: scale(1.05) !important;
    }

/* ===================================================================== */
/* === PROGRESS AND SURVEY === */
/* ===================================================================== */

.mp-survey-progress {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.mp-progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.mp-progress-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.mp-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
}

.mp-progress-text {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 5px;
    text-align: center;
    width: 100%;
}

/* ===================================================================== */
/* === COMPLETION STATES === */
/* ===================================================================== */

.mp-survey-complete-panel {
    /* Inherits from mp-music-survey-panel */
}

.mp-green-button {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    font-size: var(--font-size);
    transition: background-color 0.2s;
    background-color: var(--signature-green) !important;
    color: #fff !important;
}

    .mp-green-button:hover,
    .mp-green-button:focus {
        box-shadow: 0 0 10px #3e67e9 !important;
        transition: box-shadow 0.3s ease;
    }

.mp-button-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: mp-spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes mp-spin {
    to {
        transform: rotate(360deg);
    }
}

.mp-status-message {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-top: 0.5rem;
}

/* ===================================================================== */
/* === MOBILE ADAPTATIONS === */
/* ===================================================================== */

.mp-mobile-music-panel {
    width: 100%;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 8px 0;
    padding: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.mp-mobile-control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mp-mobile-sample-info {
    display: flex;
    flex-direction: column;
}

.mp-mobile-play-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .mp-mobile-play-button:hover,
    .mp-mobile-play-button:focus {
        background-color: var(--element-hover);
    }

    .mp-mobile-play-button .mp-play-icon,
    .mp-mobile-play-button .mp-pause-icon {
        font-size: 18px; /* Remove the 72px !important */
        transform: scale(1.5);
        display: inline-block;
    }

.mp-mobile-feedback-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 8px;
}

.mp-mobile-feedback-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .mp-mobile-feedback-button:hover,
    .mp-mobile-feedback-button:focus {
        transform: scale(1.1);
    }

    .mp-mobile-feedback-button.mp-like:hover {
        background-color: rgba(76, 175, 80, 0.2);
    }

    .mp-mobile-feedback-button.mp-neutral:hover {
        background-color: rgba(158, 158, 158, 0.2);
    }

    .mp-mobile-feedback-button.mp-dislike:hover {
        background-color: rgba(244, 67, 54, 0.2);
    }

.mp-mobile-feedback-button {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .mp-mobile-feedback-button:hover {
        transform: scale(1.1);
        background-color: var(--bg-secondary) !important;
    }

    .mp-mobile-feedback-button:active {
        transform: scale(0.95);
    }

    .mp-mobile-feedback-button.mp-selected {
        box-shadow: 0 0 8px #a3c2f5 !important;
        transform: scale(1.05) !important;
    }

.mp-mobile-progress-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 5px;
}

.mp-mobile-progress-dots {
    display: flex;
    gap: 6px;
    margin-bottom: 5px;
}

.mp-mobile-progress-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.mp-sample-badge {
    background-color: var(--bg-tertiary);
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-block;
}

.mp-mobile-prompt {
    text-align: center;
    font-size: 14px;
    margin: 8px 0;
    color: var(--text-primary);
}

.mp-mobile-sample-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.mp-mobile-progress-bar {
    height: 4px;
    width: 100%;
    background-color: var(--border-color);
    border-radius: 2px;
    margin: 10px 0;
    overflow: hidden;
}

.mp-mobile-progress-fill {
    height: 100%;
    width: 0%;
    background-color: var(--bg-tertiary);
    border-radius: 2px;
}

.mp-mobile-progress-text {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

.mp-mobile-panel-header {
    margin-bottom: 8px;
}

/* ===================================================================== */
/* === RESPONSIVE BREAKPOINTS === */
/* ===================================================================== */

@media (max-width: 400px) {
    .mp-feedback-buttons {
        flex-direction: column;
        align-items: center;
    }

    .mp-feedback-button {
        width: 100%;
        margin-bottom: 8px;
        padding: 8px 10px;
        min-width: 70px;
    }

    .mp-button-content .mp-emoji {
        font-size: 24px;
    }

    .mp-button-content .mp-label {
        font-size: 12px;
    }
}

@media (max-width: 350px) {
    .mp-mobile-survey-panel .mp-feedback-button {
        padding: 6px 10px;
        font-size: 14px;
    }

    .mp-mobile-survey-panel .mp-music-info h3 {
        font-size: 16px;
    }

    .mp-mobile-survey-panel .mp-music-info p {
        font-size: 12px;
    }
}

@media (max-width: 320px) {
    .mp-mobile-feedback-button {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .mp-mobile-play-button {
        width: 36px;
        height: 36px;
    }

    .mp-mobile-prompt {
        font-size: 12px;
    }
}

/* ===================================================================== */
/* === THEME-SPECIFIC OVERRIDES === */
/* ===================================================================== */

/* Light Theme */
body[data-theme="light"] .mp-music-survey-panel {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .mp-progress-dot.mp-active {
    background-color: #3B82F6;
    border-color: #3B82F6;
    transform: scale(1.2);
    box-shadow: 0 0 3px rgba(37, 99, 235, 0.5);
}

body[data-theme="light"] .mp-mobile-progress-dot.mp-active {
    background-color: #3B82F6;
    border-color: #3B82F6;
    transform: scale(1.2);
}

/* Dark Theme */
body[data-theme="dark"] .mp-music-survey-panel {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px #000000;
}

body[data-theme="dark"] .mp-progress-dot.mp-active {
    background-color: var(--bg-tertiary);
    border-color: var(--button);
    transform: scale(1.2);
    box-shadow: 0 0 3px var(--button-hover);
}

body[data-theme="dark"] .mp-mobile-music-panel {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .mp-mobile-progress-dot.mp-active {
    background-color: var(--bg-tertiary);
    border-color: var(--button);
    transform: scale(1.2);
    box-shadow: 0 0 3px var(--button-hover);
}

/* System-specific overrides */
body[data-theme="dark"][data-system="nrich"] .mp-music-survey-panel {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px #000000;
}

body[data-theme="dark"][data-system="nrich"] .mp-progress-dot.mp-active {
    background-color: var(--bg-tertiary);
    border-color: var(--button);
    transform: scale(1.2);
    box-shadow: 0 0 3px var(--button-hover);
}

body[data-theme="dark"][data-system="nrich"] .mp-mobile-music-panel {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ===================================================================== */
/* === UTILITY CLASSES === */
/* ===================================================================== */

.mp-mobile-survey-hidden {
    display: none !important;
}

.mp-mobile-survey-fullwidth {
    width: 100% !important;
    flex: 1 1 auto !important;
}

.mp-mobile-survey-panel {
    max-width: 100% !important;
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 15px !important;
    box-sizing: border-box !important;
}

.mp-mobile-survey-mode {
    width: 100% !important;
}

.mp-music-panel-header p {
    margin-top: 0;
    color: var(--text-secondary);
    font-family: var(--font-main);
}

.country-selected {
    box-shadow: 0 0 15px var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.mp-conversation-container {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    height: 100%;
}


.mp-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    width: 100%;
    min-height: 100%;
    overflow-y: auto;
    position: relative;
    margin-left: 0;
}

/* ===================================================================== */
/* === WAVEFORM BACKGROUND ANIMATION === */
/* ===================================================================== */

.slm-waveform-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.slm-waveform-bg.active {
    opacity: 1;
}

.conversation-container {
    position: relative;
    background-color: var(--bg-secondary);
}

    .conversation-container .main-content {
        background-color: transparent;
    }

/* ===================================================================== */
/* === MUSIC PLAYER SLIDER STYLES === */
/* ===================================================================== */

/* Music Rating Slider - Premium Music Player Style */
.music-rating-slider-container {
    width: 100%;
    padding: 40px var(--slm-container-pad) 30px var(--slm-container-pad);
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
}

    /* Visual separator line */
    .music-rating-slider-container::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--border-color), transparent);
        opacity: 0.4;
    }

/* Main slider - much larger and more prominent */
.music-rating-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: var(--slm-track-max);
    height: 12px; /* Much thicker track */
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.2) 0%, var(--bg-secondary) 40%, var(--bg-secondary) 60%, rgba(34, 197, 94, 0.2) 100%);
    border: 2px solid var(--border-color);
    outline: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.1);
    /* Was margin-left: -5px. An asymmetric margin on a centred control offsets it by
       half itself (measured: 2.5px), which no symmetric construction can absorb - the
       number row would have to be skewed to match a skewed track. Removed so the input
       and the row share one centre line. */
}

/* Dark mode track styling */
body[data-theme="dark"] .music-rating-slider {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.3) 0%, var(--bg-secondary) 40%, var(--bg-secondary) 60%, rgba(34, 197, 94, 0.3) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

    body[data-theme="dark"] .music-rating-slider:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.4);
    }

/* Much larger, more prominent thumb - WebKit */
.music-rating-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--slm-thumb);
    height: var(--slm-thumb);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--signature-green), #00a002);
    border: 4px solid var(--bg-primary);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 191, 2, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

    /* Enhanced thumb interactions - WebKit */
    .music-rating-slider::-webkit-slider-thumb:hover {
        transform: scale(1.2);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 191, 2, 0.4);
        background: linear-gradient(135deg, #00d002, var(--signature-green));
    }

.music-rating-slider:active::-webkit-slider-thumb {
    transform: scale(1.1);
    transition: transform 0.1s ease;
}

/* Dark mode thumb styling - WebKit */
body[data-theme="dark"] .music-rating-slider::-webkit-slider-thumb {
    border-color: var(--bg-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 191, 2, 0.5);
}

    body[data-theme="dark"] .music-rating-slider::-webkit-slider-thumb:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 191, 2, 0.6);
    }

/* Larger thumb - Firefox */
.music-rating-slider::-moz-range-thumb {
    /* Chrome's thumb is border-box; Firefox's is content-box, so without this the
       SAME width renders one border wider there (measured 38px vs 30px on the hero,
       44px vs 36px on the main player) and no single inset can serve both engines. */
    box-sizing: border-box;
    width: var(--slm-thumb);
    height: var(--slm-thumb);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--signature-green), #00a002);
    border: 4px solid var(--bg-primary);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 191, 2, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

    .music-rating-slider::-moz-range-thumb:hover {
        transform: scale(1.2);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 191, 2, 0.4);
    }

/* Remove Firefox track styling */
.music-rating-slider::-moz-range-track {
    background: transparent;
}

/* Enhanced slider labels - larger and more prominent */
.slider-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 400px;
    padding: 0 8px;
    color: var(--text-primary);
    font-family: var(--font-main);
}

/* Remove subtle zone indicators - too busy for music player */
.slider-zones {
    display: none;
}

/* Active state with enhanced styling */
.music-rating-slider.rating-selected {
    border-color: var(--border-color); /* Keep original border color */
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.3) 0%, rgba(0, 191, 2, 0.1) 40%, rgba(0, 191, 2, 0.1) 60%, rgba(34, 197, 94, 0.3) 100%);
}

/* Mobile optimizations - even larger for touch */
@media (max-width: 768px) {
    .mp-feedback-section {
        --slm-thumb: 44px;
        --slm-track-max: 350px;
        --slm-container-pad: 30px;
    }

    .music-rating-slider-container {
        padding: 50px var(--slm-container-pad) 40px var(--slm-container-pad);
        margin-top: 50px;
    }

    .music-rating-slider {
        height: 14px;
    }

    .slider-labels {
        font-size: 18px;
        max-width: 350px;
    }
}

/* Enhanced focus states for accessibility */
/*.music-rating-slider:focus {
    border-color: var(--border-color);*/ /* Keep original border color */
    /*box-shadow: 0 0 0 3px rgba(0, 191, 2, 0.2), 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}*/

/*body[data-theme="dark"] .music-rating-slider:focus {
    box-shadow: 0 0 0 3px rgba(111, 55, 216, 0.3), 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
*/
/* Loading/disabled state */
.music-rating-slider:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

    .music-rating-slider:disabled::-webkit-slider-thumb,
    .music-rating-slider:disabled::-moz-range-thumb {
        cursor: not-allowed;
        transform: none !important;
    }

/* Submission feedback animation */
.music-rating-slider.submitting {
    animation: musicSliderPulse 0.8s ease-in-out;
}

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

    50% {
        transform: scale(1.02);
        filter: brightness(1.1);
    }
}

.mp-feedback-buttons {
    display: none;
}

.slider-labels .mp-button-content {
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .slider-labels .mp-button-content:hover {
        background-color: var(--element-hover);
        transform: scale(1.05);
    }

    .slider-labels .mp-button-content:active {
        transform: scale(0.95);
    }

/* Slider segments */
.music-rating-slider-container {
    position: relative;
}

.slider-segments {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 400px; /* Match your slider max-width */
    height: 12px; /* Match your slider height */
    pointer-events: none;
    z-index: 1;
}

.slider-segment-mark {
    position: absolute;
    width: 2px;
    height: 12px; /* Match slider height */
    background-color: rgba(0, 0, 0, 0.4); /* Dark marks for visibility */
    transform: translateX(-50%);
    top: 0;
}

    /* Center marker more prominent */
    .slider-segment-mark.center-mark {
        background-color: rgba(0, 0, 0, 0.6);
        width: 3px;
    }

/* Dark theme markers */
body[data-theme="dark"] .slider-segment-mark {
    background-color: rgba(255, 255, 255, 0.4);
}

    body[data-theme="dark"] .slider-segment-mark.center-mark {
        background-color: rgba(255, 255, 255, 0.6);
    }

/* ===================================================================== */
/* === MUSIC PLAYER SLIDER NUMBER LABELS === */
/* ===================================================================== */

/* Numbers container beneath slider - positions relative to existing container */
/* Mapped into the THUMB's coordinate system, not the row's own.

   A range thumb's EDGE stops at the track edge, so its CENTRE travels only
   [w/2, trackW - w/2] of the input's CONTENT box - a span of contentW - w. A row
   distributed across its full width spans [0, rowW]. Two linear maps over different
   spans: they agree at 5 and diverge to the ends, which is the whole defect.

   So the row is made to occupy the input's box and then inset by exactly the part of
   the track the thumb centre can never reach:
     max-width     = track max + the container padding the row does not inherit, so the
                     row lands on the input's border box in BOTH regimes (input at its
                     max-width, and input squeezed by the container on narrow screens)
     padding-inline = that same container padding + the input's border + half a thumb
   Both are then linear over one span and coincide at every stop, not just the middle. */
.slider-numbers {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--slm-track-max) + 2 * var(--slm-container-pad));
    margin: -20px auto 0;
    padding-inline: calc(var(--slm-container-pad) + var(--slm-track-border) + var(--slm-thumb) / 2);
    pointer-events: none; /* Don't interfere with slider interaction */
}

/* Individual number labels - minimal, precise styling */
/* width:0 makes each label's CENTRE its anchor: the glyphs overflow symmetrically, so
   the two-character "10" centres exactly as the one-character "5" does. Without it the
   end labels are placed by their outer edges and "10" sits half a glyph off. */
.slider-number {
    width: 0;
    display: flex;
    justify-content: center;
    font-family: var(--font-inter);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: 0.5;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    letter-spacing: 0.02em;
}

    /* Highlight the number at current slider position */
    .slider-number.active {
        color: var(--text-primary);
        opacity: 1;
        font-weight: 700;
        transform: scale(1.2);
    }

/* Light mode - match your blue accent */
body[data-theme="light"] .slider-number.active {
    color: #3B82F6;
}

/* Dark mode - match your green signature */
body[data-theme="dark"] .slider-number.active {
    color: var(--signature-green);
    text-shadow: 0 0 10px rgba(0, 191, 2, 0.4);
}

/* Extreme values - more prominent by default */
.slider-number[data-value="-1"],
.slider-number[data-value="1"] {
    font-weight: 600;
    opacity: 0.6;
}

/* Red glow for dislike extreme when active */
body[data-theme="light"] .slider-number[data-value="-1"].active {
    color: var(--signature-red);
}

body[data-theme="dark"] .slider-number[data-value="-1"].active {
    color: var(--signature-red);
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

/* Enhanced green glow for like extreme when active */
body[data-theme="light"] .slider-number[data-value="1"].active {
    color: var(--signature-green);
}

body[data-theme="dark"] .slider-number[data-value="1"].active {
    color: var(--signature-green);
    text-shadow: 0 0 12px rgba(0, 191, 2, 0.5);
}

/* Center zero - subtle emphasis */
.slider-number[data-value="0"] {
    opacity: 0.7;
}

/* Mobile optimizations - match your existing mobile breakpoint */
@media (max-width: 768px) {
    .slider-numbers {
        margin-top: 20px;
    }

    .slider-number {
        font-size: 0.65rem;
    }

        .slider-number.active {
            transform: scale(1.3);
        }
}