/* ==========================================
   chat-webside.css
   ========================================== */
:root {
  --ws-azul: #002c58;
  --ws-naranja: #ff3300;
  --ws-blanco: #ffffff;
  --ws-gris-claro: #f4f6f8;
  --ws-texto: #333333;
  --ws-sombra: rgba(0, 44, 88, 0.25);
  --ws-fuente: 'Inter', 'Roboto', sans-serif;
}

#contenedor-chat-webside { position: fixed; bottom: 100px; right: 23px; z-index: 9999; font-family: var(--ws-fuente); }
#boton-chat-webside { 
  background-color: var(--ws-azul); 
  color: var(--ws-blanco); 
  border: 2px solid var(--ws-blanco); /* Estilo de borde corregido */
  outline: none; /* Bloquea el borde negro nativo al hacer clic */
  border-radius: 50%; 
  width: 60px; 
  height: 60px; 
  font-size: 24px; 
  cursor: pointer; 
  box-shadow: 0 4px 12px var(--ws-sombra); 
  transition: transform 0.3s ease, background-color 0.3s ease; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
#boton-chat-webside:hover { transform: scale(1.05); background-color: var(--ws-naranja); }
#invitacion-chat-webside { position: absolute; bottom: 75px; right: 0; background-color: var(--ws-blanco); color: var(--ws-texto); padding: 12px 20px; border-radius: 8px; box-shadow: 0 4px 12px var(--ws-sombra); font-size: 14px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s; border-left: 4px solid var(--ws-naranja); }
#invitacion-chat-webside.ws-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#cerrar-invitacion-ws { font-size: 18px; margin-left: 10px; cursor: pointer; color: #999; font-weight: bold; }
#ventana-chat-webside { position: absolute; bottom: 75px; right: 0; width: 300px; height: 400px; background-color: var(--ws-blanco); border-radius: 12px; box-shadow: 0 8px 24px var(--ws-sombra); display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: scale(0.95); transform-origin: bottom right; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; }
#ventana-chat-webside.ws-abierto { opacity: 1; visibility: visible; transform: scale(1); }
#cabecera-chat-ws { font-size: 14px; background-color: var(--ws-azul); color: var(--ws-blanco); padding: 15px 20px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
#cerrar-chat-ws { background: none; border: none; color: var(--ws-blanco); font-size: 25px; cursor: pointer; }
#cuerpo-mensajes-ws { flex: 1; padding: 15px; overflow-y: auto; background-color: var(--ws-gris-claro); display: flex; flex-direction: column; gap: 10px; }
.mensaje-ws { max-width: 80%; padding: 10px 14px; border-radius: 8px; font-size: 14px; line-height: 1.4; }
.mensaje-ws.bot { background-color: var(--ws-blanco); color: var(--ws-texto); align-self: flex-start; border: 1px solid #e0e0e0; border-bottom-left-radius: 2px; }
.mensaje-ws.usuario { background-color: var(--ws-naranja); color: var(--ws-blanco); align-self: flex-end; border-bottom-right-radius: 2px; }
#pie-input-ws { padding: 15px; background-color: var(--ws-blanco); border-top: 1px solid #e0e0e0; display: flex; gap: 10px; }
#entrada-texto-ws { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 20px; outline: none; font-family: inherit; }
#entrada-texto-ws:focus { border-color: var(--ws-azul); }
#boton-enviar-ws { background-color: var(--ws-naranja); color: var(--ws-blanco); border: none; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; transition: background-color 0.2s ease; }
#boton-enviar-ws:hover { background-color: #e62e00; }

/* ==========================================
   ANIMACIÓN DE ESCRITURA (TRES PUNTOS)
   ========================================== */
.escribiendo-ws {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background-color: var(--ws-blanco);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  border-bottom-left-radius: 2px;
  width: fit-content;
  align-self: flex-start;
}

.punto-ws {
  width: 6px;
  height: 6px;
  background-color: #94a3b8;
  border-radius: 50%;
  animation: latido-ws 1.4s infinite ease-in-out both;
}

.punto-ws:nth-child(1) { animation-delay: -0.32s; }
.punto-ws:nth-child(2) { animation-delay: -0.16s; }

@keyframes latido-ws {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ==========================================
   ADAPTABILIDAD MÓVIL (RESPONSIVE)
   ========================================== */



@media screen and (max-width: 480px) {
  #contenedor-chat-webside {
    right: 15px; /* Ajuste sutil de margen para pantallas pequeñas */
    bottom: 100px; 
  }
  
  #ventana-chat-webside {
    width: calc(100vw - 30px); /* Cálcula el ancho total menos márgenes seguros */
    max-width: 300px; 
  }

  #invitacion-chat-webside {
    white-space: normal; /* Permite el salto de línea si el mensaje inicial es largo */
    width: max-content;
    max-width: calc(100vw - 90px);
  }
}

/* ==========================================
   AJUSTES EXCLUSIVOS PARA MÓVILES (Celulares)
   ========================================== */
@media screen and (max-width: 768px) {
  #contenedor-chat-webside {
    right: 23px; /* <-- AJUSTA ESTE VALOR SOLO PARA EL CELULAR */
    bottom: 100px; /* Ajuste opcional para no chocar con el menú móvil */
  }
}