@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

@keyframes responseGlow {
  0% {
    box-shadow: 0 0 0 1.5px rgba(168, 85, 247, 0.8), 0 0 25px 4px rgba(217, 70, 239, 0.6), 0 0 45px 10px rgba(236, 72, 153, 0.35);
    border-color: rgba(217, 70, 239, 0.8);
    background-color: rgba(250, 245, 255, 0.98);
  }
  30% {
    box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.9), 0 0 30px 6px rgba(236, 72, 153, 0.7), 0 0 50px 12px rgba(244, 114, 182, 0.4);
    border-color: rgba(236, 72, 153, 0.9);
    background-color: rgba(253, 242, 248, 0.98);
  }
  60% {
    box-shadow: 0 0 0 1.5px rgba(168, 85, 247, 0.6), 0 0 20px 4px rgba(236, 72, 153, 0.4), 0 0 35px 8px rgba(244, 114, 182, 0.25);
    border-color: rgba(217, 70, 239, 0.6);
    background-color: rgba(250, 245, 255, 0.95);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0), 0 0 0 0 rgba(236, 72, 153, 0);
    border-color: inherit;
    background-color: inherit;
  }
}

@keyframes responseGlowDark {
  0% {
    box-shadow: 0 0 0 1.5px rgba(192, 132, 252, 0.85), 0 0 30px 6px rgba(217, 70, 239, 0.7), 0 0 55px 12px rgba(236, 72, 153, 0.4);
    border-color: rgba(217, 70, 239, 0.85);
    background-color: rgba(30, 16, 45, 0.7);
  }
  30% {
    box-shadow: 0 0 0 2px rgba(217, 70, 239, 0.95), 0 0 35px 8px rgba(236, 72, 153, 0.8), 0 0 60px 15px rgba(244, 114, 182, 0.5);
    border-color: rgba(236, 72, 153, 0.95);
    background-color: rgba(45, 18, 55, 0.75);
  }
  60% {
    box-shadow: 0 0 0 1.5px rgba(192, 132, 252, 0.7), 0 0 25px 5px rgba(217, 70, 239, 0.5), 0 0 40px 10px rgba(236, 72, 153, 0.3);
    border-color: rgba(217, 70, 239, 0.7);
    background-color: rgba(30, 16, 45, 0.6);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(192, 132, 252, 0), 0 0 0 0 rgba(217, 70, 239, 0);
    border-color: inherit;
    background-color: inherit;
  }
}

.animate-response-glow {
  animation: responseGlow 4.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

:is(.dark .animate-response-glow) {
  animation: responseGlowDark 4.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Aura AI dynamic gradient and hover color transitions (Purple -> Pink to Purple -> Pink -> Red -> Orange) */
.aura-chat-text {
  background: linear-gradient(90deg, #9333ea 0%, #d946ef 18%, #ec4899 35%, #ef4444 65%, #f97316 85%, #fb923c 100%);
  background-size: 320% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
  display: inline-block;
}

.aura-chat-text:hover,
.group:hover .aura-chat-text,
.group\/aura:hover .aura-chat-text,
.group\/auratitle:hover .aura-chat-text,
.group\/aurastream:hover .aura-chat-text {
  background-position: 100% 50%;
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.65));
}

.aura-ai-bubble {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 245, 255, 0.96) 50%, rgba(253, 242, 248, 0.96) 100%);
  border-color: rgba(217, 70, 239, 0.22);
  box-shadow: 0 4px 20px -2px rgba(217, 70, 239, 0.08);
}

:is(.dark .aura-ai-bubble) {
  background: linear-gradient(135deg, rgba(15, 12, 29, 0.96) 0%, rgba(26, 16, 42, 0.96) 50%, rgba(36, 16, 40, 0.96) 100%);
  border-color: rgba(217, 70, 239, 0.3);
  box-shadow: 0 4px 25px -2px rgba(168, 85, 247, 0.15);
}