/* ============================================================
   M-VPN — чат поддержки
   Кнопка чата и окно переписки одни и те же в кабинете (_LkLayout: кнопка над таб-баром, на десктопе — внутри
   нарисованного телефона) и на страницах сайта (_Layout, .support--site: кнопка в углу окна, на компьютере окно —
   карточкой над ней). Цвета — переменные кабинета (--lk-*): в кабинете их задают lk.css и lk-dark.css, на сайте —
   блок .support--site ниже. Поведение — js/support.js.

   Кнопка — стекло, как таб-бар кабинета: заметна, но не спорит с главными кнопками экрана; пришёл ответ —
   заливается фирменным градиентом и показывает число. На сайте кнопка сразу синяя: там она одна зовёт написать.
   Пока листают вниз, кнопка уходит, при остановке возвращается. Окно выезжает снизу, как шторки, переписка —
   пузырями, как в iMessage. На телефоне с клавиатурой высоту окна держит support.js по visualViewport:
   --chat-top и --chat-h.
   ============================================================ */

/* Атрибут hidden побеждает display из классов (на сайте общего правила, как в кабинете, нет). */
.support [hidden] { display: none !important; }

.support-fab {
    position: absolute;
    right: 16px;
    bottom: calc(var(--safe-bottom) + 76px);
    z-index: 49;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--lk-line);
    border-radius: 50%;
    background: var(--lk-tabbar-bg);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    color: var(--lk-accent);
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .28), var(--lk-card-inset);
    cursor: pointer;
    transition:
        transform .5s var(--ease-spring),
        opacity .3s var(--ease),
        background-color var(--dur) var(--ease),
        color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}
.support-fab:active { transform: scale(.9); transition-duration: .08s; }
.support-fab.is-away { opacity: 0; transform: translateY(14px) scale(.86); pointer-events: none; }
.support-fab.has-unread {
    background: var(--lk-primary-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--lk-primary-shadow);
}
.support-fab__icon { transition: transform .5s var(--ease-spring), opacity .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
    .support-fab:hover .support-fab__icon { transform: scale(1.08); }
}

/* новый ответ (или подсказка на главной): значок чата качнётся, число на кнопке «выпрыгнет» */
@keyframes support-nudge {
    0%   { transform: none; }
    25%  { transform: translateY(-5px) rotate(-10deg); }
    55%  { transform: translateY(0) rotate(7deg); }
    80%  { transform: rotate(-3deg); }
    100% { transform: none; }
}
.support-fab.is-nudge .support-fab__icon { animation: support-nudge .75s var(--ease-out); }

@keyframes support-pop {
    0%   { transform: scale(.6); }
    60%  { transform: scale(1.12); }
    100% { transform: none; }
}
.support-fab__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--lk-badge);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 21px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--lk-bg);
}
.support-fab__badge.is-pop { animation: support-pop .4s var(--ease-out); }

/* Подсказка у кнопки. В кабинете — один раз за всё время, пока к чату не привыкли; на главной — раз за визит. */
.support-hint {
    position: absolute;
    right: 80px;
    bottom: calc(var(--safe-bottom) + 86px);
    z-index: 49;
    max-width: 230px;
    opacity: 0;
    transform: translateX(10px) scale(.94);
    transform-origin: right bottom;
    transition: opacity .35s var(--ease-out), transform .55s var(--ease-spring);
}
.support-hint.is-shown { opacity: 1; transform: none; }
/* кнопка ушла, пока листают, — подсказка уходит вместе с ней и вместе возвращается */
.support-fab.is-away + .support-hint.is-shown { opacity: 0; transform: translateY(14px) scale(.92); pointer-events: none; }
.support-hint__body {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 9px 13px;
    border: 0;
    border-radius: 16px 16px 5px 16px;
    background: var(--lk-card-solid);
    color: var(--lk-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-align: left;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .28), 0 0 0 .5px var(--lk-line);
    cursor: pointer;
}
.support-hint__avatar {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--lk-brand-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.support-hint__close {
    position: absolute;
    top: -9px;
    left: -9px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--lk-card-solid);
    color: var(--lk-ink-2);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .3), 0 0 0 .5px var(--lk-line);
    cursor: pointer;
    transition: transform .3s var(--ease-spring), color var(--dur) var(--ease);
}
.support-hint__close:hover { color: var(--lk-ink); }
.support-hint__close:active { transform: scale(.88); }
/* на компьютере крестик появляется при наведении, на телефоне виден всегда */
@media (hover: hover) and (pointer: fine) {
    .support-hint__close { opacity: 0; transition: opacity .2s var(--ease), transform .3s var(--ease-spring); }
    .support-hint:hover .support-hint__close,
    .support-hint__close:focus-visible { opacity: 1; }
}

/* ---- окно чата ---- */
.chat {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--chat-top, 0px);
    height: var(--chat-h, 100%);
    z-index: 95;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.chat__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .42);
    opacity: 0;
    transition: opacity .35s var(--ease-out);
}
.chat.is-open .chat__backdrop { opacity: 1; }

.chat__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    height: calc(100% - var(--safe-top) - 10px);
    overflow: hidden;
    border-radius: 26px 26px 0 0;
    background: var(--lk-bg);
    color: var(--lk-ink);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35);
    transform: translateY(100%);
    transition: transform .55s var(--ease-sheet);
}
.chat.is-open .chat__panel { transform: none; }
/* клавиатура открыта: окно и так ниже некуда — отступ под край экрана не нужен, верх почти вплотную */
.chat.is-kb .chat__panel { height: calc(100% - 6px); }

.chat__head {
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px 12px;
    background: var(--lk-sheet);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 .5px 0 var(--lk-hairline);
}
.chat__grabber {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 36px;
    height: 5px;
    margin-left: -18px;
    border-radius: 3px;
    background: var(--lk-ink-3);
    opacity: .45;
}
.chat__avatar {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--lk-brand-grad);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 6px 16px -6px rgba(41, 151, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
}
/* аватар админа — нарисованная картинка под имя диалога (img/support/agent-f.svg, agent-m.svg) */
.chat__avatar img,
.support-hint__avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; }
/* зелёная точка: кто-то из админов сейчас на связи */
.chat__online {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--lk-switch-on);
    box-shadow: 0 0 0 2.5px var(--lk-card-solid);
}
.chat__who { flex: 1; min-width: 0; }
.chat__name { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.chat__status {
    margin: 1px 0 0;
    font-size: 13px;
    color: var(--lk-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--dur) var(--ease);
}
.chat__status.is-typing,
.chat__status.is-online { color: var(--lk-accent); }
.chat__close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--lk-fill);
    color: var(--lk-ink-2);
    cursor: pointer;
    transition: transform .38s var(--ease-spring), background-color var(--dur) var(--ease);
}
.chat__close:active { transform: scale(.9); background: var(--lk-fill-press); transition-duration: .08s; }

.chat__scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 12px 12px 10px;
}
.chat__scroll::-webkit-scrollbar { display: none; }

/* пока переписка короткая, она прижата к низу — к полю ввода, как в мессенджере */
.chat__scroll::before { content: ""; flex: 1 1 auto; }
.chat__more { display: flex; justify-content: center; padding: 6px 0 10px; }
@keyframes support-spin { to { transform: rotate(360deg); } }
.chat__spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--lk-line);
    border-top-color: var(--lk-accent);
    animation: support-spin .8s linear infinite;
}

.chat__log { display: flex; flex-direction: column; }

.chat__day {
    align-self: center;
    margin: 16px 0 8px;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--lk-fill);
    color: var(--lk-ink-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
}
.chat__author { margin: 10px 0 4px 12px; font-size: 12px; font-weight: 600; color: var(--lk-ink-2); }
.chat__intro .chat__author { margin-top: 4px; }

.chat__msg { display: flex; margin-top: 2px; }
.chat__msg.is-first { margin-top: 8px; }
.chat__author + .chat__msg.is-first { margin-top: 0; }
.chat__msg--out { justify-content: flex-end; }

.chat__bubble {
    max-width: 80%;
    padding: 8px 13px;
    border-radius: 19px;
    font-size: 16px;
    line-height: 1.38;
    letter-spacing: -.012em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-user-select: text;
    user-select: text;
}
.chat__msg--in .chat__bubble { background: var(--lk-bubble-in); color: var(--lk-ink); }
.chat__msg--out .chat__bubble {
    background: var(--lk-primary-grad);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* сообщения подряд от одной стороны — одна «стопка»: внутренние углы острее, скруглён только край стопки */
.chat__msg--in:not(.is-first) .chat__bubble { border-top-left-radius: 6px; }
.chat__msg--in:not(.is-last) .chat__bubble { border-bottom-left-radius: 6px; }
.chat__msg--out:not(.is-first) .chat__bubble { border-top-right-radius: 6px; }
.chat__msg--out:not(.is-last) .chat__bubble { border-bottom-right-radius: 6px; }
.chat__bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.chat__msg--in .chat__bubble a { color: var(--lk-accent); }

.chat__msg.is-pending .chat__bubble { opacity: .55; }
.chat__msg.is-failed .chat__bubble { background: var(--lk-danger-soft); color: var(--lk-danger-text); box-shadow: none; }

@keyframes chat-in {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.chat__msg.is-new { animation: chat-in .42s var(--ease-spring) backwards; }
.chat__msg--out.is-new { transform-origin: 100% 100%; }
.chat__msg--in.is-new { transform-origin: 0 100%; }

/* время под стопкой, у последнего своего — ещё «Доставлено» или «Прочитано» */
.chat__meta {
    margin: 4px 12px 2px;
    font-size: 11.5px;
    color: var(--lk-ink-3);
    font-variant-numeric: tabular-nums;
}
.chat__meta--out { text-align: right; }
.chat__meta.is-read { color: var(--lk-accent); }
.chat__meta.is-failed { color: var(--lk-danger-text); }
.chat__retry {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* ИИ-помощник: подпись со значком цветом акцента, пузырь чуть подкрашен акцентом — видно, что отвечал не человек */
.chat__author--ai { display: flex; align-items: center; gap: 5px; color: var(--lk-accent); }
.chat__author--ai svg { flex: none; }
.chat__msg--ai .chat__bubble {
    background: var(--lk-bubble-in);
    background: color-mix(in srgb, var(--lk-accent) 9%, var(--lk-bubble-in));
}

/* поддержка поправила ответ — «изменено» в пузыре после текста */
.chat__edited { margin-left: 6px; font-size: 11.5px; opacity: .6; white-space: nowrap; }

/* «Помогло» / «Позвать оператора» — под последним ответом ИИ */
.chat__ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; padding-left: 2px; }
.chat__ai-btn {
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--lk-line);
    border-radius: 980px;
    background: var(--lk-card);
    color: var(--lk-accent);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: var(--lk-card-inset);
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease), transform .38s var(--ease-spring);
}
.chat__ai-btn:active { transform: scale(.94); transition-duration: .08s; }
.chat__ai-btn[disabled] { opacity: .5; cursor: default; }
.chat__ai-btn.is-busy { opacity: 1; background: var(--lk-fill); }
@media (hover: hover) and (pointer: fine) {
    .chat__ai-btn:not([disabled]):hover { background: var(--lk-fill); }
}
.chat__ai-error { flex-basis: 100%; margin: 2px 4px 0; font-size: 12.5px; color: var(--lk-danger-text); }
.chat__ai-note { margin: 4px 12px 2px; font-size: 12px; color: var(--lk-ink-2); }

/* позвали оператора — строка внизу переписки, пока живой админ не ответит */
.chat__system {
    align-self: center;
    max-width: 88%;
    margin: 14px 0 4px;
    padding: 5px 12px;
    border-radius: 12px;
    background: var(--lk-fill);
    color: var(--lk-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

/* ---- картинки в переписке: одна — в свой размер, несколько — плиткой по две; одни картинки — без пузыря ---- */
.chat__bubble.is-media {
    padding: 0;
    overflow: hidden;
    background: none !important;
    box-shadow: none !important;
}
.chat__bubble.has-media { padding: 4px 4px 0; }
.chat__bubble.has-media .chat__media:not(.chat__media--grid) { justify-items: center; }
.chat__bubble.has-media .chat__media:not(.chat__media--grid) .chat__img { overflow: hidden; border-radius: 13px; }
.chat__caption { padding: 5px 9px 7px; }
.chat__media { display: grid; gap: 3px; overflow: hidden; border-radius: 15px; }
.chat__bubble.is-media .chat__media { border-radius: inherit; }
.chat__media--grid { grid-template-columns: 1fr 1fr; width: 240px; max-width: 100%; }
.chat__img { display: block; min-width: 0; background: var(--lk-fill); line-height: 0; cursor: zoom-in; }
.chat__img img { display: block; max-width: 100%; height: auto; }
.chat__media--grid .chat__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* нечётная последняя — во всю ширину плитки */
.chat__media--grid .chat__img:last-child:nth-child(odd) { grid-column: span 2; }
.chat__media--grid .chat__img:last-child:nth-child(odd) img { aspect-ratio: 2; }
.chat__msg.is-failed .chat__media { opacity: .5; }

/* картинки к сообщению — над полем ввода, до отправки; ✕ — убрать */
.chat__files { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 4px; }
.chat__file {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--lk-fill);
    box-shadow: 0 0 0 .5px var(--lk-line);
    animation: chat-in .35s var(--ease-spring) backwards;
}
.chat__file img { display: block; width: 100%; height: 100%; object-fit: cover; }
.chat__file .chat__spinner { width: 20px; height: 20px; }
.chat__file-del {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    cursor: pointer;
}
.chat__files-error { flex-basis: 100%; margin: 0 4px; font-size: 12.5px; line-height: 1.35; color: var(--lk-danger-text); }

/* скрепка слева от поля ввода */
.chat__attach {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 -4px 0 -2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--lk-ink-2);
    cursor: pointer;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform .38s var(--ease-spring);
}
.chat__attach:active { transform: scale(.88); transition-duration: .08s; }
@media (hover: hover) and (pointer: fine) {
    .chat__attach:hover { color: var(--lk-accent); background: var(--lk-fill); }
}

/* тащат файл в окно чата — подсказка поверх всего окна */
.chat__drop {
    position: absolute;
    inset: 8px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px dashed var(--lk-accent);
    border-radius: 20px;
    background: var(--lk-bg);
    background: color-mix(in srgb, var(--lk-bg) 90%, transparent);
    color: var(--lk-accent);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

/* картинка во весь экран (js/chat-images.js): нажатие мимо, ✕ или Esc — закрыть */
.chat-viewer {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(64px + var(--safe-top, 0px)) 16px calc(24px + var(--safe-bottom, 0px));
    background: rgba(0, 0, 0, .88);
    opacity: 0;
    pointer-events: auto;
    cursor: zoom-out;
    transition: opacity .2s var(--ease-out);
}
.chat-viewer.is-open { opacity: 1; }
.chat-viewer__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    transform: scale(.96);
    transition: transform .3s var(--ease-spring);
}
.chat-viewer.is-open .chat-viewer__img { transform: none; }
.chat-viewer__bar {
    position: absolute;
    top: calc(12px + var(--safe-top, 0px));
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.chat-viewer__open,
.chat-viewer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin: 0;
    border: 0;
    border-radius: 980px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.chat-viewer__open { padding: 0 14px; }
.chat-viewer__close { width: 36px; padding: 0; font-size: 15px; }

/* «печатает…»: пузырь с тремя точками у левого края */
.chat__typing {
    align-self: flex-start;
    display: inline-flex;
    gap: 4px;
    margin-top: 8px;
    padding: 13px 14px;
    border-radius: 19px;
    background: var(--lk-bubble-in);
    animation: chat-in .35s var(--ease-spring) backwards;
}
.chat__typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lk-ink-3);
    animation: chat-dot 1.2s ease-in-out infinite;
}
.chat__typing i:nth-child(2) { animation-delay: .16s; }
.chat__typing i:nth-child(3) { animation-delay: .32s; }
@keyframes chat-dot {
    0%, 60%, 100% { transform: none; opacity: .45; }
    30% { transform: translateY(-3px); opacity: 1; }
}

/* темы первого сообщения — пока переписки нет */
.chat__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.chat__chip {
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--lk-line);
    border-radius: 980px;
    background: var(--lk-card);
    color: var(--lk-accent);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: var(--lk-card-inset);
    transition: background-color var(--dur) var(--ease), transform .38s var(--ease-spring);
}
.chat__chip:active { transform: scale(.94); transition-duration: .08s; }

/* поле ввода растёт до пяти строк; кнопка «Отправить» оживает, когда есть текст */
.chat__composer {
    position: relative;
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px calc(10px + var(--safe-bottom));
    background: var(--lk-sheet);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 -.5px 0 var(--lk-hairline);
}
.chat.is-kb .chat__composer { padding-bottom: 8px; }
/* ловушка для роботов — человеку не видна и не попадает в обход по Tab */
.chat__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.chat__input {
    flex: 1;
    min-width: 0;
    height: 40px;
    max-height: 136px;
    margin: 0;
    padding: 9px 15px;
    /* серая капсула, как поле поиска в iOS: на светлой панели белое поле с волосяной рамкой терялось */
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--lk-fill);
    color: var(--lk-ink);
    font-family: inherit;
    /* 16px — иначе iPhone приближает страницу при фокусе; строка ровно 20px — поле в одну строку высотой с кнопку */
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -.01em;
    resize: none;
    outline: none;
    overflow-y: auto;
    scrollbar-width: none;
    caret-color: var(--lk-accent);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.chat__input::-webkit-scrollbar { display: none; }
.chat__input::placeholder { color: var(--lk-ink-2); }
.chat__input:focus { background: var(--lk-card-solid); border-color: var(--lk-accent); box-shadow: 0 0 0 3px var(--lk-accent-ring); }
.chat__send {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--lk-primary-grad);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--lk-primary-shadow);
    cursor: pointer;
    transition: transform .4s var(--ease-spring), opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chat__send:active { transform: scale(.88); transition-duration: .08s; }
.chat__send[disabled] { opacity: .32; box-shadow: none; pointer-events: none; }

.support-fab, .support-hint, .chat__send, .chat__close, .chat__chip, .chat__attach, .chat__file-del {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ============================================================
   На страницах сайта (главная, правовые, возврат из оплаты): своих переменных кабинета тут нет — задаём их.
   Светлые всегда, как и сам сайт: тёмной темы у него нет, а белая подсказка и белое окно заметны и на чёрном
   первом экране, и на светлых разделах. Кнопка — синяя, в правом нижнем углу окна; окно чата на телефоне —
   шторка во весь экран, на компьютере — карточка над кнопкой, страница за ней остаётся живой.
   ============================================================ */
.support--site {
    --lk-bg: #f5f5f7;
    --lk-card: rgba(255, 255, 255, .78);
    --lk-card-solid: #ffffff;
    --lk-sheet: rgba(255, 255, 255, .88);
    --lk-ink: #1d1d1f;
    --lk-ink-2: #6e6e73;
    --lk-ink-3: #aeaeb2;
    --lk-line: rgba(0, 0, 0, .08);
    --lk-hairline: rgba(0, 0, 0, .10);
    --lk-fill: rgba(120, 120, 128, .14);
    --lk-fill-press: rgba(120, 120, 128, .22);
    --lk-accent: #0071e3;
    --lk-accent-ring: rgba(0, 113, 227, .22);
    --lk-primary-grad: linear-gradient(180deg, #2a8dff 0%, #0071e3 100%);
    --lk-primary-shadow: 0 8px 20px -6px rgba(0, 113, 227, .45);
    --lk-brand-grad: linear-gradient(135deg, #5aa5ff, #1b64ff);
    --lk-switch-on: #34c759;
    --lk-danger-soft: rgba(255, 59, 48, .12);
    --lk-danger-text: #d70015;
    --lk-card-inset: inset 0 1px 0 rgba(255, 255, 255, .75);
    --lk-tabbar-bg: rgba(249, 249, 251, .72);
    --lk-bubble-in: #e9e9eb;
    --lk-badge: #ff3b30;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --ease: cubic-bezier(.28, .11, .32, 1);
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-spring: cubic-bezier(.22, 1.2, .36, 1);
    --ease-sheet: cubic-bezier(.32, .72, 0, 1);
    --dur: .24s;

    /* где кнопка: от края окна и от низа */
    --fab-gap: 18px;
    --fab-size: 58px;

    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
}
.support--site .support-fab {
    position: fixed;
    right: calc(var(--fab-gap) + var(--safe-right));
    bottom: calc(var(--fab-gap) + var(--safe-bottom));
    z-index: 1400;
    width: var(--fab-size);
    height: var(--fab-size);
    border: 0;
    background: var(--lk-primary-grad);
    color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 14px 30px -10px rgba(0, 113, 227, .65), 0 4px 12px -4px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.support--site .support-fab__badge { box-shadow: 0 0 0 2px #fff; }
/* окно открыто — на кнопке вместо облачка стрелка вниз: свернуть */
.support--site .support-fab__close {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
    transition: transform .45s var(--ease-spring), opacity .2s var(--ease);
}
.support--site .support-fab[aria-expanded="true"] .support-fab__icon { opacity: 0; transform: rotate(90deg) scale(.6); }
.support--site .support-fab[aria-expanded="true"] .support-fab__close { opacity: 1; transform: none; }
.support--site .support-fab[aria-expanded="true"] .support-fab__badge { display: none; }

.support--site .support-hint {
    position: fixed;
    right: calc(var(--fab-gap) + var(--safe-right) + var(--fab-size) + 12px);
    bottom: calc(var(--fab-gap) + var(--safe-bottom) + 8px);
    z-index: 1400;
    max-width: min(320px, calc(100vw - var(--fab-size) - var(--fab-gap) * 2 - 24px));
    transform: translateX(12px) scale(.92);
}
.support--site .support-hint.is-shown { transform: none; }
.support--site .support-hint__body { padding: 10px 14px 10px 10px; border-radius: 20px 20px 6px 20px; font-size: 15px; font-weight: 600; }
/* узкий телефон: подсказка всё равно в одну строку */
@media (max-width: 420px) {
    .support--site .support-hint__body { gap: 8px; padding: 9px 12px 9px 9px; font-size: 14px; }
    .support--site .support-hint__avatar { width: 26px; height: 26px; font-size: 13px; }
}

/* окно — над шапкой сайта (у неё z-index 1000), под модальным окном «Подключиться» */
.support--site .chat { z-index: 1500; }

@media (min-width: 734px) {
    .support--site { --fab-gap: 28px; }
}

/* Компьютер: окно — карточка над кнопкой, без затемнения; страница за ним листается и нажимается. */
@media (min-width: 640px) {
    .support--site .chat {
        top: auto;
        left: auto;
        right: calc(var(--fab-gap) + var(--safe-right));
        bottom: calc(var(--fab-gap) + var(--safe-bottom) + var(--fab-size) + 14px);
        width: 384px;
        height: min(640px, calc(100vh - var(--fab-gap) * 2 - var(--fab-size) - 40px));
        height: min(640px, calc(100dvh - var(--fab-gap) * 2 - var(--fab-size) - 40px));
        display: block;
        pointer-events: none;
    }
    .support--site .chat__backdrop { display: none; }
    .support--site .chat__panel {
        width: 100%;
        max-width: none;
        height: 100%;
        border-radius: 24px;
        box-shadow: 0 24px 64px -14px rgba(0, 0, 0, .38), 0 0 0 .5px rgba(0, 0, 0, .1);
        opacity: 0;
        transform: translateY(14px) scale(.96);
        transform-origin: 100% 100%;
        transition: transform .45s var(--ease-spring), opacity .22s var(--ease-out);
        pointer-events: auto;
    }
    .support--site .chat.is-open .chat__panel { opacity: 1; transform: none; }
    .support--site .chat__grabber { display: none; }
    .support--site .chat__head { padding-top: 14px; }
    .support--site .chat__composer { padding-bottom: 12px; }
    .support--site .chat__bubble { font-size: 15px; }
}

/* Телефон: окно во весь экран — страница за ним не листается. */
html.support-locked,
html.support-locked body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .support-fab, .support-hint, .chat__panel, .chat__backdrop, .chat-viewer, .chat-viewer__img { transition-duration: .01ms; }
    .chat__msg.is-new, .chat__typing, .chat__file, .support-fab.is-nudge .support-fab__icon, .support-fab__badge.is-pop { animation: none; }
}