Animated Chat Interface

                .chat-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  border-radius: 20px;
  max-width: 500px;
  margin: 0 auto;
}

.chat-demo {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f9ff;
  border-bottom: 1px solid #e2e8f0;
}

.chat-user {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-avatar {
  width: 50px;
  height: 50px;
  background: #667eea;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
}

.user-info .user-name {
  font-weight: 600;
  color: #333;
  font-size: 1.1rem;
}

.user-info .user-status {
  font-size: 0.9rem;
  color: #27ae60;
}

.chat-actions {
  display: flex;
  gap: 10px;
}

.chat-action-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.chat-action-btn:hover {
  background: #e2e8f0;
}

.chat-messages {
  height: 300px;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message {
  max-width: 80%;
  animation: slideInUp 0.3s ease;
}

.message.received {
  align-self: flex-start;
}

.message.sent {
  align-self: flex-end;
}

.message-content {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 0.95rem;
  line-height: 1.4;
}

.message.received .message-content {
  background: #f1f5f9;
  color: #333;
  border-bottom-left-radius: 5px;
}

.message.sent .message-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom-right-radius: 5px;
}

.message-time {
  font-size: 0.7rem;
  color: #999;
  margin-top: 5px;
  text-align: right;
}

.message.sent .message-time {
  color: rgba(255, 255, 255, 0.8);
}

.typing-indicator {
  align-self: flex-start;
  background: #f1f5f9;
  padding: 12px 16px;
  border-radius: 18px;
  border-bottom-left-radius: 5px;
  display: none;
}

.typing-indicator.visible {
  display: block;
}

.typing-dots {
  display: flex;
  gap: 5px;
}

.typing-dots span {
  width: 8px;
  height: 8px;
  background: #999;
  border-radius: 50%;
  display: inline-block;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

.chat-input-area {
  display: flex;
  padding: 15px 20px;
  background: #f8f9ff;
  border-top: 1px solid #e2e8f0;
}

.chat-input {
  flex: 1;
  padding: 12px 15px;
  border: 2px solid #e2e8f0;
  border-radius: 25px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.chat-input:focus {
  border-color: #667eea;
}

.send-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-left: 10px;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}@media (max-width: 768px) {
  .chat-container {
    padding: 15px;
  }
  
  .chat-header {
    padding: 15px;
  }
  
  .chat-messages {
    height: 250px;
    padding: 15px;
  }
  
  .message {
    max-width: 90%;
  }
}

              

                document.addEventListener('DOMContentLoaded', function() {

  const chatMessages = document.getElementById('chatMessages');
  const chatInput = document.getElementById('chatInput');
  const sendBtn = document.getElementById('sendBtn');
  const typingIndicator = document.getElementById('typingIndicator');

  sendBtn.addEventListener('click', sendMessage);
  chatInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      sendMessage();
    }
  });

  function sendMessage() {
    const message = chatInput.value.trim();
    if (message) {

      addMessage(message, 'sent');

      chatInput.value = '';

      showTypingIndicator();

      setTimeout(() => {
        hideTypingIndicator();
        addMessage(getRandomReply(), 'received');
      }, 2000);
    }
  }

  function addMessage(text, type) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message \${type}`;
    
    const now = new Date();
    const timeString = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
    
    messageDiv.innerHTML = `
      <div class="message-content">\${text}</div>
      <div class="message-time">\${timeString}</div>
    `;
    
    chatMessages.appendChild(messageDiv);

    chatMessages.scrollTop = chatMessages.scrollHeight;
  }

  function showTypingIndicator() {
    typingIndicator.classList.add('visible');
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }

  function hideTypingIndicator() {
    typingIndicator.classList.remove('visible');
  }

  function getRandomReply() {
    const replies = [
      "Thanks for your message! How can I assist you further?",
      "I understand. Let me check that for you.",
      "That's a great question. I'll get back to you shortly.",
      "I've noted your concern. Someone will contact you soon.",
      "Is there anything else you'd like to know?",
      "I appreciate your patience. We're working on it.",
      "Great! I'll make sure that's taken care of.",
      "Thanks for bringing this to our attention."
    ];
    
    return replies[Math.floor(Math.random() * replies.length)];
  }

  chatMessages.scrollTop = chatMessages.scrollHeight;
});