/* ===================================== */
/* CHAT MODAL - ESTILO WHATSAPP */
/* ===================================== */
.floating-chat-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #D38C03; /* Color principal de la marca */
    color: white;
    border: none;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 15px rgba(211, 140, 3, 0.4);
    transition: all 0.3s ease;
    z-index: 1100; /* Above modals, below chat window */
}

.floating-chat-btn img {
  max-width: 100%;
  height: auto; /* mantiene proporciones */
  display: block; /* elimina espacios blancos debajo de la imagen */
}

.floating-chat-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(211, 140, 3, 0.6);
}

/* Badge para mensajes no leídos */
.unread-badge {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #ff4d4f; /* Rojo intenso */
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.2s ease-out;
}

/* Chat Modal */
.chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 10000;
}

.chat-container {
  width: 380px;
  max-width: 90vw;
  height: 500px;
  max-height: 80vh; /* Asegura que no sea demasiado alto en pantallas pequeñas */
  background: white;
  border-radius: 16px; /* Bordes redondeados en todas las esquinas */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}

.chat-header {
  background: #6a11cb;
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-status {
  width: 10px;
  height: 10px;
  background: #4CAF50;
  border-radius: 50%;
}

.chat-header small {
  font-size: 0.8em;
  opacity: 0.9;
}

#close-chat-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.5em;
  cursor: pointer;
  transition: all 0.2s ease-in-out; /* Añadir transición suave */
  border-radius: 50%; /* Hacer el área de clic redonda */
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#close-chat-btn:hover {
  background: rgba(255, 255, 255, 0.2); /* Fondo sutil al pasar el mouse */
  transform: rotate(90deg); /* Efecto de rotación */
}

#close-chat-btn:active {
  transform: rotate(90deg) scale(0.9); /* Efecto de clic */
  background: rgba(255, 255, 255, 0.3);
}

.chat-messages {
  flex-grow: 1; /* Permite que el contenedor crezca */
  padding: 15px;
  overflow-y: auto; /* MANTIENE el scroll vertical cuando el contenido excede la altura */
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Input */
.chat-input-area {
  padding: 10px;
  background: white;
  border-top: 1px solid #ddd;
}

#chat-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#chat-name {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.9em;
}

#chat-input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95em;
  resize: none;
  min-height: 40px;
}

#send-btn {
  background: #6a11cb;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

#send-btn:hover {
  background: #5a0fa0;
}

/* ===================================== */
/* CHAT FLOTANTE - CORRECCIONES Y EFECTOS */
/* ===================================== */

/* Ocultar el botón de Telegram por su ID si todavía existe */
#telegram-btn {
    display: none;
}

.floating-chat-btn img {
  max-width: 100%;
  height: auto; /* mantiene proporciones */
  display: block; /* elimina espacios blancos debajo de la imagen */
}

.floating-chat-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(211, 140, 3, 0.6);
}

/* EFECTO DE PARPADEO */
.floating-chat-btn.blinking {
    animation: blink-animation 1.5s infinite ease-in-out;
}

@keyframes blink-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(211, 140, 3, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(211, 140, 3, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(211, 140, 3, 0);
  }
}

/* Estilo para imágenes dentro del chat */
.chat-image {
    max-width: 100%;
    border-radius: 10px;
    margin-top: 5px;
}

/* Estilo para mensajes del sistema (como conexión perdida) */
.message.system {
  background-color: #333; /* fondo oscuro para contraste */
  color: #fff;            /* texto claro */
  border-left: 4px solid #D38C03; /* borde lateral distintivo */
  font-style: italic;
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: 600;
  opacity: 0.9;
  margin: 10px 0;
}

/* Clase para ocultar elementos */
.hidden {
  display: none !important;
}

/* Efecto suave en apertura/cierre del chat */
.chat-overlay {
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
}
.chat-overlay.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================== */
/* ESTILOS PARA MENSAJES DE CHAT (MEJORADO) */
/* ===================================== */

.message {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 0.95em;
  line-height: 1.4;
  display: flex; /* Usamos flexbox para alinear el timestamp */
  flex-direction: column; /* Apilamos contenido y timestamp */
}

/* El contenido del mensaje (nombre y texto) */
.message-content {
    /* No se necesita estilo específico aquí, hereda de .message */
}

/* El timestamp */
.message-timestamp {
    font-size: 0.7em;
    color: #888;
    margin-top: 4px; /* Espacio entre el texto y la hora */
}

.message.bot {
  align-self: flex-start;
  background: white;
  color: #333;
  border-bottom-left-radius: 4px; /* Estilo burbuja */
}
.message.bot .message-timestamp {
    text-align: left; /* Alinear a la izquierda para el bot */
    color: #888;
}

.message.user {
  align-self: flex-end;
  background: #6a11cb;
  color: white;
  border-bottom-right-radius: 4px; /* Estilo burbuja */
}
.message.user .message-timestamp {
    text-align: right; /* Alinear a la derecha para el usuario */
    color: #ccc; /* Un poco más claro sobre el fondo oscuro */
}

.message.system {
    align-self: center;
    background: #e0e0e0;
    color: #555;
    font-style: italic;
    font-size: 0.85em;
    border-radius: 10px;
    max-width: 90%;
}
.message.system .message-timestamp {
    display: none; /* Ocultar timestamp para mensajes del sistema */
}

/* ===================================== */
/* ESTILOS PARA INPUT DE CHAT MEJORADO   */
/* ===================================== */

.chat-input-area {
    padding: 10px;
    background: #f0f2f5;
    border-top: 1px solid #ddd;
}

#chat-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#chat-name {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.9em;
}

#chat-input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95em;
  resize: none;
  min-height: 40px;
}

#send-btn {
  background: #6a11cb;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

#send-btn:hover {
  background: #5a0fa0;
}

/* Estilo para imágenes dentro del chat */
.chat-image {
    max-width: 100%;
    border-radius: 10px;
    margin-top: 8px;
    cursor: pointer;
}