/* ============================================================
   VTI Chatbot 2026 — floating chat box (Figma "Component 1",
   node 2858:31103): 56px launcher, 416x640 panel 24px above it,
   56px from the right/bottom edge on the 1920 canvas.
   Loaded on most pages without vti-home.css, so the theme resets
   the vti-home base normally supplies are repeated here.
   ============================================================ */

.vti-chatbot-widget {
    --vcw-blue: #0c5ed9;
    --vcw-ink: #1d2939;
    --vcw-muted: #667085;
    --vcw-icon: #475467;
    --vcw-green: #079455;
    --vcw-gray-25: #f9fafb;
    --vcw-gray-100: #f2f4f7;
    --vcw-scrollbar: #eaecf0;
    --vcw-chip: #f2f5fe;
    --vcw-chip-hover: #e3eafd;
    --vcw-quote: #dbeafe;
    --vcw-error: #b42318;
    --vcw-line: #eaecf0;
    --vcw-grad-brand: linear-gradient(275deg, #1947ff 0%, #429aff 100%);
    --vcw-grad-send: linear-gradient(315deg, #0c5ed9 0%, #4d4dfb 100%);
    --vcw-edge: 56px;
    --vcw-gap: 24px;
    --vcw-launcher: 56px;
    --vcw-panel-w: 416px;
    --vcw-panel-h: 640px;

    position: fixed;
    right: var(--vcw-edge);
    bottom: var(--vcw-edge);
    /* Above Flatsome's sticky header and back-to-top button, below Popup Maker overlays. */
    z-index: 9990;
    width: var(--vcw-launcher);
    height: var(--vcw-launcher);
    font-family: "Instrument Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    /* The child theme sets letter-spacing on body; the design has none. */
    letter-spacing: normal;
    text-align: left;
    color: var(--vcw-ink);
}

.vti-chatbot-widget * {
    box-sizing: border-box;
}

/* Flatsome styles bare tags at (0,0,1); :where() keeps these resets at (0,1,0)
   so the element classes below still win by source order. */
.vti-chatbot-widget :where(p, h2, ul, ol, li, table, th, td, pre) {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: normal;
    list-style: none;
}

.vti-chatbot-widget :where(button) {
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    cursor: pointer;
}

.vti-chatbot-widget :where(img) {
    display: block;
    max-width: none;
    height: auto;
    border: 0;
}

.vti-chatbot-widget :where(a) {
    color: inherit;
    text-decoration: none;
}

.vti-chatbot-widget :where(:focus-visible) {
    outline: 2px solid var(--vcw-blue);
    outline-offset: 2px;
}

/* ---------- Launcher ---------- */

.vti-chatbot-widget__launcher {
    position: relative;
    display: block;
    width: var(--vcw-launcher);
    height: var(--vcw-launcher);
    overflow: hidden;
    border-radius: 9999px;
    box-shadow: 0 4px 9px rgba(18, 109, 251, .12);
    transition: transform .2s ease;
}

/* The design's 1px white/40% inner stroke, drawn above the image. */
.vti-chatbot-widget__launcher::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
    pointer-events: none;
}

.vti-chatbot-widget__launcher img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (hover: hover) {
    .vti-chatbot-widget__launcher:hover {
        transform: scale(1.06);
    }
}

/* Not in the design: an answer came in while the panel was closed. Top right of
   the launcher; its text is for screen readers only (aria-describedby). */
.vti-chatbot-widget__unread {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 9999px;
    background: #f04438;
    color: transparent;
    font-size: 0;
    pointer-events: none;
}

.vti-chatbot-widget__unread[hidden],
.vti-chatbot-widget[data-expanded="true"] .vti-chatbot-widget__unread {
    display: none;
}

/* ---------- Teaser ---------- */

/* SRS: an invite to the left of the launcher, shown on page load and gone after
   5s. The whole show / hide is this animation (it ends hidden), so it does not
   wait for the chat box script; the script removes it at once when the chat opens. */
.vti-chatbot-widget__teaser {
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    padding: 8px 16px;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .12), 0 0 0 1px rgba(16, 24, 40, .04);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--vcw-ink);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(8px, -50%);
    animation: vti-chatbot-widget-teaser 5s ease .5s both;
}

@keyframes vti-chatbot-widget-teaser {
    0% {
        opacity: 0;
        visibility: visible;
        transform: translate(8px, -50%);
    }

    6%,
    94% {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%);
    }

    100% {
        opacity: 0;
        visibility: hidden;
        transform: translate(0, -50%);
    }
}

@media (hover: hover) {
    .vti-chatbot-widget__teaser:hover {
        color: var(--vcw-blue);
    }
}

/* Gone once the chat opens (also on the click that loads the delayed script);
   never on screens narrower than 640px (SRS). */
.vti-chatbot-widget__teaser[hidden],
.vti-chatbot-widget[data-expanded="true"] .vti-chatbot-widget__teaser,
.vti-chatbot-widget:has(.vti-chatbot-widget__launcher:is(:active, :focus)) .vti-chatbot-widget__teaser {
    display: none;
}

@media (max-width: 639px) {
    .vti-chatbot-widget__teaser {
        display: none;
    }
}

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

.vti-chatbot-widget__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--vcw-gap));
    display: flex;
    flex-direction: column;
    width: var(--vcw-panel-w);
    /* Short laptop screens: keep the header on screen, 24px below the viewport top. */
    height: min(var(--vcw-panel-h), calc(100vh - var(--vcw-edge) - var(--vcw-launcher) - var(--vcw-gap) * 2));
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, .05);
    transform-origin: bottom right;
    opacity: 0;
    transform: translateY(12px) scale(.98);
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.vti-chatbot-widget .vti-chatbot-widget__panel:focus {
    /* Focused by script on phones only to move the reader into the dialog. */
    outline: none;
}

.vti-chatbot-widget[data-expanded="true"] .vti-chatbot-widget__panel {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

.vti-chatbot-widget__header {
    display: flex;
    flex: none;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--vcw-gray-100);
}

.vti-chatbot-widget .vti-chatbot-widget__title {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--vcw-ink);
}

.vti-chatbot-widget__controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vti-chatbot-widget__control {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: opacity .15s ease;
}

@media (hover: hover) {
    .vti-chatbot-widget__control:hover {
        opacity: .7;
    }
}

/* ---------- Messages ---------- */

.vti-chatbot-widget__log {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--vcw-scrollbar) transparent;
}

/* The design's 6px bar inset 6px from the panel edge. */
.vti-chatbot-widget__log::-webkit-scrollbar {
    width: 18px;
}

.vti-chatbot-widget__log::-webkit-scrollbar-thumb {
    border: 6px solid transparent;
    border-radius: 9999px;
    background: var(--vcw-scrollbar) padding-box;
}

.vti-chatbot-widget__log:focus-visible {
    outline-offset: -2px;
}

.vti-chatbot-widget__msg {
    display: flex;
    flex: none;
    align-items: flex-start;
    gap: 12px;
}

.vti-chatbot-widget__msg--user {
    justify-content: flex-end;
    padding-left: 40px;
}

.vti-chatbot-widget__msg--bot {
    padding-right: 40px;
}

.vti-chatbot-widget__msg-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vti-chatbot-widget__msg--user .vti-chatbot-widget__msg-content {
    align-items: flex-end;
    gap: 6px;
}

.vti-chatbot-widget__msg--bot .vti-chatbot-widget__msg-content {
    flex: 1;
    gap: 16px;
}

/* Answer body and its source block (the design's 40px gap). */
.vti-chatbot-widget__answer {
    display: flex;
    flex-direction: column;
    gap: 40px;
    overflow-wrap: anywhere;
}

.vti-chatbot-widget__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Not in the design: three dots until the first words of the answer arrive. */
.vti-chatbot-widget__typing {
    display: flex;
    gap: 6px;
    align-items: center;
    height: 24px;
}

.vti-chatbot-widget__typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vcw-blue);
    opacity: .3;
    animation: vti-chatbot-widget-typing 1s ease-in-out infinite;
}

.vti-chatbot-widget__typing-dot:nth-child(3) {
    animation-delay: .2s;
}

.vti-chatbot-widget__typing-dot:nth-child(4) {
    animation-delay: .4s;
}

@keyframes vti-chatbot-widget-typing {
    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.vti-chatbot-widget__avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
}

.vti-chatbot-widget__avatar--user {
    display: grid;
    place-items: center;
    background: var(--vcw-gray-25);
    box-shadow: inset 0 0 0 1px var(--vcw-gray-100);
}

.vti-chatbot-widget .vti-chatbot-widget__avatar--bot {
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 4px 9px rgba(18, 109, 251, .12);
}

.vti-chatbot-widget .vti-chatbot-widget__bubble {
    /* Keeps the question's Shift+Enter line breaks. */
    white-space: pre-wrap;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--vcw-blue);
    color: #fff;
    overflow-wrap: anywhere;
}

.vti-chatbot-widget__time {
    font-size: 12px;
    line-height: 16px;
    color: var(--vcw-muted);
}

/* Answer time (left) and like / dislike / copy (right), as in the full-page chat.
   As close under the answer as a time under a question (the bot column has a 16px gap). */
.vti-chatbot-widget__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -8px;
}

/* Not before the answer is done. */
.vti-chatbot-widget__msg[data-pending] .vti-chatbot-widget__meta,
.vti-chatbot-widget__time:empty {
    display: none;
}

/* Right-aligned also without a time. 24px buttons around 16px icons: the icons
   keep the design's 8px spacing and line up with the column edge (-4px). */
.vti-chatbot-widget .vti-chatbot-widget__actions {
    display: flex;
    align-items: center;
    margin: -4px -4px -4px auto;
}

.vti-chatbot-widget .vti-chatbot-widget__action {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    /* Flatsome gives every button a 24px min-width and a margin. */
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: 9999px;
    color: var(--vcw-icon);
    transition: color .15s ease, background-color .15s ease;
}

.vti-chatbot-widget .vti-chatbot-widget__action-icon {
    display: block;
    width: 16px;
    height: 16px;
}

/* Not in the design (the icons are inline SVG in currentColor): the chosen vote
   swaps to its filled icon, all blue, and copy shows a green check for a moment
   once the answer is on the clipboard. */
.vti-chatbot-widget .vti-chatbot-widget__action-icon--done,
.vti-chatbot-widget .vti-chatbot-widget__action:is([aria-pressed="true"], [data-copied]) .vti-chatbot-widget__action-icon {
    display: none;
}

.vti-chatbot-widget .vti-chatbot-widget__action:is([aria-pressed="true"], [data-copied]) .vti-chatbot-widget__action-icon--done {
    display: block;
}

.vti-chatbot-widget .vti-chatbot-widget__action[aria-pressed="true"] {
    color: var(--vcw-blue);
}

.vti-chatbot-widget .vti-chatbot-widget__action[data-copied] {
    color: var(--vcw-green);
}

@media (hover: hover) {
    .vti-chatbot-widget .vti-chatbot-widget__action:not([aria-pressed="true"]):hover {
        background: var(--vcw-gray-100);
    }
}

.vti-chatbot-widget__answer-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vti-chatbot-widget__answer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vti-chatbot-widget .vti-chatbot-widget__answer-lead {
    font-weight: 500;
}

.vti-chatbot-widget .vti-chatbot-widget__bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vti-chatbot-widget .vti-chatbot-widget__bullet {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 14px;
}

.vti-chatbot-widget__bullet::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vcw-ink);
}

/* Flatsome sets strong to `bolder`. */
.vti-chatbot-widget .vti-chatbot-widget__bullet-title {
    font-weight: 500;
}

.vti-chatbot-widget__bullet-text {
    color: var(--vcw-muted);
}

/* ---------- Answer markdown beyond the design (lists, tables, code, links) ---------- */

.vti-chatbot-widget .vti-chatbot-widget__strong {
    font-weight: 600;
}

.vti-chatbot-widget .vti-chatbot-widget__link {
    color: var(--vcw-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vti-chatbot-widget .vti-chatbot-widget__bullets--ordered {
    counter-reset: vti-chatbot-widget-step;
}

.vti-chatbot-widget .vti-chatbot-widget__bullets--ordered > .vti-chatbot-widget__bullet {
    padding-left: 22px;
    counter-increment: vti-chatbot-widget-step;
}

.vti-chatbot-widget__bullets--ordered > .vti-chatbot-widget__bullet::before {
    content: counter(vti-chatbot-widget-step) ".";
    top: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-weight: 500;
}

.vti-chatbot-widget .vti-chatbot-widget__bullets--nested {
    margin-top: 6px;
}

.vti-chatbot-widget__bullets--nested > .vti-chatbot-widget__bullet::before {
    border: 1px solid var(--vcw-ink);
    background: none;
}

.vti-chatbot-widget .vti-chatbot-widget__code-inline {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--vcw-gray-100);
    font-size: .875em;
}

.vti-chatbot-widget .vti-chatbot-widget__code {
    margin: 0;
    padding: 12px;
    overflow-x: auto;
    border-radius: 8px;
    background: var(--vcw-gray-25);
    font-size: 13px;
    line-height: 20px;
    white-space: pre;
}

.vti-chatbot-widget__table-wrap {
    overflow-x: auto;
}

.vti-chatbot-widget .vti-chatbot-widget__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 20px;
}

.vti-chatbot-widget .vti-chatbot-widget__table th,
.vti-chatbot-widget .vti-chatbot-widget__table td {
    padding: 6px 8px;
    border: 1px solid var(--vcw-line);
    text-align: left;
    vertical-align: top;
    font-size: inherit;
}

.vti-chatbot-widget .vti-chatbot-widget__table th {
    background: var(--vcw-gray-25);
    font-weight: 600;
}

/* ---------- Turn states: error, retry, clarification choices ---------- */

.vti-chatbot-widget .vti-chatbot-widget__error-text {
    color: var(--vcw-error);
}

.vti-chatbot-widget__retry,
.vti-chatbot-widget__choice {
    align-self: flex-start;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 9999px;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    transition: background-color .1s linear, color .1s linear;
}

.vti-chatbot-widget .vti-chatbot-widget__retry {
    border: 1px solid var(--vcw-blue);
    color: var(--vcw-blue);
}

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

.vti-chatbot-widget .vti-chatbot-widget__choice {
    background: var(--vcw-chip);
    color: var(--vcw-ink);
}

@media (hover: hover) {
    .vti-chatbot-widget .vti-chatbot-widget__retry:hover,
    .vti-chatbot-widget .vti-chatbot-widget__choice:hover {
        background: var(--vcw-chip-hover);
        color: var(--vcw-blue);
    }
}

.vti-chatbot-widget__source {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 20px;
    border-left: 2px solid var(--vcw-quote);
}

.vti-chatbot-widget .vti-chatbot-widget__source-title {
    font-style: italic;
    color: var(--vcw-muted);
}

.vti-chatbot-widget__source-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border-radius: 8px;
    background: var(--vcw-gray-25);
}

/* Block link, inline icon: the arrow follows the last line of a wrapped URL. */
.vti-chatbot-widget .vti-chatbot-widget__source-link {
    display: block;
    color: var(--vcw-blue);
    /* Titles now, not URLs: wrap between words, mid-word only for a very long one. */
    overflow-wrap: break-word;
}

.vti-chatbot-widget .vti-chatbot-widget__source-link img {
    display: inline-block;
    margin-left: 2px;
    vertical-align: -4px;
}

@media (hover: hover) {
    .vti-chatbot-widget .vti-chatbot-widget__source-link:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
    }
}

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

.vti-chatbot-widget__composer {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px 24px;
    background: #fff;
    box-shadow: 0 -10px 20px rgba(0, 0, 0, .05);
}

/* Not in the design: centred just above the composer while newer messages are out of view. */
.vti-chatbot-widget__jump {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    /* Flatsome gives every button a 24px min-width and a margin. */
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--vcw-line);
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .12);
    transform: translateX(-50%);
    transition: opacity .15s linear, visibility .15s linear;
}

.vti-chatbot-widget__jump[data-visible="false"] {
    visibility: hidden;
    opacity: 0;
}

.vti-chatbot-widget__jump img {
    width: 20px;
    height: 20px;
}

@media (hover: hover) {
    .vti-chatbot-widget__jump:hover {
        background: var(--vcw-gray-25);
    }
}

.vti-chatbot-widget__chips {
    position: relative;
}

/* Fades the chips under the right edge while the row can still scroll. */
.vti-chatbot-widget__chips::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 81px;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    pointer-events: none;
    transition: opacity .15s linear;
}

.vti-chatbot-widget__chips[data-end="true"]::after {
    opacity: 0;
}

/* Fades the chips under the left edge once the row has been scrolled. */
.vti-chatbot-widget__chips::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 81px;
    height: 100%;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    pointer-events: none;
    transition: opacity .15s linear;
}

.vti-chatbot-widget__chips[data-start="true"]::before {
    opacity: 0;
}

/* Not in the design: ‹ › over the faded ends while chips are cut off there
   (js/vti-chatbot-chat.js). Touch screens swipe the row instead. */
.vti-chatbot-widget .vti-chatbot-widget__chips-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    /* Flatsome gives every button a 24px min-width and a margin. */
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--vcw-line);
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .12);
    transform: translateY(-50%);
}

.vti-chatbot-widget .vti-chatbot-widget__chips-nav--prev {
    left: 0;
}

.vti-chatbot-widget .vti-chatbot-widget__chips-nav--next {
    right: 0;
}

.vti-chatbot-widget__chips-nav--prev img {
    transform: scaleX(-1);
}

.vti-chatbot-widget__chips[data-start="true"] .vti-chatbot-widget__chips-nav--prev,
.vti-chatbot-widget__chips[data-end="true"] .vti-chatbot-widget__chips-nav--next {
    display: none;
}

@media (hover: none) {
    .vti-chatbot-widget .vti-chatbot-widget__chips-nav {
        display: none;
    }
}

.vti-chatbot-widget__chips-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.vti-chatbot-widget__chips-track::-webkit-scrollbar {
    display: none;
}

.vti-chatbot-widget__chip {
    flex: none;
    height: 36px;
    padding: 8px 12px;
    border-radius: 9999px;
    background: var(--vcw-chip);
    font-size: 14px;
    line-height: 20px;
    color: var(--vcw-ink);
    white-space: nowrap;
    transition: background-color .1s linear, color .1s linear;
}

@media (hover: hover) {
    .vti-chatbot-widget__chip:hover {
        background: var(--vcw-chip-hover);
        color: var(--vcw-blue);
    }
}

/* Flatsome's `form` adds a bottom margin. */
/* A pill while the question is one line; with Shift+Enter lines it grows into a
   rounded box, the send button staying at the bottom. */
.vti-chatbot-widget .vti-chatbot-widget__ask {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    min-height: 52px;
    margin: 0;
    /* 7 + 36px send button + 7 + the 1px border = 52px for one line. */
    padding: 7px 16px 7px 24px;
    border: 1px solid transparent;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, rgba(224, 232, 255, .5) 100%) padding-box,
        linear-gradient(#fff, #fff) padding-box,
        var(--vcw-grad-brand) border-box;
    box-shadow:
        0 30px 30px -3.5px rgba(218, 232, 246, .18),
        0 13.65px 13.65px -2.92px rgba(218, 232, 246, .31),
        0 6.87px 6.87px -2.33px rgba(218, 232, 246, .37),
        0 3.62px 3.62px -1.75px rgba(218, 232, 246, .39),
        0 1.81px 1.81px -1.17px rgba(218, 232, 246, .41),
        0 .71px .71px -.58px rgba(218, 232, 246, .41);
    transition: box-shadow .15s ease;
}

.vti-chatbot-widget .vti-chatbot-widget__ask:focus-within {
    box-shadow:
        0 0 0 4px rgba(12, 94, 217, .12),
        0 6.87px 6.87px -2.33px rgba(218, 232, 246, .37);
}

/* Flatsome styles textarea (min-height 120px, padding, border) and its :focus; the
   pill's :focus-within ring replaces the input outline. */
.vti-chatbot-widget__ask .vti-chatbot-widget__input,
.vti-chatbot-widget__ask .vti-chatbot-widget__input:focus {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: none;
    /* One line; js/vti-chatbot-chat.js grows it with the text, up to 5 lines. */
    display: block;
    height: 24px;
    min-height: 0;
    max-height: 120px;
    /* Centres one line on the 36px send button. */
    margin: 6px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    color: var(--vcw-ink);
    overflow-y: auto;
    resize: none;
}

.vti-chatbot-widget__input::placeholder {
    color: var(--vcw-muted);
    opacity: 1;
}

.vti-chatbot-widget__send {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: var(--vcw-grad-send);
    transition: opacity .1s linear;
}

/* Beats Flatsome's button[disabled] { opacity: .6 } (0,1,1). */
.vti-chatbot-widget .vti-chatbot-widget__send:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.vti-chatbot-widget__send img {
    width: 16px;
    height: 16px;
}

/* The same button stops a streaming answer. */
.vti-chatbot-widget .vti-chatbot-widget__send-icon--stop,
.vti-chatbot-widget__send[data-state="stop"] .vti-chatbot-widget__send-icon--send {
    display: none;
}

.vti-chatbot-widget__send[data-state="stop"] .vti-chatbot-widget__send-icon--stop {
    display: block;
}

/* ---------- Tablet ---------- */

@media (max-width: 1099px) {
    .vti-chatbot-widget {
        --vcw-edge: 24px;
    }
}

/* ---------- Mobile: the open panel takes the whole screen ---------- */

@media (max-width: 699px) {
    .vti-chatbot-widget {
        --vcw-edge: 16px;
        --vcw-launcher: 52px;
    }

    .vti-chatbot-widget__panel {
        position: fixed;
        inset: 0;
        width: auto;
        height: auto;
        border-radius: 0;
        box-shadow: none;
        transform-origin: bottom center;
    }

    .vti-chatbot-widget[data-expanded="true"] .vti-chatbot-widget__launcher {
        visibility: hidden;
    }

    .vti-chatbot-widget__header {
        padding: 16px;
    }

    .vti-chatbot-widget__log {
        padding: 16px;
    }

    .vti-chatbot-widget__msg {
        gap: 8px;
    }

    .vti-chatbot-widget__msg--user {
        padding-left: 24px;
    }

    .vti-chatbot-widget__msg--bot {
        padding-right: 0;
    }

    .vti-chatbot-widget__avatar {
        width: 32px;
        height: 32px;
    }

    .vti-chatbot-widget__avatar--user img {
        width: 20px;
        height: 20px;
    }

    .vti-chatbot-widget__answer {
        gap: 24px;
    }

    .vti-chatbot-widget__source {
        padding-left: 12px;
    }

    .vti-chatbot-widget__source-links {
        padding: 12px;
    }

    .vti-chatbot-widget__composer {
        /* Clears the iOS home indicator. */
        padding: 16px 16px max(16px, env(safe-area-inset-bottom));
    }

    .vti-chatbot-widget__chips::before,
    .vti-chatbot-widget__chips::after {
        width: 40px;
    }

    /* The page behind a full-screen panel must not scroll. */
    html.vti-chatbot-widget-open,
    html.vti-chatbot-widget-open body {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vti-chatbot-widget__launcher,
    .vti-chatbot-widget__panel,
    .vti-chatbot-widget[data-expanded="true"] .vti-chatbot-widget__panel,
    .vti-chatbot-widget__control,
    .vti-chatbot-widget__chips::before,
    .vti-chatbot-widget__chips::after,
    .vti-chatbot-widget__jump,
    .vti-chatbot-widget .vti-chatbot-widget__action,
    .vti-chatbot-widget__chip,
    .vti-chatbot-widget__retry,
    .vti-chatbot-widget__choice,
    .vti-chatbot-widget__send,
    .vti-chatbot-widget .vti-chatbot-widget__ask {
        transition: none;
    }

    .vti-chatbot-widget__typing-dot {
        animation: none;
        opacity: .6;
    }

    /* Still shown for 5s, without sliding in. */
    .vti-chatbot-widget__teaser {
        transform: translate(0, -50%);
        animation-name: vti-chatbot-widget-teaser-still;
    }

    .vti-chatbot-widget__panel {
        transform: none;
    }

    @media (hover: hover) {
        .vti-chatbot-widget__launcher:hover {
            transform: none;
        }
    }
}

@keyframes vti-chatbot-widget-teaser-still {
    0%,
    99.9% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}