body {
        font-family: Arial;
        margin-top: 0px;
        margin-bottom: 0px;
      }
      .send-button {
        background-color: rgb(25, 135, 84);
        color: white;
        border: none;
        padding: 10px 25px;
        text-align: center;
        border-radius: 10px;
        cursor: pointer;
        margin-left: 15px;
        font-size: 15px;
      }
      .send-button:hover {
            background-color: #0e6e13; 
                     
          }
          
      .chat-input {
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        font-size: 15px;
        flex-grow: 1;
        margin: 10px;
      }

      .chat-input-container {
        display: flex;
        align-items: center;
        margin-bottom: 50px;
        padding: 20px;
      }
      .app-container {
        max-width: 600px;
        margin: 0 auto;
        height: 100vh;
        display: flex;
        flex-direction: column;
      }
      .user-chat {
        display: flex;
        justify-content: end;
        align-items: center;
        text-align: right;
        margin: 15px;
        font-size: 15px;
      }
      .bot-chat {
        display: flex;
        justify-content: start;
        align-items: center;
        text-align: left;
        margin: 15px;
        font-size: 15px;
      }
      .chat-message-text {
        background-color: rgb(238, 238, 238);
        border-radius: 10px;
        padding: 15px 20px;
        max-width: 50%;
      }
      .chat-messages-container {
        flex-grow: 1;
        margin-top: 20px;
        overflow: scroll;
        scrollbar-width: none;
      }

      .chat-bot-img {
        border-radius: 50%;
        margin-right: 10px;
        height: 50px;
        width: 50px;
      }
      .avatar-img {
        border-radius: 50%;
        margin-left: 10px;
        height: 25px;
        width: 25px;
        background-color: lightgray;
        padding: 5px;
      }
      /* --- ADD THIS --- */

.thinking-dots::after {
  content: '.';
  /* Animation: name duration timing-function iteration-count */
  animation: thinking-dots 1.4s linear infinite;
  display: inline-block;
  /* Reserve space for 3 dots */
  width: 1.2em; 
  text-align: left;
}

@keyframes thinking-dots {
  0% {
    content: '.';
  }
  25% {
    content: '..';
  }
  50% {
    content: '...';
  }
  75% {
    content: '..';
  }
  100% {
    content: '.';
  }
}