body { background-color: #f7f9fc; font-family: 'Arial', sans-serif; } .chat-container { width: 90%; max-width: 600px; margin: 50px auto; background-color: white; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); padding: 20px; display: flex; flex-direction: column; } h1 { text-align: center; color: #333; } #chat-box { height: 400px; overflow-y: auto; border: 1px solid #ccc; border-radius: 5px; padding: 10px; margin-bottom: 10px; background: linear-gradient(to bottom, #ffffff, #f0f0f0); } .user-message { text-align: right; background-color: #cce5ff; padding: 10px; border-radius: 5px; margin: 5px 0; display: inline-block; max-width: 80%; animation: fadeIn 0.5s; } .bot-response { text-align: left; background-color: #e2e3e5; padding: 10px; border-radius: 5px; margin: 5px 0; display: inline-block; max-width: 80%; animation: fadeIn 0.5s; } input[type="text"] { border: 1px solid #ccc; border-radius: 5px; padding: 10px; margin-top: 10px; } button { background-color: #007bff; color: white; border: none; border-radius: 5px; padding: 10px; cursor: pointer; margin-top: 5px; } button:hover { background-color: #0056b3; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }