/*
 * Site assistant widget.
 *
 * Colours come from the theme's theme.json presets, with the same values as
 * fallbacks so the widget still matches if the theme changes.
 */

.bcit-chat {
    --bcit-chat-primary: var(--wp--preset--color--primary, #2e3e98);
    --bcit-chat-accent: var(--wp--preset--color--accent, #f2481c);
    --bcit-chat-accent-hover: var(--wp--preset--color--accent-hover, #d63d14);
    --bcit-chat-dark: var(--wp--preset--color--dark, #211e3b);
    --bcit-chat-text: var(--wp--preset--color--contrast, #1b1d21);
    --bcit-chat-muted: var(--wp--preset--color--contrast-2, #6d6d6d);
    --bcit-chat-bg: var(--wp--preset--color--base, #ffffff);
    --bcit-chat-bg-2: var(--wp--preset--color--base-3, #f4f6f9);
    --bcit-chat-border: var(--wp--preset--color--border, #e7e7e7);
    --bcit-chat-radius: 14px;
    --bcit-chat-shadow: 0 12px 40px rgba(33, 30, 59, 0.22);

    font-family: var(--wp--preset--font-family--body, inherit);
    font-size: 15px;
    line-height: 1.5;
    color: var(--bcit-chat-text);
}

.bcit-chat *,
.bcit-chat *::before,
.bcit-chat *::after {
    box-sizing: border-box;
}

.bcit-chat [hidden] {
    display: none !important;
}

/*
 * The theme styles bare section, header, h2 and form elements for page
 * layout (large section padding, header bars, heading margins). None of that
 * belongs inside the widget, and it showed up as a band of empty space above
 * the panel's header.
 */
.bcit-chat section,
.bcit-chat header,
.bcit-chat form,
.bcit-chat h2 {
    margin: 0;
    padding: 0;
    min-height: 0;
    border: 0;
    background: none;
    box-shadow: none;
    position: static;
    float: none;
}

.bcit-chat h2::before,
.bcit-chat h2::after,
.bcit-chat section::before,
.bcit-chat section::after,
.bcit-chat header::before,
.bcit-chat header::after {
    content: none;
    display: none;
}

/* ---------- launcher ---------- */

.bcit-chat__launcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 20px 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--bcit-chat-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    box-shadow: var(--bcit-chat-shadow);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.bcit-chat__launcher:hover {
    background: var(--bcit-chat-accent-hover);
    transform: translateY(-1px);
}

.bcit-chat__launcher:focus-visible,
.bcit-chat button:focus-visible,
.bcit-chat a:focus-visible,
.bcit-chat textarea:focus-visible,
.bcit-chat input:focus-visible,
.bcit-chat select:focus-visible {
    outline: 3px solid var(--bcit-chat-primary);
    outline-offset: 2px;
}

.bcit-chat[data-state="open"] .bcit-chat__launcher {
    display: none;
}

/* ---------- panel ---------- */

.bcit-chat .bcit-chat__panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9991;
    display: flex;
    flex-direction: column;
    width: min(390px, calc(100vw - 32px));
    /* Sized to the conversation, up to a cap, so a short chat is not a tall
       empty panel. The log takes whatever room is left and scrolls. */
    height: auto;
    max-height: min(620px, calc(100vh - 40px));
    margin: 0;
    padding: 0;
    border: 1px solid var(--bcit-chat-border);
    border-radius: var(--bcit-chat-radius);
    background: var(--bcit-chat-bg);
    box-shadow: var(--bcit-chat-shadow);
    overflow: hidden;
}

.bcit-chat .bcit-chat__head {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    margin: 0;
    padding: 12px 12px 12px 16px;
    background: var(--bcit-chat-dark);
    color: #fff;
}

.bcit-chat__head-text {
    flex: 1;
    min-width: 0;
}

.bcit-chat .bcit-chat__title {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #fff;
}

.bcit-chat__badge {
    display: block;
    font-size: 12px;
    opacity: 0.8;
}

.bcit-chat__head .bcit-chat__linkbtn {
    color: #fff;
    font-size: 13px;
}

.bcit-chat__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.bcit-chat__close:hover {
    background: rgba(255, 255, 255, 0.12);
}

.bcit-chat__log {
    flex: 1 1 auto;
    min-height: 96px;
    overflow-y: auto;
    padding: 16px;
    background: var(--bcit-chat-bg-2);
    overscroll-behavior: contain;
}

/* ---------- messages ---------- */

.bcit-chat__msg {
    max-width: 88%;
    margin: 0 0 10px;
    padding: 10px 14px;
    border-radius: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.bcit-chat__msg--assistant {
    background: var(--bcit-chat-bg);
    border: 1px solid var(--bcit-chat-border);
    border-bottom-left-radius: 4px;
}

.bcit-chat__msg--user {
    margin-left: auto;
    background: var(--bcit-chat-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.bcit-chat__msg--proof {
    font-style: italic;
    color: var(--bcit-chat-muted);
}

/* "Searching our site…" then "Responding…" until the first words arrive. */
.bcit-chat__msg.is-pending .bcit-chat__text {
    font-style: italic;
    color: var(--bcit-chat-muted);
    animation: bcit-chat-pulse 1.4s ease-in-out infinite;
}

@keyframes bcit-chat-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.bcit-chat__sources {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--bcit-chat-border);
    font-size: 13px;
    white-space: normal;
}

.bcit-chat__sources-label {
    display: block;
    font-weight: 600;
    color: var(--bcit-chat-muted);
}

.bcit-chat__sources ol {
    margin: 4px 0 0;
    padding-left: 20px;
}

.bcit-chat__sources a {
    color: var(--bcit-chat-primary);
}

.bcit-chat__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    white-space: normal;
}

.bcit-chat__chip {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--bcit-chat-primary);
    border-radius: 999px;
    background: var(--bcit-chat-bg);
    color: var(--bcit-chat-primary);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.bcit-chat__chip:hover {
    background: var(--bcit-chat-primary);
    color: #fff;
}

/* ---------- buttons ---------- */

.bcit-chat__btn {
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--bcit-chat-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.bcit-chat__btn:hover {
    background: var(--bcit-chat-accent-hover);
}

.bcit-chat__btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.bcit-chat__cta {
    display: block;
    margin-top: 10px;
}

.bcit-chat__linkbtn {
    padding: 4px;
    border: 0;
    background: none;
    color: var(--bcit-chat-primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- boot ---------- */

.bcit-chat__boot {
    padding: 14px 16px;
    border-top: 1px solid var(--bcit-chat-border);
    background: var(--bcit-chat-bg);
}

.bcit-chat__boot-text {
    margin: 0 0 10px;
    font-size: 14px;
}

.bcit-chat__progress {
    width: 100%;
    height: 8px;
    margin-bottom: 10px;
    accent-color: var(--bcit-chat-accent);
}

.bcit-chat__boot-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* ---------- composer ---------- */

.bcit-chat .bcit-chat__composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border-top: 1px solid var(--bcit-chat-border);
    background: var(--bcit-chat-bg);
}

.bcit-chat__input {
    flex: 1;
    min-height: 44px;
    max-height: 140px;
    padding: 10px 12px;
    border: 1px solid var(--bcit-chat-border);
    border-radius: 8px;
    font: inherit;
    resize: none;
    color: var(--bcit-chat-text);
    background: var(--bcit-chat-bg);
}

/* ---------- contact dialog ---------- */

.bcit-chat__dialog {
    width: min(500px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 0;
    border-radius: var(--bcit-chat-radius);
    background: var(--bcit-chat-bg);
    color: var(--bcit-chat-text);
    box-shadow: var(--bcit-chat-shadow);
}

.bcit-chat__dialog::backdrop {
    background: rgba(33, 30, 59, 0.55);
}

.bcit-chat .bcit-chat__dialog form {
    margin: 0;
    padding: 20px 22px 18px;
}

.bcit-chat__dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bcit-chat .bcit-chat__dialog h2 {
    margin: 0;
    font-size: 21px;
    color: var(--bcit-chat-dark);
}

.bcit-chat__dialog .bcit-chat__close {
    color: var(--bcit-chat-text);
}

.bcit-chat__dialog .bcit-chat__close:hover {
    background: var(--bcit-chat-bg-2);
}

.bcit-chat__fields p {
    margin: 0 0 12px;
}

.bcit-chat__fields label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
}

.bcit-chat__fields input[type="text"],
.bcit-chat__fields input[type="email"],
.bcit-chat__fields input[type="tel"],
.bcit-chat__fields select,
.bcit-chat__fields textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--bcit-chat-border);
    border-radius: 8px;
    font: inherit;
    color: var(--bcit-chat-text);
    background: var(--bcit-chat-bg);
}

.bcit-chat__qualify {
    display: flex;
    gap: 12px;
}

.bcit-chat__qualify > span {
    flex: 1;
    min-width: 0;
}

.bcit-chat__check label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}

/* The honeypot: off-screen rather than display:none, which bots skip. */
.bcit-chat__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bcit-chat__captcha {
    margin: 4px 0 12px;
    min-height: 0;
}

.bcit-chat__status {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdecea;
    color: #8a1c10;
}

.bcit-chat__status[data-ok="1"] {
    background: #e7f5ea;
    color: #1d5b2b;
}

.bcit-chat__actions .bcit-chat__btn {
    width: 100%;
}

.bcit-chat__consent {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--bcit-chat-muted);
}

.bcit-chat__consent a {
    color: var(--bcit-chat-primary);
}

/* After a successful send, only the confirmation is left. */
.bcit-chat-contact-form.is-sent .bcit-chat__fields > :not(.bcit-chat__status),
.bcit-chat-contact-form.is-sent .bcit-chat__actions,
.bcit-chat-contact-form.is-sent .bcit-chat__consent {
    display: none !important;
}

/* ---------- small screens ---------- */

@media (max-width: 480px) {
    .bcit-chat__launcher {
        right: 16px;
        bottom: 16px;
    }

    .bcit-chat .bcit-chat__panel {
        right: 0;
        bottom: 0;
        width: 100vw;
        max-height: 85vh;
        max-height: 85dvh;
        border-radius: var(--bcit-chat-radius) var(--bcit-chat-radius) 0 0;
    }

    .bcit-chat__qualify {
        flex-direction: column;
        gap: 12px;
    }

    .bcit-chat__head .bcit-chat__linkbtn {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bcit-chat__launcher,
    .bcit-chat__msg.is-pending .bcit-chat__text {
        transition: none;
        animation: none;
    }
}

@media print {
    .bcit-chat {
        display: none !important;
    }
}