ChatGPT with Loading Animation

body{font-family:Arial,sans-serif;margin:20px;padding:20px}.chat-container{width:100%;max-width:600px;margin:auto;border:1px solid #ddd;padding:10px;border-radius:8px;background-color:#f9f9f9}.messages{height:300px;overflow-y:scroll;margin-bottom:10px;border:1px solid #ddd;padding:10px;border-radius:4px;background-color:#fff}.message{margin:10px 0}.user{text-align:right;color:#00f}.bot{text-align:left;color:green}.options{display:flex;flex-wrap:wrap;gap:10px}.options button{padding:10px 15px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.options button:hover{background-color:#0056b3}.loading{text-align:center;margin:20px 0;display:none}.loading span{display:inline-block;width:8px;height:8px;margin:0 4px;background-color:#007bff;border-radius:50%;animation:loading 1.2s infinite ease-in-out}.loading span:nth-child(2) {animation-delay:-1.1s}.loading span:nth-child(3) {animation-delay:-1s}@keyframes loading { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }