/* ============================================
   MOBILE VERSE HIGHLIGHTING - USER PREFERENCE OPTIMIZED
   ============================================
   
   Modern highlighting for mobile devices that respects user's
   preferred highlight color settings. Uses CSS custom properties
   from user-preferences.css for consistent color application
   across both light and dark themes.
   ============================================ */

/* Mobile device specific highlighting - uses user's preferred color */
@media (max-width: 1024px) {
  /* Light mode verse numbers - selected state using user's preferred color */
  .chapter-content .v.selected {
    background: var(--user-highlight-bg-20) !important; /* Use user's preferred color */
    border: 1px solid var(--user-highlight-border) !important;
    border-radius: 4px !important;
    color: var(--user-highlight-text) !important; /* User's color contrast text */
    font-weight: inherit !important;
    box-shadow: 0 1px 3px var(--user-highlight-bg-10) !important;
    text-shadow: none !important;
    padding: 1px 3px !important;
  }
  
  /* Verse numbers - DISABLE hover state completely */
  .chapter-content .v:hover,
  .chapter-content .v:active,
  .chapter-content .v:focus {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--muted-color, #8a8a8a) !important;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Light mode verse text - selected state using user's preferred color */
  .verse-text.selected,
  .verse-text-wrapper.selected {
    background: var(--user-highlight-selected) !important; /* Use user's preferred color */
    border: none !important;
    border-left: 3px solid var(--user-highlight-border) !important;
    border-radius: 4px !important;
    color: inherit !important;
    box-shadow: 0 1px 3px var(--user-highlight-bg-10) !important;
    text-shadow: none !important;
    padding: 2px 6px 2px 8px !important;
    margin: 1px 0 !important;
  }
  
  /* Verse text - DISABLE hover state completely */
  .verse-text:hover,
  .verse-text-wrapper:hover,
  .verse-text:active,
  .verse-text-wrapper:active,
  .verse-text:focus,
  .verse-text-wrapper:focus {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: inherit !important;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    text-decoration: none !important;
  }
  
  /* Remove the underline class styling that might conflict - use user's preferred color */
  .verse-text.underline,
  .verse-text-wrapper.underline {
    background: var(--user-highlight-selected) !important; /* Use user's preferred color */
    border-left: 3px solid var(--user-highlight-border) !important;
    color: inherit !important;
    text-decoration: none !important;
  }
  
  /* Dark theme specific overrides - use user's preferred color with enhanced opacity for dark mode */
  [data-theme="dark"] .chapter-content .v.selected {
    background: var(--user-highlight-bg-30) !important; /* Enhanced opacity for dark mode */
    border: 1px solid var(--user-highlight-border) !important;
    color: var(--user-highlight-text) !important; /* User's color contrast text */
    box-shadow: 0 1px 3px var(--user-highlight-bg-20) !important;
    border-radius: 4px !important;
    padding: 1px 3px !important;
    font-weight: inherit !important;
  }
  
  [data-theme="dark"] .verse-text.selected,
  [data-theme="dark"] .verse-text-wrapper.selected {
    background: var(--user-highlight-selected) !important; /* Use user's preferred color */
    border-left: 3px solid var(--user-highlight-border) !important;
    color: #000000 !important; /* Force black text for visibility on highlighted background */
    box-shadow: 0 1px 3px var(--user-highlight-bg-20) !important;
    border-radius: 4px !important;
    padding: 2px 6px 2px 8px !important;
    margin: 1px 0 !important;
    text-shadow: none !important; /* Remove any conflicting text shadows */
  }
  
  /* Ensure all nested elements also have proper text color in dark mode */
  [data-theme="dark"] .verse-text.selected *,
  [data-theme="dark"] .verse-text-wrapper.selected *,
  [data-theme="dark"] .chapter-content .v.selected * {
    color: inherit !important; /* Inherit the color from parent */
    text-shadow: none !important;
  }
  
  /* Also handle underline class for dark mode */
  [data-theme="dark"] .verse-text.underline,
  [data-theme="dark"] .verse-text-wrapper.underline {
    background: var(--user-highlight-selected) !important;
    border-left: 3px solid var(--user-highlight-border) !important;
    color: #000000 !important; /* Force black text */
    text-decoration: none !important;
    text-shadow: none !important;
  }
  
  [data-theme="dark"] .verse-text.underline *,
  [data-theme="dark"] .verse-text-wrapper.underline * {
    color: #000000 !important; /* Force black text for all nested elements */
    text-shadow: none !important;
  }

  /* Disable all animations and transitions on mobile for text */
  .chapter-content .v,
  .verse-text,
  .verse-text-wrapper {
    transition: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }
}

/* ============================================
   AI SEARCH HIGHLIGHTING FOR MOBILE DEVICES
   ============================================ */

/* AI verse highlight animation for mobile (search context highlighting) */
@media (max-width: 1024px) {
  /* Debug: Add a red border to test if mobile styles are loading */
  .ai-verse-highlight {
    border: 3px solid red !important;
    animation: ai-verse-glow-mobile 4s ease-out !important;
    position: relative !important;
    z-index: 10 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* TEMPORARY: Also add for all screen sizes to test */
.ai-verse-highlight {
  background: rgba(255, 193, 7, 0.15) !important; /* Much more subtle background */
  border: none !important; /* Remove the box border completely */
  border-radius: 0 !important; /* Remove rounded corners */
  box-shadow: none !important; /* Remove the glow effect */
  padding: 0 !important; /* Remove extra padding */
  margin: 0 !important; /* Remove margins */
  display: inline !important; /* Keep it inline with text flow */
  position: relative !important;
  transition: all 0.3s ease !important;
}

  .ai-verse-pulse {
    animation: ai-verse-pulse-mobile 2s ease-out !important;
  }

  /* Mobile AI verse glow animation - yellow highlight for search context */
  @keyframes ai-verse-glow-mobile {
    0% {
      background-color: rgba(255, 193, 7, 0.35) !important; /* Start with subtle highlight */
      box-shadow: none !important; /* No glow effects */
      transform: none !important; /* No scaling */
    }
    20% {
      background-color: rgba(255, 193, 7, 0.25) !important;
    }
    40% {
      background-color: rgba(255, 193, 7, 0.20) !important;
    }
    60% {
      background-color: rgba(255, 193, 7, 0.15) !important;
    }
    80% {
      background-color: rgba(255, 193, 7, 0.08) !important;
    }
    100% {
      background-color: transparent !important;
    }
  }

  @keyframes ai-verse-pulse-mobile {
    0% {
      transform: scale(1) !important;
      border: 2px solid rgba(255, 193, 7, 0.9) !important;
      border-radius: 4px !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;
    }
  }

  /* Ensure AI highlighting works on mobile verse elements */
  .chapter-content .v.ai-verse-highlight,
  .verse-text.ai-verse-highlight,
  .verse-text-wrapper.ai-verse-highlight {
    animation: ai-verse-glow-mobile 4s ease-out !important;
    position: relative !important;
    z-index: 15 !important; /* Higher than user selections */
  }

  /* Dark theme AI verse highlighting for mobile */
  [data-theme="dark"] .ai-verse-highlight {
    animation: ai-verse-glow-mobile-dark 4s ease-out !important;
  }

  @keyframes ai-verse-glow-mobile-dark {
    0% {
      background-color: rgba(255, 193, 7, 0.8) !important;
      box-shadow: 0 0 15px rgba(255, 193, 7, 0.6), inset 0 0 8px rgba(255, 193, 7, 0.3) !important;
      transform: scale(1.02) !important;
      border-radius: 4px !important;
    }
    20% {
      background-color: rgba(255, 193, 7, 0.6) !important;
      box-shadow: 0 0 12px rgba(255, 193, 7, 0.4), inset 0 0 6px rgba(255, 193, 7, 0.2) !important;
      transform: scale(1.015) !important;
    }
    40% {
      background-color: rgba(255, 193, 7, 0.4) !important;
      box-shadow: 0 0 8px rgba(255, 193, 7, 0.3), inset 0 0 4px rgba(255, 193, 7, 0.15) !important;
      transform: scale(1.01) !important;
    }
    60% {
      background-color: rgba(255, 193, 7, 0.25) !important;
      box-shadow: 0 0 6px rgba(255, 193, 7, 0.2) !important;
      transform: scale(1.005) !important;
    }
    80% {
      background-color: rgba(255, 193, 7, 0.15) !important;
      box-shadow: 0 0 4px rgba(255, 193, 7, 0.15) !important;
      transform: scale(1.002) !important;
    }
    100% {
      background-color: transparent !important;
      box-shadow: none !important;
      transform: scale(1) !important;
    }
  }

/* Extra small mobile devices - simplified AI highlighting */
@media (max-width: 480px) {
  .ai-verse-highlight {
    animation: ai-verse-glow-small-mobile 3s ease-out !important;
  }
  
  @keyframes ai-verse-glow-small-mobile {
    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;
      border-radius: 3px !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;
    }
  }
}

/* Clean animation for mobile highlighting */
@keyframes highlightFadeIn {
  0% { 
    opacity: 0;
    transform: translateX(-2px);
  }
  100% { 
    opacity: 1;
    transform: translateX(0);
  }
}