/* Floating Chat Button */
    #chatBtn {
      position: fixed;
      bottom: 50px;
      right: 50px;
      z-index: 10;
      border-radius: 20px 0 20px 0;
      width: 70px;
      height: 70px;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #2e5610; /* Custom color */
      color: white;
      border: none;
    }
    .chatBtnLogo {
      position: fixed;
      bottom: 55px;
      right: 123px;
      z-index: 5;
      border-radius: 20px 0 0 0;
      width: 180px;
      height: 45px;
      display: flex;
      background-color: #23420a; /* Custom color */
      color: white;
      border: none;

      transition: transform 0.5s ease, opacity 0.5s ease;
      overflow: hidden;
    }
    .chatBtnLogo.slide-out {
      transform: translateX(55px);
      opacity: 0;
      z-index: 5;
    }
    #chatBtn:hover {
      background-color: #3a6a15; /* Slightly lighter hover */
    }
    /* Send Button */
    .btn-custom-green {
      background-color: #2e5610 !important; 
      color: white !important;
      border: none !important;
    }
    .btn-custom-green:hover {
      background-color: #3a6a15 !important;
      color: white !important;
    }
    .btn:focus {
      outline: none !important;
      box-shadow: none;
    }

    /* Chat Popup */
    #chatPopup {
      display: none;
      position: fixed;
      bottom: 128px;
      right: 50px; /* changed from left to right */
      width: 350px;
      background: #23420a;
      border: 5px solid #23420a;
      border-radius: 25px 5px 10px 10px;
      box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
      z-index: 1000;
    }
    #chatPopup .chat-header {
      background: #23420a;
      color: white;
      padding: 10px;
      border-radius: 25px 25px 10px 10px;
    }
    #chatPopup .chat-body {
      padding: 10px;
      overflow-y: auto;
      height: 360px;
      border-radius: 25px 5px 0 0; /* Adjust the value as needed */
      padding: 10px; /* Optional, adds spacing inside */
      background-color: #f8f8f8; /* Optional, to make rounded corners more visible */
    }
    #chatPopup .chat-footer {
      background: #407517;
      color: white;
      padding: 10px;
      border-radius: 0 0 10px 10px;
    }
    .chat-message {
      max-width: 95%;
      padding: 10px 15px;
      margin-bottom: 10px;
      border-radius: 15px;
      clear: both;
      font-size: 14px;
      line-height: 1.3;
    }
    .chat-welcome-message{
      color: #23420a;
      padding: 20px;
      font-size: 16px;
      text-align: justify;
      margin-top: 15px;
    }
    .chat-welcome-message hr{
      border: none;                /* remove default border */
      border-top: 2px dotted lightgray; /* dotted line */
      margin: 20px 20px 15px 10px;             /* optional spacing */
    }
    .chat-welcome-message h1 {
      color: #484a46;
      font: 700 17px "Montserrat", sans-serif;
      padding-top: 15px;
    }
    .asq-message {
      background-color: #e2f0d9;
      color: #23420a;
      float: left;
      border-top-left-radius: 0;
    }

    .user-message {
      background-color: #2e5610;
      color: white !important; 
      float: right;
      border-top-right-radius: 0;
    }

    .user-message strong{
      
      color: rgb(118, 173, 116) !important; 

    }

.typing {
    display: inline-block;
    margin: 5px 0;
}

.typing span {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 2px;
    background-color: #555;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.typing span:nth-child(1) { animation-delay: 0s; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}