/* CitIA · asistente virtual de la web. Usa los tokens de estilos.css (--ep-*). */

.ep-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ep-citia { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 70; font-family: var(--ep-sans); }

/* Lanzador: avatar + etiqueta (en móvil, solo el avatar) */
.ep-citia__lanzador {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  padding: 5px 18px 5px 5px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ep-principal); color: var(--ep-sobre-principal); font: 600 .9375rem/1 var(--ep-sans);
  box-shadow: 0 12px 30px -8px rgba(27, 35, 51, .45), 0 0 0 3px var(--ep-fondo);
  transition: transform .25s var(--ep-ease);
}
.ep-citia__lanzador:hover { transform: translateY(-2px); }
.ep-citia__lanzador img { width: 46px; height: 46px; border-radius: 50%; }
.ep-citia--abierta .ep-citia__lanzador { display: none; }

.ep-citia__burbuja {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: 240px;
  padding: 14px 34px 14px 16px; border-radius: 14px 14px 4px 14px; cursor: pointer;
  background: var(--ep-fondo); color: var(--ep-tinta); border: 1px solid var(--ep-borde); box-shadow: var(--ep-sombra);
  font-size: .9375rem; line-height: 1.4; animation: ep-citia-entra .4s var(--ep-ease) both;
}
.ep-citia__burbuja[hidden] { display: none; }
.ep-citia__burbuja p { margin: 0; }
.ep-citia__burbuja button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; background: none; color: var(--ep-tinta-2); font-size: 1.1rem; cursor: pointer; }

/* Panel */
.ep-citia__panel {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  width: min(390px, calc(100vw - 40px)); height: min(620px, calc(100dvh - 110px));
  border-radius: 20px; overflow: hidden;
  background: var(--ep-fondo-2); color: var(--ep-tinta);
  box-shadow: 0 30px 70px -20px rgba(27, 35, 51, .45), 0 0 0 1px var(--ep-borde);
  animation: ep-citia-entra .3s var(--ep-ease) both;
}
.ep-citia__panel[hidden] { display: none; }
@keyframes ep-citia-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.ep-citia__cabecera { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--ep-fondo); color: var(--ep-titulo); border-bottom: 1px solid var(--ep-borde); }
.ep-citia__cabecera img { width: 44px; height: 44px; border-radius: 50%; }
.ep-citia__cabecera div { flex: 1; min-width: 0; }
.ep-citia__titulo { margin: 0; font: 600 1.25rem/1.1 var(--ep-serif); }
.ep-citia__subtitulo { margin: 2px 0 0; font-size: .8125rem; color: var(--ep-tinta-2); }
.ep-citia__cerrar { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--ep-fondo-2); color: var(--ep-tinta); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.ep-citia__cerrar:hover { background: var(--ep-principal-suave); }
.ep-citia__aviso { margin: 0; padding: 8px 16px; background: var(--ep-acento-suave); color: var(--ep-acento-fuerte); font-size: .75rem; line-height: 1.4; }

.ep-citia__log { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.ep-citia__msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: .9375rem; line-height: 1.45; animation: ep-citia-entra .25s var(--ep-ease) both; }
.ep-citia__msg p { margin: 0 0 .5em; }
.ep-citia__msg p:last-of-type { margin-bottom: 0; }
.ep-citia__msg ul { margin: .2em 0 .4em; padding-left: 1.1em; }
.ep-citia__msg li { margin: .2em 0; }
.ep-citia__msg--bot { align-self: flex-start; background: var(--ep-fondo); border: 1px solid var(--ep-borde); border-top-left-radius: 4px; }
.ep-citia__msg--usuario { align-self: flex-end; background: var(--ep-principal); color: var(--ep-sobre-principal); border-top-right-radius: 4px; }
.ep-citia__msg--escribiendo { align-self: flex-start; display: flex; gap: 4px; padding: 14px 16px; background: var(--ep-fondo); border: 1px solid var(--ep-borde); }
.ep-citia__msg--escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--ep-tinta-2); animation: ep-citia-punto 1s infinite ease-in-out; }
.ep-citia__msg--escribiendo i:nth-child(2) { animation-delay: .15s; }
.ep-citia__msg--escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes ep-citia-punto { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.ep-citia__fuente { display: block; margin-top: 8px; font-size: .75rem; color: var(--ep-tinta-2); }
.ep-citia__fuente a { color: var(--ep-principal); }
.ep-citia__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ep-citia__accion {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--ep-principal); color: var(--ep-principal); font-size: .875rem; font-weight: 600; text-decoration: none;
}
.ep-citia__accion--wa { border-color: var(--ep-wa); background: var(--ep-wa); color: #fff; }
.ep-citia__valoracion { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--ep-borde); font-size: .75rem; color: var(--ep-tinta-2); }
.ep-citia__valoracion button { min-width: 32px; min-height: 30px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: .9rem; }
.ep-citia__valoracion button:hover { background: var(--ep-fondo-2); }
.ep-citia__valoracion .ep-citia__motivo { padding: 0 8px; border: 1px solid var(--ep-borde); font-size: .75rem; color: var(--ep-tinta); }

.ep-citia__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ep-citia__chip {
  min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--ep-principal-suave); background: var(--ep-fondo); color: var(--ep-tinta);
  font: 500 .875rem/1.2 var(--ep-sans); text-align: left;
}
.ep-citia__chip:hover { background: var(--ep-principal-suave); }
.ep-citia__chip--temas { border-color: var(--ep-borde); color: var(--ep-tinta-2); }

.ep-citia__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ep-borde); background: var(--ep-fondo); }
.ep-citia__form input {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--ep-borde); background: var(--ep-fondo-2); color: var(--ep-tinta);
  font: 400 1rem var(--ep-sans);   /* 16px: evita el zoom automático de iOS */
}
.ep-citia__form button { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; background: var(--ep-principal); color: var(--ep-sobre-principal); cursor: pointer; }
.ep-citia__form button svg { width: 20px; height: 20px; }
.ep-citia__pie { padding: 0 12px 12px; background: var(--ep-fondo); text-align: center; }
.ep-citia__pie a { display: inline-flex; align-items: center; gap: 6px; color: var(--ep-wa); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.ep-citia__pie a:hover { text-decoration: underline; }

/* Móvil: lanzador redondo junto a la barra de WhatsApp; el panel ocupa la pantalla */
@media (max-width: 720px) {
  .ep-citia { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ep-citia__lanzador { padding: 4px; }
  .ep-citia__lanzador-texto { display: none; }
  .ep-barra-wa { right: 82px; }
  .ep-demo__pie { justify-content: flex-start; padding-right: 76px; }   /* que el lanzador no tape "Pausar demo" */
  .ep-citia__panel { inset: 0; width: auto; height: auto; border-radius: 0; }
  .ep-citia__burbuja { width: min(240px, calc(100vw - 100px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ep-citia__panel, .ep-citia__msg, .ep-citia__burbuja { animation: none; }
}