/* Bible Verse Links - Clickable verse references in AI responses */

/* ULTRA-AGGRESSIVE styling for Bible verse links - override EVERYTHING */
.bible-verse-link,
.ai-message-content .bible-verse-link,
.mobile-ai-message .bible-verse-link,
.ai-message .bible-verse-link,
#ai-messages .bible-verse-link,
.ai-chat-container .bible-verse-link,
.mobile-ai-chat .bible-verse-link,
.response-content .bible-verse-link,
.message-content .bible-verse-link,
div .bible-verse-link,
p .bible-verse-link,
span .bible-verse-link,
* .bible-verse-link {
    /* Visual styling - Cleaner, more subtle appearance */
    color: #0066cc !important;
    background-color: rgba(152, 195, 253, 0.08) !important;/* light blue tint */
    border-radius: 4px !important;
    box-shadow: none !important;

    
    /* Text styling - Cleaner look */
    font-weight: 600 !important;
    white-space: nowrap !important;
    
    /* Layout and positioning */
    display: inline-block !important;
    position: relative !important;
    padding: 3px 8px !important;
    margin: 0 3px !important;
    vertical-align: baseline !important;
    
    /* Interactive */
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    
    /* Box model fixes */
    overflow: visible !important;
    z-index: 1 !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    
    /* Font inheritance */
    font-size: inherit !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
}

/* Anti-margin/padding rules to prevent left-side boxes */
.bible-verse-link::before,
.bible-verse-link::after {
    content: none !important;
    display: none !important;
}

/* Ensure no conflicting list styles */
.bible-verse-link {
    list-style: none !important;
    list-style-type: none !important;
    list-style-position: inside !important;
}

.bible-verse-link:hover,
.ai-message-content .bible-verse-link:hover,
.mobile-ai-message .bible-verse-link:hover,
.ai-message .bible-verse-link:hover,
#ai-messages .bible-verse-link:hover,
.ai-chat-container .bible-verse-link:hover,
.mobile-ai-chat .bible-verse-link:hover,
.response-content .bible-verse-link:hover,
.message-content .bible-verse-link:hover,
div .bible-verse-link:hover,
p .bible-verse-link:hover,
span .bible-verse-link:hover,
* .bible-verse-link:hover {
    color: #2563eb !important;
    background: rgba(26, 115, 232, 0.16) !important;
    text-decoration: none !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2) !important;
    text-decoration: underline !important;
}

.bible-verse-link:active,
.ai-message-content .bible-verse-link:active,
.mobile-ai-message .bible-verse-link:active,
.ai-message .bible-verse-link:active,
#ai-messages .bible-verse-link:active,
.ai-chat-container .bible-verse-link:active,
.mobile-ai-chat .bible-verse-link:active,
.response-content .bible-verse-link:active,
.message-content .bible-verse-link:active,
div .bible-verse-link:active,
p .bible-verse-link:active,
span .bible-verse-link:active,
* .bible-verse-link:active {
    color: #1d4ed8 !important;
    background: rgba(59, 130, 246, 0.2) !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3) !important;
}

/* Dark theme adjustments */
[data-theme="dark"] .bible-verse-link,
[data-theme="dark"] .ai-message-content .bible-verse-link,
[data-theme="dark"] .mobile-ai-message .bible-verse-link,
[data-theme="dark"] .ai-message .bible-verse-link,
[data-theme="dark"] #ai-messages .bible-verse-link {
    color: #60a5fa !important;
    background-color: rgba(96, 165, 250, 0.1) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

[data-theme="dark"] .bible-verse-link:hover,
[data-theme="dark"] .ai-message-content .bible-verse-link:hover,
[data-theme="dark"] .mobile-ai-message .bible-verse-link:hover,
[data-theme="dark"] .ai-message .bible-verse-link:hover,
[data-theme="dark"] #ai-messages .bible-verse-link:hover {
    color: #93c5fd !important;
    background-color: rgba(96, 165, 250, 0.18) !important;
    text-decoration: underline !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 0 2px 6px rgba(96, 165, 250, 0.25) !important;
}

[data-theme="dark"] .bible-verse-link:active,
[data-theme="dark"] .ai-message-content .bible-verse-link:active,
[data-theme="dark"] .mobile-ai-message .bible-verse-link:active,
[data-theme="dark"] .ai-message .bible-verse-link:active,
[data-theme="dark"] #ai-messages .bible-verse-link:active {
    color: #dbeafe !important;
    background-color: rgba(96, 165, 250, 0.25) !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(96, 165, 250, 0.3) !important;
}

/* AI verse highlight animation for temporary highlighting */
.ai-verse-highlight {
    animation: ai-verse-glow 4s ease-out;
    position: relative;
    z-index: 10;
}

.ai-verse-pulse {
    animation: ai-verse-pulse 1s ease-out;
}

@keyframes ai-verse-glow {
    0% {
        background-color: rgba(255, 193, 7, 0.8);
        box-shadow: 0 0 20px rgba(255, 193, 7, 0.6), inset 0 0 10px rgba(255, 193, 7, 0.3);
        transform: scale(1.03);
    }
    20% {
        background-color: rgba(255, 193, 7, 0.6);
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.4), inset 0 0 8px rgba(255, 193, 7, 0.2);
        transform: scale(1.02);
    }
    40% {
        background-color: rgba(255, 193, 7, 0.4);
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.3), inset 0 0 5px rgba(255, 193, 7, 0.15);
        transform: scale(1.01);
    }
    60% {
        background-color: rgba(255, 193, 7, 0.25);
        box-shadow: 0 0 8px rgba(255, 193, 7, 0.2), inset 0 0 3px rgba(255, 193, 7, 0.1);
        transform: scale(1.005);
    }
    80% {
        background-color: rgba(255, 193, 7, 0.15);
        box-shadow: 0 0 5px rgba(255, 193, 7, 0.15);
        transform: scale(1.002);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
        transform: scale(1);
    }
}

@keyframes ai-verse-pulse {
    0% {
        transform: scale(1);
        border: 2px solid rgba(255, 193, 7, 0.8);
    }
    50% {
        transform: scale(1.05);
        border: 2px solid rgba(255, 193, 7, 1);
        box-shadow: 0 0 25px rgba(255, 193, 7, 0.8);
    }
    100% {
        transform: scale(1);
        border: 2px solid transparent;
    }
}

/* Dark theme glow effect */
[data-theme="dark"] .ai-verse-highlight {
    animation: ai-verse-glow-dark 4s ease-out;
}

[data-theme="dark"] .ai-verse-pulse {
    animation: ai-verse-pulse-dark 1s ease-out;
}

@keyframes ai-verse-glow-dark {
    0% {
        background-color: rgba(251, 191, 36, 0.7);
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.5), inset 0 0 10px rgba(251, 191, 36, 0.3);
        transform: scale(1.03);
    }
    20% {
        background-color: rgba(251, 191, 36, 0.5);
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.3), inset 0 0 8px rgba(251, 191, 36, 0.2);
        transform: scale(1.02);
    }
    40% {
        background-color: rgba(251, 191, 36, 0.3);
        box-shadow: 0 0 10px rgba(251, 191, 36, 0.25), inset 0 0 5px rgba(251, 191, 36, 0.15);
        transform: scale(1.01);
    }
    60% {
        background-color: rgba(251, 191, 36, 0.2);
        box-shadow: 0 0 8px rgba(251, 191, 36, 0.15);
        transform: scale(1.005);
    }
    80% {
        background-color: rgba(251, 191, 36, 0.1);
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.1);
        transform: scale(1.002);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
        transform: scale(1);
    }
}

@keyframes ai-verse-pulse-dark {
    0% {
        transform: scale(1);
        border: 2px solid rgba(251, 191, 36, 0.7);
    }
    50% {
        transform: scale(1.05);
        border: 2px solid rgba(251, 191, 36, 1);
        box-shadow: 0 0 25px rgba(251, 191, 36, 0.6);
    }
    100% {
        transform: scale(1);
        border: 2px solid transparent;
    }
}

/* Ensure verse links work well in AI chat messages */
.ai-message-content .bible-verse-link {
    display: inline;
    margin: 0 1px;
}

/* Loading state for verse navigation */
.bible-verse-link.loading {
    opacity: 0.6;
    pointer-events: none;
}

.bible-verse-link.loading::after {
    content: '...';
    animation: loading-dots 1s infinite;
}

@keyframes loading-dots {
    0%, 20% { opacity: 0; }
    50% { opacity: 1; }
    80%, 100% { opacity: 0; }
}

/* Accessibility improvements */
.bible-verse-link:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .bible-verse-link:focus {
    outline-color: #60a5fa;
    background-color: rgba(96, 165, 250, 0.1);
}

/* Print styles */
@media print {
    .bible-verse-link {
        color: #000 !important;
        text-decoration: underline !important;
        background: none !important;
        box-shadow: none !important;
    }
    
    .bible-verse-link::after {
        content: " (Bible reference)";
        font-size: 0.8em;
        color: #666;
    }
}

/* ============================================
   SPOTLIGHT EFFECT FOR "GO TO PASSAGE" (ALL DEVICES)
   Creates a shadow overlay on Bible text with
   selected verses appearing clear (spotlighted)
   ============================================ */

/* The chapter content needs relative positioning for the overlay */
#chapter-content.spotlight-active {
    position: relative;
}

/* The shadow overlay that dims the Bible text - fits exactly to chapter-content */
/* Light mode uses white/cream overlay for softer look */
.bible-spotlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    z-index: 5;
    opacity: 1;
}

.bible-spotlight-overlay.fading {
    animation: spotlightOverlayFade 16s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes spotlightOverlayFade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Dark theme - uses dark overlay */
[data-theme="dark"] .bible-spotlight-overlay {
    background: rgba(0, 0, 0, 0.80);
}

/* Spotlighted verses - appear clear above the shadow */
/* Text only - no background, padding, or box to keep it clean */
.verse-spotlighted {
    position: relative;
    z-index: 10;
}

.verse-spotlighted.fading {
    animation: spotlightVerseFade 16s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes spotlightVerseFade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* Dark theme spotlighted verses - text only, no background box */
[data-theme="dark"] .verse-spotlighted {
    /* inherits position: relative; z-index: 10 from base rule */
}

[data-theme="dark"] .verse-spotlighted.fading {
    animation: spotlightVerseFadeDark 16s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes spotlightVerseFadeDark {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

/* Verses with notes should keep their faint highlight visible above the spotlight overlay */
#chapter-content.spotlight-active .verse-with-note-colored {
    position: relative;
    z-index: 6;
}

/* ============================================
   MOBILE ENHANCEMENTS FOR AI VERSE HIGHLIGHTING
   ============================================ */

/* Mobile-specific AI verse highlighting - ensure it works on all devices */
@media screen and (max-width: 768px) {
    .ai-verse-highlight {
        /* Use transform for better mobile performance */
        animation: ai-verse-glow-mobile 4s ease-out !important;
        position: relative !important;
        z-index: 10 !important;
        /* Ensure touch interactions work */
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .ai-verse-pulse {
        animation: ai-verse-pulse-mobile 1s ease-out !important;
    }
    
    @keyframes ai-verse-glow-mobile {
        0% {
            background-color: rgba(255, 193, 7, 0.9) !important;
            box-shadow: 0 0 15px rgba(255, 193, 7, 0.7), inset 0 0 8px rgba(255, 193, 7, 0.4) !important;
            transform: scale(1.02) !important;
        }
        20% {
            background-color: rgba(255, 193, 7, 0.7) !important;
            box-shadow: 0 0 12px rgba(255, 193, 7, 0.5), inset 0 0 6px rgba(255, 193, 7, 0.3) !important;
            transform: scale(1.015) !important;
        }
        40% {
            background-color: rgba(255, 193, 7, 0.5) !important;
            box-shadow: 0 0 8px rgba(255, 193, 7, 0.4), inset 0 0 4px rgba(255, 193, 7, 0.2) !important;
            transform: scale(1.01) !important;
        }
        60% {
            background-color: rgba(255, 193, 7, 0.3) !important;
            box-shadow: 0 0 6px rgba(255, 193, 7, 0.3) !important;
            transform: scale(1.005) !important;
        }
        80% {
            background-color: rgba(255, 193, 7, 0.2) !important;
            box-shadow: 0 0 4px rgba(255, 193, 7, 0.2) !important;
            transform: scale(1.002) !important;
        }
        100% {
            background-color: transparent !important;
            box-shadow: none !important;
            transform: scale(1) !important;
        }
    }
    
    @keyframes ai-verse-pulse-mobile {
        0% {
            transform: scale(1) !important;
            border: 2px solid rgba(255, 193, 7, 0.9) !important;
        }
        50% {
            transform: scale(1.03) !important;
            border: 2px solid rgba(255, 193, 7, 1) !important;
            box-shadow: 0 0 20px rgba(255, 193, 7, 0.9) !important;
        }
        100% {
            transform: scale(1) !important;
            border: 2px solid transparent !important;
        }
    }
}

/* Extra small mobile devices */
@media screen and (max-width: 480px) {
    .ai-verse-highlight {
        /* Reduce animation intensity for very small screens */
        animation: ai-verse-glow-small 3s ease-out !important;
    }
    
    @keyframes ai-verse-glow-small {
        0% {
            background-color: rgba(255, 193, 7, 0.8) !important;
            box-shadow: 0 0 10px rgba(255, 193, 7, 0.6) !important;
            transform: scale(1.01) !important;
        }
        50% {
            background-color: rgba(255, 193, 7, 0.4) !important;
            box-shadow: 0 0 6px rgba(255, 193, 7, 0.4) !important;
            transform: scale(1.005) !important;
        }
        100% {
            background-color: transparent !important;
            box-shadow: none !important;
            transform: scale(1) !important;
        }
    }
}