/* Fade-in animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .message { animation: fadeIn 0.3s ease-out; } /* Typing indicator */ .typing { width: 24px; height: 24px; position: relative; } .typing span { display: block; width: 6px; height: 6px; background: #4B5563; border-radius: 50%; position: absolute; bottom: 0; animation: bounce 0.6s infinite ease-in-out; } .typing span:nth-child(1) { left: 0; animation-delay: 0s; } .typing span:nth-child(2) { left: 9px; animation-delay: 0.2s; } .typing span:nth-child(3) { left: 18px; animation-delay: 0.4s; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }