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

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

/* Barra de desplazamiento */
.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;
}

/* Responsivo */
@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() {
  // Obtener elementos del DOM
  const chatMessages = document.getElementById('chatMessages');
  const chatInput = document.getElementById('chatInput');
  const sendBtn = document.getElementById('sendBtn');
  const typingIndicator = document.getElementById('typingIndicator');
  
  // Agregar escuchadores de eventos
  sendBtn.addEventListener('click', sendMessage);
  chatInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      sendMessage();
    }
  });
  
  // Función para enviar mensaje
  function sendMessage() {
    const message = chatInput.value.trim();
    if (message) {
      // Agregar mensaje del usuario
      addMessage(message, 'sent');
      
      // Limpiar entrada
      chatInput.value = '';
      
      // Mostrar indicador de escritura
      showTypingIndicator();
      
      // Simular respuesta después de un retraso
      setTimeout(() => {
        hideTypingIndicator();
        addMessage(getRandomReply(), 'received');
      }, 2000);
    }
  }
  
  // Agregar mensaje al 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);
    
    // Desplazar hacia abajo
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }
  
  // Mostrar indicador de escritura
  function showTypingIndicator() {
    typingIndicator.classList.add('visible');
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }
  
  // Ocultar indicador de escritura
  function hideTypingIndicator() {
    typingIndicator.classList.remove('visible');
  }
  
  // Respuestas aleatorias para demostración
  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)];
  }
  
  // Desplazar automáticamente hacia abajo al cargar
  chatMessages.scrollTop = chatMessages.scrollHeight;
});