chatbot
Your content goes here.
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.chat-container {
width: 300px;
height: 400px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.chat-box {
display: flex;
flex-direction: column;
height: 100%;
}
.chat-messages {
flex-grow: 1;
padding: 10px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.chat-messages .message {
padding: 8px;
margin: 5px 0;
border-radius: 5px;
background-color: #e5e5e5;
}
input {
padding: 10px;
border: none;
border-top: 1px solid #ccc;
outline: none;
font-size: 16px;
width: 100%;
}
input:focus {
border: 1px solid #007BFF;
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-10px); }
50% { transform: translateX(10px); }
75% { transform: translateX(-10px); }
100% { transform: translateX(0); }
}
.shake {
animation: shake 0.5s;
}