/* ===========================================================================
   Widget de soporte de Lexi (Fase 0 del plan de soporte).
   Botón flotante + panel con los canales de contacto. Autosuficiente: se carga
   tanto en el funnel /trial/* (trial.css) como en el wizard de onboarding
   (onboarding.css), por eso NO depende de esas hojas y dimensiona su propia
   copia de la mascota (.trial-lexi). Usa los tokens --lexa-* de theme.css.
   =========================================================================== */

.lexa-support {
    position: fixed;
    right: 1.25rem;
    /* Separado del borde bastante mas que un FAB tipico (que iria en ~1.25rem). El widget es fijo y
       tapa su esquina siempre: pegado abajo se comia la ultima fila de varias tablas —los botones de
       accion de cada fila viven justo ahi— y esos clicks no llegaban. Subirlo deja pasar una fila
       entera por debajo. Los offsets de movil de mas abajo tienen que quedar POR ENCIMA de este. */
    bottom: 3.5rem;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* --- Mascota dentro del widget: calmada (sin las animaciones de trial.css) --- */
.lexa-support .trial-lexi { display: block; overflow: visible; }
.lexa-support .trial-lexi-float,
.lexa-support .trial-lexi-halo,
.lexa-support .trial-lexi-core { animation: none; }

/* --- Botón flotante (FAB) --- */
.lexa-support-fab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem .35rem .4rem;
    background: #fff;
    border: 1px solid var(--lexa-primary-100);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(109, 40, 217, 0.22);
    color: var(--lexa-primary);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .15s ease, box-shadow .15s ease;
}
.lexa-support-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(109, 40, 217, 0.28); }
.lexa-support-fab:focus-visible { outline: 3px solid var(--lexa-accent-soft); outline-offset: 2px; }
.lexa-support-fab-ava { flex: 0 0 auto; }
.lexa-support-fab-ava .trial-lexi { width: 44px; height: 44px; }
.lexa-support-fab-label { white-space: nowrap; }

/* --- Panel desplegable --- */
.lexa-support-panel {
    width: 300px;
    max-width: calc(100vw - 2.5rem);
    background: #fff;
    border: 1px solid var(--lexa-gray-200);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(109, 40, 217, 0.20);
    padding: .5rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}
.lexa-support.is-open .lexa-support-panel { opacity: 1; transform: translateY(0); }

.lexa-support-head {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .5rem .5rem .75rem;
}
.lexa-support-ava { flex: 0 0 auto; }
.lexa-support-ava .trial-lexi { width: 52px; height: 52px; }
.lexa-support-headtext { flex: 1 1 auto; min-width: 0; }
.lexa-support-title { margin: .1rem 0 .1rem; font-size: 1rem; font-weight: 800; color: var(--lexa-gray-900); }
.lexa-support-sub { margin: 0; font-size: .85rem; line-height: 1.35; color: var(--lexa-gray-500); }

.lexa-support-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--lexa-gray-500);
    cursor: pointer;
}
.lexa-support-close:hover { background: var(--lexa-gray-100); color: var(--lexa-gray-800); }
.lexa-support-close:focus-visible { outline: 3px solid var(--lexa-accent-soft); outline-offset: 2px; }

/* --- Acciones (chat / correo / centro de ayuda) ---
   El chat es un <button> (abre el SDK de Chatwoot, no navega) y los otros dos son <a>: se
   normaliza el botón para que las tres filas se vean idénticas. */
.lexa-support-action {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .7rem .65rem;
    border: none;
    border-radius: 12px;
    background: none;
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: var(--lexa-gray-800);
    cursor: pointer;
    transition: background-color .15s ease;
}
.lexa-support-action:hover { background: var(--lexa-primary-50); }
.lexa-support-action:focus-visible { outline: 3px solid var(--lexa-accent-soft); outline-offset: 2px; }
.lexa-support-action > i {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: var(--lexa-primary);
    width: 1.6rem;
    text-align: center;
}
.lexa-support-action-body { display: flex; flex-direction: column; min-width: 0; }
.lexa-support-action-t { font-weight: 700; font-size: .92rem; }
.lexa-support-action-d {
    font-size: .8rem;
    color: var(--lexa-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    /* En movil el alto util escasea, asi que sube menos que en escritorio — pero sube: el problema
       de los clicks tapados es el mismo. */
    .lexa-support { right: 1rem; bottom: 2.25rem; }
    .lexa-support-fab-label { display: none; }
    .lexa-support-fab { padding: .3rem; }

    /* En el riel de navegación la barra inferior ocupa el borde de la pantalla en móvil:
       el FAB sube por encima de ella (alto de la fila + el safe-area del home indicator de
       iOS) para no quedar tapado ni tapar un ítem de menú. */
    body.lexa-nav-rail .lexa-support {
        bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    }

    /* La agenda compacta del terapeuta fija su tarjeta "próxima cita" al borde inferior con el
       MISMO z-index que el widget (site.css, .agenda-mobile-next, también a ≤576px): sin este
       offset el FAB le queda encima justo donde el terapeuta mira su siguiente paciente. */
    body.therapist-view.mobile-agenda-compact .lexa-support {
        bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .lexa-support-fab,
    .lexa-support-panel { transition: none; }
}