/* ===========================================================================
   chat.css — panel de chat que abre desde el boton flotante
   ===========================================================================
   Dos pasos: primero pide nombre y correo, luego muestra la conversacion.
   El motor todavia no existe (va IA mas adelante), asi que el envio cae en un
   estado honesto que ofrece WhatsApp en vez de fingir una respuesta.
   =========================================================================== */

.jc-chat {
    position: fixed;
    right: 22px;
    bottom: 12px;   /* pegado al borde, igual que los flotantes: el panel ocupa su lugar */
    z-index: 1045;
    width: 356px;
    max-width: calc(100vw - 32px);
    height: 900px;
    max-height: calc(100vh - 28px);   /* sube por encima del navbar, casi al tope */
    display: flex;
    flex-direction: column;
    background: #faf9fe;
    border: 1px solid #eeebf8;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(20, 15, 60, .22);
    overflow: hidden;

    /* cerrado por defecto; la transicion la maneja .is-abierto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(26px) scale(.94);
    transform-origin: 100% 100%;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.jc-chat.is-abierto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .3, 1), visibility 0s;
}

/* ---------- cabecera ---------- */
/* No es una barra: va suelta encima del contenido, que le pasa por debajo
   al desplazarse. Por eso no lleva fondo ni borde, y deja pasar el raton
   salvo en sus dos botones. */
.jc-chat-cab {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: transparent;
    color: #1f1b3d;
    pointer-events: none;
}

/* Franja difuminada bajo los botones: el contenido que sube al desplazarse
   se desvanece en vez de cortarse crudo contra ellos.

   Va en z-index -1 dentro de la propia cabecera. Como la cabecera ya crea su
   contexto de apilado (position + z-index 3), el -1 la deja DEBAJO de sus dos
   botones pero el conjunto entero sigue por ENCIMA del cuerpo. */
.jc-chat-cab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    z-index: -1;
    background: linear-gradient(180deg, #faf9fe 42%, rgba(250, 249, 254, 0) 100%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}





.jc-chat-min,
.jc-chat-icono {
    margin-left: auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #eeebf8;
    border-radius: 50%;
    background: #fff;
    color: #8a86ac;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(20, 15, 60, .12);
    transition: background-color .13s, color .13s;
}

.jc-chat-min:hover,
.jc-chat-icono:hover { background: #f6f3fd; color: #6d28d9; }
.jc-chat-min svg,
.jc-chat-icono svg { width: 18px; height: 18px; }

/* ---------- cuerpo ---------- */
.jc-chat-cuerpo {
    flex: 1;
    overflow-y: auto;
    padding: 62px 18px 18px;   /* los 62 de arriba son para los botones flotantes */
    background: transparent;
}

/* ---------- paso 1: presentacion ---------- */
/* Va como tarjeta y no suelta sobre el fondo: asi el formulario se lee como
   el primer mensaje de la conversacion y no queda pegado a los costados. */
.jc-chat-intro {
    background: #fff;
    border: 1px solid #eeebf8;
    border-radius: 14px;
    padding: 18px 18px 20px;
}

.jc-chat-intro p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #5f5b84;
    margin: 0 0 18px;
}

.jc-chat-campo { margin-bottom: 13px; }

.jc-chat-campo label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #5f5b84;
    margin-bottom: 5px;
}

.jc-chat-campo input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2ddf2;
    border-radius: 9px;
    background: #fff;
    color: #1f1b3d;
    font-size: 13.5px;
    font-family: inherit;
    transition: border-color .13s, box-shadow .13s;
}

.jc-chat-campo input:focus {
    outline: none;
    border-color: #c4b0f3;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.jc-chat-campo input.es-malo { border-color: #e5a1a1; }

.jc-chat-error {
    display: none;
    font-size: 11.5px;
    color: #b91c1c;
    margin-top: 4px;
}

.jc-chat-error.se-ve { display: block; }

.jc-chat-empezar {
    width: 100%;
    margin-top: 6px;
    padding: 11px;
    border: 0;
    border-radius: 10px;
    background: #7c3aed;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .13s;
}

.jc-chat-empezar:hover { background: #6d28d9; }

/* ---------- paso 2: la conversacion ---------- */
.jc-chat-hilo { display: none; flex-direction: column; gap: 12px; }
.jc-chat-hilo.se-ve { display: flex; }

.jc-chat-msg {
    max-width: 84%;
    padding: 10px 13px;
    font-size: 13.5px;
    line-height: 1.6;
}

/* Cada burbuja entra sola al aparecer.

   Ojo con dos cosas: NO lleva retardo y NO lleva fill-mode. El estado normal
   de la burbuja es visible, y la animacion solo presta el punto de partida;
   asi, si el navegador no llega a animar, el mensaje se ve igual. Con
   "forwards" se quedaria invisible, que es el error que ya cometi con los
   botones flotantes. */
.jc-chat-msg,
.jc-chat-aviso {
    animation: jc-msg-entra .26s cubic-bezier(.2, .8, .3, 1);
}

@keyframes jc-msg-entra {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .jc-chat-msg,
    .jc-chat-aviso { animation: none; }
}

.jc-chat-msg.de-ellos {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #eeebf8;
    border-radius: 13px 13px 13px 4px;
    color: #1f1b3d;
}

.jc-chat-msg.de-mi {
    align-self: flex-end;
    background: #7c3aed;
    border-radius: 13px 13px 4px 13px;
    color: #fff;
}

.jc-chat-msg .hora {
    display: block;
    font-size: 10.5px;
    margin-top: 4px;
    opacity: .65;
}

/* aviso de que todavia no hay nadie al otro lado */
.jc-chat-aviso {
    align-self: stretch;
    background: #fff7ed;
    border: 1px solid #fde3c4;
    border-radius: 13px;
    padding: 13px;
    font-size: 12.8px;
    line-height: 1.6;
    color: #92400e;
}

.jc-chat-aviso a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 8px 13px;
    border-radius: 9px;
    background: #25d366;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.jc-chat-aviso a:hover { color: #fff; filter: brightness(1.06); }
.jc-chat-aviso a svg { width: 15px; height: 15px; }

/* ---------- pie: escribir ---------- */
.jc-chat-pie {
    display: none;
    align-items: flex-end;
    gap: 9px;
    padding: 11px 12px;
    border-top: 1px solid #eeebf8;
    background: #fff;
    flex: none;
}

.jc-chat-pie.se-ve { display: flex; }

.jc-chat-pie textarea {
    flex: 1;
    max-height: 90px;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid #e2ddf2;
    border-radius: 10px;
    resize: none;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.5;
    color: #1f1b3d;
}

.jc-chat-pie textarea:focus {
    outline: none;
    border-color: #c4b0f3;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.jc-chat-enviar {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #7c3aed;
    color: #fff;
    cursor: pointer;
    transition: background-color .13s;
}

.jc-chat-enviar:hover { background: #6d28d9; }
.jc-chat-enviar svg { width: 18px; height: 18px; }

.jc-chat-firma {
    padding: 8px;
    text-align: center;
    font-size: 10.5px;
    color: #8a86ac;
    background: #fff;
    border-top: 1px solid #f3f1fa;
    flex: none;
}

/* ---------- en el celular ocupa casi toda la pantalla ---------- */
@media (max-width: 575px) {
    .jc-chat {
        right: 10px;
        left: 10px;
        bottom: 14px;
        width: auto;
        height: calc(100vh - 40px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jc-chat { transition: opacity .01s, visibility 0s; transform: none; }
    .jc-chat.is-abierto { transform: none; }
}

/* ---------- menu de tres puntos ---------- */
.jc-chat-mn {
    position: relative;
    pointer-events: auto;
}

.jc-chat-mn-lista {
    position: absolute;
    top: 38px;
    left: 0;
    min-width: 208px;
    padding: 6px;
    background: #fff;
    border: 1px solid #eeebf8;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(20, 15, 60, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}

.jc-chat-mn-lista.se-ve {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .15s ease, transform .15s ease, visibility 0s;
}

.jc-chat-mn-lista a,
.jc-chat-mn-lista button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5f5b84;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.jc-chat-mn-lista a:hover,
.jc-chat-mn-lista button:hover { background: #f6f3fd; color: #6d28d9; }

.jc-chat-mn-lista svg { width: 15px; height: 15px; flex: none; }

/* ---------- chat cerrado por inactividad ---------- */
.jc-chat-expirado {
    display: none;
    text-align: center;
    padding: 30px 22px;
    background: #fff;
    border: 1px solid #eeebf8;
    border-radius: 14px;
}

.jc-chat-expirado.se-ve { display: block; }

.jc-chat-expirado__ico {
    width: 52px; height: 52px; margin: 0 auto 14px;
    display: grid; place-items: center; border-radius: 50%;
    background: #efe9fe; color: #7c3aed;
}
.jc-chat-expirado__ico svg { width: 26px; height: 26px; }

.jc-chat-expirado strong { display: block; font-size: 15px; font-weight: 700; color: #1f1b3d; margin-bottom: 6px; }
.jc-chat-expirado p { font-size: 13px; line-height: 1.6; color: #8a86ac; margin: 0 auto 18px; max-width: 240px; }

.jc-chat-expirado__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 24px; border: 0; border-radius: 10px;
    background: #7c3aed; color: #fff; font-size: 14px; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: background-color .13s;
}
.jc-chat-expirado__btn:hover { background: #6d28d9; }