/* ---------------------------------------------------------------------------
   Ask BIGGS - the chat bubble and its panel.

   A file of its own, like assets/css/site-search.css: main.css is ~200KB and
   this site is deployed by hand, so a tweak to the chat panel should not mean
   re-uploading all of it.

   Colours are the ones already in use on the site rather than new ones.
   --------------------------------------------------------------------------- */

:root {
    --cb-red: #be2230;
    --cb-navy: #1c214f;
    --cb-ink: #212529;
    --cb-muted: #6c757d;      /* decorative: typing dots */
    --cb-muted-text: #5c636a; /* text: darker, for contrast headroom */
    --cb-line: #e6e6e6;
    --cb-wash: #f7f7f9;
}

/* ---------------------------------------------------------------------------
   Every colour below is set explicitly, never inherited.

   This widget is dropped into pages carrying a ~200KB stylesheet plus Bootstrap,
   and an inherited value loses to ANY rule that matches the element directly,
   whatever the specificity. Two things were invisible because of it:

     .chatbot__title    an inline `h1,h2,...` rule in index.php set it to the
                        body ink, so white-on-navy became near-black-on-navy -
                        a contrast ratio of 1.01, which is why the panel heading
                        simply was not there.
     .chatbot__subtitle a bare `p { color: #b3b3b3 }` in style.css.

   So: if an element in this widget shows text, it names its own colour here.
   --------------------------------------------------------------------------- */

/* --- Trigger -------------------------------------------------------------- */

.chatbot__open {
    position: fixed;
    right: 4rem;
    bottom: 1rem;
    z-index: 1990;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.15rem;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    background: var(--cb-red);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
}

/* Hidden until the script un-hides it, so a visitor without JavaScript never
   sees a button that cannot open anything. */
.chatbot__open[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
    .chatbot__open:hover { background: var(--cb-navy); transform: translateY(-2px); }
}

.chatbot__open:focus-visible {
    outline: 3px solid var(--cb-navy);
    outline-offset: 3px;
}

/* The scroll-to-top control already sits in this corner, so the bubble shrinks
   to its icon on a phone rather than stacking on top of it. */
.chatbot__open-label { color: #fff; }

@media (max-width: 575.98px) {
    .chatbot__open { right: .75rem; bottom: 4.5rem; padding: .7rem .8rem; }
    .chatbot__open-label { display: none; }
}

/* Nothing in the corner while the panel is open - it would sit on the backdrop. */
body.chatbot-open .chatbot__open { display: none; }

/*
 * The scroll-to-top control goes too.
 *
 * Belt to the z-index's braces: a floating page control hovering over a modal
 * backdrop is wrong even when it is behind the panel, and this stops the same
 * bug returning if that button's z-index is ever raised again.
 *
 * !important because the markup carries Bootstrap's .d-flex, which is itself
 * declared !important and would otherwise win.
 */
body.chatbot-open .scroll-top { display: none !important; }

/* --- Panel ---------------------------------------------------------------- */

.chatbot {
    position: fixed;
    inset: 0;

    /*
     * Above the site's own furniture, below its lightbox.
     *
     * 2100 was picked to clear the site search (2000) and was not nearly enough:
     * .scroll-top is 99999 and the mobile nav drawer is 9997, so the scroll-to-top
     * button floated on top of the open chat panel. Measured ceilings on this
     * site: 99999 is the highest z-index in use on a page, and 999999 is reserved
     * by GLightbox.
     *
     * So this sits at 100000 - one clear of everything the site puts on screen,
     * and still under the lightbox, which is a full-screen overlay the visitor
     * asked for and should win.
     */
    z-index: 100000;
}

.chatbot[hidden] { display: none; }

.chatbot__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 9, 66, .45);
}

.chatbot__panel {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(34rem, calc(100vh - 2rem));
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .3);
    overflow: hidden;
    animation: chatbot-in .16s ease-out;
}

@keyframes chatbot-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .chatbot__panel { animation: none; }
}

/* Full screen on a phone: a floating card at this size leaves too little room
   for the keyboard and the transcript at once. */
@media (max-width: 575.98px) {
    .chatbot__panel {
        inset: 0;
        width: 100%;
        max-height: none;
        border-radius: 0;
    }
}

/* --- Head ----------------------------------------------------------------- */

.chatbot__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    color: #fff !important;
    background: var(--cb-navy);
}

.chatbot__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; }

.chatbot__subtitle { margin: .15rem 0 0; font-size: .78rem; color: rgba(255, 255, 255, .88); opacity: 1; }

.chatbot__close {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    font-size: 1.4rem;
    line-height: 1;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.chatbot__close:hover { background: rgba(255, 255, 255, .15); }

.chatbot__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- Transcript ----------------------------------------------------------- */

.chatbot__log {
    flex: 1 1 auto;
    min-height: 8rem;
    padding: 1rem;
    overflow-y: auto;
    background: var(--cb-wash);
}

.chatbot__msg { margin-bottom: .75rem; display: flex; flex-direction: column; }

.chatbot__msg--you { align-items: flex-end; }
.chatbot__msg--bot { align-items: flex-start; }

.chatbot__bubble {
    max-width: 85%;
    padding: .6rem .85rem;
    font-size: .9rem;
    line-height: 1.5;
    border-radius: 12px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.chatbot__msg--bot .chatbot__bubble {
    color: var(--cb-ink);
    background: #fff;
    border: 1px solid var(--cb-line);
    border-bottom-left-radius: 4px;
}

.chatbot__msg--you .chatbot__bubble {
    color: #fff;
    background: var(--cb-red);
    border-bottom-right-radius: 4px;
}

/* --- Typing indicator ------------------------------------------------------ */

.chatbot__msg--typing .chatbot__bubble {
    display: inline-flex;
    gap: .25rem;
    padding: .7rem .85rem;
}

.chatbot__msg--typing span {
    width: .4rem;
    height: .4rem;
    background: var(--cb-muted);
    border-radius: 50%;
    animation: chatbot-blink 1.2s infinite ease-in-out;
}

.chatbot__msg--typing span:nth-child(2) { animation-delay: .2s; }
.chatbot__msg--typing span:nth-child(3) { animation-delay: .4s; }

@keyframes chatbot-blink {
    0%, 80%, 100% { opacity: .25; }
    40%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .chatbot__msg--typing span { animation: none; opacity: .6; }
}

/* --- Links and suggestions -------------------------------------------------- */

.chatbot__sources { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .4rem; }

.chatbot__source {
    font-size: .78rem;
    font-weight: 600;
    color: var(--cb-navy);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.chatbot__source:hover, .chatbot__source:focus-visible { color: var(--cb-red); }

.chatbot__chips, .chatbot__openers {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}

.chatbot__openers {
    margin: 0;
    padding: .65rem 1rem;
    border-top: 1px solid var(--cb-line);
    background: #fff;
}

.chatbot__openers[hidden] { display: none; }

.chatbot__chip, .chatbot__opener {
    padding: .35rem .7rem;
    font-size: .8rem;
    line-height: 1.3;
    color: var(--cb-navy);
    text-align: left;
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 999px;
    cursor: pointer;
}

.chatbot__opener { background: var(--cb-wash); }

.chatbot__chip:hover, .chatbot__opener:hover {
    border-color: var(--cb-red);
    color: var(--cb-red);
}

.chatbot__chip:focus-visible, .chatbot__opener:focus-visible {
    outline: 2px solid var(--cb-navy);
    outline-offset: 2px;
}

/* --- Composer -------------------------------------------------------------- */

.chatbot__form {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1rem;
    border-top: 1px solid var(--cb-line);
    background: #fff;
}

.chatbot__form.is-busy { opacity: .6; pointer-events: none; }

.chatbot__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: .55rem .75rem;
    font-size: .9rem;
    font-family: inherit;
    color: var(--cb-ink);
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 999px;
}

.chatbot__input:focus-visible {
    outline: 2px solid var(--cb-navy);
    outline-offset: 1px;
}

/* The placeholder too. Left alone it takes the browser default, which is around
   2.8:1 on white - readable if you already know what it says. It is the only
   hint of what to type, so it is worth being able to read. */
.chatbot__input::placeholder { color: var(--cb-muted-text); opacity: 1; }
.chatbot__input::-webkit-input-placeholder { color: var(--cb-muted-text); opacity: 1; }
.chatbot__input::-moz-placeholder { color: var(--cb-muted-text); opacity: 1; }

.chatbot__send {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    color: #fff;
    background: var(--cb-red);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.chatbot__send:hover { background: var(--cb-navy); }

.chatbot__send:focus-visible { outline: 2px solid var(--cb-navy); outline-offset: 2px; }

.chatbot__foot {
    margin: 0;
    padding: .5rem 1rem .75rem;
    font-size: .72rem;
    color: var(--cb-muted-text);
    background: #fff;
}

/* --- Utility ---------------------------------------------------------------- */

.chatbot__sronly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Off-canvas rather than display:none - some bots skip fields hidden the
   obvious way, and aria-hidden on the wrapper keeps it from a screen reader. */
.chatbot__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}