/* ==========================================================================
   ASISTENTE VIRTUAL — widget del sitio público
   --------------------------------------------------------------------------
   Prefijo `asi-`. Nada de `ad-`: los bloqueadores de publicidad esconden
   cualquier clase que empiece así, y ya nos pasó con el panel.

   Convive con el botón flotante de WhatsApp, que está en bottom 2rem / right
   2rem con 60px de alto y z-index 998 (css/mm-shell.css). El lanzador se
   apoya justo arriba; el panel abierto pasa por encima de los dos.

   Paleta: las mismas variables de mm-shell.css / dark-theme.css.
   ========================================================================== */

:root {
    --asi-ancho: 380px;
    --asi-alto: 560px;
}

/* ============================================
   LANZADOR
   ============================================ */
.asi-abrir {
    position: fixed;
    right: 2rem;
    /* 2rem del WhatsApp + sus 60px + aire */
    bottom: calc(2rem + 60px + 14px);
    z-index: 997;

    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px 11px 15px;
    border: 1px solid var(--border-glow, rgba(6, 182, 212, .3));
    border-radius: 999px;

    background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%);
    color: #fff;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;

    box-shadow: 0 6px 24px rgba(6, 182, 212, .32);
    transition: transform .2s ease, box-shadow .2s ease;
}
.asi-abrir i { font-size: 1.15rem; }
.asi-abrir:hover,
.asi-abrir:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(6, 182, 212, .45);
    color: #fff;
}
/* Con el panel abierto el lanzador no aporta y tapa el panel en pantallas chicas. */
.asi-abrir[hidden] { display: none; }

/* ============================================
   PANEL
   ============================================ */
.asi-panel {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    width: var(--asi-ancho);
    max-width: calc(100vw - 2rem);
    height: var(--asi-alto);
    max-height: calc(100vh - 4rem);

    border: 1px solid var(--border-color, rgba(148, 163, 184, .18));
    border-radius: 18px;
    overflow: hidden;

    background: var(--background-secondary, #0f172a);
    box-shadow: 0 24px 60px rgba(2, 6, 23, .6);
}
.asi-panel[hidden] { display: none; }

/* La entrada es una sola vez, no en cada render. */
.asi-panel--entra { animation: asiEntra 260ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes asiEntra {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ============================================
   CABECERA
   ============================================ */
.asi-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 13px 18px;
    border-bottom: 1px solid var(--border-color, rgba(148, 163, 184, .14));
    background: rgba(6, 182, 212, .07);
}
.asi-cab__titulo {
    margin: 0;
    color: var(--text-primary, #f8fafc);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}
.asi-cab__tipo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0 0;
    color: var(--text-secondary, #94a3b8);
    font-size: .78rem;
    letter-spacing: .01em;
}
.asi-cab__punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex: 0 0 auto;
}
.asi-cab__acciones { display: flex; gap: 4px; }

.asi-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    font-size: .95rem;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.asi-icono:hover,
.asi-icono:focus-visible {
    background: rgba(148, 163, 184, .13);
    color: var(--text-primary, #f8fafc);
}

/* ============================================
   CONVERSACIÓN
   ============================================ */
.asi-charla {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 16px 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.asi-charla::-webkit-scrollbar { width: 8px; }
.asi-charla::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .25);
    border-radius: 8px;
}

.asi-msj {
    max-width: 86%;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: .93rem;
    line-height: 1.6;
}
.asi-msj p { margin: 0; }
.asi-msj p + p { margin-top: .6em; }

.asi-msj--bot {
    align-self: flex-start;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .14));
    border-bottom-left-radius: 5px;
    background: var(--background-tertiary, #1e293b);
    color: var(--text-primary, #f8fafc);
}
.asi-msj--yo {
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%);
    color: #fff;
}
/* Cuando deriva a una persona, el mensaje se distingue del resto. */
.asi-msj--respaldo {
    border-color: rgba(37, 211, 102, .35);
    background: rgba(37, 211, 102, .1);
}
.asi-msj__wa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}
.asi-msj__wa:hover,
.asi-msj__wa:focus-visible { color: #fff; filter: brightness(1.07); }

/* Tres puntos mientras el modelo piensa. */
.asi-puntos {
    align-self: flex-start;
    display: flex;
    gap: 5px;
    padding: 14px 16px;
    border-radius: 14px;
    border-bottom-left-radius: 5px;
    background: var(--background-tertiary, #1e293b);
}
.asi-puntos span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted, #64748b);
    animation: asiPulso 1.3s ease-in-out infinite;
}
.asi-puntos span:nth-child(2) { animation-delay: .18s; }
.asi-puntos span:nth-child(3) { animation-delay: .36s; }
@keyframes asiPulso {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ============================================
   AVISO, FORMULARIO Y PIE
   ============================================ */
.asi-aviso {
    margin: 0;
    padding: 8px 16px 0;
    color: var(--text-muted, #64748b);
    font-size: .72rem;
    line-height: 1.45;
}

.asi-form {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 10px 16px 6px;
}
.asi-form textarea {
    flex: 1 1 auto;
    min-height: 44px;
    max-height: 120px;
    padding: 11px 14px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, .2));
    border-radius: 13px;
    background: var(--background, #030712);
    color: var(--text-primary, #f8fafc);
    font: inherit;
    font-size: .93rem;
    line-height: 1.45;
    resize: none;
}
.asi-form textarea::placeholder { color: var(--text-muted, #64748b); }
.asi-form textarea:focus-visible {
    outline: none;
    border-color: var(--primary, #06b6d4);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, .17);
}

.asi-enviar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: filter .18s ease, opacity .18s ease;
}
.asi-enviar:hover:not(:disabled) { filter: brightness(1.1); }
.asi-enviar:disabled { opacity: .45; cursor: not-allowed; }

.asi-pie {
    margin: 0;
    padding: 2px 16px 14px;
    color: var(--text-muted, #64748b);
    font-size: .76rem;
}
.asi-pie a { color: var(--primary, #06b6d4); text-decoration: none; }
.asi-pie a:hover { text-decoration: underline; }

/* Etiqueta sólo para lectores de pantalla. */
.asi-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   PANTALLAS CHICAS
   ============================================ */
@media (max-width: 575.98px) {
    .asi-abrir {
        right: 1.2rem;
        bottom: calc(1.2rem + 54px + 12px);
        padding: 10px 15px 10px 13px;
        font-size: .88rem;
    }

    /* Casi pantalla completa: escribir en 380px de alto no se puede. */
    .asi-panel {
        right: 0;
        left: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .asi-msj { max-width: 92%; }
}

/*
   Con el panel abierto, el botón flotante de WhatsApp se va.

   Dos razones: sobra —el panel ya tiene su propio enlace en el pie y en cada
   mensaje que deriva— y, como el panel tiene las esquinas redondeadas, el
   botón asomaba por el rincón de abajo a la derecha con su resplandor verde.
   Se oculta con opacidad y no con display para que no haya salto.
*/
html.asi-abierto .whatsapp-float {
    opacity: 0;
    pointer-events: none;
}

/*
   Con el panel abierto en pantalla chica el fondo no se mueve.
   La clase va en <html> y no en body: cambiar `body.style.overflow` desde JS
   no alcanza en iOS, y en este proyecto ya lo aprendimos con el portafolio.
*/
html.asi-sin-scroll,
html.asi-sin-scroll body {
    overflow: hidden;
    touch-action: none;
}

@media (prefers-reduced-motion: reduce) {
    .asi-abrir,
    .asi-enviar { transition: none; }
    .asi-panel--entra { animation: none; }
    .asi-puntos span { animation: none; opacity: .55; }
}