body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #f4f4f9; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }
#chat-container { width: 90%; max-width: 800px; height: 95vh; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
#chat-box { flex-grow: 1; overflow-y: auto; padding: 20px; border-bottom: 1px solid #eee; }
.message { margin-bottom: 15px; display: flex; flex-direction: column; }
.message p { padding: 10px 15px; border-radius: 18px; max-width: 80%; line-height: 1.5; }
.user-message { align-items: flex-end; }
.user-message p { background-color: #007bff; color: white; }
.bot-message { align-items: flex-start; }
.bot-message p { background-color: #e9e9eb; color: #333; }
#input-area { display: flex; padding: 20px; }
#user-input { flex-grow: 1; border: 1px solid #ccc; border-radius: 20px; padding: 10px 15px; font-size: 16px; outline: none; }
#send-btn { background-color: #007bff; color: white; border: none; border-radius: 20px; padding: 10px 20px; margin-left: 10px; cursor: pointer; font-size: 16px; }
#send-btn:hover { background-color: #0056b3; }