/* ─────────────────────────────────────────────────────────────────────────────
   Ask Teravera chat bar
   Loaded INSIDE a Shadow DOM root (see Views/Partials/AskWidget.cshtml + scripts/ask-widget.js),
   so it cannot be affected by, or affect, Bootstrap / site.min.css. Hand-written (no sass step).

   Two rules that keep the frosted-glass pill working:
     • never put opacity / filter / clip-path / mask / will-change on .root, .stack or .pill —
       backdrop-filter then sees nothing. Only .window is animated.
     • the window carries no backdrop-filter of its own.
   ───────────────────────────────────────────────────────────────────────────── */

:host {
    all: initial;

    /* ── tokens ─────────────────────────────────────────────── */
    --ask-font: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --ask-ink: #14161a;
    --ask-ink-2: #3c4046;
    --ask-muted: #595c62;           /* 6.7:1 on white, 5.4:1 on the worst case (pill over the black footer) */
    --ask-line: rgba(9, 14, 21, .12);
    --ask-link: #0e5a9e;
    --ask-accent: #0236ad;          /* Teravera blue */
    --ask-brand: #0038b7;           /* Teravera vivid blue (suggestion pill hover border) */
    --ask-chip-bg: #656b74;         /* suggestion pills: solid mid grey (white text on it is 5.4:1) ... */
    --ask-chip-bg-hover: #565c65;   /* ... a touch deeper while hovered (lighter would drop the text contrast) */
    --ask-chip-fg: #fff;

    --ask-pill-bg: rgba(255, 255, 255, .94);
    --ask-pill-h: 68px;
    --ask-pill-r: 12px;
    --ask-pill-w: 320px;
    --ask-pill-w-open: 560px;
    --ask-pill-w-chat: 720px;
    --ask-blur: 10px;
    --ask-shadow-pill: 0 -1px 0 0 rgba(0, 0, 0, .05), 0 1px 3px 0 rgba(9, 14, 21, .2), 0 6px 14px 0 rgba(0, 0, 0, .24);

    --ask-send: 32px;
    --ask-send-off-bg: rgba(9, 14, 21, .10);
    --ask-send-off-fg: #6c6f74;     /* inactive control: exempt from text contrast, still readable */
    --ask-send-on-bg: #0038b7;      /* Teravera blue: active send button and the stop button while an answer is written */
    --ask-send-on-bg-hover: #002f9c;
    --ask-send-on-fg: #fff;

    --ask-win-bg: #fff;
    --ask-win-r: 12px;
    --ask-win-shadow: 0 0 0 1px rgba(9, 14, 21, .08), 0 24px 64px rgba(9, 14, 21, .28), 0 4px 12px rgba(9, 14, 21, .12);
    --ask-win-w: 66.667%;           /* ⅔ of the available width ... */
    --ask-win-vh: 66.667;           /* ... and ⅔ of the viewport height */
    --ask-win-min-w: 360px;
    --ask-win-max-w: 1100px;
    --ask-win-min-h: 320px;
    --ask-win-max-h: 900px;
    --ask-col: 46rem;

    --ask-user-bg: #eeeff2;         /* the visitor's own messages: light grey, like Claude's (was near-black) */
    --ask-user-fg: #14161a;
    --ask-err-bg: #fdecec;
    --ask-err-fg: #8a1111;
    --ask-warn-bg: #fff7e0;
    --ask-warn-fg: #5c4400;

    --ask-gutter: 16px;
    --ask-bottom: 24px;
    --ask-top: 16px;
    --ask-gap: 12px;
    --ask-ease: cubic-bezier(.16, 1, .3, 1);

    --ask-vh: 1vh;                  /* JS overrides from visualViewport on touch devices */
    --ask-kb: 0px;                  /* JS: on-screen keyboard height */
    /* --ask-cookie-h is set by JS (height of the cookie banner while it is showing) */

    /* The host itself is position:fixed at the bottom of the viewport (inline style from the partial). */
    padding: 0 var(--ask-gutter) calc(var(--ask-bottom) + var(--ask-cookie-h, 0px) + var(--ask-kb, 0px));
}

@supports (height: 1dvh) {
    :host { --ask-vh: 1dvh; }
}

:host([data-suppressed]) { visibility: hidden; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Bootstrap's .visually-hidden does not exist inside the shadow root. */
.vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { display: block; width: 16px; height: 16px; flex: none; }

button, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.root {
    position: relative;
    font-family: var(--ask-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ask-ink);
    text-align: left;
    -webkit-text-size-adjust: 100%;
    pointer-events: none;           /* the page stays clickable around the bar */
}

/* ── layout ────────────────────────────────────────────────────── */

.stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ask-gap);
    /* never taller than the free viewport (shrinks for the keyboard / cookie banner / a tall pill) */
    max-height: calc(100 * var(--ask-vh) - var(--ask-top) - var(--ask-bottom) - var(--ask-cookie-h, 0px) - var(--ask-kb, 0px));
}

.window,
.compact,
.pill { pointer-events: auto; }

/* ── the pill (Fin.ai) ─────────────────────────────────────────── */

.pill {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex: none;
    width: min(var(--ask-pill-w), 100%);
    min-height: var(--ask-pill-h);
    padding: 18px 16px 18px 20px;
    border-radius: var(--ask-pill-r);
    background: var(--ask-pill-bg);
    -webkit-backdrop-filter: blur(var(--ask-blur));
    backdrop-filter: blur(var(--ask-blur));
    box-shadow: var(--ask-shadow-pill);
    transition: width .45s cubic-bezier(.45, 0, .2, 1);
}

/* No ring around the pill while it has focus (design choice: match Fin's clean pill). The caret, the wider pill and
   the suggestion chips already show that it is active. */

.root[data-ui="focus"] .pill { width: min(var(--ask-pill-w-open), 100%); }
.root[data-ui="chat"] .pill  { width: min(var(--ask-pill-w-chat), 100%); }

.field {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    align-self: stretch;
}

.q {
    flex: 1;
    min-width: 0;
    height: 32px;
    max-height: 184px;
    padding: 5px 8px 6px 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    resize: none;
    overflow-y: auto;
    font-size: 14px;
    line-height: 21px;
    color: var(--ask-ink);
    -webkit-appearance: none;
    appearance: none;
    scrollbar-width: thin;
}

.q:disabled { cursor: not-allowed; }

/* rotating placeholder: an aria-hidden overlay, never the placeholder attribute */
.ph {
    position: absolute;
    inset: 5px 8px 6px 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 21px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ask-muted);
    pointer-events: none;
    opacity: 1;
    transition: opacity .25s ease;
}

.ph.is-hidden { opacity: 0; }

.send,
.toggle {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    align-self: flex-end;
    width: var(--ask-send);
    height: var(--ask-send);
    padding: 0;
    border: 0;
    border-radius: 50%;
    transition: background-color .2s ease, color .2s ease;
}

/* 44px touch target inside the 48px pill */
.send::after,
.toggle::after { content: ""; position: absolute; inset: -6px; }

.send {
    border-radius: 10px;            /* grey rounded box holding the Teravera star */
    background: var(--ask-send-off-bg);
    color: var(--ask-send-off-fg);
    cursor: default;
}

.send[aria-disabled="false"] {
    background: var(--ask-send-on-bg);
    color: var(--ask-send-on-fg);
    cursor: pointer;
    transition: background-color .2s ease;
}

.send svg { width: 15px; height: 15px; }

.send[aria-disabled="false"]:hover { background: var(--ask-send-on-bg-hover); }

.toggle {
    margin-right: 8px;
    background: rgba(9, 14, 21, .06);
    color: var(--ask-ink-2);
}

.toggle:hover { background: rgba(9, 14, 21, .12); }
.toggle svg { width: 18px; height: 18px; }

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--ask-ink);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px #fff;
}

/* ── suggestions (focus state) ─────────────────────────────────── */

.compact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: min(var(--ask-pill-w-open), 100%);
    animation: ask-rise .28s var(--ask-ease);
}

.chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.chip {
    max-width: 100%;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid transparent;              /* no visible outline (the fill shows through, sizes stay the same) */
    border-radius: var(--ask-pill-r);           /* same corners as the input bar */
    background: var(--ask-chip-bg);            /* solid grey (not see-through) */
    box-shadow: none;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    color: var(--ask-chip-fg);
    transition: background-color .2s ease, border-color .2s ease;
}

/* Hover (or keyboard focus): the grey deepens a touch. White text needs the grey to stay mid-to-dark
   (5.4:1 at rest, 6.7:1 on hover). */
.chip:hover,
.chip:focus-visible {
    background: var(--ask-chip-bg-hover);
}

/* Line under the pill. Its space is always reserved (so the pill never jumps when it appears); it is only visible
   while the pill is active, and it never blocks clicks on the page. */
.note {
    flex: none;
    max-width: min(var(--ask-pill-w-open), 100%);
    margin: -4px 0 0;
    padding: 6px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    color: var(--ask-muted);
    visibility: hidden;
    pointer-events: none;
}

.root[data-ui="focus"] .note { visibility: visible; }

.note strong { font-weight: 500; color: var(--ask-ink); }

/* ── the big window ────────────────────────────────────────────── */

.window {
    position: relative;
    display: flex;
    flex-direction: column;
    /* ⅔ of the viewport high (shrinks if the stack runs out of room) */
    flex: 0 1 clamp(var(--ask-win-min-h), calc(var(--ask-win-vh) * var(--ask-vh)), var(--ask-win-max-h));
    min-height: 0;
    /* ⅔ of the available width */
    width: clamp(var(--ask-win-min-w), var(--ask-win-w), var(--ask-win-max-w));
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--ask-win-r);
    background: var(--ask-win-bg);
    box-shadow: var(--ask-win-shadow);
    overscroll-behavior: contain;
    transform-origin: 50% 100%;
    animation: ask-rise .22s var(--ask-ease);
}

.window:focus,
.window:focus-visible { outline: 0; }

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

.win-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 12px 12px 10px 18px;
    border-bottom: 1px solid var(--ask-line);
}

.win-star { display: inline-flex; order: 1; color: var(--ask-accent); }   /* after the title, before the buttons */
.win-star svg { width: 18px; height: 18px; }

.win-title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ask-ink);
}

.win-head .icon-btn:first-of-type { order: 2; margin-left: auto; }   /* push the buttons to the right edge */
.win-head .icon-btn { order: 2; }

.icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ask-line);
    border-radius: 10px;
    background: #fff;
    color: var(--ask-muted);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.icon-btn::after { content: ""; position: absolute; inset: -4px; }   /* 44px hit area */
.icon-btn:hover { border-color: #c9ccd2; background: #f6f7f9; color: var(--ask-ink); }

.thread {
    flex: 1;
    min-height: 0;
    padding: 18px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #ced4da transparent;
}

.thread:focus { outline: 0; }
.thread:focus-visible { outline: 2px solid var(--ask-ink); outline-offset: -2px; }

.col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: var(--ask-col);
    margin: 0 auto;
}

.jump {
    position: absolute;
    left: 50%;
    bottom: calc(var(--ask-foot-h, 56px) + 10px);
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--ask-line);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(9, 14, 21, .18);
    color: var(--ask-ink);
    transform: translateX(-50%);
    transition: background-color .2s ease;
}

.jump:hover { background: #f3f5f8; }
.jump svg { width: 18px; height: 18px; }

/* One wrapper per exchange (question + answer): the newest one is pinned to the top of the window. */
.turn { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.foot {
    flex: none;
    margin: 0;
    padding: 10px 20px 12px;
    border-top: 1px solid var(--ask-line);
    background: #fbfbfc;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--ask-muted);
}

.foot a { color: var(--ask-ink); text-decoration: underline; }

/* ── messages ──────────────────────────────────────────────────── */

.msg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.msg-user { align-items: flex-end; }
.msg-bot  { align-items: flex-start; }

.bubble { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

.msg-user .bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--ask-user-bg);
    color: var(--ask-user-fg);
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.5;
}

.msg-bot .bubble {
    width: 100%;
    font-size: 15px;
    line-height: 1.6;
}

.md > :first-child { margin-top: 0; }
.md > :last-child  { margin-bottom: 0; }
.md p { margin: 0 0 .75em; }
.md .md-h { margin: 1em 0 .4em; font-weight: 700; }
.md ul, .md ol { margin: 0 0 .75em; padding-left: 1.3em; }
.md li + li { margin-top: .3em; }
.md strong { font-weight: 700; }
.md a { color: var(--ask-link); text-decoration: underline; text-underline-offset: 2px; }
.md code {
    padding: 1px 5px;
    border-radius: 4px;
    background: #f1f3f5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
}
.md pre {
    margin: 0 0 .75em;
    padding: 10px 12px;
    overflow-x: auto;
    border: 1px solid var(--ask-line);
    border-radius: 10px;
    background: #f6f7f9;
    font-size: 13px;
    line-height: 1.5;
}
.md pre code { padding: 0; background: none; font-size: inherit; }
.md blockquote {
    margin: 0 0 .75em;
    padding-left: 12px;
    border-left: 3px solid var(--ask-line);
    color: var(--ask-ink-2);
}
.md hr { margin: 1em 0; border: 0; border-top: 1px solid var(--ask-line); }
.md .tbl { margin: 0 0 .75em; overflow-x: auto; }
.md table { border-collapse: collapse; font-size: 14px; }
.md th, .md td { padding: 6px 10px; border: 1px solid var(--ask-line); text-align: left; vertical-align: top; }
.md th { background: #f6f7f9; font-weight: 700; }

/* Newly arrived answer text fades in (see applyFade in ask-widget.js; keep .45s in step with FADE_MS there). */
.fade { animation: ask-fade .45s ease-out both; }

@keyframes ask-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.actions { display: flex; align-items: center; gap: 4px; margin-top: 2px; }

.act-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ask-muted);
    transition: background-color .2s ease, color .2s ease;
}

.act-btn::after { content: ""; position: absolute; inset: -6px; }
.act-btn:hover { background: #f1f3f5; color: var(--ask-ink); }
.act-btn.is-done { color: var(--ask-ink); }

/* Grounding icon + its click-to-open panel (shown for well-grounded answers; see AskWidget:GroundingMinScore) */
.act-btn.act-ground { color: #0f7a3d; }
.act-btn.act-ground.is-low { color: #b23a2b; }
.act-btn.act-ground:hover,
.act-btn.act-ground.is-active { background: #e8f5ed; }
.act-btn.act-ground.is-low:hover,
.act-btn.act-ground.is-low.is-active { background: #fbeceb; }

.ground-panel,
.refs-panel {
    width: 100%;                    /* as wide as the answer text above it */
    padding: 4px 0 2px;             /* no box: lines up with the answer text */
    border: 0;
    background: #fff;
    /* Same type as the site header's menu links (Roboto, medium weight, .875rem, dark text) */
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5;
    color: #212529;
}

.ground-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #0f7a3d;
}

.ground-panel.is-low .ground-head { color: #b23a2b; }
.ground-head svg { width: 16px; height: 16px; }
.ground-score { font-weight: 500; color: var(--ask-muted); }
.ground-body { margin: 6px 0 0; font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Referenced documents: a link icon that opens a list of the documents the answer drew on (names only). */
.act-btn.is-active { background: #f1f3f5; color: var(--ask-ink); }

.refs-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.refs-head svg { width: 16px; height: 16px; }
.refs-list { margin: 6px 0 0; padding-left: 24px; font-weight: 400; overflow-wrap: anywhere; }
.refs-list li { margin: 2px 0; }

/* Thumbs up / down: filled and accent coloured while selected; a short note beside them says what happened. */
.act-btn.act-fb.is-on { color: var(--ask-accent); }
.fb-status { margin-left: 4px; font-size: 12px; line-height: 1.4; color: var(--ask-muted); }
.fb-status.is-ok { color: #0f7a3d; }
.fb-status.is-err { color: #b23a2b; }

.notice {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.notice-err  { background: var(--ask-err-bg);  color: var(--ask-err-fg); }
.notice-warn { background: var(--ask-warn-bg); color: var(--ask-warn-fg); }

.notice .retry {
    margin-left: 8px;
    padding: 2px 10px;
    min-height: 28px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    font-size: 13px;
    color: inherit;
}

.thinking {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ask-muted);
    font-size: 14px;
}

.thinking svg {
    width: 18px;
    height: 18px;
    color: var(--ask-accent);
    animation: ask-spin 1.4s ease-in-out infinite;
}

@keyframes ask-spin {
    0%   { transform: rotate(0deg); }
    45%  { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}

/* "Thinking..." gets a shimmer: a soft, right-leaning white band travels across the word from left to right, over and over.
   It is a moving gradient clipped to the text, so the text itself never changes. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .thinking span {
        /* 120deg = the band leans to the right ("/") instead of standing upright. */
        /* The brightest point of the band. Pure white (#fff) made the word vanish for a moment; this is a pale grey,
           roughly half way between the word's colour and white. Lower the last digits for a stronger shimmer. */
        --ask-shimmer-peak: #b4b7bc;
        background-image: linear-gradient(120deg,
            var(--ask-muted) 0%, var(--ask-muted) 38%, var(--ask-shimmer-peak) 50%, var(--ask-muted) 62%, var(--ask-muted) 100%);
        background-size: 250% 100%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: ask-shimmer 1.2s linear infinite;
    }
}

@keyframes ask-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
}

/* ── small screens: near full-screen "sheet" ───────────────────── */
/* JS uses this exact media query to switch to dialog semantics / inert page / scroll lock. */

@media (max-width: 575.98px), (max-height: 500px) {
    :host {
        --ask-gutter: 12px;
        --ask-bottom: 16px;
        --ask-top: 8px;
    }

    .window { flex: 1 1 auto; width: 100%; max-width: none; border-radius: 16px; }

    /* Like Fin on a phone: at rest the bar is the same compact pill, centred at the bottom (the base width rule
       applies); once it is active (focused / chatting) it opens to the full width between the side margins. */
    .root[data-ui="focus"] .pill,
    .root[data-ui="chat"] .pill { width: 100%; }
    .compact { width: 100%; }

    /* let the open window use all the free height */
    .root[data-ui="chat"] .stack {
        height: calc(100 * var(--ask-vh) - var(--ask-top) - var(--ask-bottom) - var(--ask-cookie-h, 0px) - var(--ask-kb, 0px));
    }

    .thread { padding: 14px 14px; }
}

/* iOS zooms the page when a focused field is under 16px */
@media (pointer: coarse), (max-width: 767.98px) {
    .q, .ph { font-size: 16px; line-height: 24px; }
    .q { height: 34px; }
    .chip { min-height: 44px; }
}

/* ── user preferences ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .thinking svg { animation: none; }
    .thinking span {
        animation: none;
        background: none;
        color: var(--ask-muted);
        -webkit-text-fill-color: currentColor;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .pill {
        background: rgba(255, 255, 255, .98);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pill { background: rgba(255, 255, 255, .98); }
}

@media (forced-colors: active) {
    .pill, .window, .send, .toggle, .icon-btn, .chip, .jump { border: 1px solid CanvasText; }
    .send[aria-disabled="false"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    /* Gradients are dropped in forced-colors mode, which would leave clipped text invisible. */
    .thinking span { animation: none; background: none; color: CanvasText; -webkit-text-fill-color: currentColor; }
}