/* Grounded FAQ widget (issue #625). Uses the site's own tokens so it cannot
   drift into a second visual language; no colour is invented here. */

/* The launcher and panel are one fixed stack in the corner. `pointer-events`
   is off on the container and back on for its children, so the empty space
   beside the launcher does not swallow clicks on the page underneath. */
.site-chatbot {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.site-chatbot > * {
    pointer-events: auto;
}

.site-chatbot[hidden],
.chatbot-panel[hidden] {
    display: none;
}

.chatbot-launcher {
    border: 0;
    border-radius: 999px;
    padding: 14px 22px;
    background: var(--accent);
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(16, 32, 51, 0.22);
}

/* The panel sits above the launcher in the stack, not below it. */
.chatbot-panel {
    order: -1;
    width: 100%;
    /* dvh, not vh: mobile browsers shrink the viewport when the address bar
       is showing, and vh would put the form under it. */
    max-height: min(620px, calc(100dvh - 120px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    padding: 18px;
    box-shadow: 0 12px 32px rgba(16, 32, 51, 0.20);
}

.chatbot-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.chatbot-close {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 26px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.chatbot-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.chatbot-suggestions button {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text);
    padding: 7px 12px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* Every control keeps a visible keyboard ring; the panel is reachable by
   keyboard alone and must show where focus is. */
.site-chatbot :is(button, input, a):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.site-chatbot h2 {
    margin: 0 0 6px;
    font-size: 19px;
}

.chatbot-scope {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--muted);
}

.chatbot-log {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Bounded and scrolling. Without this the panel grew with every exchange
       until the input left the screen -- the defect visible in the owner's
       narrow-viewport screenshot. */
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 14px;
}

.chatbot-log:empty {
    margin-bottom: 0;
}

.chatbot-said {
    border-radius: var(--radius);
    padding: 10px 13px;
    font-size: 15px;
    line-height: 1.5;
}

.chatbot-said:focus-visible {
    outline: 2px solid var(--accent, #1f57d6);
    outline-offset: 2px;
}

.chatbot-visitor {
    background: #ffffff;
    border: 1px solid var(--border);
    align-self: flex-end;
    max-width: 85%;
}

.chatbot-reply {
    background: #ffffff;
    border: 1px solid var(--border);
    max-width: 92%;
}

.chatbot-answer {
    margin: 0;
}

.chatbot-source,
.chatbot-handoff {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.chatbot-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chatbot-label {
    flex: 1 0 100%;
    font-size: 14px;
    font-weight: 600;
}

.chatbot-input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 10px 12px;
    font: inherit;
    /* 16px on every viewport: iOS zooms the page when a focused field is
       smaller, and the panel is fixed, so the zoom strands it off-screen. */
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--text);
}

@media (max-width: 640px) {
    .site-chatbot {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        width: min(380px, calc(100vw - 24px));
    }

    .chatbot-panel {
        max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
        padding: 16px;
    }

    .chatbot-form button {
        width: 100%;
    }
}