/* General styles for the chatbot */
#chatbot {
width: 100%;
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
}

/* Conversation styles */
#chatbot-conversation {
flex-grow: 1;
overflow-y: scroll;
max-height: 80%;
background-color: #f5f5f5;
padding: 1em;
border-radius: 5px;
margin-bottom: 1em;
box-sizing: border-box;
}

/* Input field and submit button styles */
#chatbot-input, #chatbot-submit {
width: 100%;
padding: 0.5em;
margin-bottom: .5em;
border-radius: 5px;
border: none;
box-sizing: border-box;
}

#chatbot-input {
background-color: #fff;
}

#chatbot-submit {
background-color: #4CAF50;
color: white;
font-weight: bold;
cursor: pointer;
padding: .5em;
}

/* Media query for smaller screens */
@media (max-width: 600px) {
#chatbot {
width: 90%;
}
}

/* Media query for larger screens */
@media (min-width: 600px) {
#chatbot {
width: 50%;
}
}

/* Media query for other screen sizes */
@media (min-width: 1024px) {
#chatbot {
width: 30%;
}
}

/* Add CSS animations and hover effects as desired */
#chatbot-submit:hover {
background-color: #3e8e41;
}

#chatbot-conversation {
animation: slide-in 0.5s ease-in;
}

@keyframes slide-in {
from {
max-height: 0;
}
to {
max-height: 500px;
}
}