/**
 * 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 at the base of the theme's floating button stack
       (Magento_Theme/html/footer.phtml): this launcher at bottom .563rem, then
       .whats-app-btn at 4.5rem and #header-search-full-icon at 8.438rem, all at
       right 1.625rem and spaced .5rem apart (the theme buttons are 3.438rem tall). */
    right: 1.625rem;
    bottom: 0.563rem;
    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;
}

/* The standalone page's close icon is an <a> back to the store, not a button:
   it needs the link reset the <button> form never did. */
.klv-chat__icon-btn--exit {
    text-decoration: none;
}

/* 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;
}

/* Which axle this tyre of a staggered set belongs to. Loud on purpose and first in
   the card body: the two cards of a set are not alternatives, and mistaking them for
   alternatives means buying four of the wrong size. */
.klv-chat__card-axle {
    align-self: flex-start;
    margin-bottom: 1px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--klv-green);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .04em;
}

.klv-chat__card-axle--rear {
    background: var(--klv-ink-70);
}

/* The tyre's own warranty term. Quiet by design — it sits under the price as
   reassurance, so it reads at brand weight rather than competing with the figure. */
.klv-chat__card-warranty {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--klv-green);
}

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

.klv-chat__card-warranty-icon svg {
    width: 13px;
    height: 13px;
    display: block;
}

/* 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;
}

/* ------------------------------------------------- staggered set card

   One box holding both tyres of a staggered set, mirroring the storefront's own
   staggered results page: a quantity per axle, the set price, and ONE Add to
   cart that puts all four tyres in the cart. The two axles share a card so they
   cannot be mistaken for alternatives, and so the set cannot be half-bought. */

.klv-chat__card--set {
    border-color: var(--klv-green-20);
}

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

/* Says what the box is before anything else in it is read. */
.klv-chat__set-badge {
    align-self: flex-start;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--klv-yellow);
    color: var(--klv-ink);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .04em;
}

.klv-chat__set-axles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.klv-chat__set-axle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--klv-line);
    border-radius: 8px;
    background: var(--klv-surface);
}

.klv-chat__set-axle-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.klv-chat__set-axle-main--open {
    cursor: pointer;
}

.klv-chat__set-axle-img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.klv-chat__set-axle-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.klv-chat__set-axle-size {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--klv-ink);
}

/* The full product name, one line: the size above it is what the customer is
   choosing between, and the name is only there to confirm it. */
.klv-chat__set-axle-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--klv-ink-55);
}

.klv-chat__set-axle-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-chat__set-axle-each {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--klv-ink-55);
}

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

/* What the customer is actually being asked to pay — four tyres, not one. It
   carries the card's big figure, so no axle row competes with it. */
.klv-chat__set-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--klv-line);
}

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

/* The set is bought as a set, so its button takes the whole row — there is no
   per-tyre quantity beside it to share the line with. */
.klv-chat__card--set .klv-chat__card-cart {
    border-top: 0;
    padding-top: 0;
}

/* 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;
    }

    /* The axle row gives up its single line before the name starts wrapping. */
    .klv-chat__set-axle {
        flex-wrap: wrap;
    }

    .klv-chat__set-axle-qty {
        margin-left: auto;
    }
}

/* 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);
}

/* The city dropdown is the same control as the fields above it, so it takes the
   same box rather than the browser's default height, font and grey — with our own
   chevron, since appearance:none removes the native one. Also covers the checkout
   address city select, which reuses this class (see addressSelect in chatbot.js). */
select.klv-chat__lead-input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    cursor: pointer;
}

/* 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. */
/* Mobile number: a country button and the number box side by side, sharing one
   row. Any country's mobile is accepted, so the dial code is a control rather
   than a label — it is a real <button> that opens the flag list, which is why it
   is in the tab order and says what it does. The list is absolutely positioned
   inside this row, so it hangs over whatever follows instead of pushing the
   city field down the panel. */
.klv-chat__lead-phone {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}

.klv-chat__lead-country {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--klv-line);
    border-radius: 10px;
    background: var(--klv-white);
    color: var(--klv-ink);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

.klv-chat__lead-country:hover {
    border-color: var(--klv-ink-55);
}

.klv-chat__lead-country:focus-visible,
.klv-chat__lead-country[aria-expanded="true"] {
    outline: none;
    border-color: var(--klv-green);
}

/* Dial codes read left to right even in Arabic: "+971" is a number, not prose,
   and isolating it stops the "+" migrating to the far side of the digits. */
.klv-chat__lead-dial {
    direction: ltr;
    unicode-bidi: isolate;
    color: var(--klv-ink-70);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.klv-chat__lead-chev {
    width: 13px;
    height: 13px;
    color: var(--klv-ink-55);
}

.klv-chat__lead-number {
    /* Takes whatever the country button leaves; min-width:0 so a long
       placeholder cannot push the button off the row. */
    flex: 1 1 auto;
    min-width: 0;
}

/* The flag images are 40px-wide PNGs from pub/media/flags, drawn at 24x18 with
   a hairline so a white flag (Japan) still reads as a flag. Aspect ratios vary
   — Nepal is a pennant, Switzerland is square — hence the contain fit. */
.klv-chat__lead-flag,
.klv-chat__lead-country-flag {
    flex: 0 0 auto;
    width: 24px;
    height: 18px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--klv-hairline);
    object-fit: contain;
}

/* The dropdown. Capped and scrollable: 245 countries do not fit anywhere, and
   the widget panel itself is only so tall. */
.klv-chat__lead-countries {
    position: absolute;
    z-index: 6;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    max-height: 272px;
    overflow: hidden;
    border: 1px solid var(--klv-line);
    border-radius: 10px;
    background: var(--klv-white);
    box-shadow: 0 14px 34px rgba(34, 34, 34, .16);
}

.klv-chat__lead-search {
    flex: 0 0 auto;
    margin: 8px 8px 4px;
    padding: 8px 10px;
    border: 1px solid var(--klv-line);
    border-radius: 8px;
    background: var(--klv-white);
    color: var(--klv-ink);
    font-family: inherit;
    font-size: 13px;
}

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

.klv-chat__lead-country-list {
    flex: 1 1 auto;
    margin: 0;
    padding: 4px 0 6px;
    overflow-y: auto;
    list-style: none;
    -webkit-overflow-scrolling: touch;
}

.klv-chat__lead-country-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--klv-ink);
    cursor: pointer;
}

/* Hover and the keyboard cursor are the same highlight — there is only ever one
   of them in play, and two different colours would read as two selections. */
.klv-chat__lead-country-item:hover,
.klv-chat__lead-country-item.is-active {
    background: var(--klv-green-08);
}

.klv-chat__lead-country-item.is-selected {
    font-weight: 600;
}

/* The rule under the last market this site sells to — meaningless once the
   list is a set of search results, so it goes away with the order it marked. */
.klv-chat__lead-country-item--divided {
    margin-top: 5px;
    padding-top: 12px;
    border-top: 1px solid var(--klv-line);
}

.klv-chat__lead-country-list.is-filtered .klv-chat__lead-country-item--divided {
    margin-top: 0;
    padding-top: 7px;
    border-top: 0;
}

.klv-chat__lead-country-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.klv-chat__lead-country-dial {
    flex: 0 0 auto;
    direction: ltr;
    unicode-bidi: isolate;
    color: var(--klv-ink-55);
    font-variant-numeric: tabular-nums;
}

.klv-chat__lead-country-empty {
    margin: 0;
    padding: 4px 12px 12px;
    font-size: 13px;
    color: var(--klv-ink-55);
}

.klv-chat__lead-input--invalid {
    border-color: #B00020;
    background: rgba(176, 0, 32, .04);
}

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

/* Sits directly under the field it is about — submitLead() moves it there —
   so the margin pulls it tight against that field inside the 10px form gap.
   Red, like every other failure in the widget (--invalid above, cart-error
   below): the brand green read as a confirmation. */
.klv-chat__lead-error {
    margin: -4px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: #B00020;
}

.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;
    }
}

/* The sitewide launcher pill (.klv-chat--link, bottom of this file) needs no
   RTL override: it uses logical padding and `text-align: start`, and the Arabic
   theme flips it through `html { direction: rtl }` rather than a dir attribute. */

/* --------------------------------------------------- "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;
}

/* Side gutter only. What this drawer holds supplies its own vertical spacing —
   the order pass most of all, whose head and foot are full-bleed and meant to
   sit flush against the ends of the scroll area. */
.klv-chat__drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 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;
}

/* ------------------------------------------------------------- legacy bits
   What is left of the old cart/checkout styling: the classes the inline
   sign-in panel and the assistant's own in-transcript links still use. The
   order pass below carries everything else. */

.klv-chat__cart-error {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(176, 0, 32, .08);
    font-size: 13.5px;
    line-height: 1.5;
    color: #B00020;
}

.klv-chat__cart-link {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--klv-green-deep);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* The assistant's "go to your cart" / "sign in" links, which open the pass and
   the sign-in panel rather than leaving the conversation. */
.klv-chat__cart-open,
.klv-chat__signin-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,
.klv-chat__signin-open:hover {
    background: var(--klv-green);
    color: var(--klv-white) !important;
}

.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;
}

/* ==========================================================================
   The order pass

   A different shape from the drawer's old one-screen-at-a-time checkout, and
   from the stacked accordions the category usually reaches for. Three ideas
   carry the design:

   1. The total and the progress rail are pinned to the top of the scroller and
      the total again to the bottom, so the two questions a customer asks most
      ("what does this cost" / "how much is left to do") are answered wherever
      they happen to be in the panel.
   2. A section is a row, not a box. A settled row is quiet — a green tick, its
      value in ink, an Edit affordance — and the open one is the only thing with
      a surface under it. Nothing has a competing border, so the panel reads as a
      single list rather than four cards fighting for attention.
   3. Nothing is red unless money was refused. What is left to do is amber and
      sits inside the section it belongs to, because an unfinished step is the
      normal state of this panel, not an error.

   Colours are the same theme tokens as the rest of the widget; the only new
   value is the amber pair for hints, which has no token because nothing else in
   the widget needed one.
   ========================================================================== */

.klv-pass {
    --klv-amber: #8A5A00;
    --klv-amber-bg: rgba(255, 195, 0, .14);
    /* The drawer body's own padding. The sticky head and foot cancel it with a
       negative margin so their rules run edge to edge; keeping it in one place
       means the two can never drift apart from the padding they answer to. */
    --klv-pass-gutter: 18px;

    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ---------------------------------------------------------- pass: the head */

/* Sticky inside the drawer body, which is the scroll container. The negative
   margins let it span the body's padding so the rule underneath runs edge to
   edge rather than floating in the middle.

   No vertical margin: the drawer body carries no padding above or below, so the
   head sits flush at the top, and the hairline underneath sits straight on top
   of the first section — which brings its own space anyway, 13px of padding on
   its head row and another 4px when it is the open one. */
.klv-pass__head {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 calc(var(--klv-pass-gutter) * -1);
    padding: 14px var(--klv-pass-gutter) 12px;
    background: var(--klv-white);
    border-bottom: 1px solid var(--klv-hairline);
}

.klv-pass__head-money {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.klv-pass__head-count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--klv-ink-55);
}

.klv-pass__head-total {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--klv-ink);
}

/* The four steps as one row of segments rather than a vertical list of step
   names: it stays one line tall however many steps there are, so the order
   itself is never pushed off screen by its own progress indicator. */
.klv-pass__rail {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    margin-top: 12px;
}

.klv-pass__seg {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

/* The connecting line, drawn behind the dots so a run of completed steps reads
   as one filled track. */
.klv-pass__seg::before {
    content: '';
    position: absolute;
    top: 9px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--klv-line);
}

.klv-pass__seg:first-child::before {
    display: none;
}

.klv-pass__seg.is-done::before,
.klv-pass__seg.is-done + .klv-pass__seg::before {
    background: var(--klv-green);
}

.klv-pass__seg-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--klv-line);
    background: var(--klv-white);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--klv-ink-55);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.klv-pass__seg.is-done .klv-pass__seg-dot {
    border-color: var(--klv-green);
    background: var(--klv-green);
    color: var(--klv-white);
}

.klv-pass__seg.is-active .klv-pass__seg-dot {
    border-color: var(--klv-green);
    color: var(--klv-green-deep);
    box-shadow: 0 0 0 3px var(--klv-green-12);
}

.klv-pass__seg-tick {
    display: block;
    width: 12px;
    height: 12px;
}

.klv-pass__seg-tick svg {
    display: block;
    width: 100%;
    height: 100%;
}

.klv-pass__seg-name {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--klv-ink-55);
    white-space: nowrap;
}

.klv-pass__seg.is-active .klv-pass__seg-name,
.klv-pass__seg.is-done .klv-pass__seg-name {
    color: var(--klv-ink);
}

.klv-pass__head-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--klv-ink-55);
}

/* -------------------------------------------------------- pass: a section */

.klv-pass__sections {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.klv-pass__sec {
    border-top: 1px solid var(--klv-hairline);
}

.klv-pass__sec:first-child {
    border-top: 0;
}

/* The open section is the only one with a surface, so the eye lands on it
   without a single extra border. */
.klv-pass__sec.is-open {
    margin: 4px -8px;
    padding: 0 8px;
    border-top-color: transparent;
    border-radius: 14px;
    background: var(--klv-surface);
}

.klv-pass__sec.is-open + .klv-pass__sec {
    border-top-color: transparent;
}

.klv-pass__sec-head {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 13px 4px;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.klv-pass__sec-mark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--klv-line);
    background: var(--klv-white);
    color: var(--klv-ink-55);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.klv-pass__sec.is-done .klv-pass__sec-mark {
    border-color: var(--klv-green);
    background: var(--klv-green);
    color: var(--klv-white);
}

.klv-pass__sec.is-open .klv-pass__sec-mark {
    border-color: var(--klv-green);
    color: var(--klv-green-deep);
}

.klv-pass__sec.is-open.is-done .klv-pass__sec-mark {
    color: var(--klv-white);
}

.klv-pass__sec-icon {
    display: block;
    width: 16px;
    height: 16px;
}

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

.klv-pass__sec-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.klv-pass__sec-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--klv-ink);
}

/* The value a settled section collapses to — the whole point of the panel, so
   it is allowed two lines before it clips. */
.klv-pass__sec-value {
    font-size: 12px;
    line-height: 1.45;
    color: var(--klv-ink-70);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.klv-pass__sec-value.is-todo {
    color: var(--klv-ink-55);
    font-style: italic;
}

/* "Vidur updated this" — on the row whose value changed, so the customer sees
   which line the assistant touched, not merely that something happened. It
   clears the moment they open the section. */
.klv-pass__sec-note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--klv-green-12);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--klv-green-deep);
}

.klv-pass__sec-note-icon {
    display: block;
    width: 11px;
    height: 11px;
}

.klv-pass__sec-note-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.klv-pass__sec-act {
    flex: 0 0 auto;
    align-self: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--klv-green-deep);
    text-decoration: underline;
}

.klv-pass__sec-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px 4px 16px;
}

/* ----------------------------------------------------- pass: shared pieces */

.klv-pass__lead {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--klv-ink-55);
}

.klv-pass__note,
.klv-pass__fine {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--klv-ink-55);
}

.klv-pass__empty {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--klv-ink-70);
}

/* Amber, not red: something still to do is the normal state of this panel. */
.klv-pass__hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--klv-amber-bg);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--klv-amber);
}

.klv-pass__hint-icon {
    flex: 0 0 auto;
    display: block;
    width: 15px;
    height: 15px;
    margin-top: 2px;
}

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

.klv-pass__link {
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--klv-green-deep);
    text-decoration: underline;
}

/* The one primary button a section ever has. */
.klv-pass__go {
    width: 100%;
    padding: 13px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--klv-green);
    color: var(--klv-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}

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

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

.klv-pass__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

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

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

.klv-pass__chip.is-chosen {
    border-color: var(--klv-green);
    background: var(--klv-green);
    color: var(--klv-white);
}

/* ------------------------------------------------------------ pass: basket */

.klv-pass__basket,
.klv-pass__fit,
.klv-pass__details,
.klv-pass__pay {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.klv-pass__item {
    display: flex;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    background: var(--klv-white);
}

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

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

.klv-pass__item-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--klv-ink);
}

.klv-pass__item-price {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--klv-green-deep);
}

.klv-pass__qty {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.klv-pass__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--klv-line);
    border-radius: 50%;
    background: var(--klv-white);
    color: var(--klv-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.klv-pass__qty-btn:hover:not(:disabled) {
    border-color: var(--klv-green);
    color: var(--klv-green-deep);
}

.klv-pass__qty-btn:disabled {
    opacity: .5;
    cursor: default;
}

.klv-pass__qty-value {
    min-width: 18px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

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

.klv-pass__remove:hover:not(:disabled) {
    color: #B00020;
}

.klv-pass__sums {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--klv-hairline);
}

.klv-pass__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--klv-ink-70);
}

.klv-pass__row--total {
    padding-top: 6px;
    border-top: 1px solid var(--klv-hairline);
    font-size: 15px;
    font-weight: 700;
    color: var(--klv-ink);
}

/* ----------------------------------------------------------- pass: fitting */

/* Three method cards side by side: the comparison is the decision, so they are
   shown together rather than as a list the customer scrolls through. They drop
   to one per row on a narrow drawer, where three columns would clip the copy. */
.klv-pass__choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

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

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

.klv-pass__choice.is-chosen {
    border-color: var(--klv-green);
    background: var(--klv-green-08);
    box-shadow: inset 0 0 0 1px var(--klv-green);
}

.klv-pass__choice-icon {
    display: block;
    width: 19px;
    height: 19px;
    color: var(--klv-green-deep);
}

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

.klv-pass__choice-title {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--klv-ink);
}

.klv-pass__choice-blurb {
    font-size: 11px;
    line-height: 1.4;
    color: var(--klv-ink-55);
}

.klv-pass__stage {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--klv-hairline);
}

.klv-pass__garage,
.klv-pass__when {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.klv-pass__centers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 13rem;
    overflow-y: auto;
}

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

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

.klv-pass__center.is-chosen {
    border-color: var(--klv-green);
    background: var(--klv-green-08);
}

.klv-pass__center-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-pass__center-addr {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--klv-ink-55);
}

/* ----------------------------------------------------------- pass: details */

.klv-pass__form {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.klv-pass__form .klv-pass__go {
    margin-top: 5px;
}

/* ----------------------------------------------------------- pass: payment */

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

/* Two lines, not one: the label says what it is, and the line under it says
   whether paying that way keeps them in the chat — said while it is still a
   choice, rather than discovered after the tap. */
.klv-pass__pay-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 15px;
    border: 1px solid var(--klv-line);
    border-radius: 12px;
    background: var(--klv-white);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

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

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

.klv-pass__pay-option.is-busy {
    opacity: 1;
    border-color: var(--klv-green);
    background: var(--klv-green-08);
}

.klv-pass__pay-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-pass__pay-hint {
    font-size: 11.5px;
    color: var(--klv-ink-55);
}

/* The preview strip shown before the address is saved. */
.klv-pass__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.klv-pass__badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--klv-green-08);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--klv-green-deep);
}

/* -------------------------------------------------------- pass: foot, done */

/* The head's mirror image, and spaced the same way: no vertical margin, so the
   bar sits flush on the drawer floor and its hairline straight under whatever
   ends above it. The negative side margins still let it span the body's side
   padding so the rule runs edge to edge. */
.klv-pass__foot {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 calc(var(--klv-pass-gutter) * -1);
    padding: 12px var(--klv-pass-gutter);
    background: var(--klv-white);
    border-top: 1px solid var(--klv-hairline);
}

.klv-pass__foot-sum {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.klv-pass__foot-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--klv-ink-55);
}

.klv-pass__foot-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--klv-ink);
}

.klv-pass__cta {
    flex: 1 1 auto;
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--klv-green);
    color: var(--klv-white);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.klv-pass__cta:hover {
    background: var(--klv-green-deep);
}

.klv-pass__blank {
    padding: 28px 4px;
    text-align: center;
}

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

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

.klv-pass__done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 8px;
    text-align: center;
}

.klv-pass__done-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--klv-green);
    color: var(--klv-white);
}

.klv-pass__done-tick {
    display: block;
    width: 26px;
    height: 26px;
}

.klv-pass__done-tick svg {
    display: block;
    width: 100%;
    height: 100%;
}

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

.klv-pass__done-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--klv-ink-70);
}

.klv-pass__done .klv-pass__go {
    margin-top: 12px;
}

/* ------------------------------------------------------------ pass: narrow

   The widget's drawer and a phone are both too narrow for three fitting cards
   or for a rail with four labels under it, so both fall back rather than clip:
   the cards stack, and the rail keeps only the active step's name. */

.klv-chat:not(.klv-chat--page) .klv-pass__choices {
    grid-template-columns: 1fr;
}

.klv-chat:not(.klv-chat--page) .klv-pass__choice {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 9px;
}

.klv-chat:not(.klv-chat--page) .klv-pass__choice-blurb {
    flex: 1 0 100%;
    padding-left: 28px;
}

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

    .klv-pass__choices {
        grid-template-columns: 1fr;
    }

    .klv-pass__choice {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 3px 9px;
    }

    .klv-pass__choice-blurb {
        flex: 1 0 100%;
        padding-left: 28px;
    }

    /* Four labels do not fit across a phone; the rail keeps the dots and names
       only the step the customer is on. */
    .klv-pass__seg:not(.is-active) .klv-pass__seg-name {
        display: none;
    }

    .klv-pass__seg.is-active {
        flex: 1.6 1 0;
    }
}

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

/* The picker row mirrors with the form; the dial codes inside it do not (see
   .klv-chat__lead-dial). The dropdown is anchored to the row, so it follows. */
[dir="rtl"] .klv-chat__lead-country-item,
[dir="rtl"] .klv-chat__lead-search,
[dir="rtl"] .klv-chat__lead-country-empty {
    text-align: right;
}

[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-pass__remove {
    margin-left: 0;
    margin-right: auto;
}

/* The rail's connecting line is drawn to the left of each dot, which is the
   wrong side once the row itself is reversed. */
[dir="rtl"] .klv-pass__seg::before {
    left: auto;
    right: -50%;
}


/* ---------- 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;
}

/* ------------------------------------------------- link launcher (sitewide)

   The sitewide floating button rendered by launcher.phtml. It is an <a> to the
   standalone /vidur-ai page, not the chat toggle, so it carries no panel and
   never opens one.

   Anatomy follows the "Chat with <persona>" pill du.ae floats on its storefront:
   avatar circle, sparkle, then a two-line invitation. Everything here is scoped
   under .klv-chat--link so widget.phtml's round toggle (which shares the
   .klv-chat__launcher class) keeps its 3.438rem circle untouched.

   Position is inherited wholesale from the .klv-chat base and its media queries
   above: bottom-right, at the base of the theme's floating stack
   (Magento_Theme/html/footer.phtml) — this pill at bottom .563rem, then
   .whats-app-btn at 4.5rem and #header-search-full-icon at 8.438rem above it.
   The pill grows leftwards from that right edge, so the stack is unaffected. */

.klv-chat--link .klv-chat__launcher {
    /* Width/height override the base launcher's fixed circle. */
    width: auto;
    height: auto;
    gap: 0.5rem;
    /* Logical padding: the wide side is always the text side. The Arabic theme
       flips the row with `html { direction: rtl }` (no dir attribute), so a
       physical right-padding would end up beside the avatar instead. */
    padding: 0.313rem;
    padding-inline-end: 1.125rem;
    border-radius: 999px;
    text-decoration: none;
}

/* Arabic storefront: the row runs avatar-right / copy-left, so the wide
   padding belongs on the LEFT. Keyed on the html lang attribute and the
   theme's body class (both emitted by the ar stores) rather than [dir="rtl"],
   which the Arabic theme never sets. Physical values on purpose: this is the
   requested Arabic padding, independent of how the theme resolves direction. */
html[lang="ar"] .klv-chat--link .klv-chat__launcher,
.tyrescart-lang-ar .klv-chat--link .klv-chat__launcher {
    padding: 0.313rem 0.313rem 0.313rem 1.125rem;
}

.klv-chat--link .klv-chat__launcher-avatar {
    display: block;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    /* The crop is a white-background cartoon; the ring is what separates it
       from the green pill the same way du's does from its purple. */
    border: 2px solid rgba(255, 255, 255, .75);
    background: var(--klv-white);
    overflow: hidden;
}

.klv-chat--link .klv-chat__launcher-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.klv-chat--link .klv-chat__launcher-spark {
    /* The base rule sizes every launcher svg at 1.75rem — too big beside 14px copy. */
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
}

.klv-chat--link .klv-chat__launcher-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    text-align: start;
}

.klv-chat--link .klv-chat__launcher-title {
    font-size: 0.938rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.klv-chat--link .klv-chat__launcher-sub {
    font-size: 0.75rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}

/* Below the theme's md breakpoint the bottom of the viewport belongs to
   .mobile-bar and a 15rem-wide pill would crowd it, so collapse back to the
   bare avatar — the same footprint the round launcher had. */
@media (max-width: 767px) {
    .klv-chat--link .klv-chat__launcher {
        width: 2.812rem;
        height: 2.812rem;
        padding: 0;
    }

    .klv-chat--link .klv-chat__launcher-avatar {
        width: 100%;
        height: 100%;
        border-width: 0;
    }

    .klv-chat--link .klv-chat__launcher-spark,
    .klv-chat--link .klv-chat__launcher-copy {
        display: none;
    }
}