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);
}

/* Animations */
@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);
  }
}

/* Scrollbar */
.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;
}

/* Responsive */
@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() {
  // Get DOM elements
  const chatMessages = document.getElementById('chatMessages');
  const chatInput = document.getElementById('chatInput');
  const sendBtn = document.getElementById('sendBtn');
  const typingIndicator = document.getElementById('typingIndicator');
  
  // Add event listeners
  sendBtn.addEventListener('click', sendMessage);
  chatInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      sendMessage();
    }
  });
  
  // Send message function
  function sendMessage() {
    const message = chatInput.value.trim();
    if (message) {
      // Add user message
      addMessage(message, 'sent');
      
      // Clear input
      chatInput.value = '';
      
      // Show typing indicator
      showTypingIndicator();
      
      // Simulate reply after delay
      setTimeout(() => {
        hideTypingIndicator();
        addMessage(getRandomReply(), 'received');
      }, 2000);
    }
  }
  
  // Add message to chat
  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);
    
    // Scroll to bottom
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }
  
  // Show typing indicator
  function showTypingIndicator() {
    typingIndicator.classList.add('visible');
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }
  
  // Hide typing indicator
  function hideTypingIndicator() {
    typingIndicator.classList.remove('visible');
  }
  
  // Random replies for demo
  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)];
  }
  
  // Auto-scroll to bottom on load
  chatMessages.scrollTop = chatMessages.scrollHeight;
});