/* Prevent body scroll when popup is open */
body.aichat-popup-open {
    overflow: hidden;
}

/* Popup Backdrop */
.aichat-popup-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9997;
    backdrop-filter: blur(2px);
}

/* Popup Trigger Button */
.aichat-popup-trigger {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #2563eb;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: all 0.3s ease;
    z-index: 9999;
}

.aichat-popup-trigger:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

/* WCAG 2.1 AA Focus Indicator */
.aichat-popup-trigger:focus {
    outline: 3px solid #fbbf24;
    outline-offset: 3px;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.aichat-popup-trigger svg {
    color: white;
}

/* Screen reader only text */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Popup Container - Centered */
/* ----------------------------------------------------------------------------
   THEME ISOLATION
   The widget can be rendered inside page content (shortcode) OR injected at
   wp_footer (global icon). Those locations inherit different theme typography
   and button styles, which made the global popup look different from the
   shortcode one. Pin the widget's own base styles on the roots and normalise
   form controls so it renders identically regardless of theme or location.
   These are low-specificity defaults — the widget's specific rules still win.
---------------------------------------------------------------------------- */
.aichat-popup-container,
.aichat-normal-container,
.aichat-popup-trigger {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
.aichat-popup-container *,
.aichat-normal-container * {
    box-sizing: border-box;
    /* Force the widget font onto every descendant so theme element selectors
       (e.g. `p { font-family: … }`) can't leak in. */
    font-family: inherit;
}
/* …but keep code/pre monospace. */
.aichat-popup-container code,
.aichat-popup-container pre,
.aichat-normal-container code,
.aichat-normal-container pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.aichat-popup-container button,
.aichat-popup-container input,
.aichat-popup-container textarea,
.aichat-normal-container button,
.aichat-normal-container input,
.aichat-normal-container textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: normal;
    letter-spacing: normal;
}

.aichat-popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    max-width: calc(100vw - 40px);
    height: 700px;
    max-height: calc(100vh - 80px);
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    z-index: 9998;
    overflow: hidden;
}

/* Popup Header - Clean White Style */
.aichat-popup-header {
    background: white;
    color: #1f2937;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
}

.aichat-popup-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.aichat-close-btn,
.aichat-header-btn {
    background: none;
    border: none;
    /* !important guards against the site theme's generic button:hover styles
       bleeding in (which turned the icon white on hover — white on the light
       hover background fails contrast). The SVG uses currentColor, so pinning
       the button colour pins the icon. #4b5563 passes AA on white (7.6:1) and
       on the #f3f4f6 hover background (6.9:1). */
    color: #4b5563 !important;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border-radius: 6px;
    min-width: 44px;
    min-height: 44px;
}

.aichat-close-btn:hover,
.aichat-header-btn:hover {
    background: #e5e7eb !important; /* visible hover; theme bg must not win */
    color: #1f2937 !important;      /* dark icon — defeats theme's white-on-hover */
}

/* WCAG Focus Indicator */
.aichat-close-btn:focus,
.aichat-header-btn:focus {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    background: #f3f4f6;
}

/* Feedback buttons */
.aichat-feedback {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 8px;
    align-items: center;
}

.aichat-feedback-text {
    font-size: 12px;
    color: #6b7280;
}

.aichat-feedback-btn {
    background: none;
    border: 1px solid #e5e7eb;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
}

.aichat-feedback-btn:hover {
    background: #f9fafb;
    border-color: #2563eb;
}

.aichat-feedback-btn.selected {
    background: #eff6ff;
    border-color: #2563eb;
}

.aichat-feedback-btn:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Feedback detail form (after thumbs down) */
.aichat-feedback-form {
    margin-top: 10px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.aichat-feedback-form-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.aichat-feedback-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.aichat-feedback-tag {
    background: #fff;
    border: 1px solid #6b7280; /* 1.4.11: control boundary needs 3:1 (was #d1d5db at ~2.7:1) */
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 12px;
    font-family: inherit;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 32px;
    line-height: 1.4;
}

.aichat-feedback-tag:hover {
    border-color: #4b5563; /* 1.4.11: keep hover boundary >=3:1 (was #9ca3af at ~2.4:1) */
    background: #f3f4f6;
}

.aichat-feedback-tag.selected {
    background: #eff6ff;
    border-color: #1e40af;
    color: #1e40af; /* 8.0:1 on #eff6ff (AAA) — was #2563eb at 4.75:1 */
    font-weight: 600;
}

.aichat-feedback-tag:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.aichat-feedback-comment {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #6b7280; /* 1.4.11: control boundary needs 3:1 (was #d1d5db at ~2.7:1) */
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #1f2937;
    resize: vertical;
    min-height: 48px;
    max-height: 120px;
    margin-bottom: 10px;
}

.aichat-feedback-comment:focus {
    outline: 2px solid #2563eb;
    outline-offset: 0;
    border-color: #2563eb;
}

.aichat-feedback-comment::placeholder {
    color: #6b7280; /* 4.83:1 on white (was #9ca3af at 2.54:1) */
}

.aichat-feedback-form-actions {
    display: flex;
    gap: 8px;
}

.aichat-feedback-submit {
    background: #1e40af; /* white = 8.7:1 (AAA) — was #2563eb at 5.17:1 */
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.aichat-feedback-submit:hover {
    background: #1e3a8a; /* white = 10.4:1 */
}

.aichat-feedback-submit:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.aichat-feedback-skip {
    background: none;
    border: 1px solid #6b7280; /* 1.4.11: control boundary needs 3:1 (was #d1d5db at ~2.7:1) */
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 13px;
    font-family: inherit;
    color: #374151; /* 9.4:1 on the #f3f4f6 hover bg — was #6b7280 at 4.39:1 (failed) */
    cursor: pointer;
    transition: all 0.15s;
}

.aichat-feedback-skip:hover {
    background: #f3f4f6;
    border-color: #4b5563; /* 1.4.11: keep hover boundary >=3:1 (was #9ca3af at ~2.4:1) */
}

.aichat-feedback-skip:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Honeypot — kept in the DOM (so bots fill it) but off-screen and out of the
   tab order / AT tree. Not display:none, which some bots skip. */
.aichat-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* Divider marking restored prior-conversation messages on reload */
.aichat-history-divider {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin: 10px 0;
    font-size: 12px;
    color: #4b5563; /* >=4.5:1 on the message background */
}
.aichat-history-divider::before,
.aichat-history-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #c7ccd3; /* >=3:1 separator line */
}

/* =============================================
   LIVE AGENT HANDOFF
   ============================================= */

/* Live-chat promo injected into the site notification bar.
   Colour is inherited from an inline color set per-admin so it matches the bar
   and keeps contrast; the button is a real control sized for WCAG 2.2 SC 2.5.8. */
.aichat-bar-promo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
}
.aichat-bar-promo-text { font-weight: 600; }
.aichat-bar-promo-btn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 14px;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none; /* a bordered button, not a link — no underline */
}
.aichat-bar-promo-btn:hover { background: rgba(127, 127, 127, 0.18); text-decoration: none; }
.aichat-bar-promo-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* Live-agent availability dot (left of the top-bar Live Chat button).
   Clean, professional presence indicator — a solid dot, NO pulse/flash animation
   (so it satisfies WCAG 2.2.2 Pause/Stop/Hide and 2.3.1, and isn't distracting).
   Online vs offline differs by BOTH colour and fill (offline = hollow ring) so it
   doesn't rely on colour alone (WCAG 1.4.1); the button also carries a title. */
.aichat-livechat-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;            /* offline: hollow ring */
    border: 2px solid currentColor;
    opacity: 0.55;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.aichat-livechat-dot.aichat-dot-online {
    background: #16a34a;                 /* online: a calm, professional green */
    border-color: #16a34a;
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.22); /* subtle, STATIC halo (no motion) */
}

/* Top-bar launcher mode → hide the floating bubble entirely. */
.aichat-launcher-topbar #aichat-popup-trigger { display: none !important; }

/* Reset button (icon + label) in the chat header. */
.aichat-header-btn.aichat-reset-btn {
    width: auto;
    gap: 5px;
    padding: 0 8px;
}
.aichat-reset-label { font-size: 13px; font-weight: 600; }

/* Yes/No buttons for the no-agent callback offer. */
.aichat-yesno { display: flex; gap: 8px; margin-top: 4px; }
.aichat-noagent-yes,
.aichat-noagent-no {
    min-height: 36px;
    padding: 6px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}
.aichat-noagent-yes { background: #1e40af; border: 1px solid #1e40af; color: #ffffff; } /* 8.7:1 */
.aichat-noagent-yes:hover { background: #1e3a8a; }
.aichat-noagent-no { background: #ffffff; border: 1px solid #1e40af; color: #1e40af; }
.aichat-noagent-no:hover { background: #eff3ff; }
.aichat-noagent-yes:focus-visible,
.aichat-noagent-no:focus-visible { outline: 3px solid #1e40af; outline-offset: 2px; }

/* Uniform font size for everything inside the conversation. */
.aichat-message-content { font-size: 15px; line-height: 1.55; }
.aichat-message-content h1,
.aichat-message-content h2,
.aichat-message-content h3,
.aichat-message-content h4,
.aichat-message-content h5,
.aichat-message-content h6,
.aichat-message-content p,
.aichat-message-content li,
.aichat-message-content a,
.aichat-message-content strong,
.aichat-message-content em,
.aichat-message-content code,
.aichat-message-content small {
    font-size: 15px;
    line-height: 1.55;
}

/* Handoff mini form (name + email inline in chat) — clean card layout */
.aichat-handoff-form {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.aichat-handoff-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.aichat-handoff-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #eef2ff;
    color: #1e40af; /* 8.7:1 on #eef2ff */
}
.aichat-handoff-titles { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.aichat-handoff-title { font-weight: 700; font-size: 14px; color: #111827; }
.aichat-handoff-sub { font-size: 12px; color: #4b5563; }

.aichat-handoff-field { margin-bottom: 10px; }

.aichat-handoff-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #6b7280; /* 1.4.11: field boundary needs 3:1 */
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    min-height: 42px;
}
.aichat-handoff-form input::placeholder { color: #9097a1; }
.aichat-handoff-form input:focus,
.aichat-handoff-form input:focus-visible {
    outline: 3px solid #1e40af;
    outline-offset: 0;
    border-color: #1e40af;
}

.aichat-handoff-actions { display: flex; gap: 8px; margin-top: 14px; }

.aichat-handoff-connect {
    flex: 1 1 auto;
    background: #1e40af; /* white on #1e40af = 8.7:1 (AAA) */
    color: #fff;
    border: 1px solid #1e40af;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    min-height: 42px;
}
.aichat-handoff-connect:hover { background: #1e3a8a; border-color: #1e3a8a; }
.aichat-handoff-connect:focus-visible { outline: 3px solid #1e40af; outline-offset: 2px; }
.aichat-handoff-connect:disabled { opacity: 0.6; cursor: not-allowed; }

.aichat-handoff-cancel {
    background: #ffffff;
    border: 1px solid #6b7280; /* 1.4.11: ghost-button boundary needs 3:1 */
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #374151;
    cursor: pointer;
    min-height: 42px;
}
.aichat-handoff-cancel:hover { background: #f3f4f6; }
.aichat-handoff-cancel:focus-visible { outline: 3px solid #1e40af; outline-offset: 2px; }

/* Email-verification step in the handoff */
.aichat-handoff-verify {
    background: #1e40af; /* white = 8.7:1 (AAA) — was #2563eb at 5.17:1 */
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    min-height: 36px;
}
.aichat-handoff-verify:hover { background: #1e3a8a; }
.aichat-handoff-verify:focus-visible { outline: 3px solid #1e40af; outline-offset: 2px; }
.aichat-handoff-resend {
    background: none;
    border: 1px solid #6b7280; /* 1.4.11: ghost-button boundary needs 3:1 */
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-family: inherit;
    color: #374151; /* 9.4:1 on the #f3f4f6 hover bg (AAA) */
    cursor: pointer;
    min-height: 36px;
}
.aichat-handoff-resend:hover { background: #f3f4f6; }
.aichat-handoff-resend:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.aichat-handoff-code {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #8a93a0; /* >=3:1 boundary (WCAG 1.4.11) */
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    letter-spacing: 0.2em;
}
.aichat-handoff-code:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }

/* Live chat iframe embedded in chatbot popup.
   flex + min-height matter: a bare percentage height collapses against the
   flex-sized messages container, leaving a tiny iframe. */
.aichat-live-iframe {
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 480px;
    border: none;
    border-radius: 0;
    display: block;
}

/* When live chat is active, the messages container goes flush and loses its
   500px cap so the iframe can fill the whole popup body */
.aichat-popup-container.live-chat-active .aichat-messages,
.aichat-normal-container.live-chat-active .aichat-messages {
    padding: 0;
    min-height: 480px;
    max-height: none;
}

/* Suggested questions */
.aichat-suggested {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.aichat-suggested-title {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.aichat-suggested-question {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    padding: 8px 14px;
    margin: 4px 4px 4px 0;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px; /* WCAG 2.5.8 target size */
    line-height: 1.4;
    text-align: left;
}

.aichat-suggested-question:hover {
    background: #eff6ff;
    border-color: #1e40af;
    color: #1e40af; /* 8.0:1 on #eff6ff (AAA) — was #2563eb at 4.75:1 */
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.15);
}

.aichat-suggested-question:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

/* Focus state for accessibility */
.aichat-suggested-question:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Normal Container */
.aichat-normal-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.aichat-normal-header {
    background: white;
    color: #1f2937;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.aichat-normal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

/* Messages Container - Clean White Background */
.aichat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: white;
    min-height: 400px;
    max-height: 500px;
}

.aichat-popup-container .aichat-messages {
    min-height: auto;
}

/* Message Styles - Koinly Design */
.aichat-message {
    display: flex;
    gap: 12px;
    animation: slideIn 0.3s ease;
}

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

/* Avatar Styles */
.aichat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 14px;
}

.aichat-bot-message .aichat-avatar {
    background: #2563eb;
    color: white;
}

.aichat-bot-message .aichat-avatar-logo {
    background: white;
    padding: 4px;
    border: 2px solid #e5e7eb;
}

.aichat-bot-message .aichat-avatar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.aichat-user-message .aichat-avatar {
    background: #1f2937;
    color: white;
    order: 2;
}

.aichat-message-content {
    padding: 12px 16px;
    border-radius: 12px;
    max-width: 85%;
    word-wrap: break-word;
    line-height: 1.6;
    font-size: 14px;
    color: #1f2937;
}

.aichat-bot-message {
    justify-content: flex-start;
}

.aichat-bot-message .aichat-message-content {
    background: #f9fafb;
    color: #1f2937;
    border: 1px solid #e5e7eb;
}

/* Spacing for rendered markdown blocks (marked output: paragraphs, lists,
   headings). Tight, consistent gaps so multi-part answers read clearly. */
.aichat-bot-message .aichat-message-content > :first-child { margin-top: 0; }
.aichat-bot-message .aichat-message-content > :last-child { margin-bottom: 0; }
.aichat-bot-message .aichat-message-content p { margin: 0 0 10px; font-size: inherit; line-height: 1.6; }
/* Explicit list-style + outside markers so the host theme can't strip the
   bullets or shrink/misalign the items. */
.aichat-bot-message .aichat-message-content ul,
.aichat-bot-message .aichat-message-content ol {
    margin: 8px 0;
    padding-left: 22px;
    list-style-position: outside;
}
.aichat-bot-message .aichat-message-content ul { list-style-type: disc; }
.aichat-bot-message .aichat-message-content ol { list-style-type: decimal; }
.aichat-bot-message .aichat-message-content li {
    margin: 0 0 4px;
    padding-left: 2px;
    font-size: inherit;
    line-height: 1.6;
    display: list-item;
    text-align: left;
}
.aichat-bot-message .aichat-message-content h4,
.aichat-bot-message .aichat-message-content h5,
.aichat-bot-message .aichat-message-content h6 { margin: 12px 0 6px; font-weight: 600; }
.aichat-bot-message .aichat-message-content pre { margin: 8px 0; padding: 10px 12px; background: #eef1f5; border-radius: 6px; overflow-x: auto; }
.aichat-bot-message .aichat-message-content code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
.aichat-bot-message .aichat-message-content pre code { background: none; padding: 0; }
.aichat-bot-message .aichat-message-content blockquote { margin: 8px 0; padding: 4px 0 4px 12px; border-left: 3px solid #d1d5db; color: #4b5563; }

.aichat-user-message {
    justify-content: flex-end;
}

.aichat-user-message .aichat-message-content {
    background: #1f2937;
    color: white;
    order: 1;
}

.aichat-bot-message .aichat-message-content strong {
    color: #111827;
    font-weight: 600;
}

/* COMPACT FORMATTING: Lists and paragraphs */
.aichat-bot-message .aichat-message-content ul,
.aichat-bot-message .aichat-message-content ol {
    margin: 6px 0 !important;
    /* keep bullets indented inside the bubble — 0 pulled the markers flush to the
       left edge so they looked cramped/clipped */
    padding-left: 22px !important;
    list-style-position: outside;
}

.aichat-bot-message .aichat-message-content li {
    margin-bottom: 4px !important;
    padding-left: 2px;
    line-height: 1.5 !important;
}

.aichat-bot-message .aichat-message-content h1,
.aichat-bot-message .aichat-message-content h2,
.aichat-bot-message .aichat-message-content h3 {
    margin-top: 8px !important;
    margin-bottom: 5px !important;
}

.aichat-bot-message .aichat-message-content p {
    margin: 8px 0 !important;
}

/* Sources Styling - Koinly Style */
.aichat-sources-container {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.aichat-sources-header {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* AI Disclaimer - WCAG Compliant Colors */
.aichat-disclaimer {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: 13px; /* Slightly larger for readability */
    color: #78350f; /* Darker for better contrast (was #92400e) */
    line-height: 1.5;
}

.aichat-disclaimer small {
    display: block;
    color: #78350f;
}

.aichat-source-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: white;
    border: 2px solid #e5e7eb; /* Thicker border for visibility */
    border-radius: 8px;
    transition: all 0.2s ease;
}

.aichat-source-item:hover {
    background: #f9fafb;
    border-color: #2563eb;
    transform: translateX(2px);
}

/* Focus within for keyboard navigation */
.aichat-source-item:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.aichat-source-icon {
    width: 18px;
    height: 18px;
    color: #6b7280;
    flex-shrink: 0;
    margin-top: 2px;
}

.aichat-source-content {
    flex: 1;
    min-width: 0;
}

.aichat-source-link {
    color: #1f2937; /* Darker for better contrast */
    text-decoration: underline; /* WCAG - links must be identifiable */
    text-decoration-color: rgba(37, 99, 235, 0.3);
    font-size: 13px;
    line-height: 1.5;
    display: block;
    font-weight: 500;
    transition: all 0.2s;
}

.aichat-source-link:hover {
    color: #1e40af; /* AAA on white/near-white hover bg — was #2563eb (~5:1) */
    text-decoration-color: #1e40af;
}

/* WCAG Focus Indicator */
.aichat-source-link:focus {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 2px;
    background: #eff6ff;
}

/* Input Container - Bottom Section */
.aichat-input-container {
    padding: 16px 20px;
    background: white;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.aichat-input {
    flex: 1;
    border: 2px solid #6b7280; /* 1.4.11: field boundary needs 3:1 */
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 16px; /* Minimum 16px for mobile accessibility */
    resize: none;
    max-height: 120px;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1f2937;
    transition: all 0.2s;
}

.aichat-input::placeholder {
    color: #6b7280; /* Improved contrast from #9ca3af */
}

/* WCAG 2.1 AA Focus Indicator - High contrast */
.aichat-input:focus {
    outline: 3px solid #2563eb;
    outline-offset: 0;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.aichat-input:disabled {
    background: #f9fafb;
    cursor: not-allowed;
    color: #6b7280; /* Better contrast */
    opacity: 0.7;
}

/* Send Button - WCAG Compliant */
.aichat-send-btn {
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 10px;
    min-width: 44px; /* WCAG touch target size */
    min-height: 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
    line-height: 0;
}

/* Icon sizing */
.aichat-send-btn svg,
.aichat-send-icon {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 1.5 !important;
    transform: translateY(1px);
}

.aichat-send-btn:hover:not(:disabled) {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* WCAG Focus Indicator - High visibility */
.aichat-send-btn:focus:not(:disabled) {
    /* #2563eb on white = 5.17:1 (the previous amber was 1.67:1) */
    outline: 3px solid #2563eb;
    outline-offset: 3px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.aichat-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #9ca3af;
}

/* Footer - Powered by */
.aichat-footer {
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

.aichat-footer-text {
    color: #6b7280; /* 4.83:1 on white (was #9ca3af at 2.54:1) */
}
/* Footer links (Accessible.org | Terms) — same size as the surrounding text. */
.aichat-footer-text a {
    color: #4b5563;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: underline;
}
.aichat-footer-text a:hover { text-decoration: none; }
.aichat-footer-text a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 2px; }

.aichat-footer-logo {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #4b5563; /* Darker for better contrast */
    text-decoration: underline;
    text-decoration-color: transparent;
    font-weight: 500;
    transition: all 0.2s;
}

.aichat-footer-logo:hover {
    color: #1f2937;
    text-decoration-color: #1f2937;
}

/* WCAG Focus Indicator */
.aichat-footer-logo:focus {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 2px;
    color: #2563eb;
}

.aichat-footer-icon {
    width: 14px;
    height: 14px;
}

/* Streaming Cursor */
.aichat-cursor {
    display: inline-block;
    width: 2px;
    height: 18px;
    background: #2563eb;
    margin-left: 2px;
    animation: smoothBlink 1s ease-in-out infinite;
    border-radius: 1px;
    vertical-align: text-bottom;
}

@keyframes smoothBlink {
    0%, 45% {
        opacity: 1;
    }
    50%, 95% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.aichat-streaming-text {
    display: inline;
}

/* Loading Animation */
.aichat-loading {
    padding: 12px 16px;
    display: flex;
    gap: 6px;
    justify-content: center;
}

.aichat-loading span {
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.aichat-loading span:nth-child(1) {
    animation-delay: -0.32s;
}

.aichat-loading span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* Scrollbar Styles */
.aichat-messages::-webkit-scrollbar {
    width: 6px;
}

.aichat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.aichat-messages::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.aichat-messages::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Responsive */
@media (max-width: 480px) {
    .aichat-popup-container {
        /* Full-viewport at narrow widths / high zoom (e.g. 320px or 400% zoom) so
           content reflows with maximum space and no cramped layout — WCAG 1.4.10. */
        top: 0;
        left: 0;
        transform: none;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    /* Keep the header title from pushing the action buttons off-screen. */
    .aichat-popup-header h2 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
    }

    .aichat-popup-trigger {
        width: 56px;
        height: 56px;
        bottom: 16px;
        right: 16px;
    }

    .aichat-message-content {
        max-width: 88%;
        font-size: 14px;
    }
    
    .aichat-avatar {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .aichat-input-container {
        padding: 12px 16px;
    }
    
    .aichat-send-btn {
        width: 44px;  /* WCAG 2.5.8 minimum target size */
        height: 44px;
    }
    
    .aichat-footer {
        padding: 10px 16px;
        font-size: 11px;
    }
}

/* =============================================
   WCAG 2.2 Compliance Enhancements
   ============================================= */

/* 2.5.8 Target Size (Minimum) — 24x24 CSS px minimum for all interactive elements */
.aichat-feedback-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aichat-suggested-question {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* 2.4.13 Focus Appearance — 2px+ solid outline with 3:1+ contrast ratio */
.aichat-feedback-btn:focus-visible,
.aichat-suggested-question:focus-visible,
.aichat-close-btn:focus-visible,
.aichat-header-btn:focus-visible,
.aichat-send-btn:focus-visible,
.aichat-popup-trigger:focus-visible,
.aichat-source-link:focus-visible,
.aichat-footer-logo:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.2);
}

/* Remove outline for mouse clicks (non-keyboard) */
.aichat-feedback-btn:focus:not(:focus-visible),
.aichat-suggested-question:focus:not(:focus-visible),
.aichat-close-btn:focus:not(:focus-visible),
.aichat-header-btn:focus:not(:focus-visible),
.aichat-send-btn:focus:not(:focus-visible),
.aichat-popup-trigger:focus:not(:focus-visible),
.aichat-source-link:focus:not(:focus-visible),
.aichat-footer-logo:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* 2.4.11 Focus Not Obscured — ensure chat input focus is visible above sticky footer */
.aichat-input:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 0;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
    position: relative;
    z-index: 1;
}

/* 2.3.3 Animation from Interactions — respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .aichat-message,
    .aichat-popup-container,
    .aichat-popup-trigger,
    .aichat-send-btn,
    .aichat-source-item,
    .aichat-suggested-question,
    .aichat-thinking-indicator {
        animation: none !important;
        transition: none !important;
    }

    .aichat-cursor {
        animation: none !important;
        opacity: 1 !important;
    }

    .aichat-loading span,
    .aichat-typing-dots span {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* (removed: a :focus-within display override could pin the popup open) */

/* High Contrast Mode support */
@media (forced-colors: active) {
    .aichat-popup-trigger,
    .aichat-send-btn {
        border: 2px solid ButtonText;
    }

    .aichat-input {
        border: 2px solid ButtonText;
    }

    .aichat-message-content {
        border: 1px solid CanvasText;
    }

    .aichat-close-btn,
    .aichat-header-btn,
    .aichat-feedback-btn {
        border: 1px solid ButtonText;
    }
}

/* Typing Dots Animation */
.aichat-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.aichat-typing-dots span {
    width: 6px;
    height: 6px;
    background-color: #666;
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.aichat-typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.aichat-typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Thinking Indicator */
.aichat-thinking-indicator {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Handoff form labels and validation error (visible + announced) */
.aichat-handoff-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 5px;
}

.aichat-handoff-error {
    color: #b71c1c; /* 6.84:1 on the form's light background */
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
}

/* Bar above the embedded live chat with the plugin-owned way back to AI */
.aichat-live-topbar {
    display: flex;
    justify-content: flex-start;
    padding: 8px;
    border-bottom: 1px solid #6b7280;
    background: #f9fafb;
}

.aichat-back-to-ai {
    background: none;
    border: 1px solid #6b7280;
    border-radius: 8px;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    min-height: 36px;
    cursor: pointer;
}

.aichat-back-to-ai:hover { background: #eef2ff; }
.aichat-back-to-ai:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Theme-override guard for chat button hovers (WCAG 1.4.3 contrast).
   The site theme ships a generic rule:
       button:hover, …:hover, button:focus { color:#fff; background:#3f4047; }
   which leaks into the chat's <button> controls. On our light hover backgrounds
   the theme's white text won (our base colour is lower specificity) while our
   light hover background won — producing white-on-near-white. Re-assert each
   control's own hover colours with !important so contrast always holds.
   --------------------------------------------------------------------------- */
.aichat-handoff-cancel:hover,
.aichat-handoff-resend:hover,
.aichat-feedback-skip:hover,
.aichat-feedback-tag:hover   { color: #374151 !important; background: #f3f4f6 !important; }

.aichat-feedback-btn:hover   { color: #1f2937 !important; background: #f9fafb !important; }

.aichat-handoff-connect:hover,
.aichat-handoff-verify:hover,
.aichat-feedback-submit:hover,
.aichat-noagent-yes:hover    { color: #ffffff !important; background: #1e3a8a !important; }

.aichat-noagent-no:hover         { color: #1e40af !important; background: #eff3ff !important; }
.aichat-suggested-question:hover { color: #1e40af !important; background: #eff6ff !important; }
.aichat-back-to-ai:hover         { color: #1f2937 !important; background: #eef2ff !important; }
.aichat-bar-promo-btn:hover      { color: inherit !important; }

/* ---------------------------------------------------------------------------
   In-widget live-agent mode (same chat box, no iframe)
   --------------------------------------------------------------------------- */
.aichat-live-banner {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0 0 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #065f46; /* ~9:1 on #ecfdf5 */
}
.aichat-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; flex: 0 0 auto; }
.aichat-live-banner-text { flex: 1 1 auto; }
.aichat-live-end {
    background: #ffffff;
    border: 1px solid #6b7280;
    color: #374151;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    min-height: 30px;
    cursor: pointer;
    flex: 0 0 auto;
}
.aichat-live-end:hover { color: #374151 !important; background: #f3f4f6 !important; } /* guard vs theme button:hover */
.aichat-live-end:focus-visible { outline: 3px solid #1e40af; outline-offset: 2px; }

.aichat-system-note {
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: #4b5563; /* 7:1 on white */
    margin: 8px auto;
    max-width: 92%;
}
.aichat-agent-name {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #1e40af; /* 8.7:1 on white */
    margin-bottom: 2px;
}
/* Agent avatar: a person glyph, distinct from the AI logo. */
.aichat-agent-message .aichat-agent-avatar {
    background: #1e40af;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}