body { font-family: sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; }
.chat-container { width: 500px; background: white; border-radius: 8px; box-shadow: 0 0 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; height: 80vh; }
.chat-header { background: #4a69bd; color: white; padding: 15px; text-align: center; border-radius: 8px 8px 0 0; }
.chat-box { flex-grow: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.chat-input { display: flex; padding: 15px; border-top: 1px solid #ddd; }
#user-input { flex-grow: 1; border: 1px solid #ccc; border-radius: 4px; padding: 10px; }
#send-btn { background: #4a69bd; color: white; border: none; padding: 10px 15px; margin-left: 10px; border-radius: 4px; cursor: pointer; }
.message { padding: 10px 15px; border-radius: 18px; max-width: 80%; }
.user-message { background: #dcf8c6; align-self: flex-end; }
.bot-message { background: #f1f0f0; align-self: flex-start; }
.thinking { color: #888; font-style: italic; }