body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: scroll; } .chat-container { max-width: 800px; max-height: 1200px; width: 100%; height: 70vh; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; overflow: hidden; } .chat-box { flex: 1; padding: 20px; overflow-y: auto; border-bottom: 1px solid #ddd; } .chat-message { margin-bottom: 15px; } .chat-message.user { text-align: right; } .chat-message.user span { background-color: #007bff; color: #fff; padding: 10px; border-radius: 8px; display: inline-block; max-width: 70%; } .chat-message.bot span { background-color: #e0e0e0; color: #333; padding: 10px; border-radius: 8px; display: inline-block; max-width: 70%; } .input-container { display: flex; padding: 15px; background-color: #f4f4f4; } #chat-input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } #send-button { padding: 10px 15px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-left: 10px; font-size: 16px; } #send-button:hover { background-color: #0056b3; } /* Dot Loader styles */ .dot-loader { background-color: #e0e0e0; color: #333; padding: 10px; border-radius: 8px; width: fit-content; display: flex; justify-content: center; align-items: center; margin-top: 20px; } .dot-loader div { width: 5px; height: 5px; margin: 0 5px; background-color: #8a8a8a; border-radius: 50%; animation: dot 1.2s infinite ease-in-out; } .dot-loader div:nth-child(1) { animation-delay: -0.32s; } .dot-loader div:nth-child(2) { animation-delay: -0.16s; } @keyframes dot { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .hidden { display: none; }