/* ============================================================
   VTI Chatbot 2026 — full-page chat modal (modal/modal.php), opened by
   the homepage hero's chat card below the site header. Ported from the
   static preview (Figma frame "Chatbot", 1920px canvas, 960px chat column).
   Loaded on most pages without vti-home.css, so the theme resets the
   vti-home base normally supplies are repeated here.
   ============================================================ */

.vti-chatbot {
    --vcb-column: 960px;
    --vcb-blue: #0c5ed9;
    --vcb-ink: #1d2939;
    --vcb-muted: #667085;
    --vcb-icon: #475467;
    --vcb-green: #079455;
    --vcb-gray-25: #f9fafb;
    --vcb-gray-100: #f2f4f7;
    --vcb-line: #eaecf0;
    --vcb-chip: #f2f5fe;
    --vcb-chip-hover: #e3eafd;
    --vcb-quote: #dbeafe;
    --vcb-grad-brand: linear-gradient(275deg, #1947ff 0%, #429aff 100%);
    --vcb-grad-send: linear-gradient(315deg, #0c5ed9 0%, #4d4dfb 100%);

    background-color: #fff;
    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(--vcb-ink);
}

.vti-chatbot * {
    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 :where(p, h2, h3, 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;
    font-style: normal;
}

.vti-chatbot :where(ul, ol) {
    list-style: none;
}

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

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

.vti-chatbot :where(img) {
    max-width: 100%;
    height: auto;
    border: 0;
}

.vti-chatbot :where(input) {
    margin: 0;
    box-shadow: none;
    font: inherit;
    color: inherit;
}

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

/* The chat column; 24px gutters, 16px on phones. */
.vti-chatbot__wrap {
    position: relative;
    width: min(var(--vcb-column), calc(100% - 48px));
    margin-inline: auto;
}

@media (max-width: 699px) {
    .vti-chatbot__wrap {
        width: calc(100% - 32px);
    }
}

.vti-chatbot__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The modal: a white screen under Flatsome's header (z-index 1001), so the
   header and its menus stay usable over it; the content starts where the header
   ends (js/vti-chatbot-modal.js measures it). The white also fills behind the
   Header 2026 pill, which is transparent around its rounded box. The
   conversation scrolls, the composer stays at the bottom, the chat box is hidden
   meanwhile and the page behind does not scroll. */
.vti-chatbot-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: var(--vcb-modal-top, 0px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.vti-chatbot-modal[hidden] {
    display: none;
}

.vti-chatbot-modal:focus {
    outline: none;
}

/* Opening: the white sheet fades in and its content rises 16px; closing fades
   out a little faster (js/vti-chatbot-modal.js sets data-state, then hides it
   on transitionend). */
.vti-chatbot-modal {
    opacity: 0;
    transition: opacity .2s ease-in;
}

.vti-chatbot-modal[data-state="open"] {
    opacity: 1;
    transition: opacity .25s ease-out;
}

.vti-chatbot-modal > .vti-chatbot-modal__bar,
.vti-chatbot-modal > .vti-chatbot-modal__scroll,
.vti-chatbot-modal > .vti-chatbot-composer {
    transform: translateY(16px);
    transition: transform .2s ease-in;
}

.vti-chatbot-modal[data-state="open"] > .vti-chatbot-modal__bar,
.vti-chatbot-modal[data-state="open"] > .vti-chatbot-modal__scroll,
.vti-chatbot-modal[data-state="open"] > .vti-chatbot-composer {
    transform: none;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

/* The close button's row stays put while the conversation scrolls: the design
   puts the button 32px below the header and the first message at 120px. */
.vti-chatbot-modal__bar {
    flex: none;
    padding: 32px 0 16px;
}

.vti-chatbot-modal__bar-inner {
    display: flex;
    justify-content: flex-end;
}

.vti-chatbot-modal .vti-chatbot-modal__close {
    display: block;
    width: 24px;
    height: 24px;
    /* Flatsome gives every button a 24px min-width and a line-height. */
    min-width: 0;
    line-height: 0;
    transition: opacity .15s ease;
}

.vti-chatbot-modal__close img {
    display: block;
}

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

@media (max-width: 699px) {
    .vti-chatbot-modal__bar {
        padding: 20px 0 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vti-chatbot-modal,
    .vti-chatbot-modal[data-state="open"],
    .vti-chatbot-modal > .vti-chatbot-modal__bar,
    .vti-chatbot-modal > .vti-chatbot-modal__scroll,
    .vti-chatbot-modal > .vti-chatbot-composer,
    .vti-chatbot-modal[data-state="open"] > .vti-chatbot-modal__bar,
    .vti-chatbot-modal[data-state="open"] > .vti-chatbot-modal__scroll,
    .vti-chatbot-modal[data-state="open"] > .vti-chatbot-composer,
    .vti-chatbot-modal .vti-chatbot-modal__close {
        transform: none;
        transition: none;
    }
}

.vti-chatbot-modal__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The homepage hero's send button while its field is empty (js/vti-chatbot-modal.js):
   kept at vti-home's resting opacity also while the field has the focus. */
.vti-home-hero__chat .vti-home-hero__chat-box .vti-home-hero__chat-send[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}

html.vti-chatbot-modal-open,
html.vti-chatbot-modal-open body {
    overflow: hidden;
}

html.vti-chatbot-modal-open .vti-chatbot-widget {
    display: none;
}

/* Conversation: with the close row above, its first message sits the design's
   120px below the header; the 40px gap to the composer is its bottom padding. */
.vti-chatbot-conversation {
    padding: 48px 0 40px;
}

/* Flatsome renders img inline-block; the design lays every icon out as a block. */
.vti-chatbot-conversation img {
    display: block;
}

.vti-chatbot-conversation .vti-chatbot-conversation__log {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.vti-chatbot-conversation .vti-chatbot-conversation__msg--user {
    justify-content: flex-end;
    padding-left: 120px;
}

.vti-chatbot-conversation .vti-chatbot-conversation__msg--bot {
    padding-right: 120px;
}

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

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

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

.vti-chatbot-conversation .vti-chatbot-conversation__avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
}

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

.vti-chatbot-conversation .vti-chatbot-conversation__avatar--bot {
    max-width: none;
    object-fit: cover;
    border: 1px solid rgb(255 255 255 / 0.4);
    box-shadow: 0 4px 9px rgb(18 109 251 / 0.12);
}

.vti-chatbot-conversation .vti-chatbot-conversation__bubble {
    /* Keeps the question's Shift+Enter line breaks. */
    white-space: pre-wrap;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--vcb-blue);
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

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

.vti-chatbot-conversation .vti-chatbot-conversation__answer {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

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

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

.vti-chatbot-conversation .vti-chatbot-conversation__answer-lead {
    font-weight: 500;
}

.vti-chatbot-conversation .vti-chatbot-conversation__bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Flatsome indents/spaces `ul li` inside content areas above :where() specificity. */
.vti-chatbot-conversation .vti-chatbot-conversation__bullet {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding-left: 14px;
}

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

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

.vti-chatbot-conversation .vti-chatbot-conversation__bullet-text {
    color: var(--vcb-muted);
}

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

.vti-chatbot-conversation .vti-chatbot-conversation__source-title {
    color: var(--vcb-muted);
}

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

/* Block, not flex: a title that wraps keeps the arrow right after its last word. */
.vti-chatbot-conversation .vti-chatbot-conversation__source-link {
    display: block;
    align-self: flex-start;
    color: var(--vcb-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
    /* Titles now, not URLs: wrap between words, mid-word only for a very long one. */
    overflow-wrap: break-word;
}

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

.vti-chatbot-conversation .vti-chatbot-conversation__meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vti-chatbot-conversation .vti-chatbot-conversation__meta .vti-chatbot-conversation__time {
    flex: 1;
}

/* 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-conversation .vti-chatbot-conversation__actions {
    display: flex;
    align-items: center;
    margin: -4px -4px -4px auto;
}

.vti-chatbot-conversation .vti-chatbot-conversation__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(--vcb-icon);
    transition: color .15s ease, background-color .15s ease;
}

.vti-chatbot-conversation .vti-chatbot-conversation__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-conversation .vti-chatbot-conversation__action-icon--done,
.vti-chatbot-conversation .vti-chatbot-conversation__action:is([aria-pressed="true"], [data-copied]) .vti-chatbot-conversation__action-icon {
    display: none;
}

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

.vti-chatbot-conversation .vti-chatbot-conversation__action[aria-pressed="true"] {
    color: var(--vcb-blue);
}

.vti-chatbot-conversation .vti-chatbot-conversation__action[data-copied] {
    color: var(--vcb-green);
}

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

@media (max-width: 1099px) {
    .vti-chatbot-conversation .vti-chatbot-conversation__msg--user {
        padding-left: 48px;
    }

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

@media (max-width: 699px) {
    .vti-chatbot-conversation {
        padding: 16px 0 24px;
    }

    .vti-chatbot-conversation .vti-chatbot-conversation__msg {
        gap: 8px;
    }

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

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

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

    .vti-chatbot-conversation .vti-chatbot-conversation__answer {
        gap: 24px;
    }

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

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

/* Live chat (js/vti-chatbot-chat.js): states and answer markdown beyond the design. */
.vti-chatbot-conversation .vti-chatbot-conversation__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.vti-chatbot-conversation .vti-chatbot-conversation__typing {
    display: flex;
    gap: 6px;
    align-items: center;
    height: 24px;
}

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

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

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

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

/* Time and copy only once the answer is complete. */
.vti-chatbot-conversation .vti-chatbot-conversation__msg[data-pending] .vti-chatbot-conversation__meta {
    display: none;
}

.vti-chatbot-conversation .vti-chatbot-conversation__answer {
    overflow-wrap: anywhere;
}

.vti-chatbot-conversation .vti-chatbot-conversation__strong {
    font-weight: 600;
}

.vti-chatbot-conversation .vti-chatbot-conversation__link {
    color: var(--vcb-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vti-chatbot-conversation .vti-chatbot-conversation__bullets--ordered {
    counter-reset: vti-chatbot-conversation-step;
}

.vti-chatbot-conversation .vti-chatbot-conversation__bullets--ordered > .vti-chatbot-conversation__bullet {
    padding-left: 22px;
    counter-increment: vti-chatbot-conversation-step;
}

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

.vti-chatbot-conversation .vti-chatbot-conversation__bullets--nested {
    margin-top: 6px;
}

.vti-chatbot-conversation .vti-chatbot-conversation__bullets--nested > .vti-chatbot-conversation__bullet::before {
    border: 1px solid var(--vcb-ink);
    background: none;
}

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

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

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

/* Flatsome styles bare tables (borders, margins, small uppercase th). */
.vti-chatbot-conversation .vti-chatbot-conversation__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 20px;
}

.vti-chatbot-conversation .vti-chatbot-conversation__table th,
.vti-chatbot-conversation .vti-chatbot-conversation__table td {
    padding: 8px 12px;
    border: 1px solid var(--vcb-gray-100);
    text-align: left;
    vertical-align: top;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: var(--vcb-ink);
}

.vti-chatbot-conversation .vti-chatbot-conversation__table th {
    background: var(--vcb-gray-25);
    font-weight: 600;
}

.vti-chatbot-conversation .vti-chatbot-conversation__error-text {
    color: #b42318;
}

.vti-chatbot-conversation .vti-chatbot-conversation__retry,
.vti-chatbot-conversation .vti-chatbot-conversation__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-conversation .vti-chatbot-conversation__retry {
    border: 1px solid var(--vcb-blue);
    color: var(--vcb-blue);
}

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

.vti-chatbot-conversation .vti-chatbot-conversation__choice {
    background: var(--vcb-chip);
    color: var(--vcb-ink);
}

@media (hover: hover) {
    .vti-chatbot-conversation .vti-chatbot-conversation__retry:hover,
    .vti-chatbot-conversation .vti-chatbot-conversation__choice:hover {
        background: var(--vcb-chip-hover);
        color: var(--vcb-blue);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vti-chatbot-conversation .vti-chatbot-conversation__action,
    .vti-chatbot-conversation .vti-chatbot-conversation__retry,
    .vti-chatbot-conversation .vti-chatbot-conversation__choice {
        transition: none;
    }

    .vti-chatbot-conversation .vti-chatbot-conversation__typing-dot {
        animation: none;
        opacity: .6;
    }
}
/* Composer: the modal's last row, under the scrolling conversation; the 40px
   gap above it belongs to the conversation. */
.vti-chatbot-composer {
    position: relative;
    flex: none;
    padding: 24px 0 40px;
    background: #fff;
}

/* Not in the design: centred just above the composer while newer messages are out of view. */
.vti-chatbot-modal .vti-chatbot-modal__jump {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    /* Flatsome gives every button a 24px min-width and a margin. */
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--vcb-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-modal .vti-chatbot-modal__jump[data-visible="false"] {
    visibility: hidden;
    opacity: 0;
}

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

@media (hover: hover) {
    .vti-chatbot-modal .vti-chatbot-modal__jump:hover {
        background: var(--vcb-gray-25);
    }
}

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

.vti-chatbot-composer__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: var(--vcb-blue);
}

.vti-chatbot-composer__title img {
    flex: none;
    width: 20px;
    height: 20px;
}

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

/* Fades the chips out under the right edge while the row can still scroll. */
.vti-chatbot-composer__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-composer__chips[data-end="true"]::after {
    opacity: 0;
}

/* Fades the chips under the left edge once the row has been scrolled. */
.vti-chatbot-composer__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-composer__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-modal .vti-chatbot-composer__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(--vcb-line);
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .12);
    transform: translateY(-50%);
}

.vti-chatbot-modal .vti-chatbot-composer__chips-nav--prev {
    left: 0;
}

.vti-chatbot-modal .vti-chatbot-composer__chips-nav--next {
    right: 0;
}

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

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

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


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

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

/* Flatsome's `button` rule also sets max-width:100%, line-height:2.4em and a .3s
   transition; the :where(button) reset above covers the rest. */
.vti-chatbot-composer__chip {
    flex: none;
    max-width: none;
    height: 36px;
    padding: 8px 12px;
    border-radius: 9999px;
    background: var(--vcb-chip);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--vcb-ink);
    white-space: nowrap;
    transition: background-color .1s linear, color .1s linear;
}

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

/* 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-composer__ask {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    min-height: 68px;
    margin: 0;
    padding: 10.2px 14.2px 10.2px 22.2px;
    border: 1.8px solid transparent;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(244, 247, 255, .44) 0%, rgba(235, 240, 255, .45) 100%) padding-box,
        linear-gradient(#fff, #fff) padding-box,
        var(--vcb-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);
    transition: box-shadow .15s ease;
}

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

/* Flatsome styles textarea (min-height 120px, padding, border,
   shadow, background); the form class lifts this above it. The pill's own
   :focus-within ring replaces the input outline. */
.vti-chatbot-composer__ask .vti-chatbot-composer__input {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: none;
    /* One line; js/vti-chatbot-chat.js grows it with the text, up to 6 lines. */
    display: block;
    height: 24px;
    min-height: 0;
    max-height: 144px;
    /* Centres one line on the 44px send button. */
    margin: 10px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--vcb-ink);
    overflow-y: auto;
    resize: none;
}

/* Flatsome's textarea:focus adds a grey glow, a background and #333 text. */
.vti-chatbot-composer__ask .vti-chatbot-composer__input:focus {
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: var(--vcb-ink);
}

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

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

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

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

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

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

@media (max-width: 699px) {
    .vti-chatbot-composer {
        padding: 16px 0 20px;
    }

    .vti-chatbot-composer__title {
        font-size: 16px;
        line-height: 24px;
    }

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

    .vti-chatbot-composer__ask {
        min-height: 56px;
        padding: 4.2px 6px 4.2px 16px;
        border-radius: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vti-chatbot-composer__chips::before,
    .vti-chatbot-composer__chips::after,
    .vti-chatbot-modal .vti-chatbot-modal__jump,
    .vti-chatbot-composer__chip,
    .vti-chatbot-composer__send,
    .vti-chatbot-composer__ask {
        transition: none;
    }
}