/* ================================================================================
   MESSAGE INDICATOR EFFECTS - SHIMMER & GLOW ANIMATIONS
   ================================================================================

   Scalable system for dot shimmer/glow effects across the application.
   Supports light/dark mode and provides various intensity levels.

   USAGE:
   - .dots-shimmer: Applies shimmer animation to dot patterns
   - .dots-glow: Applies glow effect to dot patterns
   - .dots-subtle: Makes dots more discreet
   - .dots-hidden: Hides dots completely
   - .message-highlight: Highlight effect for messages

   ================================================================================ */

/* ========================================
   CSS VARIABLES - SCALABLE TOKEN SYSTEM
   ======================================== */

:root {
  /* Dot shimmer colors - Light mode (subtle, no yellow) */
  --dot-color-base: rgba(47, 47, 46, 0.06);
  --dot-color-shimmer: rgba(47, 47, 46, 0.18);
  --dot-color-glow: rgba(47, 47, 46, 0.12);
  --dot-color-subtle: rgba(47, 47, 46, 0.03);

  /* Animation timing */
  --shimmer-duration: 2.5s;
  --shimmer-delay-step: 0.15s;
  --glow-duration: 2s;
  --highlight-duration: 1s;

  /* Sizes */
  --dot-size-default: 1px;
  --dot-size-shimmer: 1.3px;
  --dot-spacing: 30px;

  /* Message highlight - subtle gray */
  --highlight-color: rgba(47, 47, 46, 0.08);
  --highlight-border-color: rgba(47, 47, 46, 0.15);
}

/* Dark mode variables */
[data-theme="dark"] {
  --dot-color-base: rgba(255, 255, 255, 0.04);
  --dot-color-shimmer: rgba(255, 255, 255, 0.14);
  --dot-color-glow: rgba(255, 255, 255, 0.10);
  --dot-color-subtle: rgba(255, 255, 255, 0.02);

  --highlight-color: rgba(255, 255, 255, 0.06);
  --highlight-border-color: rgba(255, 255, 255, 0.12);
}

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

/* Shimmer wave animation - travels across dots */
@keyframes dotShimmerWave {
  0% {
    background-position: 0% 0%, 0 0;
  }
  50% {
    background-position: 100% 100%, 0 0;
  }
  100% {
    background-position: 200% 200%, 0 0;
  }
}

/* Pulse glow animation - dots pulse in brightness */
@keyframes dotPulseGlow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Radial shimmer - emanates from center */
@keyframes dotRadialShimmer {
  0% {
    background-size: var(--dot-spacing) var(--dot-spacing), 0% 0%;
  }
  50% {
    background-size: var(--dot-spacing) var(--dot-spacing), 150% 150%;
  }
  100% {
    background-size: var(--dot-spacing) var(--dot-spacing), 300% 300%;
  }
}

/* Gentle fade in/out for subtle effect */
@keyframes dotFadeShimmer {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Message highlight pulse */
@keyframes messageHighlightPulse {
  0% {
    box-shadow: 0 0 0 0 var(--highlight-color);
    background-color: var(--highlight-color);
  }
  50% {
    box-shadow: 0 0 20px 5px var(--highlight-color);
    background-color: var(--highlight-color);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    background-color: transparent;
  }
}

/* Dots entrance animation - smooth wave effect */
@keyframes dotsEntranceShimmer {
  0% {
    background-image: radial-gradient(circle, var(--dot-color-base) var(--dot-size-default), transparent var(--dot-size-default));
    opacity: 0;
  }
  20% {
    background-image: radial-gradient(circle, var(--dot-color-base) var(--dot-size-default), transparent var(--dot-size-default));
    opacity: 1;
  }
  50% {
    background-image: radial-gradient(circle, var(--dot-color-shimmer) var(--dot-size-shimmer), transparent var(--dot-size-shimmer));
    opacity: 1;
  }
  80% {
    background-image: radial-gradient(circle, var(--dot-color-shimmer) var(--dot-size-shimmer), transparent var(--dot-size-shimmer));
    opacity: 1;
  }
  100% {
    background-image: radial-gradient(circle, var(--dot-color-base) var(--dot-size-default), transparent var(--dot-size-default));
    opacity: 1;
  }
}

/* ========================================
   DOT SHIMMER CLASSES
   ======================================== */

/* Base shimmer effect - can be applied to any element with dot background */
.dots-shimmer {
  position: relative;
}

.dots-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--dot-color-shimmer) var(--dot-size-shimmer), transparent var(--dot-size-shimmer)),
    radial-gradient(ellipse at center, var(--dot-color-glow), transparent 70%);
  background-size: var(--dot-spacing) var(--dot-spacing), 100% 100%;
  background-position: 0 0, center center;
  animation: dotShimmerWave var(--shimmer-duration) ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

/* Entrance shimmer - plays once on load */
.dots-shimmer-entrance {
  animation: dotsEntranceShimmer 1.5s ease-out forwards;
  background-size: var(--dot-spacing) var(--dot-spacing);
}

/* Glow effect - more intense, for highlights */
.dots-glow {
  position: relative;
}

.dots-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, var(--dot-color-glow) 0%, transparent 50%);
  animation: dotFadeShimmer var(--glow-duration) ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* ========================================
   DOT VISIBILITY CONTROLS
   ======================================== */

/* Subtle dots - for input areas during conversation */
.dots-subtle {
  background-image: radial-gradient(circle, var(--dot-color-subtle) var(--dot-size-default), transparent var(--dot-size-default)) !important;
}

/* Hidden dots - completely remove */
.dots-hidden {
  background-image: none !important;
}

/* Dots fade to subtle - smooth transition */
.dots-fade-subtle {
  transition: background-image 0.5s ease-out;
}

/* ========================================
   MESSAGE HIGHLIGHT EFFECTS
   ======================================== */

/* First message highlight animation */
.message-highlight {
  animation: messageHighlightPulse var(--highlight-duration) ease-out forwards;
  border-radius: var(--radius-md, 8px);
}

/* User message first appearance */
.message-user.message-first-appear .content {
  animation: messageHighlightPulse 1s ease-out forwards;
}

/* Assistant message first appearance */
.message-assistant.message-first-appear {
  position: relative;
}

.message-assistant.message-first-appear::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(ellipse at left center, var(--highlight-color), transparent 70%);
  animation: dotFadeShimmer 1.5s ease-out forwards;
  pointer-events: none;
  opacity: 0;
  animation: fadeInOut 1.5s ease-out forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

/* ========================================
   CONVERSATION AREA - DISCREET DOTS IN INPUT
   ======================================== */

/* When conversation is active, dots are already handled by style-refactored.css */
/* This section provides additional control for the input area */

/* Input wrapper - no dots inside to avoid distraction while typing */
.chat-input-wrapper {
  position: relative;
  background-image: none !important;
}

/* Gradient mask to fade dots near the input area - SUPPRIMÉ car créait une ligne opaque gênante */
/* body:not(.welcome-mode) .modern-chat-container::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--bg-chat) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
} */

/* Dark mode gradient mask - SUPPRIMÉ */
/* [data-theme="dark"] body:not(.welcome-mode) .modern-chat-container::before,
body:not(.welcome-mode) [data-theme="dark"] .modern-chat-container::before {
  background: linear-gradient(to top, var(--bg-chat, #262624) 0%, transparent 100%);
} */

/* ========================================
   WELCOME MODE - ENHANCED DOTS
   ======================================== */

/* Welcome mode - base positioning only */
/* NOTE: The base dots are already defined in style-refactored.css via background-image.
   No additional glow effect needed. */
body.welcome-mode .conversation {
  position: relative;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Use will-change for animated elements */
.dots-shimmer::before,
.dots-glow::before,
.message-highlight {
  will-change: opacity, background-image;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .dots-shimmer::before,
  .dots-glow::before,
  .message-highlight,
  .dots-shimmer-entrance {
    animation: none !important;
  }
}

/* ========================================
   END OF FILE
   ======================================== */