/* ============================================================
   Carcasa del pop-up de consulta con Sabi.

   Solo la caja: el chat de dentro conserva íntegro su propio CSS
   (chat-ui.css). Aquí únicamente se le da alto y ancho para que quepa
   dentro del diálogo. Los tokens viven en `.aw-sabimodal` porque este
   pop-up se imprime en páginas que no comparten wrapper.
   ============================================================ */

.aw-sabimodal {
    --aw-sm-brand: #807dfe;
    --aw-sm-deep:  #5e5be0;
    --aw-sm-ink:   #111827;
    --aw-sm-muted: #6b7280;
    --t:           .25s ease-in-out;

    position: fixed;
    inset: 0;
    z-index: 100003;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Visby', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.aw-sabimodal.is-open { display: flex; }

.aw-sabimodal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 19, .58);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.aw-sabimodal__card {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 22px;
    padding: 26px 26px 22px;
    box-shadow: 0 30px 80px -24px rgba(4, 8, 19, .55);
    animation: awSabiModalIn .28s cubic-bezier(.16, 1, .3, 1);
}
@keyframes awSabiModalIn {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .aw-sabimodal__card { animation: none; }
}

.aw-sabimodal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    color: #555;
    cursor: pointer;
    transition: all var(--t);
}
.aw-sabimodal__close:hover { background: rgba(0, 0, 0, .12); color: var(--aw-sm-ink); }

/* ── Cabecera ──────────────────────────────────────────────── */
.aw-sabimodal__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 40px;
    margin-bottom: 16px;
    flex: none;
}
.aw-sabimodal__mark {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #6d4bff, #b06bff);
    color: #fff;
    font-size: 19px;
    font-weight: 800;
}
.aw-sabimodal__title {
    margin: 0;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aw-sm-ink);
}
.aw-sabimodal__ctx {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--aw-sm-muted);
}
.aw-sabimodal__ctx strong { color: var(--aw-sm-deep); }

/* ── Chat embebido ─────────────────────────────────────────── */
/* El chat trae su propio alto; aquí solo se le pone techo para que el
   diálogo no crezca más que la ventana. */
.aw-sabimodal__chat {
    flex: 1;
    min-height: 0;
    display: flex;
}
.aw-sabimodal__chat .aw-sabi-wrap { width: 100%; display: flex; }
.aw-sabimodal__chat .aw-sabi-chat {
    width: 100%;
    height: min(58dvh, 520px);
    max-height: none;
}
/* Los halos decorativos sobran dentro de una caja blanca de 560px. */
.aw-sabimodal__chat .aw-sabi-glow { display: none; }

/* ── Puerta para visitantes sin sesión ─────────────────────── */
.aw-sabimodal__gate { text-align: center; padding: 6px 0 0; }
.aw-sabimodal__gate .aw-sabimodal__mark { margin: 0 auto 14px; }
.aw-sabimodal__sub {
    margin: 10px 0 16px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--aw-sm-muted);
}
.aw-sabimodal__list {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    text-align: left;
}
.aw-sabimodal__list li {
    position: relative;
    padding-left: 26px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--aw-sm-ink);
}
.aw-sabimodal__list li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--aw-sm-brand);
}
.aw-sabimodal__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 12px 18px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(120deg, #6d4bff 0%, #807dfe 45%, #b06bff 100%);
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--t);
}
.aw-sabimodal__cta:hover {
    background: linear-gradient(120deg, #5a37e0 0%, #6a67ea 45%, #9a52ea 100%);
    color: #fff;
}
.aw-sabimodal__foot {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--aw-sm-muted);
}
.aw-sabimodal__foot a { color: var(--aw-sm-deep); font-weight: 700; text-decoration: none; }
.aw-sabimodal__foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
    .aw-sabimodal { padding: 0; align-items: flex-end; }
    .aw-sabimodal__card {
        width: 100%;
        max-height: 94dvh;
        border-radius: 22px 22px 0 0;
        padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
    }
    .aw-sabimodal__chat .aw-sabi-chat { height: 62dvh; }
}