/* style.css content here */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; color: #333; } .container { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); width: 90%; max-width: 600px; padding: 20px; display: flex; flex-direction: column; } header { text-align: center; margin-bottom: 20px; } h1 { margin: 0; font-size: 1.5em; } p { margin: 5px 0 0; color: #666; } .chat-container { flex: 1; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; padding: 10px; margin-bottom: 10px; background: #fafafa; max-height: 400px; } .message { margin: 10px 0; padding: 10px; border-radius: 4px; max-width: 80%; } .user-message { background: #007bff; color: white; align-self: flex-end; margin-left: auto; } .bot-message { background: #e9e9e9; color: #333; align-self: flex-start; } .input-form { display: flex; gap: 10px; } #user-input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } #send-btn { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } #send-btn:hover { background: #0056b3; } #send-btn:disabled { background: #ccc; cursor: not-allowed; } .loading { text-align: center; margin: 10px 0; color: #007bff; } .error { text-align: center; margin: 10px 0; color: red; } .hidden { display: none; } /* Responsive adjustments */ @media (max-width: 600px) { .container { padding: 10px; width: 95%; } h1 { font-size: 1.2em; } .chat-container { max-height: 300px; } }