/**
 * Vigthoria Thinking Animation Styles
 * Additional styling for the thinking animation indicator
 * Version: 1.1.0 (May 2025) - Enhanced visibility and animation fixes
 */

/* Enhanced thinking animation container - CRITICAL FIX */
.thinking-message {
  --thinking-glow: 0 0 20px var(--text-accent, #3296c8);
  margin: 16px 0;
  opacity: 1 !important;
  animation: fade-in 0.5s ease-in;
  position: relative;
  z-index: 99999 !important; /* Ultra high z-index to ensure visibility */
  pointer-events: auto !important; /* Allow interaction */
  display: block !important;
  visibility: visible !important;
  border-left: 5px solid var(--text-accent, #3296c8);
  padding-left: 10px;
  transform: translateZ(0); /* Force hardware acceleration */
  will-change: opacity, transform; /* Optimize animations */
  box-shadow: 0 0 25px rgba(50, 150, 200, 0.7);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Force thinking message to be visible regardless of parent containers - CRITICAL FIX */
#chat-messages .thinking-message,
.chat-messages .thinking-message,
.message-container.thinking-message,
.thinking-indicator,
#thinking-container,
.thinking-animation {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 99999 !important;
}

/* Neural pulsing effect for the thinking indicator - FIXED */
.thinking-indicator {
  display: flex !important;
  align-items: center;
  padding: 15px 20px;
  border-radius: 10px;
  background-color: var(--bg-tertiary, rgba(20, 30, 50, 0.95));
  border: 4px solid var(--border-accent, rgba(60, 160, 220, 0.95));
  box-shadow: 0 0 45px rgba(60, 160, 220, 0.7);
  animation: thinking-pulse 1.2s infinite;
  width: fit-content;
  margin: 15px 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateZ(0); /* Force hardware acceleration */
  will-change: box-shadow, border-color; /* Optimize animations */
  z-index: 99999 !important;
  position: relative;
}

/* Pulsing animation for the thinking indicator - IMPROVED */
@keyframes thinking-pulse {
  0% {
    box-shadow: 0 0 20px rgba(60, 160, 220, 0.4);
    border-color: rgba(60, 160, 220, 0.6);
  }
  50% {
    box-shadow: 0 0 45px rgba(60, 160, 220, 0.8), 0 0 25px rgba(60, 160, 220, 0.6);
    border-color: rgba(60, 160, 220, 1);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 20px rgba(60, 160, 220, 0.4);
    border-color: rgba(60, 160, 220, 0.6);
  }
}

/* Text styling */
.thinking-text {
  font-weight: 700;
  color: var(--text-accent, #3296c8);
  margin-right: 10px;
  font-size: 18px;
  text-shadow: 0 0 8px rgba(50, 150, 200, 0.7);
  letter-spacing: 0.5px;
}

/* Enhanced styling for dots */
.thinking-dots {
  display: inline-flex;
  height: 28px;
  width: 45px;
  position: relative;
  align-items: center;
}

.dot {
  position: relative;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  opacity: 0.5;
  color: var(--text-accent, #3296c8);
  text-shadow: var(--thinking-glow);
  animation: dotPulse 1s infinite;
  margin-right: 3px;
  transform-origin: center;
}

.dot1 {
  animation-delay: 0s;
}

.dot2 {
  animation-delay: 0.25s;
}

.dot3 {
  animation-delay: 0.5s;
}

@keyframes dotPulse {
  0% {
    opacity: 0.3;
    transform: scale(1) translateY(0);
  }
  
  50% {
    opacity: 1;
    transform: scale(1.2) translateY(-5px);
    text-shadow: 0 0 15px var(--text-accent, #3296c8);
  }
  
  100% {
    opacity: 0.3;
    transform: scale(1) translateY(0);
  }
}

/* Ensure thinking indicator appears in proper position within chat messages */
.chat-messages .thinking-message {
  position: relative;
  margin-top: 12px;
  margin-bottom: 12px;
  display: block !important;
  visibility: visible !important;
}

/* Make sure the message content is visible */
.thinking-message .message-content {
  opacity: 1 !important;
  visibility: visible !important;
}

/* EMERGENCY THINKING ANIMATION STYLES */
/* These are used as a last resort when normal animations fail */

.emergency-thinking-indicator {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  margin: 20px 0 !important;
  background-color: #d35400 !important;
  border: 4px solid #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 0 40px rgba(211, 84, 0, 0.8) !important;
  color: white !important;
  font-weight: bold !important;
  font-size: 18px !important;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
  animation: emergency-flash 1s infinite alternate !important;
  z-index: 999999 !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateZ(0) !important;
}

@keyframes emergency-flash {
  0% {
    background-color: #d35400;
    box-shadow: 0 0 30px rgba(211, 84, 0, 0.7);
  }
  100% {
    background-color: #e74c3c;
    box-shadow: 0 0 50px rgba(231, 76, 60, 0.9);
  }
}

.emergency-dot {
  width: 12px !important;
  height: 12px !important;
  background-color: white !important;
  border-radius: 50% !important;
  margin: 0 5px !important;
  display: inline-block !important;
  animation: emergency-bounce 0.8s infinite !important;
}

.emergency-dot:nth-child(1) { animation-delay: 0s !important; }
.emergency-dot:nth-child(2) { animation-delay: 0.2s !important; }
.emergency-dot:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes emergency-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}