/* giant-virus-web-agent/frontend/style.css */
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f2f5; margin: 0; }
.chat-container { background-color: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); width: 90%; max-width: 600px; display: flex; flex-direction: column; overflow: hidden; height: 80vh; }
h1 { background-color: #4CAF50; color: white; padding: 15px; margin: 0; font-size: 1.5em; text-align: center; }
.chat-history { flex-grow: 1; padding: 20px; overflow-y: auto; border-bottom: 1px solid #eee; }
.message { padding: 8px 12px; border-radius: 15px; margin-bottom: 10px; max-width: 80%; word-wrap: break-word; }
.message.user { background-color: #e1ffc7; align-self: flex-end; margin-left: auto; text-align: right; }
.message.agent { background-color: #e0e0e0; align-self: flex-start; margin-right: auto; text-align: left; }
.chat-input-area { display: flex; padding: 15px; border-top: 1px solid #eee; background-color: #f9f9f9; }
.chat-input-area input { flex-grow: 1; padding: 10px 15px; border: 1px solid #ccc; border-radius: 20px; outline: none; font-size: 1em; }
.chat-input-area button { background-color: #4CAF50; color: white; border: none; border-radius: 20px; padding: 10px 20px; margin-left: 10px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease; }
.chat-input-area button:hover { background-color: #45a049; }