#chatbot-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #ff9000; /* Matching your theme's color */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  #chatbot-toggle .fas.fa-comment-dots {
    font-size: 24px; /* Adjust the icon size as needed */
    color: white; /* Set the icon color to white */
  }
  
  #chatbot-container {
    position: fixed;
    bottom: 40px;
    right: 20px;
    width: 300px;
    max-height: 600px;
    border-radius: 10px; /* Adding rounded corners */
    background-color: #ff9000; /* Matching your theme's color */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: #fff; /* Text color */
    display: none; /* Start hidden */
    transition: bottom 0.3s ease-in-out; /* Add smooth animation */
  }
  
  #chatbot-container.collapsed {
    bottom: -300px; /* Move the chatbot off-screen */
  }
  
  #collapse-button:hover {
    color: #333; /* Highlight color on hover */
    background-color: rgba(255, 255, 255, 0.1); /* Highlight background color on hover */
  }
  
  #chatbot-header {
    background-color: #ff9000; /* Matching your theme's color */
    padding: 10px;
    font-weight: bold;
    border-top-left-radius: 10px; /* Adding rounded corners to header */
    border-top-right-radius: 10px; /* Adding rounded corners to header */
  }
  
  #chatbot-messages {
    max-height: 200px;
    overflow-y: auto;
    color:#333;
    max-height: 400px;
    padding: 10px;
    display: flex;
    flex-direction: column;
  }
  
  .message {
    margin: 5px 0;
    padding: 5px;
    border-radius: 7px;
    font-size: 12px; /* Changing font size */
  }
  
  .received {
    background-color: #f9f9f9; /* Lighter received message background color */
    border-radius: 5px;
    align-self: flex-end; /* Align received messages to the left */
    max-width: 80%; /* Limit the width of received messages */
  }
  
  .sent {
    background-color: #d9d8d5; /* Lighter sent message background color */
    border-radius: 5px;
    align-self: flex-start; /* Align sent messages to the right */
    max-width: 80%; /* Limit the width of sent messages */
  }
  
  #chatbot-input {
    display: flex;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #ccc;
    border-bottom-left-radius: 10px; /* Adding rounded corners to input */
    border-bottom-right-radius: 10px; /* Adding rounded corners to input */
  }
  
  #user-input {
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 7px;
    margin-right: 5px;
    color: #333; /* Input text color */
    background-color: #fff; /* Input background color */
    font-size: 14px; /* Changing font size */
    height: 40px; /* Match the height of the send button */
  }
  
  #send-button {
    background-color: #2476c9;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    height: 40%;
    cursor: pointer;
    height: 35px; /* Match the height of the send button */
  }
  
  #send-button:focus {
    outline: none; /* Removing outline on focus */
  }