:root {
    --innova-primary: #003366;
    --innova-light: #ffffff;
    --innova-primary-soft: rgba(0, 51, 102, 0.08);
    --innova-text: #0a0a0a;
    --innova-text-muted: #6b7280;
    --innova-text-hint: #999999;
    --innova-bg: #fafafa;
    --innova-surface: #ffffff;
    --innova-border: #e5e7eb;
    --innova-border-light: #f0f0f0;
    --innova-success: #22c55e;
    --innova-success-text: #16a34a;
    --innova-error: #c62828;
    --innova-error-bg: #ffebee;
    --innova-error-border: #ffcdd2;
}

#innovabot-trigger {
    position: fixed; bottom: 20px; right: 20px;
    width: 65px !important; height: 65px !important;
    background: transparent !important; border: none !important; border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(0,51,102,0.25) !important;
    z-index: 999999 !important; padding: 0 !important; overflow: visible !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#innovabot-trigger:hover { transform: scale(1.06) !important; box-shadow: 0 8px 24px rgba(0,51,102,0.32) !important; }
#innovabot-trigger:active { transform: scale(0.98) !important; }

#bot-avatar-trigger {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    border-radius: 50% !important; position: relative !important; z-index: 2 !important;
}

.innovabot-trigger-pulse {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important; border-radius: 50% !important;
    background: var(--innova-primary) !important; opacity: 0 !important;
    z-index: 1 !important; pointer-events: none !important;
}
/* El pulso solo se activa cuando JS añade la clase .is-pulsing al trigger.
   Esto permite controlar el timing (no pulsar al cargar, sino tras 15s de inactividad). */
#innovabot-trigger.is-pulsing .innovabot-trigger-pulse {
    opacity: 0.4 !important;
    animation: innovabot-pulse 2s ease-out 3 !important;
}
@keyframes innovabot-pulse {
    0%   { transform: scale(1);    opacity: 0.4; }
    100% { transform: scale(1.5);  opacity: 0; }
}

#innovabot-container {
    display: none; flex-direction: column; position: fixed; bottom: 95px; right: 20px;
    width: 360px !important; height: 540px !important;
    background: var(--innova-surface) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 28px rgba(0,51,102,0.14) !important;
    z-index: 999999 !important; overflow: hidden !important;
    border: 1px solid var(--innova-border) !important;
    animation: innovabot-container-in 0.25s ease-out;
}
@keyframes innovabot-container-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#innovabot-header {
    background: var(--innova-surface) !important;
    color: var(--innova-text) !important;
    padding: 14px 16px !important;
    display: flex !important; align-items: center !important; gap: 12px !important;
    border-bottom: 1px solid var(--innova-border-light) !important;
}

.innovabot-header-avatar {
    position: relative !important;
    width: 38px !important; height: 38px !important; flex-shrink: 0 !important;
}
.innovabot-header-avatar img {
    width: 100% !important; height: 100% !important;
    border-radius: 50% !important; object-fit: cover !important;
    border: none !important; margin: 0 !important;
}
.innovabot-presence-dot {
    position: absolute !important;
    bottom: 0 !important; right: 0 !important;
    width: 11px !important; height: 11px !important;
    background: var(--innova-success) !important;
    border: 2px solid var(--innova-surface) !important;
    border-radius: 50% !important;
}

.innovabot-header-info {
    flex-grow: 1 !important; line-height: 1.2 !important; overflow: hidden !important;
}
.innovabot-header-name {
    font-weight: 600 !important; font-size: 15px !important;
    color: var(--innova-text) !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.innovabot-header-status {
    font-size: 11px !important; color: var(--innova-success-text) !important;
    margin-top: 2px !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}

#innovabot-close {
    background: transparent !important; color: var(--innova-text-muted) !important;
    border: none !important; cursor: pointer !important;
    padding: 6px !important; border-radius: 6px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: background 0.15s, color 0.15s !important;
}
#innovabot-close:hover { background: var(--innova-bg) !important; color: var(--innova-text) !important; }

#innovabot-messages {
    flex: 1 !important; padding: 16px !important; overflow-y: auto !important;
    background: var(--innova-bg) !important;
    display: flex !important; flex-direction: column !important; gap: 2px !important;
    scroll-behavior: smooth !important;
}

#innovabot-messages::-webkit-scrollbar { width: 6px; }
#innovabot-messages::-webkit-scrollbar-track { background: transparent; }
#innovabot-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
#innovabot-messages::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

.innovabot-date-sep {
    text-align: center !important;
    margin: 4px 0 12px !important;
}
.innovabot-date-sep span {
    font-size: 11px !important; color: var(--innova-text-hint) !important;
    background: var(--innova-border-light) !important;
    padding: 3px 10px !important; border-radius: 10px !important;
}

.innovabot-row {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    animation: innovabot-msg-in 0.2s ease-out;
}
@keyframes innovabot-msg-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.innovabot-row-bot { justify-content: flex-start !important; }
.innovabot-row-user { justify-content: flex-end !important; }

.innovabot-msg-avatar {
    width: 26px !important; height: 26px !important;
    border-radius: 50% !important; flex-shrink: 0 !important;
    overflow: hidden !important;
}
.innovabot-msg-avatar img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important;
}

.msg-user, .msg-bot {
    padding: 10px 14px !important;
    font-size: 14px !important; line-height: 1.45 !important;
    max-width: 80% !important;
    word-wrap: break-word !important; overflow-wrap: break-word !important;
}

.msg-user {
    background: var(--innova-primary) !important;
    color: var(--innova-light) !important;
    border-radius: 16px 16px 4px 16px !important;
}

.msg-bot {
    background: var(--innova-surface) !important;
    color: var(--innova-text) !important;
    border: 1px solid var(--innova-border) !important;
    border-radius: 16px 16px 16px 4px !important;
}

.msg-bot.error {
    background: var(--innova-error-bg) !important;
    border: 1px solid var(--innova-error-border) !important;
    color: var(--innova-error) !important;
}

.msg-bot a {
    color: var(--innova-primary) !important;
    text-decoration: underline !important;
}
.msg-bot a:hover { text-decoration: none !important; }

.innovabot-meta {
    font-size: 10px !important; color: var(--innova-text-hint) !important;
    margin-top: 2px !important; margin-bottom: 4px !important;
}
.innovabot-meta-bot { padding-left: 38px !important; }
.innovabot-meta-user { text-align: right !important; }
.innovabot-checks { color: var(--innova-success-text) !important; margin-left: 2px !important; }

.msg-bot.typing {
    display: flex !important; align-items: center !important; gap: 4px !important;
    padding: 14px !important;
}
.msg-bot.typing .dot {
    width: 7px !important; height: 7px !important; border-radius: 50% !important;
    background: #999 !important; opacity: 0.4 !important;
    animation: innovabot-typing 1.2s infinite ease-in-out !important;
}
.msg-bot.typing .dot:nth-child(2) { animation-delay: 0.2s !important; }
.msg-bot.typing .dot:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes innovabot-typing {
    0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-4px); }
}

.innovabot-quick-replies {
    display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
    margin-top: 8px !important; margin-bottom: 4px !important;
    padding-left: 34px !important;
    max-width: 100% !important;
}
.innovabot-quick-btn {
    background: var(--innova-surface) !important;
    color: var(--innova-primary) !important;
    border: 1px solid var(--innova-primary) !important;
    border-radius: 16px !important;
    padding: 6px 12px !important;
    font-size: 12px !important; font-weight: 500 !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    transition: background 0.15s, color 0.15s, transform 0.1s !important;
}
.innovabot-quick-btn:hover, .innovabot-quick-btn:focus {
    background: var(--innova-primary) !important;
    color: var(--innova-light) !important;
    outline: none !important;
}
.innovabot-quick-btn:active { transform: scale(0.97) !important; }

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.innovabot-product-card {
    background: var(--innova-surface) !important;
    border: 1px solid var(--innova-border) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-top: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.innovabot-product-title {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--innova-primary) !important;
    line-height: 1.3 !important;
}

.innovabot-product-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.innovabot-badge {
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.innovabot-badge-modalidad {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}
.innovabot-badge-duracion {
    background: #f0f0f0 !important;
    color: #444444 !important;
}
.innovabot-badge-precio {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.innovabot-product-cta {
    background: var(--innova-primary) !important;
    color: var(--innova-light) !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: opacity 0.15s !important;
    margin-top: 2px !important;
}
.innovabot-product-cta:hover { opacity: 0.9 !important; }
.innovabot-product-cta:active { transform: scale(0.98) !important; }

/* ============================================================
   FOLLETO PDF CARD (layout horizontal con icono a la izquierda)
   ============================================================ */
.innovabot-folleto-card {
    background: var(--innova-surface) !important;
    border: 1px solid var(--innova-border) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin-top: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.innovabot-folleto-icon {
    width: 38px !important; height: 38px !important;
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border-radius: 8px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.innovabot-folleto-info {
    flex-grow: 1 !important;
    min-width: 0 !important; /* permite que el texto se trunque si es muy largo */
}

.innovabot-folleto-title {
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--innova-primary) !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.innovabot-folleto-desc {
    font-size: 10px !important;
    color: var(--innova-text-muted) !important;
    margin-top: 2px !important;
    line-height: 1.3 !important;
}

.innovabot-folleto-cta {
    background: var(--innova-primary) !important;
    color: var(--innova-light) !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
.innovabot-folleto-cta:hover { opacity: 0.9 !important; }
.innovabot-folleto-cta:active { transform: scale(0.97) !important; }

/* ============================================================
   INPUT AREA
   ============================================================ */
#innovabot-input-area {
    padding: 12px !important;
    background: var(--innova-surface) !important;
    border-top: 1px solid var(--innova-border-light) !important;
}

.innovabot-input-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f5f5f5 !important;
    border-radius: 22px !important;
    padding: 4px 4px 4px 16px !important;
    transition: background 0.15s, box-shadow 0.15s !important;
}
.innovabot-input-wrap:focus-within {
    background: var(--innova-surface) !important;
    box-shadow: 0 0 0 2px var(--innova-primary-soft) !important;
}

#innovabot-input {
    flex: 1 !important;
    height: 36px !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    outline: none !important;
    color: var(--innova-text) !important;
    padding: 0 !important;
    margin: 0 !important;
}
#innovabot-input:disabled { opacity: 0.6 !important; }
#innovabot-input::placeholder { color: var(--innova-text-hint) !important; }

#innovabot-send {
    background: var(--innova-primary) !important;
    color: var(--innova-light) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; min-height: 36px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; flex-shrink: 0 !important;
    transition: opacity 0.15s, transform 0.1s !important;
    padding: 0 !important;
}
#innovabot-send:hover { opacity: 0.9 !important; }
#innovabot-send:active { transform: scale(0.95) !important; }
#innovabot-send:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

.innovabot-send-icon {
    display: inline-block !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: var(--innova-light) !important;
    transform: translateX(1px) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: normal !important;
    pointer-events: none !important;
}

/* Blindaje del SVG de cerrar contra interferencia del theme padre. */
#innovabot-close svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    display: block !important;
    pointer-events: none !important;
}
#innovabot-close svg line {
    fill: none !important;
    stroke: currentColor !important;
}

.innovabot-microcopia {
    font-size: 10px !important;
    color: var(--innova-text-hint) !important;
    text-align: center !important;
    margin-top: 8px !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
    #innovabot-container {
        width: 100% !important; height: 100% !important;
        bottom: 0 !important; right: 0 !important; left: 0 !important; top: 0 !important;
        border-radius: 0 !important; border: none !important;
        animation: none;
    }
    #innovabot-trigger { bottom: 15px !important; right: 15px !important; }
    .msg-user, .msg-bot { max-width: 85% !important; }
}