/* JustAiSK — Frontend Widget v2.0.0 (SparrowDesk Dark UI)
   ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════
   CSS CUSTOM PROPERTIES
   ═══════════════════════════════════ */
:root {
    --cxaigent-widget-size:    60px;

    /* Static last-resort brand-colour fallback. The authoritative defaults are
       still emitted by PHP (wp_add_inline_style in enqueue_assets) and are
       overridden at runtime by inline_dynamic_styles() / applyDynamicStyles();
       those later :root blocks win by source order, so a custom brand colour
       still applies everywhere. But when a full-page cache/CDN or a CSS-combining
       optimiser strips those inline blocks, the brand-colour custom properties
       would be undefined — and the header, send button and user bubble, which
       reference them with no fallback, would paint WHITE. These two literals
       guarantee the widget always shows the default brand colour instead.
       Keep them in lockstep with CXAIGENT_DEFAULT_BRAND_COLOR and
       CXAIGENT_DEFAULT_BRAND_DARK in cxaigent-chat.php. All other brand/dark-
       palette defaults remain PHP-only. */
    --cxaigent-brand-color:    #5d65c7;
    --cxaigent-brand-dark:     #4c53a3;

    --cxaigent-text-muted:     rgba(255,255,255,.5);
    --cxaigent-text-dim:       rgba(255,255,255,.35);

    --cxaigent-input-placeholder: var(--cxaigent-text-dim);

    --cxaigent-user-bubble:    var(--cxaigent-brand-color);
    --cxaigent-user-text:      #ffffff;
    --cxaigent-bot-bubble:     var(--cxaigent-dark-600);
    --cxaigent-bot-text:       var(--cxaigent-text-bright);

    --cxaigent-shadow-lg:      0 20px 60px rgba(0,0,0,.55);
    --cxaigent-radius:         16px;
    --cxaigent-radius-sm:      8px;
    --cxaigent-radius-pill:    999px;
    --cxaigent-transition:     0.22s cubic-bezier(.4,0,.2,1);
    --cxaigent-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ═══════════════════════════════════
   RESET / ISOLATION
   ═══════════════════════════════════ */
#cxaigent-widget,
#cxaigent-widget * {
    box-sizing: border-box;
    font-family: var(--cxaigent-font);
    -webkit-font-smoothing: antialiased;
}
#cxaigent-widget button {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}
#cxaigent-widget a { color: inherit; text-decoration: none; font-size: 14px; }
#cxaigent-widget h2,
#cxaigent-widget h3,
#cxaigent-widget p { margin: 0; padding: 0; }

/* ═══════════════════════════════════
   WIDGET CONTAINER
   ═══════════════════════════════════ */
#cxaigent-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* ═══════════════════════════════════
   LAUNCHER BUTTON
   ═══════════════════════════════════ */
/* ID-prefixed + !important on background/border/color so host themes that
   force global `button`/`[type=button]` styles (transparent bg, coloured
   border, coloured text) cannot bleed in and break the launcher. */
#cxaigent-widget .cxaigent-toggle-btn {
    width:  var(--cxaigent-widget-size);
    height: var(--cxaigent-widget-size);
    border-radius: 50%;
    background: var(--cxaigent-launcher-bg, var(--cxaigent-brand-color)) !important;
    border: none !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(93,101,199,.5), 0 0 0 0 rgba(93,101,199,.3);
    transition: transform var(--cxaigent-transition), box-shadow var(--cxaigent-transition), background var(--cxaigent-transition);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: 12px;
}
#cxaigent-widget .cxaigent-toggle-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(93,101,199,.65);
    background: var(--cxaigent-launcher-bg-hover, var(--cxaigent-brand-dark)) !important;
}
#cxaigent-widget .cxaigent-toggle-btn:focus-visible {
    outline: 3px solid var(--cxaigent-launcher-bg, var(--cxaigent-brand-color));
    outline-offset: 3px;
}
.cxaigent-launcher-custom-icon {
    width:  calc(var(--cxaigent-widget-size) * 0.62);
    height: calc(var(--cxaigent-widget-size) * 0.62);
    object-fit: contain;
}
/* Built-in launcher SVG icon — inlined and tinted via currentColor.
   Defaults to the brand colour; the launcher-icon-color override wins when set. */
.cxaigent-launcher-builtin-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cxaigent-launcher-icon-color, var(--cxaigent-brand-color));
}
.cxaigent-launcher-builtin-icon svg {
    width:  calc(var(--cxaigent-widget-size) * 0.5);
    height: calc(var(--cxaigent-widget-size) * 0.5);
    display: block;
}

/* Loading spinner — visible while the REST config fetch is in flight */
@keyframes cxaigent-spin {
    to { transform: rotate(360deg); }
}
.cxaigent-toggle-btn.cxaigent-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.25);
    border-top-color: rgba(255, 255, 255, 0.9);
    animation: cxaigent-spin 0.75s linear infinite;
    pointer-events: none;
}

/* Error state — brief shake shown when the config fetch times out or fails */
@keyframes cxaigent-shake {
    0%,100% { transform: translateX(0); }
    15%      { transform: translateX(-5px); }
    30%      { transform: translateX(5px); }
    45%      { transform: translateX(-4px); }
    60%      { transform: translateX(4px); }
    75%      { transform: translateX(-2px); }
    90%      { transform: translateX(2px); }
}
.cxaigent-toggle-btn.cxaigent-load-error {
    animation: cxaigent-shake 0.5s ease both;
    opacity: 0.75;
}

/* ═══════════════════════════════════
   OPEN-STATE CLASS-DRIVEN VISIBILITY
   ═══════════════════════════════════ */

/* Chat window hidden by default; shown by JS class + inline style fallback */
.cxaigent-chat-window { display: none; }
.cxaigent-is-open .cxaigent-chat-window { display: flex !important; flex-direction: column; }

/* Launcher icon swaps: chat icon visible when closed, close icon when open */
.cxaigent-launcher-open-icon,
.cxaigent-launcher-custom-icon { display: flex; }
.cxaigent-close-icon           { display: none; }
/* When open: hide the default open-icon; custom brand icon stays visible */
.cxaigent-is-open .cxaigent-launcher-open-icon { display: none; }
.cxaigent-is-open .cxaigent-close-icon          { display: flex; }

/* ═══════════════════════════════════
   CHAT WINDOW (DARK CARD)
   ═══════════════════════════════════ */
.cxaigent-chat-window {
    position: absolute;
    bottom: calc(var(--cxaigent-widget-size) + 16px);
    right: 0;
    width: 380px;
    max-height: min(600px, calc(100dvh - var(--cxaigent-widget-size) - 32px));
    border-radius: var(--cxaigent-radius);
    overflow: hidden;
    background: var(--cxaigent-dark-900);
    box-shadow: var(--cxaigent-shadow-lg);
    display: flex;
    flex-direction: column;
    transform-origin: bottom right;
    animation: cxaigent-pop-in .22s cubic-bezier(.34,1.56,.64,1) both;
    z-index: 1;
    border: 1px solid var(--cxaigent-dark-border);
    transition: opacity 0.18s ease;
}
@keyframes cxaigent-pop-in {
    from { opacity:0; transform:scale(.88) translateY(12px); }
    to   { opacity:1; transform:scale(1)   translateY(0); }
}

/* Applied during a mid-session settings refresh to hide the window before
   the DOM is torn down, preventing a visible flash or layout jump.
   The class is added synchronously (no transition) to make it instant,
   then removed two animation frames later so the CSS transition fades it in. */
.cxaigent-chat-window--fading {
    opacity: 0 !important;
    transition: none !important;
}

/* ═══════════════════════════════════
   CHAT SCREEN (DARK)
   ═══════════════════════════════════ */
.cxaigent-chat-screen {
    display: flex;
    flex-direction: column;
    min-height: min(420px, calc(100dvh - var(--cxaigent-widget-size) - 32px));
    max-height: min(600px, calc(100dvh - var(--cxaigent-widget-size) - 32px));
    height: 100%;
    overflow: hidden;
    background: var(--cxaigent-dark-900);
}

/* Chat header */
.cxaigent-header {
    background: linear-gradient(135deg, var(--cxaigent-brand-color) 0%, var(--cxaigent-brand-dark) 100%);
    padding: 16px 18px;
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.cxaigent-header-logo {
    width: 42px; height: 42px; border-radius: 50%;
    object-fit: contain;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
    flex-shrink: 0;
}
.cxaigent-header-logo--brandmark {
    background: rgba(255,255,255,.22);
    padding: 7px;
}
.cxaigent-header-avatar { flex-shrink: 0; }
.cxaigent-header-avatar .cxaigent-avatar-img {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
    border: 1px solid rgba(255,255,255,.25);
}
.cxaigent-header-avatar .cxaigent-avatar-initials {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.25); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
}
.cxaigent-header-info {
    flex: 1; display: flex; flex-direction: column; min-width: 0;
}
.cxaigent-header-name {
    font-size: 16px; font-weight: 700; color: #fff; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    letter-spacing: -0.2px;
}
.cxaigent-header-status {
    font-size: 12px; color: rgba(255,255,255,.75); font-weight: 500;
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cxaigent-header-status::before {
    content: ''; display: inline-block;
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80; flex-shrink: 0;
}
.cxaigent-header-actions {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
/* ID-prefixed + !important so host-theme global button rules can't override the
   admin-configured header-icon colour (the SVGs are tinted via currentColor). */
#cxaigent-widget .cxaigent-reset-btn,
#cxaigent-widget .cxaigent-header-close-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: transparent !important;
    border: none !important;
    color: var(--cxaigent-header-icon, rgba(255,255,255,.85)) !important;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--cxaigent-transition);
}
#cxaigent-widget .cxaigent-reset-btn:hover,
#cxaigent-widget .cxaigent-header-close-btn:hover {
    background: rgba(255,255,255,.18) !important; color: var(--cxaigent-header-icon, #fff) !important;
}

/* ═══════════════════════════════════
   LEAD FORM
   ═══════════════════════════════════ */
.cxaigent-lead-form {
    margin: 12px 12px 0;
    padding: 16px;
    background: var(--cxaigent-dark-700);
    border: 1px solid var(--cxaigent-dark-border);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Section header row */
.cxaigent-lead-form::before {
    content: '';
    display: block;
    width: 28px; height: 2px;
    background: var(--cxaigent-brand-color);
    border-radius: 2px;
    margin-bottom: 10px;
    opacity: .7;
}
.cxaigent-lead-intro {
    font-size: 13.5px;
    /* Surface-aware: the chat surface is fixed LIGHT, so the near-white
       --cxaigent-text-muted rendered invisible here. --cxaigent-input-placeholder
       is fixed to #6b6b6b by PHP on the light surface (dim white on the legacy
       dark fallback), so it stays readable on whichever surface is active. */
    color: var(--cxaigent-input-placeholder, var(--cxaigent-text-dim));
    margin-bottom: 14px;
    line-height: 1.5;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cxaigent-dark-border);
}
.cxaigent-form-group { margin-bottom: 10px; }
.cxaigent-form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    /* Surface-aware: --cxaigent-text-dim is near-white and invisible on the
       fixed light chat surface. Use the placeholder tone PHP fixes to #6b6b6b. */
    color: var(--cxaigent-input-placeholder, var(--cxaigent-text-dim));
    margin-bottom: 5px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
#cxaigent-widget .cxaigent-form-group input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 38px;
    border: 1px solid var(--cxaigent-dark-border) !important;
    border-radius: var(--cxaigent-radius-sm);
    font-size: 14px;
    color: var(--cxaigent-text-bright) !important;
    -webkit-text-fill-color: var(--cxaigent-text-bright) !important;
    background-color: var(--cxaigent-dark-800) !important;
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 15px 15px;
    outline: none;
    font-family: var(--cxaigent-font);
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
    transition: border-color var(--cxaigent-transition), box-shadow var(--cxaigent-transition);
    -webkit-appearance: none;
}
#cxaigent-widget .cxaigent-form-group input::placeholder { color: var(--cxaigent-input-placeholder, var(--cxaigent-text-dim)) !important; opacity: 1 !important; }
#cxaigent-widget .cxaigent-form-group input:focus {
    border-color: var(--cxaigent-brand-color) !important;
    box-shadow: 0 0 0 2px var(--cxaigent-dark-border);
}

/* Name field icon — person outline */
#cxaigent-lead-name {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.35'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* Email field icon — envelope outline */
#cxaigent-lead-email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.35'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

/* Phone field icon — handset outline (inline JS-generated form) */
#cxaigent-lead-phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.35'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.13 6.13l.91-.91a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* ID-prefixed + !important so host-theme global button rules can't strip the
   brand fill / border from the lead-capture submit button. */
#cxaigent-widget .cxaigent-btn {
    width: 100%;
    height: 42px;
    padding: 0 20px;
    border-radius: var(--cxaigent-radius-pill);
    background: var(--cxaigent-brand-color) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    border: none !important;
    margin-top: 6px;
    font-family: var(--cxaigent-font);
    transition: background var(--cxaigent-transition), transform var(--cxaigent-transition);
}
#cxaigent-widget .cxaigent-btn:hover {
    background: var(--cxaigent-brand-dark) !important;
    transform: translateY(-1px);
}
#cxaigent-widget .cxaigent-btn:active { transform: translateY(0); }
.cxaigent-error { font-size: 12.5px; color: #f87171; margin-top: 8px; }

/* ═══════════════════════════════════
   INLINE LEAD FORM (in-chat bubble)
   ═══════════════════════════════════ */
.cxaigent-ilf-wrapper { margin-bottom: 4px; }
.cxaigent-inline-lead-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
    max-width: 280px;
    background: var(--cxaigent-dark-700);
    border: 1px solid var(--cxaigent-dark-border);
    border-radius: 4px 16px 16px 16px;
    padding: 14px;
}
#cxaigent-widget .cxaigent-ilf-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    /* Faint but clearly visible keyline so each field reads as an input on the
       fixed light chat surface — uses a neutral semi-transparent stroke that
       works against both light and dark input backgrounds. */
    border: 1px solid rgba(0, 0, 0, .18) !important;
    border-radius: var(--cxaigent-radius-sm);
    background: var(--cxaigent-input-bg, var(--cxaigent-dark-800)) !important;
    color: var(--cxaigent-input-text, var(--cxaigent-text-bright)) !important;
    -webkit-text-fill-color: var(--cxaigent-input-text, var(--cxaigent-text-bright)) !important;
    font-size: 13.5px;
    font-family: var(--cxaigent-font);
    outline: none;
    box-sizing: border-box;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
    transition: border-color var(--cxaigent-transition), box-shadow var(--cxaigent-transition);
    -webkit-appearance: none;
}
#cxaigent-widget .cxaigent-ilf-input::placeholder { color: var(--cxaigent-input-placeholder, var(--cxaigent-text-dim)) !important; opacity: 1 !important; }
#cxaigent-widget .cxaigent-ilf-input:focus        { border-color: var(--cxaigent-brand-color) !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, .06); background: var(--cxaigent-input-bg, var(--cxaigent-dark-800)) !important; color: var(--cxaigent-input-text, var(--cxaigent-text-bright)) !important; }
/* ID-prefixed + !important so host-theme global button rules can't strip the
   brand fill / turn the action into bare coloured link-text. */
#cxaigent-widget .cxaigent-ilf-submit {
    width: 100%;
    height: 38px;
    margin-top: 4px;
    padding: 0 16px;
    border: none !important;
    border-radius: var(--cxaigent-radius-pill);
    background: var(--cxaigent-brand-color) !important;
    color: #fff !important;
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--cxaigent-font);
    cursor: pointer;
    transition: background var(--cxaigent-transition), transform var(--cxaigent-transition);
}
#cxaigent-widget .cxaigent-ilf-submit:hover   { background: var(--cxaigent-brand-dark) !important; color: #fff !important; transform: translateY(-1px); }
#cxaigent-widget .cxaigent-ilf-submit:active  { transform: translateY(0); }
#cxaigent-widget .cxaigent-ilf-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.cxaigent-ilf-error { font-size: 12px; color: #f87171; margin-top: 2px; }

/* ═══════════════════════════════════
   MESSAGES AREA (DARK)
   ═══════════════════════════════════ */
.cxaigent-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--cxaigent-dark-900);
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}
.cxaigent-messages::-webkit-scrollbar { width: 4px; }
.cxaigent-messages::-webkit-scrollbar-track { background: transparent; }
.cxaigent-messages::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12); border-radius: 4px;
}

.cxaigent-message {
    display: flex; align-items: flex-end; gap: 8px; max-width: 92%;
}
.cxaigent-message--bot  { align-self: flex-start; }
.cxaigent-message--user { align-self: flex-end; flex-direction: row-reverse; }

.cxaigent-message-avatar {
    width: 28px; height: 28px; flex-shrink: 0;
}
.cxaigent-message-avatar .cxaigent-avatar-img {
    width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.cxaigent-message-avatar .cxaigent-avatar-initials {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--cxaigent-brand-color); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}

.cxaigent-message-bubble {
    padding: 10px 14px;
    font-size: 14px; line-height: 1.55; word-break: break-word;
}
.cxaigent-message--bot .cxaigent-message-bubble {
    background: var(--cxaigent-bot-bubble);
    color: var(--cxaigent-bot-text);
    border-radius: 4px 16px 16px 16px;
    border: 1px solid var(--cxaigent-dark-border);
}
.cxaigent-message--user .cxaigent-message-bubble {
    background: var(--cxaigent-user-bubble);
    color: var(--cxaigent-user-text);
    border-radius: 16px 4px 16px 16px;
}
.cxaigent-message-bubble p { margin: 0 0 6px; }
.cxaigent-message-bubble p:last-child { margin-bottom: 0; }
.cxaigent-message-bubble ul,
.cxaigent-message-bubble ol { margin: 4px 0; padding-left: 18px; }
.cxaigent-message-bubble li { margin-bottom: 3px; }
/* Markdown-rendered bot responses wrap text in p/h1–h6/li/span/etc.  The host
   WordPress theme's paragraph/heading styles would otherwise override these
   children, inflating the font size and replacing the configured bot text
   colour.  Pin them to the bubble's base 14px size and --cxaigent-bot-text
   colour (admin's chosen font colour), widget-scoped and forced with
   !important to defend against theme bleed — consistent with how the input
   field already guards its colour.  Headings keep bold weight but are
   normalised to the base size so a markdown ##/### response matches the
   greeting size. */
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble p,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble ul,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble ol,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble li,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble span,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble strong,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble em,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble blockquote,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble h1,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble h2,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble h3,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble h4,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble h5,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble h6 {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--cxaigent-bot-text) !important;
}
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble h1,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble h2,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble h3,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble h4,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble h5,
#cxaigent-widget .cxaigent-message--bot .cxaigent-message-bubble h6 {
    font-weight: 600 !important;
    margin: 6px 0 4px !important;
}
.cxaigent-message-bubble code {
    background: rgba(255,255,255,.1); border-radius: 4px;
    padding: 1px 5px; font-size: 12px;
    font-family: "SFMono-Regular", Consolas, monospace;
}
.cxaigent-message--user .cxaigent-message-bubble code {
    background: rgba(255,255,255,.2);
}
.cxaigent-message-bubble pre {
    background: rgba(255,255,255,.06); border-radius: 6px;
    padding: 10px; overflow-x: auto; font-size: 12px; margin: 6px 0 0;
}
#cxaigent-widget .cxaigent-message-bubble a { color: #818cf8; text-decoration: underline; font-size: 14px; }
#cxaigent-widget .cxaigent-message--user .cxaigent-message-bubble a { color: rgba(255,255,255,.9); font-size: 14px; }

/* ═══════════════════════════════════
   TYPING INDICATOR
   ═══════════════════════════════════ */
.cxaigent-typing {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: var(--cxaigent-dark-900); flex-shrink: 0;
}
.cxaigent-typing-dots {
    display: flex; align-items: center; gap: 4px;
    background: var(--cxaigent-bot-bubble);
    padding: 10px 14px;
    border-radius: 4px 16px 16px 16px;
    border: 1px solid var(--cxaigent-dark-border);
}
.cxaigent-typing-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cxaigent-text-muted);
    animation: cxaigent-bounce 1.4s ease-in-out infinite;
}
.cxaigent-typing-dots span:nth-child(1) { animation-delay: 0s; }
.cxaigent-typing-dots span:nth-child(2) { animation-delay: .2s; }
.cxaigent-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes cxaigent-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity:.45; }
    40%            { transform: translateY(-6px); opacity:1; }
}
/* Dynamic thinking message text.
   Colour tracks the input-placeholder variable, which PHP fixes to a muted
   tone that is readable on whichever surface is active (#6b6b6b on the fixed
   light chat surface, the dim white default on the legacy dark fallback).
   Using --cxaigent-text-bright here rendered near-white on the light surface
   (~1.04 contrast), which is why the messages were invisible. */
.cxaigent-thinking-text {
    font-size: 12px;
    color: var(--cxaigent-input-placeholder, var(--cxaigent-text-dim));
    opacity: 0;
    transition: opacity 0.4s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.cxaigent-thinking-visible { opacity: 1; }

/* ═══════════════════════════════════
   SUGGESTIONS (uses .cxaigent-suggestion-pill per JS)
   ═══════════════════════════════════ */
.cxaigent-suggestions {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 8px 16px;
    background: var(--cxaigent-dark-900); flex-shrink: 0;
}
#cxaigent-widget .cxaigent-suggestion-pill {
    padding: 6px 14px;
    border-radius: var(--cxaigent-radius-pill);
    border: 1px solid var(--cxaigent-dark-border);
    color: var(--cxaigent-input-text, var(--cxaigent-text-bright));
    background: var(--cxaigent-input-bg, var(--cxaigent-dark-700));
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background var(--cxaigent-transition), color var(--cxaigent-transition), border-color var(--cxaigent-transition), transform var(--cxaigent-transition);
    font-family: var(--cxaigent-font);
}
#cxaigent-widget .cxaigent-suggestion-pill:hover {
    background: rgba(93,101,199,.18);
    color: #fff;
    border-color: var(--cxaigent-brand-color);
    transform: scale(1.04);
}

/* ═══════════════════════════════════
   INPUT AREA (DARK)
   ═══════════════════════════════════ */
#cxaigent-widget .cxaigent-input-area {
    display: flex !important;
    align-items: flex-end; gap: 8px;
    padding: 12px 14px;
    background: var(--cxaigent-input-bg, var(--cxaigent-dark-800)) !important;
    border-top: 1px solid var(--cxaigent-dark-border);
    flex-shrink: 0;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
}
#cxaigent-widget .cxaigent-input {
    flex: 1;
    display: block !important;
    border: 1px solid #9a9797 !important;
    border-radius: 22px;
    padding: 10px 16px;
    font-size: 14px; font-family: var(--cxaigent-font);
    color: var(--cxaigent-input-text, var(--cxaigent-text-bright)) !important;
    -webkit-text-fill-color: var(--cxaigent-input-text, var(--cxaigent-text-bright)) !important;
    background: var(--cxaigent-input-bg, var(--cxaigent-dark-700)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
    resize: none; outline: none;
    line-height: 1.45; max-height: 120px; overflow-y: auto;
    transition: border-color var(--cxaigent-transition);
}
#cxaigent-widget .cxaigent-input::placeholder { color: var(--cxaigent-input-placeholder, var(--cxaigent-text-dim)); }
#cxaigent-widget .cxaigent-input:focus    { border-color: var(--cxaigent-brand-color) !important; background: var(--cxaigent-input-bg, var(--cxaigent-dark-700)) !important; color: var(--cxaigent-input-text, var(--cxaigent-text-bright)) !important; }
#cxaigent-widget .cxaigent-input:disabled { opacity: 0.5; cursor: not-allowed; }
@keyframes cxaigent-send-glow {
    0%   { box-shadow: 0 0 0 0   var(--cxaigent-brand-glow, rgba(93,101,199,.35)); transform: scale(1.08); }
    60%  { box-shadow: 0 0 0 8px transparent; transform: scale(1.08); }
    100% { box-shadow: 0 0 0 0   transparent; transform: scale(1.08); }
}
#cxaigent-widget .cxaigent-send-btn {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--cxaigent-brand-color) !important; color: #fff !important;
    border: none !important;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform var(--cxaigent-transition);
}
#cxaigent-widget .cxaigent-send-btn:hover {
    background: var(--cxaigent-brand-color) !important;
    color: #fff !important;
    animation: cxaigent-send-glow 0.55s ease-out infinite;
}
#cxaigent-widget .cxaigent-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* ═══════════════════════════════════
   CHAT-SCREEN DISCLAIMER (DARK)
   ═══════════════════════════════════ */
.cxaigent-chat-disclaimer {
    text-align: center;
    padding: 6px 16px;
    font-size: 11px; color: rgba(255,255,255,.75);
    background: linear-gradient(135deg, var(--cxaigent-brand-color) 0%, var(--cxaigent-brand-dark) 100%);
    flex-shrink: 0;
    line-height: 1.4;
}
#cxaigent-widget .cxaigent-chat-disclaimer a {
    color: #fff;
    text-decoration: underline; text-underline-offset: 2px;
    font-size: 11px;
}
#cxaigent-widget .cxaigent-chat-disclaimer a:hover { color: rgba(255,255,255,.8); }

/* ═══════════════════════════════════
   POWERED-BY (BRAND)
   ═══════════════════════════════════ */
.cxaigent-chat-powered-by {
    text-align: center;
    padding: 8px 16px;
    font-size: 11px; color: rgba(255,255,255,.75);
    background: linear-gradient(135deg, var(--cxaigent-brand-color) 0%, var(--cxaigent-brand-dark) 100%);
    border-top: 1px solid rgba(255,255,255,.18);
    flex-shrink: 0;
}
#cxaigent-widget .cxaigent-chat-powered-by a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-size: 11px; }
#cxaigent-widget .cxaigent-chat-powered-by a:hover { color: rgba(255,255,255,.8); }
.cxaigent-verified-badge {
    font-family: var(--cxaigent-font);
    font-size: 11.5px;
    color: var(--cxaigent-text-dim);
    font-weight: 400;
    margin-top: 4px;
    padding: 0 4px;
}

/* ═══════════════════════════════════
   MOBILE OVERLAY
   ═══════════════════════════════════ */
.cxaigent-mobile-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 999988;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ═══════════════════════════════════
   MOBILE (≤ 640px)
   ═══════════════════════════════════ */
@media (max-width: 640px) {
    .cxaigent-mobile-overlay.cxaigent-overlay-active { display: block; }
    .cxaigent-chat-window {
        position: fixed; inset: 0;
        width: 100%; max-width: 100%;
        max-height: 100%; height: 100%;
        border-radius: 0; z-index: 999989;
        background: var(--cxaigent-dark-900);
    }
    .cxaigent-chat-screen {
        max-height: 100%; height: 100%; min-height: unset;
    }
    #cxaigent-widget { right: 16px; bottom: 16px; }
}

/* ═══════════════════════════════════
   POST-NAVIGATION LAUNCHER CUE
   (mobile "page follows the chat": the widget stays collapsed so the
    destination page is visible — this nudges the launcher + shows a bubble)
   ═══════════════════════════════════ */
@keyframes cxaigent-nudge-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
#cxaigent-widget.cxaigent-launcher-nudge .cxaigent-toggle-btn {
    animation: cxaigent-nudge-pulse 1.4s ease-in-out 3;
}
#cxaigent-widget .cxaigent-nav-cue {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    max-width: 220px;
    background: var(--cxaigent-dark-900, #111111);
    color: #ffffff;
    font-size: 13px;
    line-height: 1.35;
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
    white-space: normal;
    text-align: left;
    z-index: 999991;
    animation: cxaigent-pop-in .2s ease;
}

/* ═══════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .cxaigent-toggle-btn,
    .cxaigent-send-btn,
    .cxaigent-chat-window { transition: none; animation: none; }
    .cxaigent-send-btn:hover { animation: none; transform: scale(1.06); }
    .cxaigent-online-dot,
    .cxaigent-typing-dots span { animation: none; }
    #cxaigent-widget.cxaigent-launcher-nudge .cxaigent-toggle-btn { animation: none; }
    #cxaigent-widget .cxaigent-nav-cue { animation: none; }
}