:root {
    --radius: 0.5rem;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
      "Helvetica Neue", sans-serif;
      font-weight: bold;
  }


  
  #chat-container {
    max-height: calc(100vh - 200px);
    min-height: 300px;
    overflow-y: auto;
    padding-right: 8px;
  }
  
  .chat-message {
    margin-bottom: 1rem;
    max-width: 80%;
  }
  
  .user-message {
    margin-left: auto;
  }
  
  .ai-message {
    margin-right: auto;
  }
  
  .user-message > div {
    background-color: #10b981; /* Emerald-500 */
    color: white;
  }
  
  .ai-message > div {
    background-color: #1a2e25; /* Deep Green-Gray */
  }
  
  .typing-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ffffff;
    opacity: 0.6;
    animation: typing 1.4s infinite both;
  }
  
  .typing-dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .typing-dot:nth-child(3) {
    animation-delay: 0.4s;
  }
  
  @keyframes typing {
    0%,
    60%,
    100% {
      transform: translate3d(0, 0, 0);
    }
    30% {
      transform: translate3d(0, -5px, 0);
    }
  }
  
  .message-content {
    white-space: pre-wrap;
  }

  #chat-container::-webkit-scrollbar {
    width: 8px;
  }
  
  #chat-container::-webkit-scrollbar-track {
    background: #10271b; 
  }
  
  #chat-container::-webkit-scrollbar-thumb {
    background-color: #3a4f42; 
    border-radius: 20px;
  }
  
  pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .fade-in {
    animation: fadeIn 0.3s ease forwards;
  }
  
  footer{
    background-color: #023f2b;
  }