/**
 * slm-hero-player-compact.css
 * 
 * COMPACT WIDGET - matches helpbot widget styling
 * Minimum font size: 14px (accessibility)
 */

/* Container with helpbot-matching dark theme variables */
.hero-player-compact {
    /* Colors matched to helpbot widget */
    --bg-primary: #1a1a2e;
    --bg-secondary: #16162a;
    --bg-tertiary: #252542;
    --border-color: #2a2a4a;
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --button: #8b5cf6;
    --button-hover: #7c3aed;
    --element-hover: #252542;
    --font-main: 'Poppins', sans-serif;
    --font-inter: 'Inter', sans-serif;
    --signature-green: #00bf02;
    --signature-red: #ef4444;
    --signature-purple: #702dd7;
    max-width: 380px;
    margin: 16px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

    /* Panel - match helpbot card style */
    .hero-player-compact .mp-music-survey-panel {
        padding: 0;
        margin: 0;
        min-height: auto;
        height: auto;
        max-width: 100%;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        overflow: hidden;
    }

/* Header bar - matches helpbot header */
.hero-player-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.hero-player-header-icon {
    font-size: 24px;
    line-height: 1;
}

.hero-player-header-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Content area */
.hero-player-content {
    padding: 12px 16px;
}

/* Track title - inside content */
.hero-player-compact .mp-music-panel-header {
    margin-bottom: 8px;
    text-align: center;
}

.hero-player-compact .mp-hero-title {
    font-size: 28px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.hero-player-compact .mp-music-panel-header p {
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    color: var(--text-primary);
}

/* Play button - helpbot purple */
.hero-player-compact .mp-play-pause-button {
    width: 44px;
    height: 44px;
    background: var(--button);
}

    .hero-player-compact .mp-play-pause-button:hover {
        background: var(--button-hover);
    }

.hero-player-compact .mp-play-icon,
.hero-player-compact .mp-pause-icon {
    font-size: 16px;
    transform: scale(1);
}

/* Progress bar */
.hero-player-compact .mp-progress-bar {
    bottom: -14px;
    height: 3px;
}

.hero-player-compact .mp-music-controls {
    margin: 8px 0 24px 0;
}

/* Feedback section */
.hero-player-compact .mp-feedback-section {
    margin-top: 20px;
    margin-bottom: 0;
}

    .hero-player-compact .mp-feedback-section h3 {
        font-size: 16px;
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        margin-bottom: 16px;
        color: var(--text-primary);
    }

    .hero-player-compact .mp-feedback-section p {
        font-size: 14px;
        font-family: 'Poppins', sans-serif;
        margin-bottom: 6px;
        color: var(--text-primary);
    }

/* Slider - visible and inviting.
   The hero's own values for the shared alignment variables declared on
   .mp-feedback-section in new-music-player.css; the number-row construction there
   follows these without any hero-specific arithmetic. */
.hero-player-compact .mp-feedback-section {
    --slm-thumb: 30px;
    --slm-track-max: 320px;
    --slm-container-pad: 16px;
}

.hero-player-compact .music-rating-slider-container {
    padding: 20px var(--slm-container-pad) 15px var(--slm-container-pad);
    margin-top: 12px;
}

.hero-player-compact .music-rating-slider {
    height: 10px;
    margin-top: -14px;
}

    /* Keep slider visually bright even when disabled */
    .hero-player-compact .music-rating-slider:disabled {
        opacity: 1;
        filter: none;
        cursor: pointer;
    }

/* Thumb styling - use ID for specificity */
#heroMusicRatingSlider::-webkit-slider-thumb {
    z-index: 100;
    position: relative;
    -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.4), 0 2px 4px rgba(0, 191, 2, 0.5);
    margin-top: -2px;
    /* Was margin-left: -4px here and -2px on the Firefox rule below. A horizontal
       margin on the thumb shifts it off its own track by half the margin and by a
       DIFFERENT amount per engine - measured 4px of asymmetry in Chrome, so the thumb
       centre travelled [13px, trackW-21px] instead of a symmetric span. No symmetric
       number row can follow that. Removed on both. */
}

#heroMusicRatingSlider::-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.4), 0 2px 4px rgba(0, 191, 2, 0.5);
    margin-top: -2px;
}

/* Slider numbers - horizontal geometry is the shared construction in
   new-music-player.css, driven by the variables above. Only the vertical offset is
   the hero's own. */
.hero-player-compact .slider-numbers {
    margin-top: -8px;
}

.hero-player-compact .slider-number {
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    color: var(--text-secondary);
}

    .hero-player-compact .slider-number.active {
        color: var(--signature-green);
        text-shadow: 0 0 10px rgba(0, 191, 2, 0.4);
    }

/* "Click or slide" text */
.hero-player-compact .mp-feedback-section > p:last-of-type {
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    margin-top: 4px;
    color: var(--text-primary);
}

/* Progress dots */
.hero-player-compact .mp-survey-progress {
    margin-top: 6px;
    margin-bottom: 0;
}

.hero-player-compact .mp-progress-dot {
    width: 5px;
    height: 5px;
}

    .hero-player-compact .mp-progress-dot.mp-active {
        background: var(--signature-purple);
        transform: scale(1.4);
    }

/* Completion panel */
.hero-player-compact .mp-green-button {
    padding: 10px 20px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    background: var(--button);
    border-radius: 8px;
}

    .hero-player-compact .mp-green-button:hover {
        background: var(--button-hover);
    }

.hero-player-compact .slider-zones {
    display: none;
}

/* Genre crossfade animation */
.hero-feedback-title-stack {
    position: relative;
    width: 100%;
}
.hero-feedback-layer {
    transition: opacity 0.8s ease;
    margin: 0;
}
.hero-feedback-layer#heroFeedbackGenre {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
}
.hero-feedback-layer#heroFeedbackDefault {
    opacity: 1;
    visibility: visible;
}

/* ── Light theme variant ── */
.hero-player-compact.hero-player-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --border-color: #e1e1e1;
    --text-primary: #374151;
    --text-secondary: #6b7280;
    --button: #6366f1;
    --button-hover: #4f46e5;
    --element-hover: #f3f4f6;
    --signature-green: #00bf02;
    --signature-red: #ef4444;
    --signature-purple: #6d2dd7;
}

.hero-player-compact.hero-player-light .mp-music-survey-panel {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(99, 102, 241, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
                0 0 10px rgba(99, 102, 241, 0.08);
}

#heroMusicRatingSlider.hero-player-light-slider::-webkit-slider-thumb {
    border-color: #ffffff;
}

#heroMusicRatingSlider.hero-player-light-slider::-moz-range-thumb {
    border-color: #ffffff;
}

/* Light theme slider number active state */
.hero-player-compact.hero-player-light .slider-number.active {
    color: #3B82F6;
    text-shadow: none;
}

/* Light theme slider number dislike extreme */
.hero-player-compact.hero-player-light
    .slider-number[data-value="-1"].active {
    color: #ef4444;
    text-shadow: none;
}

/* Light theme slider number like extreme */
.hero-player-compact.hero-player-light
    .slider-number[data-value="1"].active {
    color: #00bf02;
    text-shadow: none;
}

.hero-player-compact.hero-player-light .mp-play-pause-button {
    color: #ffffff;
}

.hero-player-compact.hero-player-light .mp-play-icon,
.hero-player-compact.hero-player-light .mp-pause-icon {
    color: #ffffff;
}

/* Light lobby layout constraints */
/* Prevents player stretching inside hero-text flex container */
.hero-text .hero-player-compact {
    max-width: 380px;
    width: 100%;
    align-self: flex-start;
    flex-shrink: 0;
}

.hero-text .hero-player-compact .mp-music-survey-panel {
    width: 100%;
    max-width: 380px;
}

@media (max-width: 768px) {
    .hero-player-compact {
        margin-left: auto;
        margin-right: auto;
    }
}