.chatbot-col-1 {
      width: 30%;
      background-color: #cfe075;
      padding: 20px;
      color: black;
      border-top-left-radius: 25px;
      border-bottom-left-radius: 25px;
    }
    .chatbot-col-2 {
      width: 70%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: white;
    padding: 40px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    }
    .chatbot-container {
      display: flex;
      flex-direction: row;
    }
    .chat-container {
      width: 500px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      align-items: center;
    }

    .chat-container img {
      width: 100px;
    }
    .chat-view {
      height: 0;
      transition: all 0.5s;
    }

    .chat-view.active {
      
      transition: all 0.5s;
      height: 500px;
      width: 100%;
      max-height: 700px;
      background-color: #f2f2f2;
      border-radius: 10px;
      position: relative;
      display: flex;
      flex-direction: column;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
     overflow-y: hidden;
    }
    
    /* ===== Scrollbar CSS ===== */
  /* Firefox */
  .chat-view {
    scrollbar-width: thin;
    scrollbar-color: #525252 #ffffff;
  }

  /* Chrome, Edge, and Safari */
  .chat-view::-webkit-scrollbar {
    width: 8px;
  }


  .chat-view::-webkit-scrollbar-thumb {
    background-color: #cfe075;
    border-radius: 8px;
    border: 3px solid #ffffff;
  }
    


    .chat-input-container {
      background-color: #f2f2f2;
      width: 100%;
      height: 80px;
      border-radius: 15px;
      position: relative;
    }

    .chat-input-container input {
      position: absolute;
      bottom: 50%;
      left: 20px;
      transform: translateY(10%);
      background-color: transparent;
      border: none;
      outline: none;
      height: 40px;
          width: 100%;
    }

    .chat-input-container img {
      width: 20px;
      position: absolute;
    }
    .chat-input-container .clip {
      bottom: 10px;
      left: 20px;
    }
    .chat-input-container .arrow {
      bottom: 10px;
      right: 20px;
    }

    .chat-container input::placeholder {
      color: black;
    }

    .chat-view.active span {
      position: relative;
      color: black;
    }

    .chat-view.active span:nth-child(odd) {
      text-align: left;
      display: inline;
      padding: 5px 20px;
    }
    .chat-view.active span:nth-child(even) {
      text-align: right;
      display: inline;
      padding: 5px 20px;
    }

    .chat-active {
      border-top-left-radius: 0px !important;
      border-top-right-radius: 0px !important;
    }
    
    .subtitle-img {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.chat-options ul {
    list-style: none !important;
    padding: 0 !important;
    color: black;
}

.chat-options li {
    border-bottom: 1px solid black;
    padding: 5px 0px;
}
.subtitle-img h4 {
margin: 0 !important;
}



.chat-view span:nth-child(odd) {
    background: #e3e0e0;
    width: fit-content;
    border-radius: 20px;
    margin: 10px 10px;
}


.chat-view span:nth-child(even) {
    background: #e3e0e0;
    width: fit-content;
    border-radius: 20px;
    margin: 10px 10px;
}


.chat-view.active span:nth-child(even) {
    background: #cfe075;
    border-radius: 20px;
    width: fit-content;
    margin: 10px 10px;
    display: inline;
    align-self: flex-end;
    
}