/*
    Knowledge-base assistant.

    Sits inside the knowledge-base page, so it borrows that page's type and colour rather than
    introducing a second visual language: a box with a question in it, the answer as ordinary
    prose beneath, and the articles it used at the end.

    IT IS NOT A CHAT WINDOW. No bubbles, no avatar, no floating launcher in the corner. The
    question is asked once and answered once, and the answer is documentation - so it is set like
    the documentation next to it, and the reader can scan it the same way.
*/

.bs-agent {
    margin: 0 0 28px 0;
    padding: 18px 20px 14px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: #fafafa;
}

.bs-agent-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.bs-agent-input {
    flex: 1 1 auto;
    min-width: 0;                    /* a flex item will not shrink below its content without this */
    padding: 9px 12px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    font-size: 15px;
    line-height: 1.3;
    background: #ffffff;
    color: #222222;
}

.bs-agent-input:focus {
    outline: none;
    border-color: #0777ff;
    box-shadow: 0 0 0 2px rgba(7, 119, 255, .15);
}

.bs-agent-ask {
    flex: 0 0 auto;
    padding: 9px 22px;
    border: 1px solid #0777ff;
    border-radius: 3px;
    background: #0777ff;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.bs-agent-ask:hover:not(:disabled),
.bs-agent-ask:focus:not(:disabled) {
    background: #0668dd;
    border-color: #0668dd;
}

.bs-agent-ask:disabled {
    background: #9bc5ff;
    border-color: #9bc5ff;
    cursor: default;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip hidden fields and
   fill everything else - and a screen reader is kept out by aria-hidden and tabindex, not by
   this rule. */
.bs-agent-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.bs-agent-status {
    min-height: 20px;                /* reserve the line so the answer does not jump when it clears */
    margin: 10px 2px 0;
    font-size: 13px;
    color: #777777;
}

.bs-agent.is-busy .bs-agent-status::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 6px;
    border-radius: 50%;
    background: #777777;
    animation: bs-agent-pulse 1.1s ease-in-out infinite;
}

@keyframes bs-agent-pulse {
    0%, 100% { opacity: .25; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bs-agent.is-busy .bs-agent-status::after { animation: none; opacity: .6; }
}

.bs-agent-answer {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: #222222;
    /* The answer arrives token by token; without this a long unbroken path or article id would
       widen the whole block mid-stream. */
    overflow-wrap: break-word;
}

.bs-agent-answer:empty { margin: 0; }

.bs-agent-answer h4,
.bs-agent-answer h5,
.bs-agent-answer h6 {
    margin: 18px 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #111111;
}

.bs-agent-answer p { margin: 0 0 10px; }
.bs-agent-answer ul,
.bs-agent-answer ol { margin: 0 0 12px; padding-left: 22px; }
.bs-agent-answer li { margin: 0 0 4px; }

.bs-agent-answer code {
    padding: 1px 5px;
    border-radius: 3px;
    background: #eeeeee;
    font-size: .92em;
    color: #333333;
}

.bs-agent-error { color: #b00020; }

.bs-agent-sources { margin: 6px 0 0; }

.bs-agent-sources-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #888888;
    margin: 0 0 4px;
}

.bs-agent-source-list {
    margin: 0;
    padding: 0 0 0 18px;
    font-size: 14px;
}

.bs-agent-source-list li { margin: 0 0 2px; }

.bs-agent-note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #999999;
}

@media (max-width: 600px) {
    .bs-agent { padding: 14px 14px 12px; }

    /* The button under the field rather than beside it: at this width a side-by-side pair leaves
       the input too narrow to read a question back in. */
    .bs-agent-form { flex-direction: column; }
    .bs-agent-ask { width: 100%; }
}

/*
    The thread. One block per exchange, the question above its answer, oldest first - a
    transcript rather than a chat: the reader is building up an understanding of one topic, and
    scrolling back to what they asked three questions ago is the normal case.
*/
.bs-agent-thread:not(:empty) { margin: 0 0 16px; }

.bs-agent-exchange + .bs-agent-exchange {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e6e6e6;
}

.bs-agent-question {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #111111;
}

/* A quiet marker rather than a bubble: it says "you asked this" without turning the page into
   a messaging app. */
.bs-agent-question::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 1em;
    margin-right: 8px;
    vertical-align: -2px;
    background: #0777ff;
    border-radius: 2px;
}

/*
    The question box is hidden while an answer is being written, and comes back when it is ready
    for the next one.

    Disabling it was not enough: a greyed-out field still reading "Ask a follow-up..." invites a
    question it will not accept, and the placeholder is a promise the widget cannot keep mid-
    answer. The status line stays visible throughout, so the widget is never silent - it says what
    it is doing instead of offering something that does not work.
*/
.bs-agent.is-busy .bs-agent-form {
    display: none;
}

/* Without this the answer jumps up as the form disappears and back down as it returns. */
.bs-agent.is-busy .bs-agent-status {
    margin-top: 0;
}

/* The transcript link an editor sees. Quiet on purpose: it is a tool for whoever maintains the
   documentation, not part of what the widget offers a visitor. */
.bs-agent-log {
    float: right;
    margin: -2px 0 0;
    font-size: 12px;
    color: #888888;
    text-decoration: none;
    border-bottom: 1px dotted #bbbbbb;
}

.bs-agent-log:hover,
.bs-agent-log:focus { color: #0777ff; border-bottom-color: #0777ff; }

/* The route out, under the question field: once, beneath the place where the reader either asks
   again or gives up on asking. Quiet - the reader who needs it is the one the answer failed, and
   the one it worked for should not be told twice that it might not have. */
.bs-agent-escalate {
    margin: 6px 2px 0;
    font-size: 13px;
    color: #666666;
}

/* A button because it acts rather than navigates, but set like the sentence it sits in: a second
   blue box beside "Ask" would read as a second way to submit the question. */
.bs-agent-copy {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #0777ff;
    cursor: pointer;
    text-decoration: underline;
}

.bs-agent-copy:hover,
.bs-agent-copy:focus { color: #0668dd; }

.bs-agent-copy-note {
    color: #4a8a4a;
    font-weight: 600;
}

/*
    PANEL PLACEMENT - the drawer and its handle.

    Used where the widget must not take part in the layout: on a knowledge base page the article is
    the page, and a question box appended under text that runs for several screens is reached by
    nobody who is still looking for it.

    THE HANDLE TRAVELS WITH THE DRAWER. It is the same control both ways - it opens the panel and
    it collapses it again - so it stays against the panel's edge rather than disappearing beneath
    it. Everything here is display only: the widget inside is the one used everywhere else.
*/

.bs-agent.is-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1040;                   /* above the page, below the navbar's own dropdowns */
    width: 420px;
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 46px 20px 24px;
    border: 0;
    border-left: 1px solid #dddddd;
    border-radius: 0;
    background: #ffffff;
    box-shadow: -6px 0 24px rgba(0, 0, 0, .12);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .25s ease;
}

.bs-agent.is-panel.is-open {
    transform: translateX(0);
}

/* A vertical tab on the edge of the window. Reads bottom-to-top, the usual direction for a tab on
   the right, so the text is upright to a reader tilting their head the way the tab suggests. */
.bs-agent-launcher {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 1041;                   /* over the panel, so the handle is never covered */
    transform: translateY(-50%);
    padding: 16px 9px;
    border: 0;
    border-radius: 4px 0 0 4px;
    background: #0777ff;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform-origin: center;
    box-shadow: -2px 0 8px rgba(0, 0, 0, .18);
    transition: right .25s ease, background-color .15s;
}

.bs-agent-launcher:hover,
.bs-agent-launcher:focus { background: #0668dd; }

.bs-agent-launcher.is-open { right: 420px; }

.bs-agent-close {
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 2px 8px;
    border: 0;
    background: none;
    color: #888888;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.bs-agent-close:hover,
.bs-agent-close:focus { color: #222222; }

/* In the drawer the heading is the panel's title, so it carries the top row rather than floating
   under the close button. */
.bs-agent.is-panel .bs-agent-heading {
    margin-top: 0;
}

@media (max-width: 600px) {
    .bs-agent.is-panel { padding: 46px 14px 20px; }

    /* Full width leaves nowhere for the handle to stand, so the close button is the way out and
       the tab returns when the drawer does. */
    .bs-agent-launcher.is-open { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .bs-agent.is-panel,
    .bs-agent-launcher { transition: none; }
}