/* ============================================
   AGROMAN WEBSITE CHAT (salesagent/WEB_CHAT.md)
   templates/includes/chat_widget.html and static/js/chat.js; base.html loads
   this file only when the chat is on. The chat button and the greeting
   bubble sit bottom right; the panel is a full-screen sheet on phones and a
   380 × 560 px dialog from 768 px. Arthur, 2026-10-21: the button must be
   big and plain to see on light and dark sections alike, so it has a white
   ring and, from 768 px, its words. 2026-10-27: AgroMan's face on the
   button, the bubble, the header and beside each of its messages.
   ============================================ */

.k-chat[hidden],
.k-chat [hidden] {
    display: none !important;
}

.k-chat {
    --k-chat-edge: 16px;
    --k-chat-lift: 0px;
    --k-chat-button: 64px;
}

/* The page's last row (the footer's language buttons) stays clear of the button */
body .k-footer__inner {
    padding-bottom: calc(var(--k-chat-button, 64px) + 40px);
}

/* Clear of the product page's phone bar and the leasing summary bar while they show */
@media (max-width: 991.98px) {
    body:has(.k-pbar.is-shown) .k-chat,
    body:has(.k-lbar.is-shown) .k-chat {
        --k-chat-lift: calc(72px + env(safe-area-inset-bottom));
    }
}

.k-chat__button {
    position: fixed;
    right: var(--k-chat-edge);
    bottom: calc(var(--k-chat-edge) + var(--k-chat-lift));
    z-index: 1035;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: var(--k-chat-button);
    height: var(--k-chat-button);
    padding: 0;
    border: 3px solid var(--k-white);
    border-radius: 999px;
    background: var(--k-green);
    color: var(--k-white);
    box-shadow: 0 10px 28px rgba(15, 26, 46, 0.35);
    line-height: 1;
}

/* AgroMan's face (static/img/agroman/): a circle wherever it shows, decorative next to AgroMan's name or words */
.k-chat__face {
    display: block;
    flex: none;
}

.k-chat__face img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* On the button it fills the circle inside the white ring; from 768 px, the round end of the pill */
.k-chat__button .k-chat__face {
    width: calc(var(--k-chat-button) - 6px);
    height: calc(var(--k-chat-button) - 6px);
}

/* Phones: the face alone, the words for screen readers */
.k-chat__button-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.k-chat__button:hover {
    background: var(--k-green-dark);
}

.k-chat__button:active {
    background: var(--k-green-press);
}

.k-chat.is-open .k-chat__button {
    display: none;
}


/* Greeting bubble (phones; from 768 px the panel itself opens): beside the button, in its row, three lines at
   most, so it never covers the page; from 768 px, should it show: above the button */
.k-chat__bubble {
    position: fixed;
    right: calc(var(--k-chat-edge) + var(--k-chat-button) + 10px);
    bottom: calc(var(--k-chat-edge) + var(--k-chat-lift));
    z-index: 1035;
    display: flex;
    align-items: center;
    width: max-content;
    max-width: min(300px, calc(100vw - 2 * var(--k-chat-edge) - var(--k-chat-button) - 10px));
    min-height: var(--k-chat-button);
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-card);
    background: var(--k-white);
    box-shadow: var(--k-shadow-dialog);
}

.k-chat__bubble::after {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    right: -7px;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--k-line);
    border-right: 1px solid var(--k-line);
    background: var(--k-white);
    transform: rotate(45deg);
}

.k-chat__bubble-text {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 2px 8px 10px;
    border: 0;
    border-radius: var(--k-radius-card) 0 0 var(--k-radius-card);
    background: none;
    color: var(--k-ink);
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

/* AgroMan's face before the words; under 360 px the words keep the room */
.k-chat__bubble .k-chat__face {
    width: 28px;
    height: 28px;
}

@media (max-width: 359.98px) {
    .k-chat__bubble .k-chat__face {
        display: none;
    }
}

/* The clamp sits on the words, not the padded button, so no part of a further line shows */
.k-chat__bubble-words {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.k-chat__bubble-close {
    flex: none;
    width: 40px;
    height: 40px;
    margin: 0 2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--k-muted);
    font-size: 14px;
}

.k-chat__bubble-close:hover {
    background: var(--k-ground);
    color: var(--k-ink);
}


/* Panel: a full-screen sheet on phones */
.k-chat__panel {
    position: fixed;
    inset: 0;
    z-index: 1036;
    display: flex;
    flex-direction: column;
    height: 100%;
    height: 100dvh;
    background: var(--k-white);
}

html.k-chat-locked,
html.k-chat-locked body {
    overflow: hidden;
}

.k-chat__head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 8px 14px 16px;
    background: var(--k-night);
    color: var(--k-on-night);
}

.k-chat__head .k-chat__face {
    width: 40px;
    height: 40px;
    margin-right: 4px;
}

.k-chat__title {
    margin: 0;
    color: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.k-chat__note {
    margin: 4px 0 0;
    color: var(--k-on-night-2);
    font-size: 14px;
    line-height: 1.4;
}

.k-chat__close {
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--k-on-night);
    font-size: 18px;
}

.k-chat__close:hover {
    background: var(--k-on-night-edge);
}

/* The one scroll area between the header and the message box: the conversation and what follows it */
.k-chat__body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.k-chat__log {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.k-chat__msg {
    max-width: 85%;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* AgroMan: its face in the bubble's left margin, by the bubble's last line (the colleague's and the visitor's
   messages have none) */
.k-chat__msg--agent {
    position: relative;
    align-self: flex-start;
    max-width: calc(92% - 36px);
    margin-left: 36px;
    border-bottom-left-radius: 4px;
    background: var(--k-ground);
    color: var(--k-ink);
}

.k-chat__msg .k-chat__face {
    position: absolute;
    bottom: 0;
    left: -36px;
    width: 28px;
    height: 28px;
}

.k-chat__msg--buyer {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background: var(--k-green);
    color: var(--k-white);
}

/* A Kultiva colleague, answering from the Telegram staff group: named, and framed unlike AgroMan */
.k-chat__msg--staff {
    align-self: flex-start;
    border: 1px solid var(--k-green);
    border-bottom-left-radius: 4px;
    background: var(--k-white);
    color: var(--k-ink);
}

.k-chat__who {
    display: block;
    margin-bottom: 2px;
    color: var(--k-green-dark);
    font-size: 14px;
    font-weight: 700;
    white-space: normal;
}

.k-chat__msg a {
    color: inherit;
    text-decoration: underline;
}

.k-chat__msg--agent a,
.k-chat__msg--staff a {
    color: var(--k-green-dark);
}

/* The WhatsApp channel invite after the welcome: a button under the words, in WhatsApp's green as in the footer,
   its words on one line from 360 px in both languages */
.k-chat__msg .k-chat__join {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--k-radius-button);
    background: var(--k-whatsapp);
    color: var(--k-night);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: normal;
}

.k-chat__msg .k-chat__join:hover {
    background: var(--k-whatsapp-hover);
    color: var(--k-night);
}

.k-chat__join .bi {
    font-size: 18px;
    line-height: 1;
}

.k-chat__msg.is-pending {
    opacity: 0.7;
}

.k-chat__typing {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 16px 10px;
    color: var(--k-muted);
    font-size: 14px;
}

.k-chat__dots {
    display: inline-flex;
    gap: 4px;
}

.k-chat__dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--k-field);
}

/* Quick replies under the welcome, until the visitor's first message */
.k-chat__starters {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 12px;
}

.k-chat__starter {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--k-green);
    border-radius: 999px;
    background: var(--k-white);
    color: var(--k-green-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}

.k-chat__starter:hover {
    background: var(--k-success-bg);
}

.k-chat__alert {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0 16px 10px;
    padding: 9px 12px;
    border-radius: var(--k-radius-control);
    background: var(--k-danger-bg);
    color: var(--k-danger);
    font-size: 14px;
    line-height: 1.4;
}

.k-chat__alert.is-limit {
    background: var(--k-warning-bg);
    color: var(--k-warning);
}

.k-chat__retry {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.k-chat__retry:hover {
    color: inherit;
}

.k-chat__done {
    margin: 0 16px 10px;
    padding: 9px 12px;
    border-radius: var(--k-radius-control);
    background: var(--k-success-bg);
    color: var(--k-success);
    font-size: 14px;
    line-height: 1.4;
}


/* Telegram: offered after a hand-over until a colleague answers, and always in the footer while it is on */
.k-chat__offer {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 16px 10px;
    padding: 10px 12px;
    border-radius: var(--k-radius-control);
    background: var(--k-info-bg);
    color: var(--k-info);
    font-size: 14px;
    line-height: 1.4;
}

.k-chat__offer p {
    flex: 1 1 180px;
    margin: 0;
}

.k-chat__offer-button,
.k-chat__tg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    font-weight: 700;
}

.k-chat__offer-button {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: var(--k-radius-button);
    background: var(--k-navy);
    color: var(--k-white);
}

.k-chat__offer-button:hover {
    background: var(--k-ink);
}

.k-chat__foot {
    display: flex;
    flex: none;
    justify-content: center;
    padding: 0 12px max(8px, env(safe-area-inset-bottom));
    background: var(--k-white);
}

.k-chat__tg {
    min-height: 36px;
    padding: 4px 8px;
    background: none;
    color: var(--k-navy);
    font-size: 14px;
    text-decoration: underline;
}

.k-chat__linked {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    color: var(--k-muted);
    font-size: 14px;
}

.k-chat__offer-button:disabled,
.k-chat__tg:disabled {
    opacity: 0.6;
}


/* Hand-over: the visitor's contact, with the request form's checks: a card at the end of the conversation,
   scrolling with it (never a second scroll box) */
.k-chat__contact {
    display: grid;
    flex: none;
    gap: 12px;
    margin: 0 16px 16px;
    padding: 14px 14px 16px;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-card);
    background: var(--k-white);
    box-shadow: var(--k-shadow-raised);
}

.k-chat__contact-title {
    margin: 0;
    color: var(--k-ink);
    font-weight: 700;
    line-height: 1.4;
}

.k-chat__field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.k-chat__field > label,
.k-chat__field > legend {
    display: block;
    margin-bottom: 6px;
    color: var(--k-ink);
    font-size: 14px;
    font-weight: 600;
}

.k-chat__field .k-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.k-chat__field .k-choice {
    min-height: 40px;
    font-size: 14px;
}

.k-chat__field > .k-chat__consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    color: var(--k-body);
    font-weight: 400;
    line-height: 1.4;
}

.k-chat__consent input {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--k-green);
}

.k-chat__error {
    margin: 6px 0 0;
    color: var(--k-danger);
    font-size: 14px;
}


/* The message box: Enter sends, Shift+Enter starts a line */
.k-chat__form {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px 8px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--k-line);
    background: var(--k-white);
}

.k-chat__count {
    flex-basis: 100%;
    color: var(--k-muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.k-chat__text {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    max-height: 140px;
    padding: 10px 12px;
    border: 1px solid var(--k-chip-line);
    border-radius: var(--k-radius-control);
    color: var(--k-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    resize: none;
    field-sizing: content;
}

.k-chat__text:focus {
    border-color: var(--k-green);
}

.k-chat__text:disabled {
    background: var(--k-ground);
}

.k-chat__send {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--k-green);
    color: var(--k-white);
    font-size: 18px;
}

.k-chat__send:hover {
    background: var(--k-green-dark);
}

.k-chat__send:disabled {
    background: var(--k-chip-line);
}


/* From 768 px: the button with its words, and a dialog bottom right, over the page: 440 × 700 px (Arthur,
   2026-10-23: bigger than the first 380 × 560), 480 × 780 px on wide screens, never taller than the window */
@media (min-width: 768px) {
    .k-chat {
        --k-chat-edge: 24px;
    }

    .k-chat__button {
        width: auto;
        padding: 0 24px 0 0;
        gap: 12px;
    }

    .k-chat__button-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        font-size: 17px;
        font-weight: 700;
    }

    .k-chat__bubble {
        right: var(--k-chat-edge);
        bottom: calc(var(--k-chat-edge) + var(--k-chat-lift) + var(--k-chat-button) + 12px);
        align-items: flex-start;
        max-width: 300px;
        min-height: 0;
    }

    .k-chat__bubble::after {
        top: auto;
        right: 22px;
        bottom: -7px;
        border-top: 0;
        border-bottom: 1px solid var(--k-line);
    }

    .k-chat__bubble-text {
        padding: 12px 4px 12px 14px;
        font-size: 15px;
    }

    .k-chat__bubble-words {
        -webkit-line-clamp: 3;
    }

    .k-chat__bubble-close {
        margin-top: 2px;
    }

    .k-chat__panel {
        inset: auto var(--k-chat-edge) calc(var(--k-chat-edge) + var(--k-chat-lift)) auto;
        width: min(440px, calc(100vw - 2 * var(--k-chat-edge)));
        height: min(700px, calc(100vh - 2 * var(--k-chat-edge) - var(--k-chat-lift)));
        border: 1px solid var(--k-line);
        border-radius: var(--k-radius-dialog);
        box-shadow: var(--k-shadow-dialog);
        overflow: hidden;
    }
}

@media (min-width: 1400px) {
    .k-chat__panel {
        width: 480px;
        height: min(780px, calc(100vh - 2 * var(--k-chat-edge) - var(--k-chat-lift)));
    }
}

@media (prefers-reduced-motion: no-preference) {
    .k-chat__button,
    .k-chat__bubble {
        transition: bottom var(--k-base) var(--k-ease);
    }

    /* The greeting slides in, AgroMan's welcome and invite rise into the chat, and the button pulses three times
       after the page loads */
    .k-chat__panel,
    .k-chat__bubble,
    .k-chat__msg--welcome,
    .k-chat__msg--invite {
        animation: k-chat-in var(--k-slow) var(--k-ease);
    }

    .k-chat__button::before {
        content: "";
        position: absolute;
        inset: -3px;
        border-radius: inherit;
        animation: k-chat-pulse 2.4s ease-out 1s 3;
        pointer-events: none;
    }

    .k-chat__dots span {
        animation: k-chat-dot 1.2s infinite ease-in-out;
    }

    .k-chat__dots span:nth-child(2) {
        animation-delay: 0.15s;
    }

    .k-chat__dots span:nth-child(3) {
        animation-delay: 0.3s;
    }
}

@keyframes k-chat-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@keyframes k-chat-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(47, 122, 59, 0.55);
    }

    80%,
    100% {
        box-shadow: 0 0 0 18px rgba(47, 122, 59, 0);
    }
}

@keyframes k-chat-dot {
    0%,
    80%,
    100% {
        opacity: 0.3;
    }

    40% {
        opacity: 1;
    }
}