@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .border-border {
        border-color: hsl(var("#4c1d95"));
    }
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply antialiased;
  }

  * {
    @apply border-border;
  }
}

@layer components {
  .gradient-text {
    @apply bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent;
  }

  .glass-effect {
    @apply backdrop-blur-sm bg-white/10 border border-white/20;
  }

  .chat-message-enter-active,
  .chat-message-leave-active {
    transition: all 0.3s ease;
  }

  .chat-message-enter-from {
    opacity: 0;
    transform: translateY(20px);
  }

  .chat-message-leave-to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  /*background: rgba(147, 51, 234, 0.5);*/
    background: rgb(9, 26, 40); /* Blue-500 */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  /*background: rgba(147, 51, 234, 0.7);*7
  background: rgba(59, 130, 246, 0.7); /* Blue-500 */
}

/* Animaciones personalizadas */
@keyframes typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}

.typing-indicator {
  animation: typing 1.4s infinite;
}

.typing-indicator:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator:nth-child(3) {
  animation-delay: 0.4s;
}