| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #e6f3fa; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .container { | |
| max-width: 600px; | |
| padding: 20px; | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| margin: 20px; | |
| } | |
| h1 { | |
| color: #2c3e50; | |
| text-align: center; | |
| } | |
| .intro, .disclaimer { | |
| color: #34495e; | |
| text-align: center; | |
| font-size: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .chat-box { | |
| background-color: #f0f2f6; | |
| border: 1px solid #ddd; | |
| border-radius: 10px; | |
| height: 400px; | |
| overflow-y: auto; | |
| padding: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .user-message, .bot-message { | |
| padding: 10px; | |
| margin: 5px; | |
| border-radius: 10px; | |
| max-width: 80%; | |
| } | |
| .user-message { | |
| background-color: #d1e7dd; | |
| margin-left: auto; | |
| text-align: right; | |
| } | |
| .bot-message { | |
| background-color: #fff3cd; | |
| margin-right: auto; | |
| } | |
| .input-container { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| #user-input { | |
| flex-grow: 1; | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| background-color: #3498db; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| button:hover { | |
| background-color: #2980b9; | |
| } |