/* Asistente de leads compartido de los demos. Ver lead-ai.php.
   Vive abajo a la IZQUIERDA para no chocar con los FABs de demo-ui-v1
   (Home + WhatsApp), que están abajo a la derecha.

   El único color que cambia por demo es el acento (--lai-acento y sus
   derivados), inyectado desde PHP. Todo lo demás es neutro a propósito: el
   widget se mete dentro de 8 marcas distintas y no debe traer identidad
   propia. --lai-sobre-acento ya viene calculado para cumplir 4.5:1. */

.lai {
    /* Neutros propios del widget (no dependen del CSS del demo anfitrión) */
    --lai-tinta: #15161a;
    --lai-suave: #6b6f76;
    --lai-borde: #e5e7ea;
    --lai-fondo: #ffffff;
    --lai-super: #f5f6f8;

    --lai-alta-bg: #fdecea;  --lai-alta-tx: #9d2c22;  --lai-alta-pt: #d6453d;
    --lai-media-bg: #fdf3e3; --lai-media-tx: #8a5a10; --lai-media-pt: #c9871f;
    --lai-baja-bg: #eef2f6;  --lai-baja-tx: #46596b;  --lai-baja-pt: #7d93a6;

    --lai-out: cubic-bezier(.23, 1, .32, 1);
    --lai-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --lai-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2147483200;               /* por encima de los FABs de demo-ui-v1 */
    font-family: var(--lai-texto);
    color: var(--lai-tinta);
    line-height: 1.5;
}

.lai *,
.lai *::before,
.lai *::after { box-sizing: border-box; }

/* `hidden` TIENE que ganarle a los `display` de más abajo. El `display:none`
   de `[hidden]` lo pone la hoja del navegador, y cualquier `display` de autor
   (flex, grid…) le gana: el elemento se vuelve invisible por opacidad pero
   sigue maquetado y capturando clics. Bug real: el panel cerrado se comía los
   clics del propio lanzador y, en móvil, los de los FABs de demo-ui-v1. */
.lai [hidden] { display: none !important; }

/* El contenedor es una caja fija que abarca más de lo que se ve (en móvil
   ocupa todo el ancho). Se hace transparente al puntero y solo las piezas
   reales lo reciben, así nunca bloquea nada de la página anfitriona. */
.lai { pointer-events: none; }

.lai__lanzador,
.lai__teaser,
.lai__panel { pointer-events: auto; }

/* ── Lanzador ───────────────────────────────────────────────────────────── */

.lai__lanzador {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 20px 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--lai-acento);
    color: var(--lai-sobre-acento);
    font: 600 15px/1 var(--lai-texto);
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
    transition: transform .18s var(--lai-out), box-shadow .18s var(--lai-out);
    -webkit-tap-highlight-color: transparent;
}

.lai__lanzador:active { transform: scale(.97); }
.lai__lanzador:focus-visible { outline: 3px solid var(--lai-acento); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
    .lai__lanzador:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
    }
}

.lai__chispa { display: grid; place-items: center; }
.lai__chispa svg { width: 21px; height: 21px; display: block; }

/* Punto "en línea": lo único que late, y solo hasta que abren el panel. */
.lai__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
    animation: lai-latido 2.4s ease-in-out infinite;
}

@keyframes lai-latido {
    0%, 100% { opacity: .25; transform: scale(.85); }
    50%      { opacity: .9;  transform: scale(1); }
}

/* ── Aviso flotante (aparece solo, una vez por sesión) ──────────────────── */

.lai__teaser {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 268px;
    margin-bottom: 10px;
    padding: 12px 10px 12px 14px;
    border: 1px solid var(--lai-borde);
    border-radius: 14px 14px 14px 4px;
    background: var(--lai-fondo);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
    opacity: 0;
    transform: translateY(6px) scale(.98);
    transform-origin: bottom left;
    transition: opacity .24s var(--lai-out), transform .24s var(--lai-out);
}

.lai__teaser.en { opacity: 1; transform: none; }
.lai__teaser-txt { margin: 0; font-size: 14px; color: var(--lai-tinta); }

.lai__teaser-x {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    margin: -3px -2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--lai-suave);
    cursor: pointer;
    transition: background .16s var(--lai-out), color .16s var(--lai-out);
}

.lai__teaser-x svg { width: 13px; height: 13px; }
.lai__teaser-x:hover { background: var(--lai-super); color: var(--lai-tinta); }
.lai__teaser-x:focus-visible { outline: 2px solid var(--lai-acento); outline-offset: 1px; }

/* ── Panel ──────────────────────────────────────────────────────────────── */

.lai__panel {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 364px;
    max-height: min(74vh, 580px);
    border: 1px solid var(--lai-borde);
    border-radius: 18px;
    background: var(--lai-fondo);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .26);
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(.97);
    transform-origin: bottom left;      /* nace del lanzador, no del centro */
    transition: opacity .22s var(--lai-out), transform .22s var(--lai-out);
}

.lai__panel.en { opacity: 1; transform: none; }

/* Al cerrar va más rápido que al abrir: el sistema responde, no delibera. */
.lai__panel.sale { transition-duration: .15s; }

.lai__cab {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 12px 13px 15px;
    border-bottom: 1px solid var(--lai-borde);
    background: var(--lai-acento-suave);
}

.lai__avatar {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--lai-acento);
    color: var(--lai-sobre-acento);
}

.lai__avatar svg { width: 19px; height: 19px; }

.lai__cab-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lai__cab-txt strong { font-size: 15px; font-weight: 700; }
.lai__cab-txt small  { font-size: 12px; color: var(--lai-suave); }

.lai__x {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--lai-suave);
    cursor: pointer;
    transition: background .16s var(--lai-out), color .16s var(--lai-out), transform .16s var(--lai-out);
}

.lai__x svg { width: 15px; height: 15px; }
.lai__x:hover  { background: rgba(0, 0, 0, .07); color: var(--lai-tinta); }
.lai__x:active { transform: scale(.92); }
.lai__x:focus-visible { outline: 2px solid var(--lai-acento); outline-offset: 1px; }

/* ── Ficha: la firma del componente ─────────────────────────────────────── */
/* Aparece recién con la primera respuesta y se va llenando campo por campo. */

.lai__ficha {
    padding: 11px 15px 12px;
    border-bottom: 1px solid var(--lai-borde);
    background: var(--lai-super);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .26s var(--lai-out), transform .26s var(--lai-out);
}

.lai__ficha.en { opacity: 1; transform: none; }

.lai__ficha-tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
    font: 700 10px/1 var(--lai-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--lai-suave);
}

.lai__campos { margin: 0; display: grid; gap: 4px; }

.lai__campo {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 8px;
    align-items: baseline;
    font-size: 13px;
}

.lai__campo dt {
    font: 500 11px/1.5 var(--lai-mono);
    color: var(--lai-suave);
    letter-spacing: .02em;
}

/* Vacío y lleno se distinguen por peso y color, NO bajando la opacidad: un
   "Por definir" a opacity .5 cae a ~2:1 y deja de ser texto legible. Así el
   estado pendiente se lee claro y aun así no compite con lo ya respondido. */
.lai__campo dd {
    margin: 0;
    font-weight: 500;
    color: var(--lai-suave);
    transition: color .22s var(--lai-out), font-weight .22s var(--lai-out);
}

.lai__campo dd.lleno { color: var(--lai-tinta); font-weight: 600; }

/* Sello de prioridad: el único momento con overshoot en todo el widget.
   Se ve una sola vez por conversación, así que aquí sí conviene celebrarlo. */
.lai__sello {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    opacity: 0;
    transform: scale(.94);
    transition: opacity .26s var(--lai-out), transform .26s cubic-bezier(.2, 1.35, .4, 1);
}

.lai__sello.en { opacity: 1; transform: none; }

.lai__sello-pt {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.lai__sello-tx { font: 700 12px/1.2 var(--lai-texto); letter-spacing: .01em; }
.lai__sello-nm { margin-left: auto; font: 700 12px/1 var(--lai-mono); }

.lai__barra {
    flex: 1;
    height: 4px;
    max-width: 78px;
    border-radius: 99px;
    background: rgba(0, 0, 0, .10);
    overflow: hidden;
}

/* scaleX en vez de width: se queda en GPU y no dispara layout. */
.lai__barra i {
    display: block;
    height: 100%;
    border-radius: 99px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--lai-out) .12s;
}

.lai__sello[data-nivel="alta"]  { background: var(--lai-alta-bg);  color: var(--lai-alta-tx); }
.lai__sello[data-nivel="media"] { background: var(--lai-media-bg); color: var(--lai-media-tx); }
.lai__sello[data-nivel="baja"]  { background: var(--lai-baja-bg);  color: var(--lai-baja-tx); }

.lai__sello[data-nivel="alta"]  .lai__sello-pt, .lai__sello[data-nivel="alta"]  .lai__barra i { background: var(--lai-alta-pt); }
.lai__sello[data-nivel="media"] .lai__sello-pt, .lai__sello[data-nivel="media"] .lai__barra i { background: var(--lai-media-pt); }
.lai__sello[data-nivel="baja"]  .lai__sello-pt, .lai__sello[data-nivel="baja"]  .lai__barra i { background: var(--lai-baja-pt); }

/* ── Conversación ───────────────────────────────────────────────────────── */

.lai__chat {
    flex: 1;
    min-height: 96px;
    padding: 14px 15px 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lai__msj {
    max-width: 84%;
    padding: 9px 13px;
    font-size: 14px;
    border-radius: 15px;
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .22s var(--lai-out), transform .22s var(--lai-out);
}

.lai__msj.en { opacity: 1; transform: none; }

.lai__msj--bot {
    align-self: flex-start;
    border-bottom-left-radius: 5px;
    background: var(--lai-super);
    color: var(--lai-tinta);
}

.lai__msj--yo {
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    background: var(--lai-acento);
    color: var(--lai-sobre-acento);
    font-weight: 500;
}

/* Tres puntos: dice "está pensando" sin bloquear ni tardar. */
.lai__pensando {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 12px 13px;
    border-radius: 15px 15px 15px 5px;
    background: var(--lai-super);
}

.lai__pensando span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lai-suave);
    animation: lai-punto 1.1s ease-in-out infinite;
}

.lai__pensando span:nth-child(2) { animation-delay: .15s; }
.lai__pensando span:nth-child(3) { animation-delay: .3s; }

@keyframes lai-punto {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ── Acciones: opciones, nombre, cierre ─────────────────────────────────── */

.lai__acciones {
    padding: 10px 15px 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.lai__acciones:empty { display: none; }

.lai__chip {
    padding: 9px 14px;
    min-height: 38px;
    border: 1px solid var(--lai-acento-borde);
    border-radius: 999px;
    background: var(--lai-fondo);
    color: var(--lai-tinta);
    font: 500 13.5px/1.2 var(--lai-texto);
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    animation: lai-entra .26s var(--lai-out) forwards;
    transition: background .16s var(--lai-out), border-color .16s var(--lai-out), transform .12s var(--lai-out);
}

.lai__chip:nth-child(1) { animation-delay: 0ms; }
.lai__chip:nth-child(2) { animation-delay: 45ms; }
.lai__chip:nth-child(3) { animation-delay: 90ms; }
.lai__chip:nth-child(4) { animation-delay: 135ms; }

@keyframes lai-entra { to { opacity: 1; transform: none; } }

.lai__chip:active { transform: scale(.97); }
.lai__chip:focus-visible { outline: 2px solid var(--lai-acento); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
    .lai__chip:hover { background: var(--lai-acento-suave); border-color: var(--lai-acento); }
}

.lai__forma { display: flex; gap: 7px; width: 100%; }

.lai__campo-nombre { flex: 1; min-width: 0; }
.lai__campo-nombre label {
    display: block;
    margin-bottom: 4px;
    font: 500 11px/1 var(--lai-mono);
    letter-spacing: .04em;
    color: var(--lai-suave);
    text-transform: uppercase;
}

.lai__input {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--lai-borde);
    border-radius: 11px;
    background: var(--lai-fondo);
    color: var(--lai-tinta);
    font: 500 14px/1 var(--lai-texto);
    transition: border-color .16s var(--lai-out), box-shadow .16s var(--lai-out);
}

.lai__input::placeholder { color: #a3a7ad; font-weight: 400; }
.lai__input:focus {
    outline: 0;
    border-color: var(--lai-acento);
    box-shadow: 0 0 0 3px var(--lai-acento-suave);
}

.lai__enviar {
    align-self: flex-end;
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 11px;
    background: var(--lai-acento);
    color: var(--lai-sobre-acento);
    font: 600 14px/1 var(--lai-texto);
    cursor: pointer;
    transition: transform .14s var(--lai-out), filter .16s var(--lai-out);
}

.lai__enviar:active { transform: scale(.97); }
.lai__enviar:focus-visible { outline: 2px solid var(--lai-acento); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lai__enviar:hover { filter: brightness(1.07); } }

.lai__wa,
.lai__reiniciar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    font: 600 14.5px/1 var(--lai-texto);
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    animation: lai-entra .28s var(--lai-out) forwards;
    transition: transform .14s var(--lai-out), filter .16s var(--lai-out), background .16s var(--lai-out);
}

/* Verde WhatsApp oscurecido: el de marca (#25D366) con texto blanco da 1.9:1
   y no pasa 4.5:1. Este llega a 5.2:1 y el glifo sigue siendo reconocible. */
.lai__wa {
    background: #0f7d3f;
    color: #fff;
    border: 0;
    animation-delay: 60ms;
}

.lai__wa svg { width: 18px; height: 18px; flex: none; }
.lai__wa:active { transform: scale(.98); }
.lai__wa:focus-visible { outline: 3px solid #0f7d3f; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lai__wa:hover { filter: brightness(1.12); } }

.lai__reiniciar {
    min-height: 38px;
    border: 0;
    background: transparent;
    color: var(--lai-suave);
    font-size: 13px;
    font-weight: 500;
    animation-delay: 120ms;
}

.lai__reiniciar:hover { background: var(--lai-super); color: var(--lai-tinta); }
.lai__reiniciar:active { transform: scale(.98); }
.lai__reiniciar:focus-visible { outline: 2px solid var(--lai-acento); outline-offset: 2px; }

.lai__nota {
    margin: 0;
    padding: 9px 15px 12px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--lai-suave);
    text-align: center;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
    .lai { left: 12px; right: 12px; bottom: 12px; }

    .lai__panel {
        right: 0;
        width: auto;
        max-height: min(80vh, 600px);
    }

    .lai__teaser { max-width: none; }
    .lai__lanzador { max-width: max-content; }

    /* Con el panel abierto, los botones flotantes del anfitrión quedarían
       debajo del panel: se apagan mientras dure. `.fabs` es el par de FABs de
       demo-ui-v1 (los demos) y `.fab-wa` el botón único de la landing.
       Acoplamiento consciente y documentado (ver README). */
    body.lai-abierto .fabs,
    body.lai-abierto .fab-wa { opacity: 0; pointer-events: none; }
}

@media (max-width: 380px) {
    .lai__lanzador { padding: 0 16px 0 13px; font-size: 14px; }
    .lai__campo { grid-template-columns: 74px 1fr; }
}

/* ── Movimiento reducido ────────────────────────────────────────────────── */
/* Menos movimiento, no cero: se quedan opacidad y color, que sí ayudan a
   entender qué cambió. Se van los desplazamientos y los latidos. */

@media (prefers-reduced-motion: reduce) {
    .lai__panel,
    .lai__teaser,
    .lai__ficha,
    .lai__msj,
    .lai__sello { transform: none !important; transition-duration: .12s; }

    .lai__chip,
    .lai__wa,
    .lai__reiniciar { animation-duration: .12s; animation-delay: 0ms !important; transform: none !important; }

    .lai__punto,
    .lai__pensando span { animation: none; opacity: .6; }

    .lai__barra i { transition-duration: .12s; }

    .lai__lanzador:hover,
    .lai__lanzador:active,
    .lai__chip:active,
    .lai__enviar:active,
    .lai__x:active { transform: none; }
}

/* Si el demo anfitrión imprime, el asistente sobra. */
@media print { .lai { display: none; } }