#chatbot-interface {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1002;
    width: 400px;
    height: 500px;
    border-radius: 8px;
    box-shadow: 2px 2px 10px 0px grey;
    opacity: 1;
     visibility: visible;
    transition: all 0.3s ease;
    padding-top: 8px;
/*    display: none;*/
}

#chatbot-interface.minimized {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width:0;
    height: 0; /* This prevents interaction with the minimized interface */
}

/* You might still want a custom scrollbar for the messages */
.chatbot-messages {
    height: 420px;
    overflow-y: auto;
}

/* Custom styles for chat messages if needed */
.chatbot-messages .message {
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 20px;
}

/* If you want different colors for user and assistant messages */
.chatbot-messages .user-message {
    background-color: #dff0d8;
}

.chatbot-messages .assistant-message {
    background-color: #f0f0f0;
    display:flex;
    flex-wrap: wrap;
}

/* Styles for the message entries */
.user-message, .assistant-message {
    padding: 5px 10px;
    margin: 10px 0;
    border-radius: 16px;
    line-height: 1.5;
}

/* User message bubble color */
.user-message {
    background-color: #DCF8C6;
    text-align: left;
}

/* Assistant message bubble color */
.assistant-message {
    background-color: #E5E5EA;
    text-align: left;
}

/* Error message color */
.assistant-message.error {
    background-color: #FAA;
    color: #D33;
    text-align: left;
}

/* Loading indicator styles */
.loading-indicator {
    display: inline-block;
    margin-left: 5px;
    font-weight:800 ;
}

.loading-indicator span {
    padding: 0 2px;
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.loading-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}
.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text{
    width: 4rem;
    height: 2.4rem;
    padding: 0px;
    border: 2px solid rgba(0, 0, 0, 0.211);
    border-radius: 4px;
}

/* .open-assistant-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;

} */

.open-assistant-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    background-color: #f8f9fa; /* Light grey background */
    color: #333; /* Dark grey text */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, 
                box-shadow 0.3s ease, 
                transform 0.3s ease;
}

.open-assistant-btn:hover, .open-assistant-btn:focus {
    background-color: #e2e6ea; /* Slightly darker background on hover */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px); /* Small lift effect */
}

.open-assistant-btn:active {
    background-color: #dcdde1; /* Even darker for active state */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(0); /* Reset position */
}

/* Optional styles for better accessibility */
.open-assistant-btn:focus {
    outline: none;
    border: 2px solid #5b9bd5; /* Highlight color for focus */
}

.minimize-assistant-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    z-index: 1001;
    font-weight: 400;
}

.minimize-assistant-btn:hover {
    color: #555; /* Optional: Change color on hover for visual feedback. */
}

/* Blinking animation for loading indicator */
@keyframes blink {
    0% {
        opacity: 0.2;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}


/* Add this CSS to handle minimized state */
#chatbot-interface.minimized {
    height: 50px;

}

/* Hide card footer when minimized */
#chatbot-interface.minimized .card-footer {
    display: none;
}

/* Disable scroll bar when minimized */
#chatbot-interface.minimized .chatbot-messages {
    overflow-y: hidden;
}

/* Add padding to the bottom of messages to maintain space when scroll bar is hidden */
#chatbot-interface.minimized .chatbot-messages {
    padding-bottom: 10px; /* Adjust as needed */
}

/* Optionally, you can add transitions for smooth animations */
/*#chatbot-interface {
    transition: height 0.3s ease;
}*/


#chatbot-interface.minimized .chatbot-messages {
    display: none;
}

/* Display chatbot messages when maximized */
#chatbot-interface:not(.minimized) .chatbot-messages {
    display: block;
}

.minimize-assistant-btn {
    right: 25px; /* Adjust this value as needed */
}


.chat-icon {
   position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1002;
    height: 10%;
/*    border-radius: 8px;*/
/*    box-shadow: 2px 2px 10px 0px grey;*/
    transition: all 0.3s ease, opacity 0.3s ease;
    padding-top: 8px; 
}

@media (max-width: 500px) {
    .chat-icon {
         height: 6%;
     }
     #chatbot-interface {
    width: 300px;
    height: 400px;
  
/*    display: none;*/
}
  }
  
  @media (max-width: 300px) {
    .chat-icon {
         height: 6%;
   
     }
     #chatbot-interface {
    width: 250px;
    height: 400px;
     bottom: 25px;
    right: 15px;
  
/*    display: none;*/
}
.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text{
    width: 4rem;
    height: 2.1rem;
 
}
  }

.chatbot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    border-bottom: 1px solid #e0e0e0;
}

.assistant-name {
    font-weight: 600;
    font-size: 1.1em;
    color: #333;
}

.initial-message {
    font-style: italic;
    color: #666;
    padding: 15px;
    margin: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    display: block;
}

.initial-message.hidden {
    display: none;
}