/* Chat guiado. Hereda los tokens del sitio donde vive (--bg, --fg, --accent…) y cae
   a valores neutros si no existen, para verse nativo en las 17 identidades. */
.ygl-chat-launch,
.ygl-chat {
  --c-bg: var(--bg, #fff);
  --c-fg: var(--fg, #16121f);
  --c-muted: var(--muted, #5b5668);
  --c-line: var(--line, rgba(20, 16, 32, 0.16));
  --c-surface: var(--surface, rgba(20, 16, 32, 0.05));
  --c-accent: var(--accent, #6d28d9);
  --c-accent-fg: var(--accent-fg, #fff);
  --c-radius: var(--radius, 16px);
  --c-display: var(--font-display, Georgia, serif);
  font-family: var(--font-body, system-ui, sans-serif);
}

/* El lanzador se sienta sobre las barras fijas: .sticky-cta y .wa-float van en z-index 60. */
.ygl-chat-launch {
  position: fixed;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 65;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-accent-fg);
  cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ygl-chat-launch:hover { transform: translateY(-2px); }
.ygl-chat-launch svg { width: 1.6rem; height: 1.6rem; }
.ygl-chat-launch.is-open svg { transform: rotate(8deg); }

/* Donde ya hay barra fija, el lanzador sube para no taparla. */
@media (max-width: 899px) {
  body:has(.sticky-cta) .ygl-chat-launch { bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 4.75rem)); }
  body:has([data-cta-bar]) .ygl-chat-launch { bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 4.75rem)); }
  /* El lanzador cae exactamente encima del flotante de WhatsApp: misma esquina,
     mismo tamaño, z-index mayor. Un combinador de hermanos no sirve porque el
     lanzador se inyecta al final del <body>; la marca `ygl-chat-on` sí. */
  body.ygl-chat-on .wa-float { display: none; }
}

/* El lanzador es fijo y se sienta sobre el pie: sin este hueco tapa el crédito
   del sitio. Va en el pie y no en el cuerpo para no abrir una franja de fondo. */
body.ygl-chat-on .site-footer { padding-bottom: 5rem; }

/* `display: flex` empata en especificidad con `[hidden]`, así que gana el que se
   cargue después: en los demos esta hoja va última y el panel nunca se ocultaba.
   Esta regla lo resuelve en cualquier orden de carga. */
.ygl-chat[hidden] { display: none; }

.ygl-chat {
  /* Separación del borde inferior. La altura máxima la descuenta, o en pantallas
     cortas el panel se sale por arriba cuando hay barra fija debajo. */
  --c-bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 4.75rem));
  position: fixed;
  right: 1rem;
  bottom: var(--c-bottom);
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(22rem, calc(100vw - 2rem));
  /* Alto fijo, no máximo: un porcentaje dentro de una caja de alto indefinido no
     se resuelve, y sin él los topes de la conversación y de las opciones no
     valían nada. Con alto definido el panel reparte y nada se sale. */
  height: min(34rem, calc(100vh - var(--c-bottom) - 1rem));
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  background: var(--c-bg);
  color: var(--c-fg);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
}
@media (max-width: 899px) {
  body:has(.sticky-cta) .ygl-chat,
  body:has([data-cta-bar]) .ygl-chat { --c-bottom: max(10rem, calc(env(safe-area-inset-bottom) + 9.25rem)); }
}

/* Celular acostado: no hay altura para respetar la barra, y el panel manda. */
@media (max-height: 560px) {
  .ygl-chat,
  body:has(.sticky-cta) .ygl-chat,
  body:has([data-cta-bar]) .ygl-chat { --c-bottom: 0.75rem; }
  /* Cabecera compacta: cada píxel que suelta se lo queda la conversación. */
  .ygl-chat-head { padding: 0.55rem 0.75rem; }
  .ygl-chat-avatar { width: 2.25rem; height: 2.25rem; font-size: 1.35rem; }
  .ygl-chat-mark-lead { font-size: 1.5rem; }
  .ygl-chat-mark-rest { font-size: 0.9rem; }
  .ygl-chat-log { min-height: 4rem; padding: 0.6rem 0.75rem; }
  .ygl-chat-controls { max-height: 52%; padding: 0.55rem 0.75rem; }
  .ygl-chat-btn { min-height: 2.5rem; }
}

.ygl-chat-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--c-line);
}
/* Wordmark de la marca, con el mismo tratamiento que la cabecera y el pie. */
.ygl-chat-mark {
  display: flex;
  align-items: baseline;
  flex: none;
  color: var(--c-fg);
}
.ygl-chat-mark-lead {
  font-family: var(--c-display);
  font-optical-sizing: auto;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}
.ygl-chat-mark-rest {
  margin-left: 0.125rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* La inicial va en la tipografía de titulares, como el wordmark del pie. */
.ygl-chat-avatar {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-accent-fg);
  font-family: var(--c-display);
  font-optical-sizing: auto;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  /* La caja de la mayúscula no está centrada ópticamente en el círculo. */
  padding-bottom: 0.12em;
}
.ygl-chat-titles { flex: 1; min-width: 0; }
.ygl-chat-name { margin: 0; font-size: 0.975rem; font-weight: 600; line-height: 1.2; }
.ygl-chat-sub { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--c-muted); line-height: 1.2; }
/* Sin nombre encima, el subtítulo carga solo la cabecera y sube de tamaño. */
.ygl-chat-sub.is-lead { margin: 0; font-size: 0.925rem; }
.ygl-chat-close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--c-muted);
  cursor: pointer;
}
.ygl-chat-close:hover { color: var(--c-fg); background: var(--c-surface); }
.ygl-chat-close svg { width: 1.1rem; height: 1.1rem; }

.ygl-chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* La conversación es la que cede espacio: las opciones se muestran completas y
     el registro se encoge hasta su mínimo antes de que nada quede oculto. */
  flex: 1 1 auto;
  min-height: min(4rem, 18vh);
}
/* Como en cualquier chat, la conversación se apoya abajo. Con `margin-top: auto`
   en la primera burbuja y no con `justify-content`, que en Chrome corta el
   contenido de arriba cuando hay que scrollear. */
.ygl-chat-log > :first-child { margin-top: auto; }
.ygl-chat-msg {
  max-width: 86%;
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.95rem;
  line-height: 1.45;
}
.ygl-chat-msg.is-in {
  align-self: flex-start;
  border-bottom-left-radius: 0.35rem;
  background: var(--c-surface);
  color: var(--c-fg);
}
.ygl-chat-msg.is-out {
  align-self: flex-end;
  border-bottom-right-radius: 0.35rem;
  background: var(--c-accent);
  color: var(--c-accent-fg);
}

.ygl-chat-typing { display: flex; gap: 0.25rem; align-items: center; }
.ygl-chat-typing span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.45;
  animation: ygl-chat-dot 1.1s infinite ease-in-out;
}
.ygl-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.ygl-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ygl-chat-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 0.9; transform: translateY(-2px); }
}

.ygl-chat-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* Las opciones no encogen: con el panel de alto definido, el tope las corta
     donde toca y la conversación es la que cede. Así siete opciones caben
     enteras en un teléfono normal en vez de esconder la última. */
  flex: 0 0 auto;
  max-height: 62%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 0.9rem max(0.75rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line);
}
/* Con siete opciones la última cae debajo del corte y nada lo dice. El
   degradado avisa que hay más y se apaga al llegar al final de la lista. */
.ygl-chat-controls.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent);
}

.ygl-chat-btn {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-fg);
  font: inherit;
  font-size: 0.925rem;
  text-align: center;
  text-decoration: none;
  line-height: 1.6rem;
  cursor: pointer;
}
.ygl-chat-btn:hover { background: var(--c-surface); }
.ygl-chat-btn.is-primary {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-accent-fg);
  font-weight: 600;
}
.ygl-chat-btn.is-ghost { border-color: transparent; color: var(--c-muted); }

.ygl-chat-form { display: flex; flex-direction: column; gap: 0.4rem; }
.ygl-chat-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-fg);
  font: inherit;
  font-size: 0.925rem;
}

@media (prefers-reduced-motion: reduce) {
  .ygl-chat-launch, .ygl-chat-launch:hover { transition: none; transform: none; }
  .ygl-chat-typing span { animation: none; }
}