/**
 * Klever_VidurAi — storefront chat widget.
 *
 * Layout, spacing and component anatomy follow the reference screens in
 * klever-md/chat/. Every colour and the type family come from the storefront
 * theme (Kleverup/automotive-*): brand green #00843D, accent yellow #FFC300,
 * ink #222222, hairline #DBDBDB, and the GothamW05 face used on body copy.
 * Anything lighter than those is the same brand colour at reduced alpha, so the
 * widget never introduces a colour the site doesn't already ship.
 */

.klv-chat {
    /* Brand palette — theme tokens only. #00843D is the site's primary, exposed
       by tailwind.config.js under the (misleading) name "theme-blue"; #5E7F65 is
       the sage it pairs with on the floating footer buttons. */
    --klv-green: #00843D;
    --klv-green-deep: #005E2C;
    --klv-sage: #5E7F65;
    --klv-yellow: #FFC300;
    --klv-ink: #222222;
    --klv-white: #fff;
    --klv-line: #DBDBDB;

    /* Brand-derived tints (same hue, lower alpha). */
    --klv-green-05: rgba(0, 132, 61, .05);
    --klv-green-08: rgba(0, 132, 61, .08);
    --klv-green-12: rgba(0, 132, 61, .12);
    --klv-green-20: rgba(0, 132, 61, .2);
    --klv-ink-55: rgba(34, 34, 34, .55);
    --klv-ink-70: rgba(34, 34, 34, .7);
    --klv-surface: #F7FAF8;
    --klv-hairline: rgba(34, 34, 34, .1);

    position: fixed;
    /* Sits in the theme's floating button stack (Magento_Theme/html/footer.phtml):
       .whats-app-btn at bottom .563rem and #header-search-full-icon at 4.5rem are
       both 3.438rem tall at right 1.625rem, spaced .5rem apart. This is the next
       slot up: 4.5 + 3.438 + .5 = 8.438rem. */
    right: 1.625rem;
    bottom: 8.438rem;
    z-index: 9999;
    font-family: 'GothamW05', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--klv-ink);
}

.klv-chat *,
.klv-chat *::before,
.klv-chat *::after {
    box-sizing: border-box;
}

/* The widget toggles visibility with the `hidden` attribute, but the UA rule for
   it is weaker than the class rules below that set `display: flex`. Restore it. */
.klv-chat [hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------- launcher */

.klv-chat__launcher {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.438rem;
    height: 3.438rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--klv-green) 0%, var(--klv-green-deep) 100%);
    color: var(--klv-white);
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 94, 44, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}

.klv-chat__launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 94, 44, .42);
}

.klv-chat__launcher svg {
    /* 1.75rem matches the tyre-finder icon's w-7 inside the same 3.438rem button. */
    width: 1.75rem;
    height: 1.75rem;
}

.klv-chat--open .klv-chat__launcher {
    display: none;
}

/* ------------------------------------------------------------------- panel */

/* The launcher sits up in the stack, but the open panel should not float 8rem
   off the floor — bring the container down to the stack's base while it is open. */
.klv-chat--open {
    bottom: 0.563rem;
}

.klv-chat__panel {
    display: flex;
    flex-direction: column;
    width: 384px;
    max-width: calc(100vw - 24px);
    height: 620px;
    max-height: calc(100vh - 40px);
    background: var(--klv-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

/* ------------------------------------------------------------------ header */

.klv-chat__header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 14px 14px 14px 16px;
    background: var(--klv-white);
    border-bottom: 1px solid var(--klv-hairline);
}

.klv-chat__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-right: auto;
}

.klv-chat__brand svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

.klv-chat__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--klv-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.klv-chat__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--klv-ink);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.klv-chat__icon-btn:hover {
    background: var(--klv-green-08);
    color: var(--klv-green-deep);
}

.klv-chat__icon-btn svg {
    width: 18px;
    height: 18px;
}

/* Header kebab menu. */

.klv-chat__menu {
    position: absolute;
    top: 48px;
    right: 12px;
    z-index: 2;
    min-width: 172px;
    padding: 6px;
    background: var(--klv-white);
    border: 1px solid var(--klv-line);
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}

.klv-chat__menu-item {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--klv-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.klv-chat__menu-item:hover {
    background: var(--klv-green-08);
    color: var(--klv-green-deep);
}

/* -------------------------------------------------------------------- body */

.klv-chat__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    background: linear-gradient(180deg, var(--klv-green-05) 0%, var(--klv-white) 45%, var(--klv-green-05) 100%);
}

.klv-chat__body::-webkit-scrollbar {
    width: 6px;
}

.klv-chat__body::-webkit-scrollbar-thumb {
    background: var(--klv-green-20);
    border-radius: 3px;
}

/* ------------------------------------------------------------------- hero */

.klv-chat__hero {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.klv-chat__hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--klv-ink);
}

.klv-chat__hero-eyebrow svg {
    width: 18px;
    height: 18px;
}

.klv-chat__hero-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--klv-ink);
}

.klv-chat__hero-title em {
    font-style: normal;
    color: var(--klv-green);
}

/* ------------------------------------------------------------------ chips */

.klv-chat__chips {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 2px;
}

.klv-chat__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--klv-green-08);
    color: var(--klv-green-deep);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.klv-chat__chip:hover:not(:disabled) {
    background: var(--klv-green);
    color: var(--klv-white);
}

.klv-chat__chip:disabled {
    opacity: .55;
    cursor: default;
}

.klv-chat__chip.is-selected {
    background: var(--klv-green);
    color: var(--klv-white);
}

.klv-chat__chip-icon {
    flex: 0 0 auto;
    display: inline-flex;
}

.klv-chat__chip-icon svg {
    width: 14px;
    height: 14px;
}

/* --------------------------------------------------------------- messages */

.klv-chat__msg {
    padding: 11px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
}

.klv-chat__msg--user {
    align-self: flex-end;
    max-width: 86%;
    background: var(--klv-green-12);
    color: var(--klv-ink);
}

.klv-chat__msg--assistant {
    align-self: stretch;
    background: var(--klv-surface);
    color: var(--klv-ink);
}

.klv-chat__msg a {
    color: var(--klv-green);
    font-weight: 500;
    text-decoration: underline;
}

/* Loading row — sparkle + label, no bubble (see reference screens). */

.klv-chat__loading {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    font-size: 14px;
    color: var(--klv-ink-70);
}

.klv-chat__loading svg {
    width: 16px;
    height: 16px;
    animation: klv-pulse 1.4s ease-in-out infinite;
}

@keyframes klv-pulse {
    0%, 100% { opacity: .35; transform: scale(.9); }
    50%      { opacity: 1;   transform: scale(1.08); }
}

/* ------------------------------------------------ quoted product ("reply") */

/* A visitor turn that quoted a tyre: quote and bubble travel together, right
   aligned like any other customer message. */
.klv-chat__quoted {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    max-width: 86%;
}

.klv-chat__quoted .klv-chat__msg--user {
    max-width: 100%;
}

/* The quote block itself — identical in the transcript and in the composer, so
   what the visitor pinned is what they see attached to their message. */
.klv-chat__quote {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border-left: 3px solid var(--klv-green);
    border-radius: 8px;
    background: var(--klv-green-08);
    text-align: left;
}

.klv-chat__quote-img {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background: var(--klv-white);
    object-fit: contain;
}

.klv-chat__quote-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.klv-chat__quote-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--klv-green);
}

.klv-chat__quote-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--klv-ink);
    word-break: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.klv-chat__quote-price {
    font-size: 11px;
    font-weight: 700;
    color: var(--klv-ink-70);
}

.klv-chat__quote-remove {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--klv-ink-55);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.klv-chat__quote-remove:hover,
.klv-chat__quote-remove:focus-visible {
    background: var(--klv-white);
    color: var(--klv-ink);
}

.klv-chat__quote-remove svg {
    width: 13px;
    height: 13px;
}

/* The same block pinned inside the composer, above the textarea. */
.klv-chat__reply {
    margin-bottom: 2px;
}

/* ----------------------------------------------------------- product cards */

.klv-chat__cards {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.klv-chat__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: var(--klv-white);
    border: 1px solid var(--klv-line);
    border-radius: 10px;
    color: var(--klv-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* The card is a container, not a link — it highlights on hover to group its
   two actions, but only the actions themselves are clickable. */
.klv-chat__card:hover {
    border-color: var(--klv-green);
    box-shadow: 0 4px 14px var(--klv-green-12);
}

.klv-chat__card-main {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.klv-chat__card-img {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.klv-chat__card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.klv-chat__card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--klv-green);
}

.klv-chat__card-brand {
    font-size: 12px;
    color: var(--klv-ink-55);
}

.klv-chat__card-was {
    font-size: 13px;
    color: var(--klv-ink-55);
    text-decoration: line-through;
}

.klv-chat__card-price {
    display: flex;
    align-items: baseline;
    gap: 3px;
    line-height: 1.1;
}

.klv-chat__card-currency {
    font-size: 13px;
    font-weight: 500;
    color: var(--klv-ink-70);
}

.klv-chat__card-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-chat__card-cents {
    align-self: flex-start;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-chat__card-save {
    align-self: flex-start;
    margin-top: 2px;
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--klv-yellow);
    color: var(--klv-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
}

/* Add to cart, straight from the card. The primary action, so it is the one
   filled block on the card; the two below it stay green/outline as before. */

.klv-chat__card-cart {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--klv-line);
}

/* One rule already separates the product from its actions — the cart row draws
   it when it is there, so the row below must not draw a second. */
.klv-chat__card-cart + .klv-chat__card-actions {
    padding-top: 0;
    border-top: 0;
}

.klv-chat__card-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.klv-chat__card-qty-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--klv-ink-55);
}

.klv-chat__card-qty-select {
    min-height: 34px;
    padding: 6px 6px 6px 8px;
    border: 1px solid var(--klv-line);
    border-radius: 6px;
    background: var(--klv-white);
    color: var(--klv-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.klv-chat__card-qty-select:focus-visible {
    border-color: var(--klv-green);
    outline: none;
}

.klv-chat__card-add {
    flex: 1 1 auto;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--klv-ink);
    border-radius: 6px;
    background: var(--klv-ink);
    color: var(--klv-white);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.klv-chat__card-add:hover:not(:disabled),
.klv-chat__card-add:focus-visible {
    background: var(--klv-green-deep);
    border-color: var(--klv-green-deep);
}

.klv-chat__card-add:disabled {
    opacity: .6;
    cursor: default;
}

/* Contact us, in place of Add to cart on a product the store cannot sell right
   now. It is a link rather than a button, so it needs its own centring and has
   no qty picker beside it to share the row with. */
.klv-chat__card-add--contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

.klv-chat__card-add-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.klv-chat__card-add-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Two actions per card: keep chatting, or open the product page. */

.klv-chat__card-actions {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--klv-line);
}

.klv-chat__card-action {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--klv-line);
    border-radius: 6px;
    background: var(--klv-white);
    color: var(--klv-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.klv-chat__card-action--ask {
    border-color: var(--klv-green);
    background: var(--klv-green);
    color: var(--klv-white);
}

.klv-chat__card-action--ask:hover,
.klv-chat__card-action--ask:focus-visible {
    background: var(--klv-green-deep);
    border-color: var(--klv-green-deep);
}

.klv-chat__card-action--view:hover,
.klv-chat__card-action--view:focus-visible {
    border-color: var(--klv-green);
    color: var(--klv-green);
}

.klv-chat__card-action-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.klv-chat__card-action-icon svg {
    width: 13px;
    height: 13px;
}

/* Narrow widgets stack the actions so neither label wraps mid-word. The cart
   row keeps its single line: a qty picker sitting above its own button would
   read as two separate steps. */
@media (max-width: 360px) {
    .klv-chat__card-actions {
        flex-direction: column;
    }

    .klv-chat__card-qty-label {
        display: none;
    }
}

/* Reveal-the-rest control under a truncated card list. */

.klv-chat__cards-more {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    padding: 0;
    border: 1px solid var(--klv-line);
    border-radius: 50%;
    background: var(--klv-white);
    color: var(--klv-ink);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    transition: border-color .15s ease, color .15s ease;
}

.klv-chat__cards-more:hover {
    border-color: var(--klv-green);
    color: var(--klv-green);
}

.klv-chat__cards-more svg {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}

.klv-chat__cards-more[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* -------------------------------------------------------------- feedback */

.klv-chat__rate {
    display: flex;
    align-items: center;
    gap: 4px;
}

.klv-chat__rate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--klv-ink-55);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.klv-chat__rate-btn:hover {
    background: var(--klv-green-08);
    color: var(--klv-green-deep);
}

.klv-chat__rate-btn.is-active {
    color: var(--klv-ink);
}

.klv-chat__rate-btn svg {
    width: 17px;
    height: 17px;
}

.klv-chat__note {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--klv-surface);
    font-size: 14px;
    color: var(--klv-ink);
}

.klv-chat__note svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
}

.klv-chat__rate-form {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--klv-surface);
}

.klv-chat__rate-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--klv-ink);
}

.klv-chat__rate-title svg {
    width: 17px;
    height: 17px;
}

.klv-chat__rate-reasons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.klv-chat__rate-reason {
    padding: 7px 18px;
    border: 1px solid var(--klv-line);
    border-radius: 999px;
    background: var(--klv-white);
    color: var(--klv-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.klv-chat__rate-reason:hover {
    border-color: var(--klv-green);
    color: var(--klv-green);
}

.klv-chat__rate-reason.is-selected {
    border-color: var(--klv-green);
    background: var(--klv-green-08);
    color: var(--klv-green-deep);
}

.klv-chat__rate-details {
    width: 100%;
    min-height: 66px;
    padding: 10px 12px;
    border: 1px solid var(--klv-line);
    border-radius: 8px;
    background: var(--klv-white);
    color: var(--klv-ink);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}

.klv-chat__rate-details::placeholder {
    color: var(--klv-ink-55);
}

.klv-chat__rate-details:focus {
    outline: none;
    border-color: var(--klv-green);
}

.klv-chat__rate-submit {
    align-self: stretch;
    padding: 11px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--klv-green);
    color: var(--klv-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.klv-chat__rate-submit:disabled {
    background: var(--klv-line);
    color: var(--klv-ink-55);
    cursor: default;
}

/* --------------------------------------------------------------- composer */

.klv-chat__composer {
    flex: 0 0 auto;
    padding: 12px;
    background: var(--klv-white);
}

/* The gradient rim is the wrapper's background; the field paints over it. */
.klv-chat__composer-frame {
    padding: 2px;
    border-radius: 16px;
    background: linear-gradient(120deg, var(--klv-green) 0%, var(--klv-sage) 45%, var(--klv-yellow) 100%);
}

.klv-chat__composer-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 12px 10px;
    background: var(--klv-white);
    border-radius: 14px;
}

.klv-chat__input {
    width: 100%;
    max-height: 120px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--klv-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
}

.klv-chat__input:focus {
    outline: none;
}

.klv-chat__input::placeholder {
    color: var(--klv-ink-55);
}

.klv-chat__send {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--klv-green);
    color: var(--klv-white);
    cursor: pointer;
    transition: background .15s ease;
}

.klv-chat__send:hover:not(:disabled) {
    background: var(--klv-green-deep);
}

.klv-chat__send:disabled {
    background: var(--klv-green-08);
    color: var(--klv-ink-55);
    cursor: default;
}

.klv-chat__send svg {
    width: 18px;
    height: 18px;
}

/* ------------------------------------------- lead gate / returning visitor */

.klv-chat__lead,
.klv-chat__resume {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px;
    background: linear-gradient(180deg, var(--klv-green-05) 0%, var(--klv-white) 45%);
}

.klv-chat__lead-intro,
.klv-chat__resume-intro {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--klv-ink);
}

.klv-chat__lead-sub {
    margin: -6px 0 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--klv-ink-55);
}

.klv-chat__lead-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--klv-ink-55);
}

.klv-chat__lead-input {
    padding: 11px 13px;
    border: 1px solid var(--klv-line);
    border-radius: 10px;
    background: var(--klv-white);
    color: var(--klv-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}

.klv-chat__lead-input:focus {
    outline: none;
    border-color: var(--klv-green);
}

/* A field a validation message is actually about — marked so a re-asked form
   points at what to change instead of leaving the customer to re-read it. */
.klv-chat__lead-input--invalid {
    border-color: #B00020;
    background: rgba(176, 0, 32, .04);
}

.klv-chat__lead-input--invalid:focus {
    border-color: #B00020;
}

.klv-chat__lead-error {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--klv-green);
}

.klv-chat__lead-submit,
.klv-chat__resume-new {
    margin-top: 6px;
    padding: 12px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--klv-green);
    color: var(--klv-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.klv-chat__lead-submit:hover:not(:disabled),
.klv-chat__resume-new:hover:not(:disabled) {
    background: var(--klv-green-deep);
}

.klv-chat__lead-submit:disabled,
.klv-chat__resume-new:disabled {
    opacity: .6;
    cursor: default;
}

.klv-chat__resume-new {
    border: 1px solid var(--klv-line);
    background: var(--klv-white);
    color: var(--klv-ink);
}

.klv-chat__resume-new:hover:not(:disabled) {
    border-color: var(--klv-green);
    background: var(--klv-white);
    color: var(--klv-green);
}

.klv-chat__resume-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.klv-chat__resume-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 13px;
    border: 1px solid var(--klv-line);
    border-radius: 10px;
    background: var(--klv-white);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.klv-chat__resume-item:hover {
    border-color: var(--klv-green);
    box-shadow: 0 4px 14px var(--klv-green-12);
}

.klv-chat__resume-item:disabled {
    opacity: .5;
    cursor: default;
}

.klv-chat__resume-date {
    font-size: 12px;
    font-weight: 700;
    color: var(--klv-green);
}

.klv-chat__resume-preview {
    font-size: 13px;
    line-height: 1.4;
    color: var(--klv-ink-55);
}

/* ----------------------------------------------------------------- mobile */

/* Below the theme's md breakpoint both neighbours are `hidden md:block`, and the
   bottom of the viewport belongs to .mobile-bar. 5rem is the offset the theme's
   own mobile popover uses to clear it. */
@media (max-width: 767px) {
    .klv-chat {
        right: 0.625rem;
        bottom: 5rem;
    }

    .klv-chat__launcher {
        width: 2.812rem;
        height: 2.812rem;
    }

    .klv-chat__launcher svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

@media (max-width: 480px) {

    .klv-chat--open {
        right: 0;
        bottom: 0;
        left: 0;
        top: 0;
    }

    .klv-chat--open .klv-chat__panel {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* -------------------------------------------------------------------- RTL */

[dir="rtl"] .klv-chat {
    right: auto;
    left: 1.625rem;
}

@media (max-width: 767px) {
    [dir="rtl"] .klv-chat {
        left: 0.625rem;
    }
}

[dir="rtl"] .klv-chat__header {
    padding: 14px 16px 14px 14px;
}

[dir="rtl"] .klv-chat__menu {
    right: auto;
    left: 12px;
}

[dir="rtl"] .klv-chat__body,
[dir="rtl"] .klv-chat__chips {
    align-items: flex-end;
}

[dir="rtl"] .klv-chat__msg--user {
    align-self: flex-start;
}

[dir="rtl"] .klv-chat__menu-item,
[dir="rtl"] .klv-chat__chip,
[dir="rtl"] .klv-chat__resume-item {
    text-align: right;
}

[dir="rtl"] .klv-chat__send {
    align-self: flex-start;
}

[dir="rtl"] .klv-chat__send svg {
    transform: scaleX(-1);
}

@media (max-width: 480px) {
    [dir="rtl"] .klv-chat--open {
        left: 0;
    }
}

/* --------------------------------------------------- "ask next" suggestions */

/* Follow-up questions share the chip component with the vehicle/size pickers,
   but read as suggestions rather than choices: outlined instead of filled, so a
   tappable next step is never confused with "here is what to ask me". */
.klv-chat__chips--suggest .klv-chat__chip {
    background: transparent;
    border: 1px solid var(--klv-green-20);
    color: var(--klv-green-deep);
}

.klv-chat__chips--suggest .klv-chat__chip:hover:not(:disabled) {
    background: var(--klv-green-08);
    border-color: var(--klv-green);
    color: var(--klv-green-deep);
}

/* ------------------------------------------------------- cart bar + drawer

   Product quick-view, cart and fitting-choice used to be page-mode only —
   the popup had no drawer to open them in. They are in both surfaces now, so
   the content rules below are the same ones chatpage.css uses (same classes,
   same visual language); only the drawer's own layout differs, because the
   page gives it a fixed-width third column while the popup has no room for
   one and overlays it over the panel instead — the same treatment chatpage.css
   already falls back to on a phone-width screen. */

.klv-chat__bar-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--klv-ink);
    cursor: pointer;
    transition: background .15s ease;
}

.klv-chat__bar-cart:hover {
    background: var(--klv-green-08);
}

.klv-chat__bar-cart svg {
    width: 21px;
    height: 21px;
}

.klv-chat__bar-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--klv-green);
    color: var(--klv-white);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.klv-chat__drawer {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--klv-white);
    border-radius: 14px;
}

.klv-chat__drawer-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 3.5rem;
    padding: 10px 12px;
    border-bottom: 1px solid var(--klv-hairline);
}

.klv-chat__drawer-title {
    margin-right: auto;
    padding-left: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-chat__drawer-nav,
.klv-chat__drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--klv-ink-70);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.klv-chat__drawer-nav:hover,
.klv-chat__drawer-close:hover {
    background: var(--klv-green-08);
    color: var(--klv-green-deep);
}

.klv-chat__drawer-nav svg,
.klv-chat__drawer-close svg {
    width: 18px;
    height: 18px;
}

.klv-chat__drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
}

.klv-chat__drawer-body::-webkit-scrollbar {
    width: 6px;
}

.klv-chat__drawer-body::-webkit-scrollbar-thumb {
    background: var(--klv-green-20);
    border-radius: 3px;
}

/* ---------------------------------------------------------- product quick-view */

.klv-chat__pv-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: var(--klv-surface);
    border: 1px solid var(--klv-hairline);
    border-radius: 12px;
}

.klv-chat__pv-img {
    max-width: 100%;
    max-height: 14rem;
    object-fit: contain;
}

.klv-chat__pv-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
}

.klv-chat__pv-thumb {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    padding: 4px;
    border: 1px solid var(--klv-line);
    border-radius: 8px;
    background: var(--klv-white);
    cursor: pointer;
}

.klv-chat__pv-thumb.is-active {
    border-color: var(--klv-green);
}

.klv-chat__pv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.klv-chat__pv-brand {
    margin: 16px 0 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--klv-green);
}

.klv-chat__pv-name {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--klv-ink);
}

.klv-chat__pv-sku {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--klv-ink-55);
}

.klv-chat__pv-was {
    margin: 0;
    font-size: 13px;
    color: var(--klv-ink-55);
    text-decoration: line-through;
}

.klv-chat__pv-price {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-chat__pv-stock {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #B00020;
}

.klv-chat__pv-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

/* Quantity picker above the add/buy buttons — the column layout means it gets
   a full-width row of its own rather than sitting inline as on the wider
   product page. */
.klv-chat__pv-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--klv-line);
    border-radius: 10px;
    background: var(--klv-white);
}

.klv-chat__pv-qty-label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--klv-ink-55);
}

.klv-chat__pv-qty-select {
    flex: 0 0 auto;
    min-width: 68px;
    padding: 6px 10px;
    border: 1px solid var(--klv-line);
    border-radius: 8px;
    background: var(--klv-white);
    color: var(--klv-ink);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.klv-chat__pv-btn {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.klv-chat__pv-btn:disabled {
    opacity: .6;
    cursor: default;
}

.klv-chat__pv-btn--ask {
    background: transparent;
    border-color: var(--klv-green-20);
    color: var(--klv-green-deep);
}

.klv-chat__pv-btn--ask:hover:not(:disabled) {
    background: var(--klv-green-08);
    border-color: var(--klv-green);
}

.klv-chat__pv-btn--add {
    background: var(--klv-white);
    border-color: var(--klv-ink);
    color: var(--klv-ink);
}

.klv-chat__pv-btn--add:hover:not(:disabled) {
    background: var(--klv-ink);
    color: var(--klv-white);
}

.klv-chat__pv-btn--buy {
    background: linear-gradient(140deg, var(--klv-green) 0%, var(--klv-green-deep) 100%);
    color: var(--klv-white);
}

.klv-chat__pv-btn--buy:hover:not(:disabled) {
    box-shadow: 0 8px 20px rgba(0, 94, 44, .3);
}

/* Contact us in the drawer: the one action left when Add to cart and Buy now are
   not on offer, so it takes the primary treatment they would have had. */
.klv-chat__pv-btn--contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(140deg, var(--klv-green) 0%, var(--klv-green-deep) 100%);
    color: var(--klv-white);
    text-decoration: none;
}

.klv-chat__pv-btn--contact:hover {
    box-shadow: 0 8px 20px rgba(0, 94, 44, .3);
}

.klv-chat__pv-btn-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.klv-chat__pv-btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.klv-chat__pv-link {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--klv-green);
    text-align: center;
}

/* --------------------------------------------------------------------- cart */

.klv-chat__cart-empty,
.klv-chat__cart-error {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--klv-ink-70);
}

.klv-chat__cart-error {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(176, 0, 32, .08);
    color: #B00020;
}

.klv-chat__cart-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.klv-chat__cart-item {
    display: flex;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--klv-hairline);
}

.klv-chat__cart-img {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
}

.klv-chat__cart-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.klv-chat__cart-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--klv-ink);
}

.klv-chat__cart-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-chat__cart-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.klv-chat__cart-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--klv-line);
    border-radius: 7px;
    background: var(--klv-white);
    color: var(--klv-ink);
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.klv-chat__cart-qty-btn:hover {
    border-color: var(--klv-green);
    color: var(--klv-green-deep);
}

.klv-chat__cart-qty-value {
    min-width: 22px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
}

.klv-chat__cart-remove {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--klv-ink-55);
    font-family: inherit;
    font-size: 12.5px;
    text-decoration: underline;
    cursor: pointer;
}

.klv-chat__cart-remove:hover {
    color: #B00020;
}

.klv-chat__cart-summary {
    margin-top: 16px;
}

.klv-chat__cart-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 13.5px;
    color: var(--klv-ink-70);
}

.klv-chat__cart-row--total {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--klv-hairline);
    font-size: 16px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-chat__cart-checkout {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 13px 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(140deg, var(--klv-green) 0%, var(--klv-green-deep) 100%);
    color: var(--klv-white);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.klv-chat__cart-checkout:hover {
    box-shadow: 0 8px 20px rgba(0, 94, 44, .3);
    color: var(--klv-white);
}

/* Availability preview only — the gateways' own flows live in Magento checkout. */
.klv-chat__cart-pay {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.klv-chat__cart-pay-title {
    width: 100%;
    margin: 0 0 2px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--klv-ink-55);
}

.klv-chat__cart-pay-badge {
    padding: 5px 10px;
    border: 1px solid var(--klv-line);
    border-radius: 7px;
    background: var(--klv-white);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--klv-ink-70);
    /* Preview only, not a control — see the comment above .klv-chat__cart-pay. */
    cursor: default;
}

.klv-chat__cart-link {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--klv-green);
    text-align: center;
}

/* The assistant's "Go to your cart" link, which opens the drawer instead of
   navigating. Styled as an action so it does not read as an outbound link. */
.klv-chat__cart-open {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--klv-green-12);
    color: var(--klv-green-deep) !important;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.klv-chat__cart-open:hover {
    background: var(--klv-green);
    color: var(--klv-white) !important;
}

/* ---------------------------------------------- inline checkout: address, payment */

.klv-chat__checkout {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.klv-chat__checkout-title {
    margin: 4px 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-chat__checkout-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.klv-chat__checkout-pay-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.klv-chat__checkout-pay-option {
    display: flex;
    align-items: center;
    padding: 13px 16px;
    border: 1px solid var(--klv-line);
    border-radius: 12px;
    background: var(--klv-white);
    color: var(--klv-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.klv-chat__checkout-pay-option:hover:not(:disabled) {
    border-color: var(--klv-green);
    background: var(--klv-green-05);
}

.klv-chat__checkout-pay-option:disabled {
    opacity: .6;
    cursor: default;
}

.klv-chat__checkout--done {
    align-items: center;
    text-align: center;
    padding-top: 24px;
}

.klv-chat__checkout--done .klv-chat__checkout-title {
    font-size: 18px;
}

.klv-chat__checkout--done .klv-chat__lead-submit {
    margin-top: 14px;
    width: 100%;
}

/* ---------------------------------------------------------- fitting picker */

.klv-chat__cart-fitting {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--klv-hairline);
}

.klv-chat__cart-fitting-title {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--klv-ink-55);
}

.klv-chat__cart-fitting-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.klv-chat__cart-fitting-garage {
    margin-top: 10px;
}

.klv-chat__cart-fitting-garage-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.klv-chat__cart-fitting-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--klv-line);
    border-radius: 9px;
    background: var(--klv-white);
    color: var(--klv-ink);
    font-family: inherit;
    font-size: 13.5px;
}

.klv-chat__cart-fitting-emirates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.klv-chat__cart-fitting-centers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.klv-chat__cart-fitting-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--klv-line);
    border-radius: 10px;
    background: var(--klv-white);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.klv-chat__cart-fitting-card:hover {
    border-color: var(--klv-green-20);
    background: var(--klv-green-05);
}

.klv-chat__cart-fitting-card.is-selected {
    border-color: var(--klv-green);
    background: var(--klv-green-08);
}

.klv-chat__cart-fitting-card-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--klv-ink);
}

.klv-chat__cart-fitting-card-address {
    font-size: 12px;
    color: var(--klv-ink-55);
}

.klv-chat__cart-fitting-schedule {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--klv-hairline);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.klv-chat__cart-fitting-chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--klv-green-20);
    border-radius: 10px;
    background: var(--klv-green-08);
    font-size: 13px;
    color: var(--klv-ink);
}

.klv-chat__cart-fitting-change {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--klv-green-deep);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 480px) {
    .klv-chat__drawer {
        border-radius: 0;
    }
}

/* -------------------------------------------------------- drawer + cart RTL */

[dir="rtl"] .klv-chat__drawer-title {
    margin-right: 0;
    margin-left: auto;
    padding-left: 0;
    padding-right: 4px;
}

[dir="rtl"] .klv-chat__bar-count {
    right: auto;
    left: -2px;
}

[dir="rtl"] .klv-chat__cart-remove {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .klv-chat__cart-fitting-change {
    margin-right: auto;
}


/* ---------- human agent takeover ----------
   An agent's reply is the only bubble the customer sees a name on: the bot and
   the customer both stay unlabelled, so the name itself signals "a person". */
.klv-chat__agent-turn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

.klv-chat__agent-name {
    margin: 0 0 3px 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #12602a;
}

.klv-chat__msg--agent {
    background: #e4f6e8;
    border: 1px solid #bfe4c8;
    color: #14301c;
}

.klv-chat__msg--system {
    align-self: center;
    max-width: 90%;
    background: transparent;
    border: 0;
    color: #6f7b8a;
    font-size: 11px;
    text-align: center;
}