/* ============================================================
   Chat IA CPT — Chat Widget CSS
   Aplica en frontend y en zona de prueba del backend.
   ============================================================ */

/* ── Variables de tema (se sobreescriben desde PHP con CSS vars) ─────────────── */
:root {
    --cai-primary:     #6366f1;
    --cai-secondary:   #8b5cf6;
    --cai-bubble:      #6366f1;
    --cai-bubble-size: 60px;
    --cai-radius:      16px;
    --cai-chat-w:      360px;
    --cai-chat-h:      520px;
    --cai-white:       #ffffff;
    --cai-gray-50:     #f8fafc;
    --cai-gray-100:    #f1f5f9;
    --cai-gray-200:    #e2e8f0;
    --cai-gray-400:    #94a3b8;
    --cai-gray-700:    #334155;
    --cai-gray-900:    #0f172a;
    --cai-shadow-bubble: 0 8px 32px rgba(99,102,241,.45);
    --cai-shadow-box:    0 16px 48px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.1);
    --cai-t: 280ms cubic-bezier(.4,0,.2,1);
}

/* ── Widget wrapper — solo contenedor lógico, sin posición propia ────────────── */
.chaiacpt-widget {
    display: contents; /* No crea caja de layout; los hijos se posicionan solos */
}

/* ── Burbuja: position fixed SOLO en el frontend, no en el admin ─────────────── */
body:not(.wp-admin) .chaiacpt-bubble {
    position: fixed !important;
    z-index: 999999 !important;
}

.chaiacpt-bubble {
    pointer-events: all;
    width:  var(--cai-bubble-size, 40px);
    height: var(--cai-bubble-size, 40px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cai-bubble, #6366f1), var(--cai-secondary, #8b5cf6));
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(99,102,241,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 280ms cubic-bezier(.4,0,.2,1), box-shadow 280ms cubic-bezier(.4,0,.2,1);
}

/* Posición de la burbuja según variante del wrapper.
   En móvil, la barra de gestos del sistema se superpone a la parte baja de la ventana:
   sin contar con ella la burbuja queda medio tapada hasta que el usuario hace scroll.
   env(safe-area-inset-*) devuelve 0 en escritorio, así que no altera esa vista. */
.chaiacpt-widget--bottom-right .chaiacpt-bubble { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: calc(24px + env(safe-area-inset-right, 0px)); }
.chaiacpt-widget--bottom-left  .chaiacpt-bubble { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left:  calc(24px + env(safe-area-inset-left, 0px)); }
.chaiacpt-widget--top-right    .chaiacpt-bubble { top:    calc(24px + env(safe-area-inset-top, 0px)); right: calc(24px + env(safe-area-inset-right, 0px)); }
.chaiacpt-widget--top-left     .chaiacpt-bubble { top:    calc(24px + env(safe-area-inset-top, 0px)); left:  calc(24px + env(safe-area-inset-left, 0px)); }

/* En pantallas de móvil se añade holgura fija además de la zona segura: env() solo
   devuelve un valor real si el tema declara viewport-fit=cover en el meta viewport,
   y eso no está bajo control del plugin. Con este margen la burbuja queda por encima
   de la barra de gestos aunque el tema no lo declare. */
@media ( max-width: 782px ) {
    /* Separación inferior de la burbuja.
       Se usa max() en lugar de sumar: la barra de gestos del sistema y el margen base
       cubren la misma necesidad, y sumarlos deja la burbuja flotando demasiado alta.
       Prevalece el mayor de los dos, que es justo lo que hace falta. */
    .chaiacpt-widget--bottom-right .chaiacpt-bubble,
    .chaiacpt-widget--bottom-left  .chaiacpt-bubble {
        bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 14px));
    }

    /* La caja no puede seguir anclada a una esquina con un ancho fijo de 360 px:
       en una pantalla de 360 px se sale por el lado contrario. En móvil se ancla a
       ambos lados para que quede centrada y con aire por los cuatro costados. */
    .chaiacpt-widget--bottom-right .chaiacpt-chat-box,
    .chaiacpt-widget--bottom-left  .chaiacpt-chat-box,
    .chaiacpt-widget--top-right    .chaiacpt-chat-box,
    .chaiacpt-widget--top-left     .chaiacpt-chat-box {
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        bottom: calc(var(--cai-bubble-size, 40px) + max(38px, calc(env(safe-area-inset-bottom, 0px) + 28px))) !important;
        top: auto !important;
        height: auto !important;
        max-height: calc(100vh - var(--cai-bubble-size, 40px) - 130px) !important;
        min-height: 260px;
    }
}

/* Donde el navegador soporta unidades dinámicas se usa dvh: refleja el alto realmente
   visible cuando aparecen o desaparecen las barras del navegador al hacer scroll. */
@supports ( height: 100dvh ) {
    @media ( max-width: 782px ) {
        .chaiacpt-widget--bottom-right .chaiacpt-chat-box,
        .chaiacpt-widget--bottom-left  .chaiacpt-chat-box,
        .chaiacpt-widget--top-right    .chaiacpt-chat-box,
        .chaiacpt-widget--top-left     .chaiacpt-chat-box {
            max-height: calc(100dvh - var(--cai-bubble-size, 40px) - 130px) !important;
        }
    }
}


.chaiacpt-bubble:hover  { transform: scale(1.08); box-shadow: 0 12px 40px rgba(99,102,241,.6); }
.chaiacpt-bubble:active { transform: scale(.96); }

.chaiacpt-bubble__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.chaiacpt-bubble__icon,
.chaiacpt-bubble__close {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 280ms cubic-bezier(.4,0,.2,1), transform 280ms cubic-bezier(.4,0,.2,1);
}

.chaiacpt-bubble__icon svg,
.chaiacpt-bubble__close svg { width: 50%; height: 50%; stroke: #fff; }

.chaiacpt-bubble__close { opacity: 0; transform: rotate(-90deg); }

.chaiacpt-bubble.is-open .chaiacpt-bubble__icon { opacity: 0; transform: rotate(90deg); }
.chaiacpt-bubble.is-open .chaiacpt-bubble__close { opacity: 1; transform: rotate(0deg); }

/* Pulso de atención */
.chaiacpt-bubble::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--cai-bubble, #6366f1);
    opacity: 0;
    animation: cai-pulse 2.5s ease-out 1.5s 3;
}

@keyframes cai-pulse {
    0%   { opacity: .6; transform: scale(1); }
    100% { opacity: 0;  transform: scale(1.7); }
}

/* ── Caja de chat: position fixed SOLO en el frontend ────────────────────────── */
body:not(.wp-admin) .chaiacpt-chat-box {
    position: fixed !important;
    z-index: 999998 !important;
}

.chaiacpt-chat-box {
    pointer-events: none;
    width: 360px;
    /* 100vw incluye el ancho de la barra de desplazamiento y provoca desbordamiento
       lateral en algunos navegadores móviles. 100% se ciñe al ancho real disponible. */
    max-width: calc(100% - 32px);
    height: 520px;
    max-height: calc(100vh - 120px);
    background: #ffffff;
    border-radius: var(--cai-radius, 16px);
    box-shadow: 0 16px 48px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transition: opacity 280ms cubic-bezier(.4,0,.2,1), transform 280ms cubic-bezier(.4,0,.2,1);
}

/* Posición de la caja según variante — aparece encima de la burbuja (o debajo si top) */
.chaiacpt-widget--bottom-right .chaiacpt-chat-box { bottom: calc(var(--cai-bubble-size, 40px) + 40px + env(safe-area-inset-bottom, 0px)); right: calc(24px + env(safe-area-inset-right, 0px)); }
.chaiacpt-widget--bottom-left  .chaiacpt-chat-box { bottom: calc(var(--cai-bubble-size, 40px) + 40px + env(safe-area-inset-bottom, 0px)); left:  calc(24px + env(safe-area-inset-left, 0px)); }
.chaiacpt-widget--top-right    .chaiacpt-chat-box { top:    calc(var(--cai-bubble-size, 40px) + 40px); right: 24px; }
.chaiacpt-widget--top-left     .chaiacpt-chat-box { top:    calc(var(--cai-bubble-size, 40px) + 40px); left:  24px; }

.chaiacpt-chat-box.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}


/* ── Header del chat ─────────────────────────────────────────────────────────── */
.chaiacpt-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--cai-primary), var(--cai-secondary));
    color: #fff;
    flex-shrink: 0;
}

.chaiacpt-chat-header__info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chaiacpt-chat-header__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.4);
}

.chaiacpt-chat-header__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chaiacpt-chat-header__icon svg { width: 18px; height: 18px; stroke: #fff; }

.chaiacpt-chat-header__info strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.chaiacpt-chat-header__status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    opacity: .85;
    color: #fff;
}

.chaiacpt-dot-online {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2px rgba(74,222,128,.3);
}

.chaiacpt-chat-header__close {
    background: rgba(255,255,255,.15);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--cai-t);
    color: #fff;
    padding: 0;
}

.chaiacpt-chat-header__close:hover { background: rgba(255,255,255,.3); }
.chaiacpt-chat-header__close svg { width: 16px; height: 16px; stroke: currentColor; }

/* ── Mensajes ────────────────────────────────────────────────────────────────── */
.chaiacpt-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    background: var(--cai-gray-50);
}

.chaiacpt-chat-messages::-webkit-scrollbar { width: 4px; }
.chaiacpt-chat-messages::-webkit-scrollbar-track { background: transparent; }
.chaiacpt-chat-messages::-webkit-scrollbar-thumb { background: var(--cai-gray-200); border-radius: 4px; }

.chaiacpt-msg { display: flex; flex-direction: column; max-width: 82%; }
.chaiacpt-msg--bot  { align-self: flex-start; align-items: flex-start; }
.chaiacpt-msg--user { align-self: flex-end;   align-items: flex-end; }

.chaiacpt-msg__bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.chaiacpt-msg__bubble a {
    color: var(--cai-primary);
    text-decoration: underline;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.chaiacpt-msg--user .chaiacpt-msg__bubble a {
    color: #ffffff;
}


.chaiacpt-msg--bot .chaiacpt-msg__bubble {
    background: var(--cai-white);
    color: var(--cai-gray-700);
    border-radius: 4px 16px 16px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}

.chaiacpt-msg--user .chaiacpt-msg__bubble {
    background: linear-gradient(135deg, var(--cai-primary), var(--cai-secondary));
    color: #fff;
    border-radius: 16px 16px 4px 16px;
}

.chaiacpt-msg__time {
    font-size: 10px;
    color: var(--cai-gray-400);
    margin-top: 3px;
    padding: 0 4px;
}

/* Typing indicator */
.chaiacpt-typing {
    display: none;
    padding: 6px 16px 2px;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.chaiacpt-typing.is-visible { display: flex; }

.chaiacpt-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cai-gray-400);
    animation: cai-typing .9s ease-in-out infinite;
}

.chaiacpt-typing span:nth-child(2) { animation-delay: .15s; }
.chaiacpt-typing span:nth-child(3) { animation-delay: .30s; }

@keyframes cai-typing {
    0%,60%,100% { transform: translateY(0);    opacity: .4; }
    30%          { transform: translateY(-6px); opacity: 1;  }
}

/* ── Input ───────────────────────────────────────────────────────────────────── */
.chaiacpt-chat-input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 14px;
    background: var(--cai-white);
    border-top: 1px solid var(--cai-gray-100);
    flex-shrink: 0;
}

.chaiacpt-chat-input__field {
    flex: 1;
    border: 1.5px solid var(--cai-gray-200);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-family: inherit;
    resize: none;
    max-height: 100px;
    line-height: 1.5;
    color: var(--cai-gray-700);
    background: var(--cai-gray-50);
    transition: border-color var(--cai-t);
    overflow-y: auto;
}

.chaiacpt-chat-input__field:focus {
    outline: none;
    border-color: var(--cai-primary);
    background: var(--cai-white);
}

.chaiacpt-chat-input__field::placeholder { color: var(--cai-gray-400); }

.chaiacpt-chat-input__send {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cai-primary), var(--cai-secondary));
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity var(--cai-t), transform var(--cai-t);
}

.chaiacpt-chat-input__send:hover { opacity: .88; }
.chaiacpt-chat-input__send:active { transform: scale(.94); }
.chaiacpt-chat-input__send svg { width: 16px; height: 16px; stroke: #fff; }

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.chaiacpt-chat-footer {
    padding: 6px 14px;
    text-align: center;
    font-size: 10px;
    color: var(--cai-gray-400);
    background: var(--cai-white);
    border-top: 1px solid var(--cai-gray-100);
    flex-shrink: 0;
}

.chaiacpt-chat-footer strong { color: var(--cai-gray-700); }

/* ── Zona de prueba del backend ──────────────────────────────────────────────── */
.chaiacpt-test-container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    .chaiacpt-test-container { grid-template-columns: 1fr; }
}

.chaiacpt-test-screen {
    background: #fff;
    border: 1px solid var(--cai-gray-200);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    min-height: 560px;
}

.chaiacpt-test-screen__header {
    background: var(--cai-gray-100);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--cai-gray-200);
}

.chaiacpt-test-screen__dots { display: flex; gap: 5px; }

.chaiacpt-test-screen__dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cai-gray-300, #cbd5e1);
}

.chaiacpt-test-screen__dots span:nth-child(1) { background: #fc635d; }
.chaiacpt-test-screen__dots span:nth-child(2) { background: #fdbc40; }
.chaiacpt-test-screen__dots span:nth-child(3) { background: #34c749; }

.chaiacpt-test-screen__url {
    font-size: 11.5px;
    color: var(--cai-gray-400);
    background: var(--cai-white);
    border: 1px solid var(--cai-gray-200);
    border-radius: 6px;
    padding: 3px 10px;
    flex: 1;
    text-align: center;
}

.chaiacpt-test-screen__body {
    position: relative;
    min-height: 500px;
    padding: 24px;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    isolation: isolate;
}

.chaiacpt-test-page-dummy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0;
}

.chaiacpt-test-dummy-line {
    height: 12px;
    background: var(--cai-gray-100);
    border-radius: 4px;
}

.chaiacpt-test-dummy-block {
    height: 120px;
    background: var(--cai-gray-100);
    border-radius: 8px;
    margin: 8px 0;
}

/* En el test, la burbuja y caja no usan position:fixed sino position:absolute dentro del contenedor */
.chaiacpt-test-widget-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Forzar position:absolute en vez de fixed dentro del test */
.chaiacpt-test-widget-wrap .chaiacpt-bubble {
    position: absolute !important;
}
.chaiacpt-test-widget-wrap .chaiacpt-chat-box {
    position: absolute !important;
    max-height: 420px;
    max-width: 320px;
}

.chaiacpt-test-widget-wrap .chaiacpt-widget--bottom-right .chaiacpt-bubble { bottom: 16px; right: 16px; }
.chaiacpt-test-widget-wrap .chaiacpt-widget--bottom-left  .chaiacpt-bubble { bottom: 16px; left:  16px; }
.chaiacpt-test-widget-wrap .chaiacpt-widget--top-right    .chaiacpt-bubble { top: 16px;    right: 16px; }
.chaiacpt-test-widget-wrap .chaiacpt-widget--top-left     .chaiacpt-bubble { top: 16px;    left:  16px; }

.chaiacpt-test-widget-wrap .chaiacpt-widget--bottom-right .chaiacpt-chat-box { bottom: calc(var(--cai-bubble-size, 40px) + 28px); right: 16px; }
.chaiacpt-test-widget-wrap .chaiacpt-widget--bottom-left  .chaiacpt-chat-box { bottom: calc(var(--cai-bubble-size, 40px) + 28px); left:  16px; }
.chaiacpt-test-widget-wrap .chaiacpt-widget--top-right    .chaiacpt-chat-box { top:    calc(var(--cai-bubble-size, 40px) + 28px); right: 16px; }
.chaiacpt-test-widget-wrap .chaiacpt-widget--top-left     .chaiacpt-chat-box { top:    calc(var(--cai-bubble-size, 40px) + 28px); left:  16px; }

/* Panel info */
.chaiacpt-test-info {
    background: var(--cai-white);
    border: 1px solid var(--cai-gray-200);
    border-radius: 12px;
    padding: 20px;
    align-self: start;
}

.chaiacpt-test-info h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--cai-gray-900);
    margin: 0 0 14px;
}

.chaiacpt-test-steps {
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 16px;
}

.chaiacpt-test-steps li { font-size: 13px; color: var(--cai-gray-700); line-height: 1.5; }
.chaiacpt-test-steps li strong { color: var(--cai-gray-900); }
.chaiacpt-test-steps li a { color: var(--cai-primary); text-decoration: none; }
.chaiacpt-test-steps li a:hover { text-decoration: underline; }
.chaiacpt-test-steps kbd { background: var(--cai-gray-100); border: 1px solid var(--cai-gray-200); border-radius: 4px; padding: 1px 5px; font-size: 11px; }

.chaiacpt-test-note {
    font-size: 12px;
    color: var(--cai-gray-400);
    background: var(--cai-gray-50);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0;
}

/* ── Mobile ──────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .chaiacpt-chat-box {
        --cai-chat-w: calc(100% - 20px);
        --cai-chat-h: 70vh;
    }
}

/* ── Contención lateral ───────────────────────────────────────────────────────
   Ningún elemento del chat debe empujar el ancho de la página. Con overflow-x
   contenido, si algo se saliera se recorta en lugar de habilitar desplazamiento
   lateral en toda la web. Se aplica solo al widget, nunca al documento del cliente. */
.chaiacpt-widget,
.chaiacpt-bubble,
.chaiacpt-chat-box {
    max-width: 100%;
    overscroll-behavior: contain;
}

.chaiacpt-chat-box {
    contain: layout paint;
}

/* ── Widget en zona de prueba del backend ────────────────────── */
.chaiacpt-test-widget-area {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: all;
}

.chaiacpt-test-widget-area.chaiacpt-widget--bottom-right { bottom: 16px; right: 16px; align-items: flex-end; }
.chaiacpt-test-widget-area.chaiacpt-widget--bottom-left  { bottom: 16px; left:  16px; align-items: flex-start; }
.chaiacpt-test-widget-area.chaiacpt-widget--top-right    { top: 16px;    right: 16px; align-items: flex-end;   flex-direction: column-reverse; }
.chaiacpt-test-widget-area.chaiacpt-widget--top-left     { top: 16px;    left:  16px; align-items: flex-start; flex-direction: column-reverse; }

.chaiacpt-test-widget-area .chaiacpt-bubble { position: relative !important; }
.chaiacpt-test-widget-area .chaiacpt-chat-box {
    position: relative !important;
    max-height: 380px;
    max-width: 300px;
    width: 300px;
}

/* ── Chat inline en zona de prueba ──────────────────────────── */
.chaiacpt-test-chat-preview {
    flex-shrink: 0;
}

.chaiacpt-test-widget-inline {
    display: flex !important;  /* Sobrescribe display:contents del .chaiacpt-widget base */
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.chaiacpt-test-widget-inline .chaiacpt-chat-box {
    position: relative !important;
    width: 300px;
    height: 400px;
    max-height: none;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: all !important;
}

.chaiacpt-test-widget-inline .chaiacpt-chat-box,
.chaiacpt-test-widget-inline .chaiacpt-bubble {
    z-index: 1 !important;
    position: relative !important;
}

.chaiacpt-bubble--preview {
    cursor: default;
}

/* ── Formulario de contacto dentro del chat ──────────────────────────────────
   Todas las reglas van con !important y anidadas bajo .chaiacpt-chat-box porque
   el formulario vive dentro del tema del cliente: sin esto hereda bordes, colores
   y tipografías del sitio y desentona con el resto del chat.
   ─────────────────────────────────────────────────────────────────────────── */
.chaiacpt-chat-box .chaiacpt-contact-form {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 2px 0 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.chaiacpt-chat-box .chaiacpt-contact-form__intro {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #475569 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-weight: 400 !important;
}

.chaiacpt-chat-box .chaiacpt-contact-form__fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.chaiacpt-chat-box .chaiacpt-contact-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border: 1px solid #dfe3e8 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
    min-height: 0 !important;
    height: auto !important;
}

.chaiacpt-chat-box textarea.chaiacpt-contact-input {
    resize: none !important;
    min-height: 72px !important;
}

.chaiacpt-chat-box .chaiacpt-contact-input::placeholder {
    color: #9aa4b2 !important;
    opacity: 1 !important;
    font-size: 13.5px !important;
}

.chaiacpt-chat-box .chaiacpt-contact-input:focus {
    border-color: var(--cai-primary, #6366f1) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cai-primary, #6366f1) 18%, transparent) !important;
}

.chaiacpt-chat-box .chaiacpt-contact-submit {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 2px 0 0 !important;
    padding: 11px 14px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--cai-primary, #6366f1) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: filter .18s ease, transform .12s ease !important;
    min-height: 0 !important;
    height: auto !important;
}

.chaiacpt-chat-box .chaiacpt-contact-submit:hover   { filter: brightness(1.07) !important; }
.chaiacpt-chat-box .chaiacpt-contact-submit:active  { transform: scale(.99) !important; }
.chaiacpt-chat-box .chaiacpt-contact-submit:disabled{ opacity: .55 !important; cursor: not-allowed !important; transform: none !important; }

.chaiacpt-chat-box .chaiacpt-contact-form__error {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: #b42318 !important;
    background: #fef3f2 !important;
    border-radius: 8px !important;
    margin: 6px 0 0 !important;
    padding: 8px 10px !important;
    font-family: inherit !important;
}

.chaiacpt-chat-box .chaiacpt-contact-form__success {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #067647 !important;
    background: #ecfdf3 !important;
    border-radius: 9px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    text-align: center !important;
    font-family: inherit !important;
}

/* La burbuja que contiene el formulario ocupa todo el ancho y no pinta caja propia */
.chaiacpt-msg--bot .chaiacpt-msg__bubble:has(.chaiacpt-contact-form) {
    width: 100% !important;
    max-width: 100% !important;
    background: #f8fafc !important;
    border: 1px solid #eaeef2 !important;
}


/* Honeypot antispam: oculto para usuarios reales, visible para bots básicos en el DOM. */
.chaiacpt-contact-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── CTA WhatsApp dentro del chat ─────────────────────────── */
.chaiacpt-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #22c55e;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(34,197,94,.24);
    transition: opacity var(--cai-t), transform var(--cai-t), box-shadow var(--cai-t);
}

.chaiacpt-whatsapp-btn::before {
    content: '↗';
    font-size: 12px;
    line-height: 1;
}

.chaiacpt-whatsapp-btn:hover {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(34,197,94,.32);
}

.chaiacpt-whatsapp-btn--inside-form {
    margin: 2px 0 4px;
    align-self: flex-start;
}

/* Cloudflare Turnstile invisible holder */
.chaiacpt-turnstile-holder {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ── Pestaña lateral (alternativa a la burbuja en móvil) ──────────────────────
   Se ancla al borde y solo redondea el lado interior, de modo que parece encajada
   en la pantalla en lugar de flotar sobre el contenido. Ocupa una fracción de la
   superficie de un botón circular, que es justo el problema que resuelve. */
.chaiacpt-tab {
    position: fixed;
    top: var(--cai-tab-top, 55%);
    /* El desplazamiento vertical se hace con margin y no con transform: un transform
       en un elemento anclado al borde puede contarse en el ancho del documento antes
       de aplicarse, y eso genera scroll horizontal en algunos navegadores móviles. */
    margin-top: -34px;
    /* Contiene el pintado dentro de la caja del elemento, de modo que ni la sombra ni
       la animación puedan ampliar el área desplazable de la página. */
    contain: layout paint;
    max-width: 60px;
    z-index: 999999;
    display: none;                 /* solo aparece en móvil */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 13px 7px;
    min-width: 34px;
    border: 0;
    cursor: pointer;
    background: linear-gradient(160deg, var(--cai-primary, #6366f1), var(--cai-secondary, #8b5cf6));
    color: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.22);
    transition: filter .2s ease, padding .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.chaiacpt-tab--right {
    right: 0;
    border-radius: 14px 0 0 14px;
    padding-right: 5px;
}

.chaiacpt-tab--left {
    left: 0;
    border-radius: 0 14px 14px 0;
    padding-left: 5px;
}

.chaiacpt-tab:active { filter: brightness(1.1); }

.chaiacpt-tab__icon {
    display: flex;
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}
.chaiacpt-tab__icon svg { width: 100%; height: 100%; }

/* El texto se escribe en vertical para que la pestaña siga siendo estrecha. */
.chaiacpt-tab__label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1;
    max-height: 92px;
    overflow: hidden;
}

.chaiacpt-tab__close {
    display: none;
    width: 17px;
    height: 17px;
}
.chaiacpt-tab__close svg { width: 100%; height: 100%; }

/* Con el chat abierto, la pestaña pasa a ser el botón de cerrar. */
.chaiacpt-tab.is-open .chaiacpt-tab__icon,
.chaiacpt-tab.is-open .chaiacpt-tab__label { display: none; }
.chaiacpt-tab.is-open .chaiacpt-tab__close { display: flex; }

/* Latido sutil para que se perciba como algo vivo y no como un adorno del tema. */
/* El latido se hace con un brillo interior: un anillo hacia fuera podría ampliar
   el área pintada junto al borde de la pantalla. */
@keyframes chaiacpt-tab-pulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,.22), inset 0 0 0 0 rgba(255,255,255,0); }
    50%      { box-shadow: 0 4px 18px rgba(0,0,0,.22), inset 0 0 14px 0 rgba(255,255,255,.28); }
}

@media ( max-width: 782px ) {
    /* En móvil manda la pestaña y la burbuja desaparece. */
    .chaiacpt-widget--tab-launcher .chaiacpt-bubble { display: none !important; }
    .chaiacpt-tab { display: flex; animation: chaiacpt-tab-pulse 3.5s ease-in-out infinite; }
}

@media ( prefers-reduced-motion: reduce ) {
    .chaiacpt-tab { animation: none; }
}

/* ── Burbuja con texto ────────────────────────────────────────────────────────
   Con etiqueta, el círculo se convierte en píldora: el ancho pasa a ser automático
   y el alto lo sigue marcando el tamaño configurado, de modo que sigue alineada
   con el resto de posiciones. */
.chaiacpt-bubble--labelled {
    width: auto !important;
    min-width: 0;
    /* El alto lo marca el tamaño configurado, con un mínimo cómodo para el dedo. */
    height: max(46px, var(--cai-bubble-size, 40px)) !important;
    padding: 0 20px;
    border-radius: 999px !important;
    gap: 10px;
    overflow: visible;
}

/* En modo píldora el icono deja de ir superpuesto para entrar en el flujo del flex:
   así se alinea con el texto en lugar de quedar suelto en una esquina. */
.chaiacpt-bubble--labelled .chaiacpt-bubble__icon {
    position: static;
    inset: auto;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.chaiacpt-bubble--labelled .chaiacpt-bubble__icon svg {
    width: 100%;
    height: 100%;
}

/* El aspa de cerrar sigue superpuesta y centrada sobre toda la píldora. */
.chaiacpt-bubble--labelled .chaiacpt-bubble__close {
    position: absolute;
    inset: 0;
}
.chaiacpt-bubble--labelled .chaiacpt-bubble__close svg {
    width: 20px;
    height: 20px;
}

.chaiacpt-bubble__label {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .1px;
    color: #fff;
    white-space: nowrap;
    line-height: 1;
    font-family: inherit;
    /* Compensa el desplazamiento óptico de las mayúsculas respecto al icono. */
    padding-top: 1px;
}

/* El símbolo de IA tiene trazos más finos y radiales que el bocadillo: al 50% del
   círculo se ve endeble. Se le da algo más de superficie para que pese lo mismo. */
.chaiacpt-bubble--ai .chaiacpt-bubble__icon svg {
    width: 58%;
    height: 58%;
}

/* Al abrirse, la píldora vuelve a círculo para no competir con la caja de chat. */
.chaiacpt-bubble--labelled.is-open {
    width: max(46px, var(--cai-bubble-size, 40px)) !important;
    min-width: 0;
    padding: 0;
    gap: 0;
}
.chaiacpt-bubble--labelled.is-open .chaiacpt-bubble__label { display: none; }

/* En pantallas muy estrechas se prescinde del texto: el círculo ocupa menos. */
@media ( max-width: 380px ) {
    .chaiacpt-bubble--labelled {
        width: var(--cai-bubble-size, 40px) !important;
        min-width: 0;
        padding: 0;
        gap: 0;
    }
    .chaiacpt-bubble--labelled .chaiacpt-bubble__label { display: none; }
}