@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

      body {
        font-family: "Inter", sans-serif;
        transition: background-color 0.3s ease;
      }

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

      .chat-message-enter-active {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 300ms, transform 300ms;
      }

      .typing-indicator {
        display: inline-flex;
        align-items: center;
      }

      .typing-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #9ca3af;
        margin: 0 2px;
        animation: typingAnimation 1.4s infinite ease-in-out;
      }

      .typing-dot:nth-child(1) {
        animation-delay: 0s;
      }

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

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

      @keyframes typingAnimation {
        0%,
        60%,
        100% {
          transform: translateY(0);
          opacity: 0.6;
        }
        30% {
          transform: translateY(-5px);
          opacity: 1;
        }
      }

      .slide-in {
        animation: slideIn 0.3s ease-out forwards;
      }

      @keyframes slideIn {
        from {
          transform: translateX(100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      .fade-in {
        animation: fadeIn 0.3s ease-out forwards;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }

      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      .gradient-bg {
        background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
      }

      .glow {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
      }

      .glow:hover {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
      }