.lalc-ai-chatbot {
    --lalc-primary: #003366;
    --lalc-primary-light: #00509e;
    color: #172033;
    font-family: inherit;
}

/*
 * El contenedor flotante cubre TODO el viewport (inset:0) sin capturar clicks
 * fuera del widget (pointer-events:none, reactivado en el boton y el panel).
 * Asi el panel puede "estirarse" con top/bottom entre un margen fijo arriba y
 * el boton abajo, en CUALQUIER tamano de pantalla, y nunca deja un hueco de
 * pagina visible por encima (lo que pasaba con una altura fija/maxima).
 */
.lalc-ai-chatbot-floating {
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
}

.lalc-ai-chatbot-floating .lalc-ai-chatbot-toggle {
    position: absolute;
    pointer-events: auto;
}

.lalc-ai-chatbot-bottom_left .lalc-ai-chatbot-toggle,
.lalc-ai-chatbot-bottom_right .lalc-ai-chatbot-toggle {
    bottom: var(--lalc-chatbot-offset-y, 22px);
}

.lalc-ai-chatbot-top_left .lalc-ai-chatbot-toggle,
.lalc-ai-chatbot-top_right .lalc-ai-chatbot-toggle {
    top: var(--lalc-chatbot-offset-y, 22px);
}

.lalc-ai-chatbot-bottom_left .lalc-ai-chatbot-toggle,
.lalc-ai-chatbot-top_left .lalc-ai-chatbot-toggle {
    left: var(--lalc-chatbot-offset-x, 22px);
}

.lalc-ai-chatbot-bottom_right .lalc-ai-chatbot-toggle,
.lalc-ai-chatbot-top_right .lalc-ai-chatbot-toggle {
    right: var(--lalc-chatbot-offset-x, 22px);
}

.lalc-ai-chatbot-toggle {
    align-items: center;
    background: var(--lalc-chatbot-button-bg, var(--lalc-primary));
    border: 0;
    border-radius: var(--lalc-chatbot-button-radius, 999px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
    color: var(--lalc-chatbot-button-color, #fff);
    cursor: pointer;
    display: inline-flex;
    gap: 10px;
    font-weight: 700;
    opacity: var(--lalc-chatbot-button-opacity, 1);
    padding: 10px 16px;
}

.lalc-ai-chatbot-avatar {
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    height: 34px;
    object-fit: cover;
    width: 34px;
}

.lalc-ai-chatbot-toggle:hover,
.lalc-ai-chatbot.is-open .lalc-ai-chatbot-toggle {
    opacity: 1;
}

.lalc-ai-chatbot-panel {
    background: rgba(255, 255, 255, var(--lalc-chatbot-panel-opacity, 1));
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: min(400px, calc(100vw - 32px));
}

/* Variante insertada con el shortcode: tamano fijo (no hay contenedor
   posicionado a pantalla completa donde "estirarse"). */
.lalc-ai-chatbot-inline .lalc-ai-chatbot-panel {
    max-height: min(620px, calc(100vh - 100px));
    min-height: 420px;
}

.lalc-ai-chatbot-floating .lalc-ai-chatbot-panel {
    display: none;
    max-height: 900px;
    pointer-events: auto;
    position: absolute;
}

.lalc-ai-chatbot-bottom_left .lalc-ai-chatbot-panel,
.lalc-ai-chatbot-bottom_right .lalc-ai-chatbot-panel {
    bottom: calc(var(--lalc-chatbot-offset-y, 22px) + 56px);
    top: 16px;
}

.lalc-ai-chatbot-top_left .lalc-ai-chatbot-panel,
.lalc-ai-chatbot-top_right .lalc-ai-chatbot-panel {
    bottom: 16px;
    top: calc(var(--lalc-chatbot-offset-y, 22px) + 56px);
}

.lalc-ai-chatbot-bottom_left .lalc-ai-chatbot-panel,
.lalc-ai-chatbot-top_left .lalc-ai-chatbot-panel {
    left: var(--lalc-chatbot-offset-x, 22px);
}

.lalc-ai-chatbot-bottom_right .lalc-ai-chatbot-panel,
.lalc-ai-chatbot-top_right .lalc-ai-chatbot-panel {
    right: var(--lalc-chatbot-offset-x, 22px);
}

.lalc-ai-chatbot.is-open .lalc-ai-chatbot-panel,
.lalc-ai-chatbot-inline .lalc-ai-chatbot-panel {
    display: flex;
}

/*
 * Encabezado fijo en la esquina superior del panel (igual que los botones
 * -/x), no dentro del flujo normal: asi queda pegado arriba del todo aunque
 * el panel tenga espacio vacio por encima. El padding-top del panel reserva
 * el espacio para que los mensajes/formulario no queden tapados debajo.
 */
.lalc-ai-chatbot-panel {
    /* Padding COMPLETO y explicito: el panel es un <section> y el tema del
       sitio declara "section { padding: 130px 0 }". Si solo fijamos el
       padding-top, el padding-bottom del tema se cuela y deja una franja
       blanca al fondo del panel. */
    padding: 96px 0 0;
    position: relative;
}

.lalc-ai-chatbot-panel header {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #edf0f4;
    display: flex;
    justify-content: space-between;
    left: 0;
    padding: 12px 46px 12px 14px;
    position: absolute;
    right: 0;
    top: 34px;
}

.lalc-ai-chatbot-agent {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.lalc-ai-chatbot-agent-avatar {
    border-radius: 999px;
    flex: none;
    height: 40px;
    object-fit: cover;
    width: 40px;
}

.lalc-ai-chatbot-agent-avatar-fallback {
    align-items: center;
    background: #e6edf5;
    color: var(--lalc-primary);
    display: flex;
    justify-content: center;
}

.lalc-ai-chatbot-agent-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.lalc-ai-chatbot-agent-info strong {
    color: #172033;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lalc-ai-chatbot-status {
    align-items: center;
    color: #64748b;
    display: flex;
    font-size: 12px;
    gap: 5px;
}

.lalc-ai-chatbot-status i {
    background: #22c55e;
    border-radius: 999px;
    display: inline-block;
    height: 7px;
    width: 7px;
}

/* Fijos en la esquina superior del panel (no dentro de la fila del header),
   para que queden siempre arriba del todo aunque el header no llegue al
   borde superior de la pantalla. */
.lalc-ai-chatbot-actions {
    display: flex;
    gap: 4px;
    position: absolute;
    right: 6px;
    top: 6px;
    z-index: 2;
}

.lalc-ai-chatbot-minimize,
.lalc-ai-chatbot-close {
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 16px;
    height: 30px;
    line-height: 1;
    width: 30px;
}

.lalc-ai-chatbot-minimize {
    color: #eab308;
}

.lalc-ai-chatbot-close {
    color: #dc2626;
}

.lalc-ai-chatbot-minimize:hover {
    background: #fef9c3;
    color: #a16207;
}

.lalc-ai-chatbot-close:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.lalc-ai-chatbot-messages {
    background: #f5f7f9;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 80px;
    overflow-y: auto;
    padding: 16px;
}

.lalc-ai-chatbot-messages::-webkit-scrollbar,
.lalc-ai-chatbot-intake::-webkit-scrollbar {
    width: 6px;
}

.lalc-ai-chatbot-messages::-webkit-scrollbar-track,
.lalc-ai-chatbot-intake::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.lalc-ai-chatbot-messages::-webkit-scrollbar-thumb,
.lalc-ai-chatbot-intake::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.lalc-ai-chatbot-messages::-webkit-scrollbar-thumb:hover,
.lalc-ai-chatbot-intake::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.lalc-ai-chatbot-message {
    border-radius: 16px;
    line-height: 1.45;
    max-width: 88%;
    padding: 10px 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.lalc-ai-chatbot-message-time {
    display: block;
    font-size: 10.5px;
    margin-top: 4px;
    opacity: .65;
    text-align: right;
}

.lalc-ai-chatbot-bot {
    align-self: flex-start;
    background: #eef1f5;
    border-bottom-left-radius: 4px;
    color: #1f2937;
}

.lalc-ai-chatbot-user {
    align-self: flex-end;
    background: var(--lalc-primary);
    border-bottom-right-radius: 4px;
    color: #fff;
}

.lalc-ai-chatbot-form {
    align-items: center;
    background: #f1f3f6;
    border-radius: 999px;
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    /* margin-top:auto empuja el compositor Y todo lo que le sigue (WhatsApp,
       marca, nota) hasta el fondo del panel: el espacio sobrante queda ARRIBA
       (en los mensajes), nunca como franja blanca despues del footer. */
    margin: auto 12px 12px;
    padding: 6px 6px 6px 16px;
}

/*
 * El boton "Iniciar chat" queda SEPARADO del area con scroll (igual que el
 * boton de enviar del chat, que tampoco se mueve con los mensajes). Asi el
 * boton SIEMPRE es visible y alcanzable, sin depender de que el scroll del
 * formulario se calcule "perfecto" en cada navegador/tema.
 */
.lalc-ai-chatbot-intake {
    background: #fff;
    border-top: 1px solid #edf0f4;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.lalc-ai-chatbot-intake-fields {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 12px 70px;
}

/* Pista visual de que hay mas campos abajo: un pequeno degradado que se
   desvanece hacia blanco justo antes del boton fijo. */
.lalc-ai-chatbot-intake-fields::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    bottom: 58px;
    content: "";
    height: 14px;
    left: 0;
    pointer-events: none;
    position: sticky;
    right: 0;
    width: 100%;
}

/*
 * Fijo contra el borde INFERIOR DEL PANEL (no del formulario): igual que el
 * encabezado se fijo contra el borde superior, asi el boton siempre queda
 * pegado abajo del todo sin importar cuanto (o poco) espacio ocupe el area
 * de campos con scroll.
 */
.lalc-ai-chatbot-intake-footer {
    background: #fff;
    bottom: 0;
    left: 0;
    padding: 8px 12px 12px;
    position: absolute;
    right: 0;
}

.lalc-ai-chatbot-intake-title {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px;
}

.lalc-ai-chatbot-intake input,
.lalc-ai-chatbot-intake select {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    min-height: 38px;
    padding: 8px 10px;
    width: 100%;
}

.lalc-ai-chatbot-intake button {
    background: var(--lalc-primary);
    border: 0;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    min-height: 42px;
    width: 100%;
}

.lalc-ai-chatbot-needs-intake .lalc-ai-chatbot-form {
    display: none;
}

.lalc-ai-chatbot-needs-intake:not(.lalc-ai-chatbot-intake-complete) .lalc-ai-chatbot-messages,
.lalc-ai-chatbot-needs-intake:not(.lalc-ai-chatbot-intake-complete) .lalc-ai-chatbot-note,
.lalc-ai-chatbot-needs-intake:not(.lalc-ai-chatbot-intake-complete) .lalc-ai-chatbot-whatsapp,
.lalc-ai-chatbot-needs-intake:not(.lalc-ai-chatbot-intake-complete) .lalc-ai-chatbot-brand {
    display: none;
}

/* Boton(es) para hablar con un representante por WhatsApp. */
.lalc-ai-chatbot-whatsapp {
    background: #fff;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 8px 12px;
}

.lalc-ai-chatbot-whatsapp a {
    align-items: center;
    background: #25d366;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    padding: 7px 14px;
    text-decoration: none;
}

.lalc-ai-chatbot-whatsapp a:hover {
    background: #1eb658;
    color: #fff;
}

.lalc-ai-chatbot-intake-complete .lalc-ai-chatbot-intake {
    display: none;
}

.lalc-ai-chatbot-needs-intake.lalc-ai-chatbot-intake-complete .lalc-ai-chatbot-form {
    display: flex;
}

.lalc-ai-chatbot-form textarea {
    background: transparent;
    border: 0;
    flex: 1 1 auto;
    max-height: 90px;
    min-height: 22px;
    padding: 8px 0;
    resize: none;
    width: 100%;
}

.lalc-ai-chatbot-form textarea:focus {
    outline: none;
}

.lalc-ai-chatbot-form button {
    align-items: center;
    background: var(--lalc-primary);
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex: none;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.lalc-ai-chatbot-form button:hover {
    background: var(--lalc-primary-light);
}

.lalc-ai-chatbot-note {
    background: #ebeeef;
    color: #64748b;
    flex: 0 0 auto;
    font-size: 10px;
    margin: 0;
    padding: 2px 16px 8px;
    text-align: center;
}

.lalc-ai-chatbot-brand {
    background: #ebeeef;
    color: #64748b;
    flex: 0 0 auto;
    font-size: 11px;
    margin: 0;
    padding: 6px 16px 2px;
    text-align: center;
}

.lalc-ai-chatbot-brand span {
    color: var(--lalc-primary);
    font-weight: 700;
}

/*
 * El panel flotante ya se "estira" de arriba a abajo en CUALQUIER tamano de
 * pantalla (reglas de arriba). En celulares solo achicamos un poco los
 * margenes laterales/inferior y el ancho, para aprovechar mejor el espacio.
 */
@media (max-width: 520px) {
    .lalc-ai-chatbot-bottom_left .lalc-ai-chatbot-toggle,
    .lalc-ai-chatbot-bottom_right .lalc-ai-chatbot-toggle {
        bottom: 14px;
    }

    .lalc-ai-chatbot-top_left .lalc-ai-chatbot-toggle,
    .lalc-ai-chatbot-top_right .lalc-ai-chatbot-toggle {
        top: 14px;
    }

    .lalc-ai-chatbot-bottom_left .lalc-ai-chatbot-toggle,
    .lalc-ai-chatbot-top_left .lalc-ai-chatbot-toggle {
        left: 14px;
    }

    .lalc-ai-chatbot-bottom_right .lalc-ai-chatbot-toggle,
    .lalc-ai-chatbot-top_right .lalc-ai-chatbot-toggle {
        right: 14px;
    }

    .lalc-ai-chatbot-floating .lalc-ai-chatbot-panel {
        width: calc(100vw - 28px);
    }

    .lalc-ai-chatbot-bottom_left .lalc-ai-chatbot-panel,
    .lalc-ai-chatbot-bottom_right .lalc-ai-chatbot-panel {
        bottom: 70px;
    }

    .lalc-ai-chatbot-top_left .lalc-ai-chatbot-panel,
    .lalc-ai-chatbot-top_right .lalc-ai-chatbot-panel {
        top: 70px;
    }

    .lalc-ai-chatbot-bottom_left .lalc-ai-chatbot-panel,
    .lalc-ai-chatbot-top_left .lalc-ai-chatbot-panel {
        left: 14px;
    }

    .lalc-ai-chatbot-bottom_right .lalc-ai-chatbot-panel,
    .lalc-ai-chatbot-top_right .lalc-ai-chatbot-panel {
        right: 14px;
    }
}