Interfaz de Chat Animada

                .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 = [
      "¡Gracias por tu mensaje! ¿En qué más puedo ayudarte?",
      "Entiendo. Déjame revisar eso por ti.",
      "Esa es una gran pregunta. Te responderé en breve.",
      "He anotado tu preocupación. Alguien te contactará pronto.",
      "¿Hay algo más que te gustaría saber?",
      "Agradezco tu paciencia. Estamos trabajando en ello.",
      "¡Genial! Me aseguraré de que se resuelva.",
      "Gracias por llamar nuestra atención sobre esto."
    ];
    
    return replies[Math.floor(Math.random() * replies.length)];
  }

  chatMessages.scrollTop = chatMessages.scrollHeight;
});