/* public/css/help-mode.css */
/* Help Mode highlight styles for interactive elements */

/* Help mode cursor - applied to body when help mode is active */
body.help-mode-cursor,
body.help-mode-cursor * {
    cursor: help !important;
}

/* Force help highlight on artist banner buttons - using class for maximum coverage */
body.help-mode-cursor .artist-banner-btn,
.artist-banner-btn.help-highlight {
    position: relative !important;
    outline: 4px solid rgba(139, 92, 246, 1) !important;
    outline-offset: 4px !important;
    border-radius: 8px !important;
    box-shadow: 
        0 0 0 4px rgba(139, 92, 246, 1),
        0 0 30px rgba(139, 92, 246, 0.8) !important;
}

/* Help Mode Overlay - disabled */
#help-mode-overlay {
    display: none !important;
}

/* Help highlight class - purple glowing outline on highlighted elements (static, no animation) */
.help-highlight {
    position: relative !important;
    border-radius: 6px !important;
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help link styling in chat messages */
.help-link {
    cursor: help !important;
    text-decoration: underline !important;
    color: var(--color-active-highlight, #3B82F6) !important;
}

/* Attention animation for play queue */
.help-attention-animate {
    animation: helpAttentionPulse 0.5s ease-in-out 3 !important;
}

@keyframes helpAttentionPulse {
    0%, 100% {
        transform: scale(1) !important;
        box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.8), 0 0 15px rgba(251, 191, 36, 0.5) !important;
    }
    50% {
        transform: scale(1.02) !important;
        box-shadow: 0 0 0 4px rgba(251, 191, 36, 1), 0 0 25px rgba(251, 191, 36, 0.8) !important;
    }
}

@keyframes helpHighlightPulse {
    0%, 100% {
        box-shadow: 
            0 0 0 3px rgba(139, 92, 246, 0.9),
            0 0 20px rgba(139, 92, 246, 0.5) !important;
    }
    50% {
        box-shadow: 
            0 0 0 4px rgba(167, 139, 250, 1),
            0 0 30px rgba(139, 92, 246, 0.7) !important;
    }
}

/* Persistent selected state for help mode - shows which element was last clicked */
.help-highlight.help-selected {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    outline: 3px solid rgba(139, 92, 246, 1) !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 1),
        0 0 25px rgba(139, 92, 246, 0.7),
        0 0 50px rgba(139, 92, 246, 0.4),
        inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
}

/* Subtle initial pulse when first selected */
.help-highlight.help-selected.help-just-selected {
    animation: helpJustSelected 0.5s ease-out forwards, helpSelectedPulse 1.5s ease-in-out infinite 0.5s !important;
}

@keyframes helpJustSelected {
    0% {
        box-shadow: 
            0 0 0 3px rgba(139, 92, 246, 0.9),
            0 0 20px rgba(139, 92, 246, 0.5),
            0 0 40px rgba(139, 92, 246, 0.3) !important;
        transform: scale(1) !important;
    }
    50% {
        box-shadow: 
            0 0 0 5px rgba(167, 139, 250, 1),
            0 0 40px rgba(139, 92, 246, 0.8),
            0 0 60px rgba(167, 139, 250, 0.5) !important;
        transform: scale(1.03) !important;
    }
    100% {
        box-shadow: 
            0 0 0 3px rgba(139, 92, 246, 1),
            0 0 25px rgba(139, 92, 246, 0.7),
            0 0 50px rgba(139, 92, 246, 0.4),
            inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
        transform: scale(1) !important;
    }
}

@keyframes helpSelectedPulse {
    0%, 100% {
        outline: 3px solid rgba(139, 92, 246, 1) !important;
        box-shadow: 
            0 0 0 3px rgba(139, 92, 246, 1),
            0 0 25px rgba(139, 92, 246, 0.7),
            0 0 50px rgba(139, 92, 246, 0.4),
            inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
    }
    50% {
        outline: 4px solid rgba(167, 139, 250, 1) !important;
        box-shadow: 
            0 0 0 4px rgba(167, 139, 250, 1),
            0 0 35px rgba(139, 92, 246, 0.8),
            0 0 60px rgba(139, 92, 246, 0.5),
            inset 0 0 20px rgba(139, 92, 246, 0.3) !important;
    }
}

/* Help mode highlight for jukebot input field */
#copilot-input.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5) !important;
}

/* Help mode highlight for jukebot send button */
#copilot-send-btn.help-highlight,
#copilot-send-btn.icon-button.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode selected state for send button */
#copilot-send-btn.help-highlight.help-selected,
#copilot-send-btn.icon-button.help-highlight.help-selected {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 1),
        0 0 25px rgba(139, 92, 246, 0.7),
        0 0 50px rgba(139, 92, 246, 0.4),
        inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
}

/* Help mode highlight for jukebot info/command builder button */
#jukebot-info-btn.help-highlight,
#jukebot-info-btn.console-header-btn.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode selected state for jukebot info button */
#jukebot-info-btn.help-highlight.help-selected,
#jukebot-info-btn.console-header-btn.help-highlight.help-selected {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 1),
        0 0 25px rgba(139, 92, 246, 0.7),
        0 0 50px rgba(139, 92, 246, 0.4),
        inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
}

/* Help mode highlight for coins/points button */
#header-points-btn.help-highlight,
#header-points-btn.header-icon-btn.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode selected state for coins/points button */
#header-points-btn.help-highlight.help-selected,
#header-points-btn.header-icon-btn.help-highlight.help-selected {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 1),
        0 0 25px rgba(139, 92, 246, 0.7),
        0 0 50px rgba(139, 92, 246, 0.4),
        inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
}

/* Help mode highlight for tickets button */
#header-ticket-btn.help-highlight,
#header-ticket-btn.header-icon-btn.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode selected state for tickets button */
#header-ticket-btn.help-highlight,
#header-ticket-btn.header-icon-btn.help-highlight {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 1),
        0 0 25px rgba(139, 92, 246, 0.7),
        0 0 50px rgba(139, 92, 246, 0.4),
        inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
}

/* Help mode highlight for waveform comment area - higher z-index to appear on top */
#waveform-comment-area.help-highlight {
    z-index: 1000 !important;
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode selected state for waveform comment area */
#waveform-comment-area.help-highlight.help-selected {
    z-index: 1001 !important;
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 1),
        0 0 25px rgba(139, 92, 246, 0.7),
        0 0 50px rgba(139, 92, 246, 0.4),
        inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
}

/* Help mode highlight for like button */
#like-btn.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode selected state for like button */
#like-btn.help-highlight.help-selected {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 1),
        0 0 25px rgba(139, 92, 246, 0.7),
        0 0 50px rgba(139, 92, 246, 0.4),
        inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
}

/* Help mode highlight for add-to-playlist button */
#add-to-playlist-btn.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode selected state for add-to-playlist button */
#add-to-playlist-btn.help-highlight.help-selected {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 1),
        0 0 25px rgba(139, 92, 246, 0.7),
        0 0 50px rgba(139, 92, 246, 0.4),
        inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
}

/* Help mode highlight for waveform container */
#waveform-container.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode selected state for waveform container */
#waveform-container.help-highlight.help-selected {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 1),
        0 0 25px rgba(139, 92, 246, 0.7),
        0 0 50px rgba(139, 92, 246, 0.4),
        inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
}

/* Help mode highlight for volume slider */
#volume-slider.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode selected state for volume slider */
#volume-slider.help-highlight.help-selected {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 1),
        0 0 25px rgba(139, 92, 246, 0.7),
        0 0 50px rgba(139, 92, 246, 0.4),
        inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
}

/* Help mode highlight for copilot/jukebot tab button */
#copilot-mode-btn.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode highlight for lounge chat tab button */
#lounge-chat-mode-btn.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode highlight for DM icons container */
#dm-icons-container.help-highlight,
.dm-icons-container.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode highlight for DM artist icon - overrides active class */
.dm-artist-icon.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 1) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 1),
        0 0 20px rgba(139, 92, 246, 0.7),
        0 0 40px rgba(139, 92, 246, 0.5) !important;
    border-color: rgba(139, 92, 246, 1) !important;
}

/* Help mode selected state for DM artist icon */
.dm-artist-icon.help-highlight.help-selected {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    outline: 3px solid rgba(139, 92, 246, 1) !important;
    box-shadow: 
        0 0 0 4px rgba(139, 92, 246, 1),
        0 0 25px rgba(139, 92, 246, 0.8),
        0 0 50px rgba(139, 92, 246, 0.6) !important;
    border-color: rgba(139, 92, 246, 1) !important;
}

/* Help mode highlight for plays counter */
#plays-counter-slot-machine.help-highlight {
    outline: 3px solid rgba(139, 92, 246, 0.9) !important;
    outline-offset: 2px !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.9),
        0 0 20px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.3) !important;
}

/* Help mode selected state for plays counter */
#plays-counter-slot-machine.help-highlight.help-selected {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 1),
        0 0 25px rgba(139, 92, 246, 0.7),
        0 0 50px rgba(139, 92, 246, 0.4),
        inset 0 0 15px rgba(139, 92, 246, 0.2) !important;
}

/* Help mode highlight for artist chat button - using class selector for higher specificity */
button.artist-banner-btn.artist-banner-btn.help-highlight,
#artist-chat-btn.help-highlight {
    position: relative !important;
    z-index: 1001 !important;
    background-color: rgba(139, 92, 246, 0.2) !important;
    outline: 3px solid rgba(139, 92, 246, 1) !important;
    outline-offset: 4px !important;
    border-radius: 6px !important;
    box-shadow: 
        0 0 0 4px rgba(139, 92, 246, 1),
        0 0 30px rgba(139, 92, 246, 0.8),
        0 0 60px rgba(139, 92, 246, 0.5) !important;
}

/* Help mode selected state for artist chat button */
button.artist-banner-btn.artist-banner-btn.help-highlight.help-selected,
#artist-chat-btn.help-highlight.help-selected {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    outline: 3px solid rgba(139, 92, 246, 1) !important;
    box-shadow: 
        0 0 0 4px rgba(139, 92, 246, 1),
        0 0 30px rgba(139, 92, 246, 0.8),
        0 0 60px rgba(139, 92, 246, 0.5) !important;
}

/* Help mode highlight for add contact button - using class selector for higher specificity */
button.artist-banner-btn.artist-banner-btn.help-highlight,
#artist-add-contact-btn.help-highlight {
    position: relative !important;
    z-index: 1001 !important;
    background-color: rgba(139, 92, 246, 0.2) !important;
    outline: 3px solid rgba(139, 92, 246, 1) !important;
    outline-offset: 4px !important;
    border-radius: 6px !important;
    box-shadow: 
        0 0 0 4px rgba(139, 92, 246, 1),
        0 0 30px rgba(139, 92, 246, 0.8),
        0 0 60px rgba(139, 92, 246, 0.5) !important;
}

/* Help mode selected state for add contact button */
button.artist-banner-btn.artist-banner-btn.help-highlight.help-selected,
#artist-add-contact-btn.help-highlight.help-selected {
    animation: helpSelectedPulse 1.5s ease-in-out infinite !important;
    outline: 3px solid rgba(139, 92, 246, 1) !important;
    box-shadow: 
        0 0 0 4px rgba(139, 92, 246, 1),
        0 0 30px rgba(139, 92, 246, 0.8),
        0 0 60px rgba(139, 92, 246, 0.5) !important;
}