/* =========================================================================
   RESET DE AISLAMIENTO
   El sitio host (tema de WordPress) suele tener estilos globales para
   button/input/a con alta especificidad (ej. font-size grande, colores de
   marca, etc.) que "se filtran" hacia adentro del widget y rompen el
   diseño (por ejemplo, el botón "Buscar" heredando el estilo de botón
   grande del tema). Este bloque resetea todo dentro de #cyd-chatbot-root
   antes de aplicar nuestros propios estilos, para que el widget se vea
   igual sin importar el tema del sitio.
   ========================================================================= */
#cyd-chatbot-root,
#cyd-chatbot-root * {
  box-sizing: border-box;
}

#cyd-chatbot-root button,
#cyd-chatbot-root input,
#cyd-chatbot-root a {
  all: unset;
  box-sizing: border-box;
  font-family: inherit;
  cursor: pointer;
}

#cyd-chatbot-root input {
  cursor: text;
}

#cyd-chatbot-root ul,
#cyd-chatbot-root li,
#cyd-chatbot-root p,
#cyd-chatbot-root h1,
#cyd-chatbot-root h2,
#cyd-chatbot-root h3 {
  all: unset;
  display: block;
  box-sizing: border-box;
}

.cyd-chatbot-root {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #1f2937;
}

/* IMPORTANTE: nuestras propias reglas de "display" en .cyd-chatbot-window
   y .cyd-chatbot-form le ganan a la regla por defecto
   del navegador para [hidden] (display:none), porque cualquier CSS de
   autor supera al CSS por defecto del navegador. Sin esto, el atributo
   "hidden" del HTML queda sin efecto y todo se ve abierto desde el
   principio. Estas reglas restauran ese comportamiento explícitamente,
   con la especificidad más alta del archivo para que nada más le gane.
   Es la causa real de que el chat cargara abierto por defecto. */
#cyd-chatbot-window[hidden],
#cyd-chatbot-search-form[hidden] {
  display: none !important;
}

/* ---------- Botón flotante ("¿Necesitas ayuda?" + avatar, siempre visible) ----------
   Antes el botón cerrado era solo un circulo con un icono generico (chat +
   lupa) que pasaba desapercibido, y una burbuja de texto separada aparecia
   recien a los 2.5s. Se fusiono todo en un solo boton-pildora, visible desde
   el primer momento, con el avatar real del bot (mismo que el header del
   chat abierto) + el texto de CTA - mas claro y mas facil de encontrar. */
.cyd-chatbot-toggle {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 58px !important;
  min-width: 0;
  padding: 0 20px 0 4px !important;
  border-radius: 999px !important;
  /* Borde sutil para que el botón no se pierda cuando queda sobre un
     fondo del mismo azul marino que su propio degradado (ej. secciones
     como "Lo nuevo" del Inicio). */
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  background: linear-gradient(135deg, #1d3456 0%, #142640 100%) !important;
  color: #fff;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(29,52,86,0.4);
  transition: transform 0.15s ease;
}

.cyd-chatbot-toggle:hover {
  transform: scale(1.03);
}

.cyd-chatbot-toggle-avatar {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

.cyd-chatbot-toggle-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.cyd-chatbot-toggle-text {
  display: block !important;
  color: #fff;
  font-size: 14px !important;
  font-weight: 700;
  white-space: nowrap !important;
  line-height: 1.2;
}

.cyd-chatbot-badge {
  position: absolute !important;
  top: -2px !important;
  left: 36px !important;
  background: #16a34a;
  color: #fff;
  font-size: 9px !important;
  font-weight: 700;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #fff;
  box-sizing: border-box !important;
}

/* ---------- Ventana del chat ---------- */
.cyd-chatbot-window {
  position: absolute;
  right: 0;
  bottom: 74px;
  width: 370px;
  max-width: 92vw;
  height: 500px;
  max-height: 74vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cyd-slide-up 0.2s ease-out;
}

@keyframes cyd-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.cyd-chatbot-header {
  background: linear-gradient(135deg, #1d3456 0%, #142640 100%);
  color: #fff;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cyd-chatbot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}

.cyd-chatbot-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cyd-chatbot-header-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.cyd-chatbot-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}

.cyd-chatbot-status {
  font-size: 11px;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 4px;
}

.cyd-chatbot-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
}

.cyd-chatbot-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- Mensajes ---------- */
.cyd-chatbot-messages {
  flex: 1;
  padding: 14px 12px;
  overflow-y: auto;
  background: #f4f5f7;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Sin esto, la barra de scroll depende del comportamiento por defecto del
     navegador/SO (en Mac/Chrome suele ser una barra "overlay" que solo
     aparece mientras se hace scroll y luego desaparece), lo que hace dificil
     notar que hay mas mensajes para leer. Se fuerza una barra delgada pero
     siempre visible. */
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 52, 86, 0.35) transparent;
}

.cyd-chatbot-messages::-webkit-scrollbar {
  width: 6px;
}

.cyd-chatbot-messages::-webkit-scrollbar-track {
  background: transparent;
}

.cyd-chatbot-messages::-webkit-scrollbar-thumb {
  background-color: rgba(29, 52, 86, 0.35);
  border-radius: 999px;
}

.cyd-chatbot-messages::-webkit-scrollbar-thumb:hover {
  background-color: rgba(29, 52, 86, 0.55);
}

.cyd-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.cyd-row-bot {
  justify-content: flex-start;
}

.cyd-row-user {
  justify-content: flex-end;
}

.cyd-msg-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1d3456;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.cyd-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cyd-msg {
  max-width: 78%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
}

.cyd-msg-bot {
  background: #fff;
  color: #1f2937;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.cyd-msg-user {
  background: #1d3456;
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Indicador de escritura */
.cyd-typing-dots {
  display: flex;
  gap: 3px;
  padding: 12px 14px;
}

.cyd-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca3af;
  display: inline-block;
  animation: cyd-bounce 1.2s infinite ease-in-out;
}

.cyd-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.cyd-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes cyd-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Botones de opciones (estilo "chip") ---------- */
.cyd-options-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 28px;
  max-width: 100%;
}

.cyd-option-btn {
  display: inline-flex !important;
  align-items: center;
  text-align: left;
  background: #fff !important;
  border: 1.5px solid #1d3456 !important;
  border-radius: 999px !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #1d3456 !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cyd-option-btn:hover:not(:disabled) {
  background: #1d3456;
  color: #fff;
}

.cyd-option-btn:disabled {
  opacity: 0.4;
  cursor: default;
  border-color: #d1d5db;
  color: #9ca3af;
}

/* ---------- Resultados de búsqueda ---------- */
.cyd-results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 28px;
}

.cyd-result-card {
  display: flex;
  gap: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.cyd-result-card img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.cyd-result-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cyd-result-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #111827;
}

.cyd-result-excerpt {
  font-size: 11.5px;
  color: #6b7280;
}

.cyd-result-matched {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.cyd-result-matched-chip {
  font-size: 10.5px;
  background: #f3f4f6;
  color: #4b5563;
  padding: 2px 8px;
  border-radius: 999px;
}

.cyd-result-link {
  font-size: 11.5px;
  color: #1d3456;
  font-weight: 600;
}

.cyd-view-all-link {
  display: block !important;
  text-align: center !important;
  margin: 8px 0 4px 28px !important;
  padding: 9px 12px !important;
  border: 1.5px dashed #1d3456 !important;
  border-radius: 10px !important;
  color: #1d3456 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.cyd-view-all-link:hover {
  background: #fef2f2 !important;
}

/* ---------- Formulario de búsqueda ---------- */
.cyd-chatbot-form {
  display: flex !important;
  align-items: stretch !important;
  height: auto !important;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

/* Variante para visitantes sin sesión: en vez del input, muestra un aviso
   con botón "Ingresar" en el mismo lugar donde iría la barra de búsqueda. */
.cyd-chatbot-form-locked {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #fef2f2 !important;
}

.cyd-chatbot-locked-text {
  font-size: 12.5px;
  color: #142640;
  font-weight: 500;
  line-height: 1.3;
}

.cyd-chatbot-form-locked .cyd-chatbot-send {
  height: auto !important;
  line-height: 1 !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.cyd-chatbot-form input {
  display: block !important;
  width: 100% !important;
  flex: 1;
  border: none !important;
  background: #fff !important;
  color: #1f2937 !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  line-height: 46px !important;
  height: 46px !important;
  outline: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.cyd-chatbot-send {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  border: none !important;
  background: #1d3456 !important;
  color: #fff !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  line-height: 46px !important;
  height: 46px !important;
  font-weight: 600 !important;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* =========================================================================
   RESPONSIVE MOBILE
   En pantallas pequeñas, la ventana flotante se convierte en una hoja de
   pantalla completa (como Tidio/Intercom en mobile): más fácil de leer,
   más fácil de tocar, y no compite por espacio con la navegación del
   portal. Usamos --cyd-vh (calculado en JS a partir de window.innerHeight)
   en vez de 100vh a secas, porque en navegadores móviles 100vh no descuenta
   la barra de direcciones y deja contenido cortado.
   ========================================================================= */
@media (max-width: 640px) {

  .cyd-chatbot-root {
    right: 12px !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* El boton-pildora no debe salirse de la pantalla en celulares angostos. */
  .cyd-chatbot-toggle {
    height: 52px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 0 16px 0 4px !important;
  }

  .cyd-chatbot-toggle-avatar {
    width: 44px !important;
    height: 44px !important;
  }

  .cyd-chatbot-toggle-text {
    font-size: 13px !important;
  }

  .cyd-chatbot-badge {
    left: 30px !important;
  }

  /* La ventana ocupa toda la pantalla: se ancla al viewport, no al botón. */
  .cyd-chatbot-window {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(var(--cyd-vh, 1vh) * 100) !important;
    max-height: none !important;
    border-radius: 0 !important;
    animation: cyd-slide-up-mobile 0.22s ease-out;
  }

  @keyframes cyd-slide-up-mobile {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .cyd-chatbot-header {
    padding-top: calc(14px + env(safe-area-inset-top));
    flex-shrink: 0;
  }

  /* Botón cerrar más grande: objetivo táctil cómodo (recomendado ~40-44px). */
  .cyd-chatbot-close {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  .cyd-chatbot-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .cyd-chatbot-messages {
    padding: 16px 14px;
    -webkit-overflow-scrolling: touch;
  }

  .cyd-msg {
    max-width: 86%;
    font-size: 14px;
  }

  /* Chips de opciones más grandes y fáciles de tocar. */
  .cyd-options-list {
    padding-left: 30px;
    gap: 8px;
  }

  .cyd-option-btn {
    font-size: 13.5px !important;
    padding: 10px 15px !important;
    min-height: 40px;
  }

  .cyd-results-list {
    padding-left: 30px;
  }

  .cyd-result-card {
    padding: 10px;
  }

  .cyd-result-card img {
    width: 64px;
    height: 64px;
  }

  /* Formulario de búsqueda pegado abajo, respetando el "notch" inferior
     (barra de gestos en iPhone) y quedando visible sobre el teclado. */
  .cyd-chatbot-form {
    flex-shrink: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .cyd-chatbot-form input {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 14px !important;
    font-size: 16px !important; /* 16px evita que iOS haga zoom automático al enfocar el input. */
  }

  .cyd-chatbot-send {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
  }
}

/* Bloquea el scroll de la página detrás del chat mientras está abierto en
   mobile (evita el "doble scroll" típico de los modales full-screen). */
body.cyd-chatbot-lock-scroll {
  overflow: hidden !important;
  height: 100% !important;
}