/**
 * SinAI Orb - CSS Particle System
 * Multi-layered gradient particle effects for conversational AI interface
 * Adapted from agentic-hero.css proven light mode implementation
 * 
 * @version 1.0.0
 * @date 2025-11-29
 * @see docs/ORB_DEVELOPMENT_NEXT.md
 */

/* ============================================
   CSS CUSTOM PROPERTIES - Orb Particles
   ============================================ */

:root {
  /* Particle Animation Speeds (controlled by JS state manager) */
  --orb-particle-speed-primary: 18s;
  --orb-particle-speed-secondary: 22s;
  
  /* State-based animation multipliers */
  --orb-animation-multiplier: 1;
  
  /* Particle opacity controls */
  --orb-particle-opacity-primary: 0.7;
  --orb-particle-opacity-secondary: 0.5;
  
  /* Pulse scale for audio visualization */
  --orb-pulse-scale: 1;
  
  /* Gradient color anchors (overridden by state classes) */
  --orb-gradient-1: rgba(6, 182, 212, 0.45);     /* Cyan - idle primary */
  --orb-gradient-2: rgba(59, 130, 246, 0.40);    /* Blue */
  --orb-gradient-3: rgba(99, 102, 241, 0.35);    /* Indigo */
  --orb-gradient-4: rgba(124, 58, 237, 0.30);    /* Purple */
  --orb-gradient-5: rgba(139, 92, 246, 0.35);    /* Violet */
  --orb-gradient-6: rgba(34, 211, 238, 0.40);    /* Cyan light */
  --orb-gradient-7: rgba(96, 165, 250, 0.35);    /* Blue light */
}

/* ============================================
   ORB PARTICLE CONTAINER
   Wrapper element containing the orb button
   Phase 2: Enhanced with glassmorphic effects
   
   NOTE: This element WRAPS the .ai-chat-toggle button
   and serves as the visible orb body with particle effects.
   The button inside provides the clickable target.
   ============================================ */

.orb-particle-container {
  /* Position relative for child absolute positioning */
  position: relative;
  
  /* Match the orb dimensions from ai-chat-widget.css */
  width: 105px;
  height: 105px;
  
  /* Scale can be modified by state */
  transform: scale(var(--orb-pulse-scale, 1));
  border-radius: 50%;
  
  /* Allow particle overflow effects but clip to circle */
  overflow: hidden;
  
  /* Container is visible, button inside handles pointer events */
  pointer-events: auto;
  z-index: 10002; /* Match button z-index */
  
  /* Phase 2: Glassmorphic container - THE VISIBLE ORB BODY */
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.08) 0%,
    rgba(118, 75, 162, 0.06) 50%,
    rgba(6, 182, 212, 0.08) 100%
  );
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  
  /* Gradient border effect */
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 4px 16px rgba(102, 126, 234, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  
  /* Smooth pulse transitions */
  transition: transform 0.1s ease-out, box-shadow 0.3s ease;
}

/* Hover enhancement for particle container */
.orb-particle-container:hover {
  box-shadow:
    0 8px 24px rgba(102, 126, 234, 0.20),
    0 4px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
}

/* ============================================
   GLOW LAYER
   Ambient halo effect around orb - REDUCED SIZE
   ============================================ */

.orb-glow-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%; /* REDUCED from 80% - much smaller subtle glow */
  height: 40%;
  transform: translate(-50%, -50%) translateZ(-10px) !important; /* Force BEHIND face */
  border-radius: 50%;
  pointer-events: none;
  z-index: -100 !important; /* Very far behind everything including nudge */
  
  /* Subtle ambient glow gradient */
  background: radial-gradient(
    circle at center,
    rgba(102, 126, 234, 0.12) 0%,
    rgba(102, 126, 234, 0.06) 30%,
    rgba(118, 75, 162, 0.03) 50%,
    transparent 70%
  );
  
  /* Reduced blur for subtler effect */
  filter: blur(6px);
  opacity: 0.4;
  
  /* Gentle breathing animation */
  animation: orbGlowPulse 4s ease-in-out infinite;
}

@keyframes orbGlowPulse {
  0%, 100% {
    transform: translate(-50%, -50%) translateZ(-10px) scale(1) !important;
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) translateZ(-10px) scale(1.05) !important;
    opacity: 0.5;
  }
}

/* State-specific glow colors */
.orb-state-idle .orb-glow-layer {
  background: radial-gradient(
    circle at center,
    rgba(6, 182, 212, 0.25) 0%,
    rgba(59, 130, 246, 0.15) 40%,
    transparent 70%
  );
}

.orb-state-listening .orb-glow-layer {
  background: radial-gradient(
    circle at center,
    rgba(124, 58, 237, 0.30) 0%,
    rgba(99, 102, 241, 0.18) 40%,
    transparent 70%
  );
  animation-duration: 2.5s;
}

.orb-state-processing .orb-glow-layer,
.orb-state-thinking .orb-glow-layer {
  background: radial-gradient(
    circle at center,
    rgba(99, 102, 241, 0.35) 0%,
    rgba(139, 92, 246, 0.20) 40%,
    transparent 70%
  );
  animation-duration: 1.5s;
}

.orb-state-speaking .orb-glow-layer,
.orb-state-responding .orb-glow-layer {
  background: radial-gradient(
    circle at center,
    rgba(6, 182, 212, 0.30) 0%,
    rgba(20, 184, 166, 0.18) 40%,
    transparent 70%
  );
}

.orb-state-error .orb-glow-layer {
  background: radial-gradient(
    circle at center,
    rgba(239, 68, 68, 0.35) 0%,
    rgba(249, 115, 22, 0.20) 40%,
    transparent 70%
  );
  animation-duration: 0.8s;
}

.orb-state-success .orb-glow-layer {
  background: radial-gradient(
    circle at center,
    rgba(34, 197, 94, 0.30) 0%,
    rgba(16, 185, 129, 0.18) 40%,
    transparent 70%
  );
}

/* ============================================
   PRIMARY PARTICLE LAYER (::before)
   7 radial gradients with floating animation
   ============================================ */

.orb-particle-container::before {
  content: '';
  position: absolute;
  /* Extend beyond container for movement headroom */
  inset: -50%;
  border-radius: 50%;
  
  /* Multi-gradient particle system - 7 layered gradients */
  background-image:
    radial-gradient(circle at 20% 25%, var(--orb-gradient-1) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, var(--orb-gradient-2) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, var(--orb-gradient-3) 0%, transparent 55%),
    radial-gradient(circle at 75% 20%, var(--orb-gradient-4) 0%, transparent 40%),
    radial-gradient(circle at 25% 80%, var(--orb-gradient-5) 0%, transparent 50%),
    radial-gradient(circle at 90% 45%, var(--orb-gradient-6) 0%, transparent 45%),
    radial-gradient(circle at 10% 55%, var(--orb-gradient-7) 0%, transparent 50%);
  
  /* Animation with CSS variable speed */
  animation: orbParticleFloat var(--orb-particle-speed-primary) ease-in-out infinite;
  opacity: var(--orb-particle-opacity-primary);
  pointer-events: none;
  will-change: transform, opacity;
}

/* ============================================
   SECONDARY PARTICLE LAYER (::after)
   4 complementary gradients, offset timing
   ============================================ */

.orb-particle-container::after {
  content: '';
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  
  /* Secondary gradient layer - 4 complementary colors */
  background-image:
    radial-gradient(circle at 35% 65%, rgba(124, 58, 237, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 65% 35%, rgba(236, 72, 153, 0.30) 0%, transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(6, 182, 212, 0.30) 0%, transparent 55%),
    radial-gradient(circle at 15% 40%, rgba(99, 102, 241, 0.32) 0%, transparent 50%);
  
  /* Offset animation for depth */
  animation: orbParticleFloatSecondary var(--orb-particle-speed-secondary) ease-in-out infinite reverse;
  opacity: var(--orb-particle-opacity-secondary);
  pointer-events: none;
  will-change: transform, opacity;
}

/* ============================================
   PRIMARY PARTICLE ANIMATION
   Smooth floating with rotation and scale
   ============================================ */

@keyframes orbParticleFloat {
  0% {
    opacity: 0.6;
    transform: scale(1) translate(0, 0) rotate(0deg);
  }
  
  25% {
    opacity: 0.8;
    transform: scale(1.08) translate(8%, -12%) rotate(45deg);
  }
  
  50% {
    opacity: 1;
    transform: scale(1.12) translate(-5%, -18%) rotate(90deg);
  }
  
  75% {
    opacity: 0.8;
    transform: scale(1.08) translate(-10%, -8%) rotate(135deg);
  }
  
  100% {
    opacity: 0.6;
    transform: scale(1) translate(0, 0) rotate(180deg);
  }
}

/* ============================================
   SECONDARY PARTICLE ANIMATION
   Counter-rotation for depth illusion
   ============================================ */

@keyframes orbParticleFloatSecondary {
  0% {
    opacity: 0.4;
    transform: scale(0.95) translate(0, 0) rotate(0deg);
  }
  
  33% {
    opacity: 0.6;
    transform: scale(1.05) translate(-12%, 10%) rotate(-60deg);
  }
  
  66% {
    opacity: 0.5;
    transform: scale(1.02) translate(10%, -8%) rotate(-120deg);
  }
  
  100% {
    opacity: 0.4;
    transform: scale(0.95) translate(0, 0) rotate(-180deg);
  }
}

/* ============================================
   STATE: IDLE (Default - Blue/Cyan)
   Calm, waiting state with subtle movement
   ============================================ */

.orb-state-idle {
  --orb-particle-speed-primary: 20s;
  --orb-particle-speed-secondary: 25s;
  --orb-particle-opacity-primary: 0.6;
  --orb-particle-opacity-secondary: 0.4;
  
  /* Cool, calm colors */
  --orb-gradient-1: rgba(6, 182, 212, 0.50);     /* Cyan primary */
  --orb-gradient-2: rgba(59, 130, 246, 0.45);    /* Blue */
  --orb-gradient-3: rgba(34, 211, 238, 0.40);    /* Cyan light */
  --orb-gradient-4: rgba(96, 165, 250, 0.35);    /* Blue light */
  --orb-gradient-5: rgba(99, 102, 241, 0.30);    /* Indigo subtle */
  --orb-gradient-6: rgba(14, 165, 233, 0.40);    /* Sky */
  --orb-gradient-7: rgba(56, 189, 248, 0.35);    /* Sky light */
}

/* ============================================
   STATE: LISTENING (Purple/Indigo)
   Attentive, receptive state
   ============================================ */

.orb-state-listening {
  --orb-particle-speed-primary: 14s;
  --orb-particle-speed-secondary: 18s;
  --orb-particle-opacity-primary: 0.75;
  --orb-particle-opacity-secondary: 0.55;
  
  /* Active, engaged colors */
  --orb-gradient-1: rgba(124, 58, 237, 0.55);    /* Purple primary */
  --orb-gradient-2: rgba(99, 102, 241, 0.50);    /* Indigo */
  --orb-gradient-3: rgba(139, 92, 246, 0.45);    /* Violet */
  --orb-gradient-4: rgba(168, 85, 247, 0.40);    /* Purple light */
  --orb-gradient-5: rgba(192, 132, 252, 0.38);   /* Violet light */
  --orb-gradient-6: rgba(129, 140, 248, 0.42);   /* Indigo light */
  --orb-gradient-7: rgba(79, 70, 229, 0.45);     /* Indigo dark */
}

/* ============================================
   STATE: PROCESSING / THINKING
   Active computation, faster animation
   ============================================ */

.orb-state-processing,
.orb-state-thinking {
  --orb-particle-speed-primary: 8s;
  --orb-particle-speed-secondary: 10s;
  --orb-particle-opacity-primary: 0.85;
  --orb-particle-opacity-secondary: 0.65;
  
  /* High energy colors */
  --orb-gradient-1: rgba(139, 92, 246, 0.60);    /* Violet primary */
  --orb-gradient-2: rgba(124, 58, 237, 0.55);    /* Purple */
  --orb-gradient-3: rgba(168, 85, 247, 0.50);    /* Purple light */
  --orb-gradient-4: rgba(192, 132, 252, 0.45);   /* Violet light */
  --orb-gradient-5: rgba(99, 102, 241, 0.48);    /* Indigo */
  --orb-gradient-6: rgba(236, 72, 153, 0.40);    /* Pink accent */
  --orb-gradient-7: rgba(217, 70, 239, 0.42);    /* Fuchsia */
}

/* Processing pulse animation overlay */
.orb-state-processing .orb-particle-container::before,
.orb-state-thinking .orb-particle-container::before {
  animation: 
    orbParticleFloat var(--orb-particle-speed-primary) ease-in-out infinite,
    orbProcessingPulse 2s ease-in-out infinite;
}

@keyframes orbProcessingPulse {
  0%, 100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.15) saturate(1.2);
  }
}

/* ============================================
   STATE: SPEAKING / RESPONDING
   Output state, synchronized with voice
   ============================================ */

.orb-state-speaking,
.orb-state-responding {
  --orb-particle-speed-primary: 12s;
  --orb-particle-speed-secondary: 15s;
  --orb-particle-opacity-primary: 0.80;
  --orb-particle-opacity-secondary: 0.60;
  
  /* Warm, expressive colors */
  --orb-gradient-1: rgba(99, 102, 241, 0.55);    /* Indigo primary */
  --orb-gradient-2: rgba(139, 92, 246, 0.50);    /* Violet */
  --orb-gradient-3: rgba(124, 58, 237, 0.45);    /* Purple */
  --orb-gradient-4: rgba(6, 182, 212, 0.40);     /* Cyan accent */
  --orb-gradient-5: rgba(236, 72, 153, 0.35);    /* Pink accent */
  --orb-gradient-6: rgba(168, 85, 247, 0.42);    /* Purple light */
  --orb-gradient-7: rgba(34, 211, 238, 0.38);    /* Cyan light */
}

/* ============================================
   STATE: ERROR
   Alert state with warning colors
   ============================================ */

.orb-state-error {
  --orb-particle-speed-primary: 6s;
  --orb-particle-speed-secondary: 8s;
  --orb-particle-opacity-primary: 0.80;
  --orb-particle-opacity-secondary: 0.60;
  
  /* Warning colors */
  --orb-gradient-1: rgba(239, 68, 68, 0.55);     /* Red primary */
  --orb-gradient-2: rgba(249, 115, 22, 0.50);    /* Orange */
  --orb-gradient-3: rgba(234, 88, 12, 0.45);     /* Orange dark */
  --orb-gradient-4: rgba(220, 38, 38, 0.40);     /* Red dark */
  --orb-gradient-5: rgba(251, 146, 60, 0.38);    /* Orange light */
  --orb-gradient-6: rgba(248, 113, 113, 0.42);   /* Red light */
  --orb-gradient-7: rgba(253, 186, 116, 0.35);   /* Amber */
}

/* Error pulse animation */
.orb-state-error .orb-particle-container::before {
  animation: 
    orbParticleFloat var(--orb-particle-speed-primary) ease-in-out infinite,
    orbErrorPulse 1.5s ease-in-out infinite;
}

@keyframes orbErrorPulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
}

/* ============================================
   STATE: SUCCESS
   Positive confirmation state
   ============================================ */

.orb-state-success {
  --orb-particle-speed-primary: 16s;
  --orb-particle-speed-secondary: 20s;
  --orb-particle-opacity-primary: 0.75;
  --orb-particle-opacity-secondary: 0.55;
  
  /* Success colors */
  --orb-gradient-1: rgba(16, 185, 129, 0.55);    /* Emerald primary */
  --orb-gradient-2: rgba(34, 197, 94, 0.50);     /* Green */
  --orb-gradient-3: rgba(20, 184, 166, 0.45);    /* Teal */
  --orb-gradient-4: rgba(45, 212, 191, 0.40);    /* Teal light */
  --orb-gradient-5: rgba(74, 222, 128, 0.38);    /* Green light */
  --orb-gradient-6: rgba(6, 182, 212, 0.40);     /* Cyan accent */
  --orb-gradient-7: rgba(52, 211, 153, 0.42);    /* Emerald light */
}

/* ============================================
   LIGHT MODE OVERRIDES
   Enhanced visibility for light backgrounds
   ============================================ */

html[data-theme="light"] .orb-particle-container::before,
html[data-bs-theme="light"] .orb-particle-container::before,
[data-theme="light"] .orb-particle-container::before,
[data-bs-theme="light"] .orb-particle-container::before {
  /* Slightly higher opacity for light backgrounds */
  opacity: var(--orb-particle-opacity-primary);
}

html[data-theme="light"] .orb-particle-container::after,
html[data-bs-theme="light"] .orb-particle-container::after,
[data-theme="light"] .orb-particle-container::after,
[data-bs-theme="light"] .orb-particle-container::after {
  opacity: var(--orb-particle-opacity-secondary);
}

/* Light mode idle state - deeper saturation */
html[data-theme="light"] .orb-state-idle,
html[data-bs-theme="light"] .orb-state-idle,
[data-theme="light"] .orb-state-idle,
[data-bs-theme="light"] .orb-state-idle {
  --orb-gradient-1: rgba(6, 182, 212, 0.60);
  --orb-gradient-2: rgba(59, 130, 246, 0.55);
  --orb-gradient-3: rgba(34, 211, 238, 0.50);
  --orb-gradient-4: rgba(96, 165, 250, 0.45);
  --orb-gradient-5: rgba(99, 102, 241, 0.40);
  --orb-gradient-6: rgba(14, 165, 233, 0.50);
  --orb-gradient-7: rgba(56, 189, 248, 0.45);
}

/* ============================================
   REDUCED MOTION PREFERENCE
   Accessibility: Disable animations for users
   who prefer reduced motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .orb-particle-container::before,
  .orb-particle-container::after {
    animation: none !important;
    /* Static display instead of animation */
    opacity: 0.5;
  }
  
  .orb-state-processing .orb-particle-container::before,
  .orb-state-thinking .orb-particle-container::before,
  .orb-state-error .orb-particle-container::before {
    filter: none !important;
  }
}

/* ============================================
   ANIMATION PAUSE STATE
   For tab visibility / resource saving
   ============================================ */

.orb-particle-container.orb-animations-paused,
.orb-particle-container.orb-animations-paused::before,
.orb-particle-container.orb-animations-paused::after {
  animation-play-state: paused !important;
}

.orb-animations-paused .orb-glow-layer {
  transition: none;
}

/* ============================================
   ENTRANCE / EXIT ANIMATIONS
   Smooth orb appearance transitions
   ============================================ */

@keyframes orbParticleEnter {
  0% {
    opacity: 0;
    transform: scale(0.5) translate(-50%, -50%);
  }
  100% {
    opacity: 1;
    transform: scale(var(--orb-pulse-scale, 1)) translate(-50%, -50%);
  }
}

@keyframes orbParticleExit {
  0% {
    opacity: 1;
    transform: scale(var(--orb-pulse-scale, 1)) translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: scale(0.3) translate(-50%, -50%);
  }
}

.orb-particle-container.orb-entering {
  animation: orbParticleEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.orb-particle-container.orb-exiting {
  animation: orbParticleExit 0.3s ease-out forwards;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   GPU acceleration and compositing hints
   ============================================ */

.orb-particle-container,
.orb-particle-container::before,
.orb-particle-container::after,
.orb-glow-layer {
  /* Force GPU layer */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Print styles - hide particles */
@media print {
  .orb-particle-container,
  .orb-glow-layer {
    display: none !important;
  }
}