/* ============================================================
   iWeb AI Chat — Widget del frontend
   v1.9.5: Blindado contra themes agresivos (Divi, Avada, Astra, etc.).
   Las propiedades críticas usan !important para no ser sobreescritas.
   ============================================================ */

/* Reset agresivo dentro del widget — neutraliza estilos heredados del theme */
#iweb-chat-widget,
#iweb-chat-widget *,
#iweb-chat-widget *::before,
#iweb-chat-widget *::after {
    box-sizing: border-box !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

#iweb-chat-widget {
    /* Brand cereza del logo iWeb AI Agent — sin azules. */
    --iweb-blue: #E11D48;
    --iweb-purple: #BE123C;
    --iweb-brand-light: #FFE4E9;
    --iweb-gray-50: #f8fafc;
    --iweb-gray-100: #f1f5f9;
    --iweb-gray-200: #e2e8f0;
    --iweb-gray-500: #64748b;
    --iweb-gray-800: #1e293b;
    --iweb-gradient: linear-gradient(135deg, var(--iweb-blue) 0%, var(--iweb-purple) 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: var(--iweb-gray-800) !important;
}

/* v2.0.0-alpha.7: Gate del input footer mientras el lead form está activo.
   La especificidad debe SUPERAR la del rule de .iweb-chat-footer que pone
   display:flex !important (usa #iweb-chat-form que es alta especificidad). */
#iweb-chat-widget form#iweb-chat-form.iweb-hidden-by-leadgate,
#iweb-chat-widget #iweb-chat-form.iweb-hidden-by-leadgate,
#iweb-chat-widget .iweb-chat-footer.iweb-hidden-by-leadgate,
#iweb-chat-widget .iweb-branding.iweb-hidden-by-leadgate {
	display: none !important;
}

/* Blindaje contra Divi/Avada/temas que sobreescriben botones e inputs */
#iweb-chat-widget button {
    text-shadow: none !important;
    line-height: normal !important;
    min-height: auto !important;
    font-family: inherit !important;
}
#iweb-chat-widget input,
#iweb-chat-widget textarea,
#iweb-chat-widget select {
    background: #fff !important;
    color: var(--iweb-gray-800) !important;
    line-height: normal !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: inherit !important;
}
#iweb-chat-widget input:focus,
#iweb-chat-widget textarea:focus,
#iweb-chat-widget select:focus {
    /* Usa el color primario configurado en Settings (dynamic via JS) */
    border-color: var(--iweb-blue) !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08) !important;
}

/* Botón flotante — blindado contra theme overrides */
#iweb-chat-fab {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: var(--iweb-gradient) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(225, 29, 72, 0.4) !important;
    z-index: 999998 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: none !important;

    /* v1.9.9: Animación de bouncing/saltito para llamar la atención.
       Cada ~4s da un pequeño salto. Se detiene cuando se abre el chat o al hacer hover. */
    animation: iwebFabBounce 4s ease-in-out infinite;
    animation-play-state: var(--iweb-bounce-play, running);
}

/* Ripple ring — expands and fades outward from the FAB */
#iweb-chat-fab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--iweb-chat-color, var(--iweb-blue));
    z-index: -1;
    animation: iwebFabRipple 2s ease-out infinite;
    animation-play-state: var(--iweb-ripple-play, running);
}

/* Stop ripple AND bouncing when chat is open */
#iweb-chat-fab.iweb-active {
    animation: none !important;
}
#iweb-chat-fab.iweb-active::before {
    animation: none;
}

/* Pausar el bounce mientras el usuario hace hover (no choca con el scale del hover) */
#iweb-chat-fab:hover {
    animation-play-state: paused !important;
}

#iweb-chat-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(225, 29, 72, 0.5);
}

#iweb-chat-fab svg {
    position: relative;
    width: 28px;
    height: 28px;
    color: white;
    z-index: 1;
}

#iweb-chat-fab.iweb-active {
    transform: rotate(180deg) scale(0.9);
}

@keyframes iwebFabRipple {
    0%   { transform: scale(1);   opacity: 0.55; }
    100% { transform: scale(1.65); opacity: 0; }
}

/* v1.9.9: Bouncing del FAB — 2 saltitos cada 4s, reposa el resto del tiempo */
@keyframes iwebFabBounce {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(-14px);
    }
    80% {
        transform: translateY(0);
    }
    85% {
        transform: translateY(-7px);
    }
    90% {
        transform: translateY(0);
    }
}

/* v2.0.0-alpha.18: Ventana + body con overflow-x bloqueado para que las
   imágenes (productos WooCommerce) NUNCA expandan el ancho ni desplacen
   el footer/input. */
#iweb-chat-window {
    position: fixed !important;
    bottom: 100px !important;
    right: 24px !important;
    width: 380px !important;
    max-width: 380px !important;        /* alpha.18: cap absoluto */
    height: 600px !important;
    max-height: calc(100vh - 130px) !important;
    min-height: 320px !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overflow-x: hidden !important;      /* alpha.18: bloqueo horizontal */
    z-index: 999999 !important;
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* v2.0.0-alpha.18: El chat body con overflow-x bloqueado y width:100%.
   Sin esto, imágenes anchas empujan el layout y reducen el footer. */
#iweb-chat-widget .iweb-chat-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* v2.0.0-alpha.18: Mensajes nunca exceden el ancho disponible.
   max-width 85% del body, sin expandir. */
#iweb-chat-widget .iweb-msg {
    max-width: 85% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Imágenes en mensajes NUNCA exceden el ancho del bubble. */
#iweb-chat-widget .iweb-msg-img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
}

#iweb-chat-window.iweb-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: all;
}

/* Header del chat — blindado */
.iweb-chat-header {
    background: var(--iweb-gradient) !important;
    padding: 18px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: white !important;
    flex-shrink: 0 !important;
    border: none !important;
    margin: 0 !important;
}
.iweb-chat-header h1,
.iweb-chat-header h2,
.iweb-chat-header h3,
.iweb-chat-header h4,
.iweb-chat-header div,
.iweb-chat-header span {
    color: white !important;
    text-shadow: none !important;
    margin: 0 !important;
}

.iweb-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}

/* Imagen cargada desde el Media Uploader */
.iweb-chat-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Inicial del bot name cuando no hay imagen */
.iweb-chat-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    user-select: none;
}

.iweb-chat-info {
    flex: 1;
    min-width: 0;
}

/* v1.9.6: Blindar título del header "AI Assistant" contra Divi h4 styles */
.iweb-chat-info h4,
#iweb-chat-widget .iweb-chat-info h4 {
    margin: 0 0 2px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: white !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    text-shadow: none !important;
    text-align: left !important;
}

.iweb-chat-info p,
#iweb-chat-widget .iweb-chat-info p {
    margin: 0 !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-shadow: none !important;
    text-align: left !important;
}

.iweb-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: iwebStatusPulse 2s infinite;
}

@keyframes iwebStatusPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.iweb-chat-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.iweb-chat-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Body del chat */
.iweb-chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: var(--iweb-gray-50);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.iweb-chat-body::-webkit-scrollbar {
    width: 6px;
}

.iweb-chat-body::-webkit-scrollbar-thumb {
    background: var(--iweb-gray-200);
    border-radius: 3px;
}

/* Mensajes */
.iweb-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    animation: iwebMsgIn 0.3s ease-out;
}

@keyframes iwebMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.iweb-msg-bot {
    background: white;
    border: 1px solid var(--iweb-gray-200);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.iweb-msg-user {
    background: var(--iweb-gradient);
    color: white;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}

/* Quick replies */
.iweb-quick-replies {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    align-items: flex-start;
}

.iweb-quick-reply {
    background: white;
    border: 1px solid var(--iweb-blue);
    color: var(--iweb-blue);
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.iweb-quick-reply:hover {
    background: var(--iweb-blue);
    color: white;
    transform: translateY(-1px);
}

/* Typing indicator */
.iweb-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: white;
    border: 1px solid var(--iweb-gray-200);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    width: fit-content;
}

.iweb-typing span {
    width: 7px;
    height: 7px;
    background: var(--iweb-gray-500);
    border-radius: 50%;
    animation: iwebTypingDot 1.4s infinite;
}

.iweb-typing span:nth-child(2) { animation-delay: 0.2s; }
.iweb-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes iwebTypingDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* v2.0.0-alpha.19: Footer con CSS GRID en lugar de flex.
   Grid es más determinístico que flex y los themes raramente lo resetean.
   `grid-template-columns: 1fr 40px` garantiza: input toma todo el espacio
   disponible, send button siempre exactamente 40px. */
.iweb-chat-footer,
#iweb-chat-widget .iweb-chat-footer,
#iweb-chat-widget form.iweb-chat-footer,
#iweb-chat-widget #iweb-chat-form {
    padding: 12px 16px !important;
    background: white !important;
    display: grid !important;
    grid-template-columns: 1fr 40px !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border: none !important;
    border-top: 1px solid var(--iweb-gray-200) !important;
    position: relative !important;
    z-index: 2 !important;
    /* alpha.19: aislamiento del layout para que CSS del theme no afecte. */
    contain: layout style !important;
}

/* v2.0.0-alpha.19: Input field con grid-column explícito.
   Como el footer ahora usa display:grid, el input toma su columna (1fr)
   automáticamente. width:100% forza llenar la celda completa. */
.iweb-chat-input,
#iweb-chat-widget .iweb-chat-input,
#iweb-chat-widget input.iweb-chat-input {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 1px solid var(--iweb-gray-200) !important;
    border-radius: 22px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: var(--iweb-gray-800, #1e293b) !important;
    background: white !important;
    outline: none !important;
    box-sizing: border-box !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.2s !important;
}

.iweb-chat-input:focus,
#iweb-chat-widget .iweb-chat-input:focus {
    border-color: var(--iweb-blue) !important;
    box-shadow: none !important;
}

.iweb-chat-send,
#iweb-chat-widget .iweb-chat-send {
    grid-column: 2 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    border-radius: 50% !important;
    background: var(--iweb-gradient) !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: transform 0.2s !important;
}

.iweb-chat-send:hover {
    transform: scale(1.05);
}

.iweb-chat-send svg {
    width: 18px;
    height: 18px;
}

/* Branding footer (Free version) */
.iweb-branding {
    text-align: center;
    padding: 8px;
    background: white;
    border-top: 1px solid var(--iweb-gray-100);
    font-size: 11px;
    color: var(--iweb-gray-500);
}

.iweb-branding a {
    color: var(--iweb-blue);
    text-decoration: none;
    font-weight: 600;
}

/* ============================================================
   Mobile — full-screen chat with iOS safe-area support
   ============================================================ */
@media (max-width: 768px) {
    /* Full-screen window */
    #iweb-chat-window {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        z-index: 9999999;
    }

    /* Header: push below iOS status bar notch */
    .iweb-chat-header {
        padding-top: max(18px, calc(14px + env(safe-area-inset-top)));
        padding-bottom: 16px;
    }

    /* Body: use momentum scroll on iOS, avoid the keyboard */
    .iweb-chat-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* Footer / input bar: lift above iOS home indicator */
    .iweb-chat-footer {
        padding-bottom: max(12px, calc(8px + env(safe-area-inset-bottom)));
        flex-shrink: 0;
    }

    /* Branding: sit above home indicator too */
    .iweb-branding {
        padding-bottom: max(8px, calc(4px + env(safe-area-inset-bottom)));
    }

    /* Pre-chat form: full-height scroll with safe areas */
    .iweb-prechat-form {
        padding-top: max(18px, calc(14px + env(safe-area-inset-top)));
        padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom)));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* FAB: respect home indicator on phones */
    #iweb-chat-fab {
        bottom: max(16px, calc(12px + env(safe-area-inset-bottom)));
        right: 16px;
    }
}
/* ============================================================
   Lead Capture — Formulario pre-chat
   ============================================================ */

/* Contenedor del formulario dentro del chat body */
.iweb-prechat-form {
    padding: 18px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    overflow-y: auto;
}

/* Header del formulario */
.iweb-prechat-header {
    margin-bottom: 14px;
}

/* v1.9.6: Blindar tipografía del título contra Divi (Comic Sans/serifs heredados) */
.iweb-prechat-title,
#iweb-chat-widget .iweb-prechat-title {
    margin: 0 0 4px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    text-align: left !important;
}

.iweb-prechat-subtitle,
#iweb-chat-widget .iweb-prechat-subtitle {
    margin: 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

/* Banner de error */
.iweb-form-error {
    background: #fee2e2;
    color: #dc2626;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Inputs del formulario */
#iweb-lead-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* v1.9.6: !important agresivo para que Divi no pise el estilo de los inputs */
.iweb-lead-input,
#iweb-chat-widget .iweb-lead-input {
    width: 100% !important;
    padding: 10px 14px 10px 16px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    color: #1e293b !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color .15s, box-shadow .15s !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.iweb-lead-input:focus,
#iweb-chat-widget .iweb-lead-input:focus {
    border-color: var(--iweb-blue, #E11D48) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important;
}

.iweb-lead-input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* Grupo teléfono: selector de código + input */
.iweb-phone-group {
    display: flex;
    gap: 6px;
}

.iweb-country-code,
#iweb-chat-widget .iweb-country-code {
    flex: 0 0 90px !important;
    padding: 10px 8px 10px 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-family: inherit !important;
    color: #1e293b !important;
    background: #fff !important;
    outline: none !important;
    cursor: pointer !important;
    transition: border-color .15s !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.iweb-country-code:focus {
    border-color: var(--iweb-blue, #E11D48);
}

.iweb-phone-group .iweb-lead-input {
    flex: 1;
}

/* Checkbox de consentimiento */
.iweb-consent-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    margin-top: 2px;
}

.iweb-consent-wrap input[type="checkbox"] {
    /* Tamaño explícito — el * { box-sizing: border-box } del widget colapsa checkboxes sin tamaño */
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    appearance: auto;
    -webkit-appearance: checkbox;
    accent-color: var(--iweb-chat-color, var(--iweb-blue, #E11D48));
    cursor: pointer;
    border-radius: 3px;
}

.iweb-consent-wrap span {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

/* Botón de submit — full width, gradiente primario */
.iweb-lead-submit {
    width: 100%;
    padding: 11px 16px;
    background: var(--iweb-gradient, linear-gradient(135deg, #E11D48, #BE123C));
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    margin-top: 4px;
}

.iweb-lead-submit:hover:not(:disabled) {
    opacity: .92;
    transform: translateY(-1px);
}

.iweb-lead-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Aviso de privacidad debajo del botón */
.iweb-prechat-privacy {
    margin: 6px 0 0;
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    line-height: 1.5;
}

.iweb-prechat-privacy a {
    color: var(--iweb-blue, #E11D48);
    text-decoration: none;
}

.iweb-prechat-privacy a:hover {
    text-decoration: underline;
}

/* ============================================================
   Bot message — Markdown rendering
   ============================================================ */

.iweb-msg-bot p {
    margin: 0 0 8px 0;
}

.iweb-msg-bot p:last-child {
    margin-bottom: 0;
}

.iweb-msg-bot ul,
.iweb-msg-bot ol {
    padding-left: 18px;
    margin: 6px 0;
}

.iweb-msg-bot li {
    margin-bottom: 4px;
}

.iweb-msg-bot strong {
    font-weight: 600;
}

.iweb-msg-bot em {
    font-style: italic;
}

.iweb-msg-bot code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
}

.iweb-msg-bot a {
    color: var(--iweb-blue);
    text-decoration: underline;
}

/* v2.0.0-alpha.3: Soporte para imágenes en respuestas del bot
   (productos WooCommerce, etc.). Las imágenes vienen vía markdown
   ![alt](url) y se renderizan como tarjetas dentro de la burbuja. */
.iweb-msg-bot img.iweb-msg-img,
.iweb-msg-bot img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 8px 0 !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.08) !important;
    background: #fff !important;
}

/* Strikethrough — usado en precios en oferta */
.iweb-msg-bot del {
    color: #94a3b8;
    text-decoration: line-through;
    margin-right: 4px;
}

/* v2.0.0-alpha.10: Botones de acción inline (Add to Cart, View Cart, Checkout).
   El AI los genera con sintaxis [Label](action:tool:args) y se renderizan
   como pills clickables. */
.iweb-msg-bot .iweb-action-btn {
    display: inline-block !important;
    margin: 6px 6px 6px 0 !important;
    padding: 8px 16px !important;
    border: 1.5px solid var(--iweb-blue) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--iweb-blue) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-shadow: none !important;
    line-height: normal !important;
    box-shadow: none !important;
    min-height: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.iweb-msg-bot .iweb-action-btn:hover {
    background: var(--iweb-blue) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
.iweb-msg-bot .iweb-action-btn:disabled,
.iweb-msg-bot .iweb-action-btn--clicked {
    opacity: 0.5 !important;
    cursor: default !important;
    transform: none !important;
}

/* ============================================================
   End Chat button
   ============================================================ */

.iweb-chat-end-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.iweb-chat-end-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* ============================================================
   Rating buttons
   ============================================================ */

.iweb-rating-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 4px 0 2px;
    animation: iwebMsgIn 0.3s ease-out;
}

.iweb-rating-btn {
    flex: 1;
    padding: 12px 10px;
    border: 1.5px solid var(--iweb-gray-200);
    border-radius: 12px;
    background: white;
    font-size: 14px;
    font-family: inherit;
    color: var(--iweb-gray-800);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.iweb-rating-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--iweb-blue);
    color: var(--iweb-blue);
}