/* ---------------------------------------------------------------------------
   Консультант на витрине: кнопка и окно разговора.

   Блок выводится в самом конце макета, за пределами обёртки .lx, поэтому
   селекторы идут без её префикса, а переменные берутся с запасным значением.
   --------------------------------------------------------------------------- */

/* Стопка кнопок внизу справа: WhatsApp и консультант. Порознь они
   перекрывали друг друга и панель сотрудника. */
.lx-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 880;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* У сотрудника внизу справа своя панель — поднимаемся над ней. */
.lx-fab--staff { bottom: 78px; }
.lx-cons.lx-fab--staff { bottom: 78px; }

.lx-fab__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 8px 26px rgba(37, 211, 102, .35);
}

.lx-fab__wa:hover { background: #1eb457; color: #fff; }

.lx-cons__open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #111010;
    color: #fff;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 8px 26px rgba(17, 16, 16, .22);
    transition: background .15s, opacity .15s;
}

.lx-cons__open:hover { background: var(--violet, #6b5cd6); }
.lx-cons__open.is-hidden { opacity: 0; pointer-events: none; }

/* Атрибут hidden проигрывает любому display в стилях — без этой строки
   окно не закрывалось. */
.lx-cons[hidden] { display: none; }

.lx-cons {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 890;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - 40px);
    max-height: min(640px, calc(100vh - 40px));
    background: #fff;
    border: 1px solid var(--line, #e6e2de);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(17, 16, 16, .2);
}

.lx-cons__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line, #e6e2de);
}

.lx-cons__head span { display: flex; flex-direction: column; gap: 2px; }
.lx-cons__head b { font-size: 15px; font-weight: 500; }
.lx-cons__head small { font-size: 12px; color: var(--mute); }

.lx-cons__x {
    margin-left: auto;
    border: 0;
    background: none;
    padding: 0 2px;
    font-size: 22px;
    line-height: 1;
    color: var(--mute);
    cursor: pointer;
}

.lx-cons__x:hover { color: var(--ink, #111010); }

.lx-cons__body {
    flex: 1;
    min-height: 180px;
    overflow-y: auto;
    /* Докрутив разговор до конца, не утаскиваем за собой страницу. */
    overscroll-behavior: contain;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lx-cons__msg {
    max-width: 86%;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.lx-cons__msg--bot { align-self: flex-start; background: #f4f2f0; }
.lx-cons__msg--me { align-self: flex-end; background: #111010; color: #fff; }
.lx-cons__msg.is-wait { color: var(--mute); }

.lx-cons__hints { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.lx-cons__hints button {
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 999px;
    background: #fff;
    padding: 7px 13px;
    font: inherit;
    font-size: 13px;
    color: var(--ink, #111010);
    cursor: pointer;
    text-align: left;
}

.lx-cons__hints button:hover { border-color: var(--ink, #111010); }

.lx-cons__items { display: flex; flex-direction: column; gap: 8px; }

.lx-cons .lx-cons__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px;
    border: 1px solid var(--line, #e6e2de);
    border-radius: 11px;
    color: inherit;
    text-decoration: none;
}

.lx-cons .lx-cons__item:hover { border-color: var(--ink, #111010); }

.lx-cons__pic {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #f4f2f0 center/cover no-repeat;
}

.lx-cons__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lx-cons__text b { font-size: 13px; font-weight: 400; line-height: 1.35; }
.lx-cons__text span { font-size: 13px; font-weight: 500; }

.lx-cons__foot {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 12px 16px 6px;
    border-top: 1px solid var(--line, #e6e2de);
}

.lx-cons__foot input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 14px;
}

.lx-cons__foot input:focus { outline: none; border-color: var(--ink, #111010); }

.lx-cons__foot button {
    flex: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #111010;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}

.lx-cons__foot button:hover { background: var(--violet, #6b5cd6); }

.lx-cons__note {
    padding: 4px 16px 12px;
    font-size: 11.5px;
    color: var(--mute);
}

@media (max-width: 700px) {
    /* Внизу на телефоне стоит панель с суммой — поднимаем кнопки над ней. */
    .lx-fab { right: 12px; bottom: 76px; }

    /* Окно разговора на телефоне занимает экран целиком. Раньше оно было
       ростом с половину экрана, а нижнюю часть — поле ввода и форму заказа
       — закрывали панель «в корзину» и панель сотрудника. */
    /* Панель сотрудника на телефоне прячется вместе с остальными, поэтому
       поднимать над ней окно не нужно — иначе снизу остаётся пустая полоса. */
    .lx-cons,
    .lx-cons.lx-fab--staff {
        top: 8px;
        right: 8px;
        left: 8px;
        bottom: 8px;
        z-index: 960;
        width: auto;
        max-width: none;
        max-height: none;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* Пока разговор открыт, нижние панели не нужны: они всё равно под ним. */
    body.lx-cons-on .lc-stickybar,
    body.lx-cons-on .lx-adm,
    body.lx-cons-on .lx-fab { display: none; }

    /* И сама страница стоит на месте: иначе палец прокручивал каталог
       под окном, а не разговор. */
    body.lx-cons-on {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden;
    }

    /* С открытой клавиатурой на окно остаётся треть экрана. Лента
       сообщений должна сжиматься до нуля — иначе она держит высоту, и
       поле ввода вместе с кнопкой уезжает за нижний край. */
    .lx-cons__body { min-height: 0; }
    .lx-cons { padding-bottom: 0; }
    .lx-cons__note { padding-bottom: 8px; }

    /* Поля не мельче 16px: на меньшем айфон при фокусе увеличивает
       страницу, окно уезжает вбок и кнопка отправки пропадает за краем. */
    .lx-cons input,
    .lx-cons textarea,
    .lx-cons select,
    .lx-cons__foot input { font-size: 16px; }

    /* Форма заказа: поля во всю ширину, карта пониже — иначе кнопка
       «оформить» уезжает за нижний край. */
    .lx-cons__order { gap: 8px; }
    .lx-cons__map { height: 180px; }
}

/* --- «печатает»: три точки, как в мессенджере ------------------------------ */
.lx-cons__typing { display: flex; gap: 4px; align-items: center; padding: 14px 13px; }

.lx-cons__typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a9a29b;
    animation: lx-cons-dot 1.2s infinite ease-in-out;
}

.lx-cons__typing i:nth-child(2) { animation-delay: .18s; }
.lx-cons__typing i:nth-child(3) { animation-delay: .36s; }

@keyframes lx-cons-dot {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .lx-cons__typing i { animation: none; opacity: .6; }
}

/* --- карточка товара с кнопкой «в корзину» --------------------------------- */
.lx-cons__item { display: flex; align-items: stretch; gap: 8px; }

.lx-cons .lx-cons__link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px;
    border: 1px solid var(--line, #e6e2de);
    border-radius: 11px;
    color: inherit;
    text-decoration: none;
}

.lx-cons .lx-cons__link:hover { border-color: var(--ink, #111010); }

.lx-cons__add {
    flex: none;
    width: 42px;
    border: 1px solid var(--line, #e6e2de);
    border-radius: 11px;
    background: #fff;
    font-size: 18px;
    line-height: 1;
    color: var(--ink, #111010);
    cursor: pointer;
}

.lx-cons__add:hover { background: #111010; border-color: #111010; color: #fff; }
.lx-cons__add.is-on { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.lx-cons__add:disabled { opacity: .5; cursor: default; }

/* --- строка корзины и оформление ------------------------------------------- */
.lx-cons__cart {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--line, #e6e2de);
    background: #faf8f6;
    font-size: 13px;
}

.lx-cons__cart[hidden] { display: none; }
.lx-cons__cart span { color: var(--mute, #8a8177); }

.lx-cons__cart button {
    margin-left: auto;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #111010;
    color: #fff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.lx-cons__cart button:hover { background: var(--violet, #6b5cd6); }

.lx-cons__order {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line, #e6e2de);
    border-radius: 12px;
    background: #faf8f6;
}

.lx-cons__order b { font-size: 14px; font-weight: 500; }

.lx-cons__order input[type="text"],
.lx-cons__order input[type="tel"],
.lx-cons__order input[type="email"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 14px;
}

.lx-cons__order input:focus { outline: none; border-color: var(--ink, #111010); }

.lx-cons__two { display: flex; gap: 8px; }
.lx-cons__two input { flex: 1; min-width: 0; }

.lx-cons__pay { display: flex; flex-direction: column; gap: 6px; }

.lx-cons__pay-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line, #e6e1da);
    border-radius: 11px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.lx-cons__pay-opt i {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1px solid var(--line, #cfc9c0);
    border-radius: 50%;
}

.lx-cons__pay-opt.is-on { border-color: #111010; }
.lx-cons__pay-opt.is-on i { border-color: #111010; border-width: 5px; }
.lx-cons__pay-opt span { display: flex; flex-direction: column; }
.lx-cons__pay-opt em { font-style: normal; font-size: 11.5px; color: var(--mute, #8a8177); }

/* Подтверждение вместо формы: то, что мы знаем, показываем строкой. */
.lx-cons__ask { font-size: 13px; color: var(--mute, #8a8177); }

.lx-cons__card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-soft, #f6f4f1);
    font-size: 13.5px;
}

.lx-cons__card b { font-size: 14.5px; }

.lx-cons__fix {
    align-self: flex-start;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--violet, #6b5cd6);
    text-decoration: underline;
    cursor: pointer;
}

.lx-cons__sug-wrap { position: relative; display: block; }

.lx-cons__sug {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 5;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(17, 16, 16, .16);
    max-height: 210px;
    overflow-y: auto;
}

.lx-cons__sug li {
    display: flex;
    flex-direction: column;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

.lx-cons__sug li.is-active,
.lx-cons__sug li:hover { background: var(--bg-soft, #f2efeb); }
.lx-cons__sug .lc-suggest__where { font-size: 11.5px; color: var(--mute, #8a8177); }

.lx-cons__map-btn {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--violet, #6b5cd6);
    text-decoration: underline;
    cursor: pointer;
}

.lx-cons__map {
    position: relative;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-soft, #f2efeb);
    font-size: 12.5px;
    color: var(--mute, #8a8177);
}

.lx-cons__map-canvas { position: absolute; inset: 0; }

/* Метка неподвижна в центре: двигают карту, а не метку — пальцем по
   маленькой метке промахиваются, и кажется, что адрес не определяется. */
.lx-cons__map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 22px;
    height: 22px;
    margin: -22px 0 0 -11px;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 0;
    background: #111010;
    transform: rotate(-45deg);
    box-shadow: 0 3px 10px rgba(17, 16, 16, .35);
    pointer-events: none;
}

.lx-cons__map-note {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .94);
    font-size: 12px;
    line-height: 1.35;
    color: var(--ink, #111010);
    pointer-events: none;
}

.lx-cons__map[hidden] { display: none; }

.lx-cons__order button[type="submit"] {
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: #111010;
    color: #fff;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.lx-cons__order button[type="submit"]:hover { background: var(--violet, #6b5cd6); }
.lx-cons__order button[type="submit"]:disabled { opacity: .6; cursor: default; }

.lx-cons__err { font-size: 12.5px; color: var(--mute, #8a8177); }
.lx-cons__err.is-bad { color: #b3372c; }

.lx-cons .lx-cons__pay-link {
    display: block;
    padding: 13px;
    border-radius: 11px;
    background: #1f8a4c;
    color: #fff;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
}

.lx-cons .lx-cons__pay-link:hover { background: #186f3d; color: #fff; }

/* --- вспомогательные кнопки чата ------------------------------------------- */
.lx-cons__tools {
    display: flex;
    gap: 8px;
    padding: 8px 16px 0;
}

.lx-cons__tools button {
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 999px;
    background: #fff;
    padding: 6px 12px;
    font: inherit;
    font-size: 12.5px;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

.lx-cons__tools button:hover { border-color: var(--ink, #111010); color: var(--ink, #111010); }

.lx-cons__hint { font-size: 12.5px; line-height: 1.5; color: var(--mute, #8a8177); }

.lx-cons__order input[type="file"] { font-size: 13px; }

/* Согласие: квадратик рисуем сами — системный витринный сброс стилей
   съедает, и строка выглядела нажимаемой лишь на словах. */
.lx-cons__agree {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.lx-cons__agree i {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid var(--line2, #cfc9c0);
    border-radius: 6px;
    background: #fff;
}

.lx-cons__agree.is-on i {
    border-color: #111010;
    background: #111010 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* Зона доставки в форме заказа. */
.lx-cons__zone {
    padding: 8px 10px;
    border-radius: 9px;
    background: #f0f8f2;
    border: 1px solid #d6ebdc;
    color: #1f6b40;
    font-size: 12.5px;
    line-height: 1.45;
}

/* Радиокнопки оплаты: тема сайта прячет нативные, рисуем свои. */
.lx-cons__pay input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid #b9b3ad;
    border-radius: 50%;
    background: #fff;
    position: relative;
    cursor: pointer;
}

.lx-cons__pay input[type="radio"]:checked { border-color: #111010; }

.lx-cons__pay input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #111010;
}

.lx-cons__pay label { text-transform: none; }

/* --- поля формы фото ------------------------------------------------------
   Тема сайта прячет нативные галочки и делает подписи капсом, а поле файла
   остаётся системным — в окне чата это выглядит чужим. Рисуем сами. */
.lx-cons__order label,
.lx-cons__agree { text-transform: none; letter-spacing: 0; }

.lx-cons__order input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed var(--line2, #d9d4cf);
    border-radius: 9px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

.lx-cons__order input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: #111010;
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.lx-cons__order input[type="file"]::-webkit-file-upload-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: #111010;
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.lx-cons__agree input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    border: 1px solid #b9b3ad;
    border-radius: 4px;
    background: #fff;
    position: relative;
    cursor: pointer;
}

.lx-cons__agree input[type="checkbox"]:checked { background: #111010; border-color: #111010; }

.lx-cons__agree input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Ответ живого менеджера отличаем от консультанта. */
.lx-cons__msg--man {
    background: #eef4ff;
    border-left: 3px solid #2a6ad4;
}

/* Предложение прислать фото — под тем ответом, где о нём зашла речь. */
.lx-cons__offer { display: flex; }

.lx-cons__offer button {
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 999px;
    background: #fff;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    color: var(--ink, #111010);
    cursor: pointer;
}

.lx-cons__offer button:hover { border-color: var(--ink, #111010); }

/* --- голосовой ввод -------------------------------------------------------- */
/* Микрофон — вспомогательное действие: чёрная кнопка рядом только одна,
   и это «отправить». */
.lx-cons .lx-cons__mic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 50%;
    background: #fff;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

.lx-cons .lx-cons__mic:hover { border-color: var(--ink, #111010); color: var(--ink, #111010); background: #fff; }

.lx-cons__mic[hidden] { display: none; }
.lx-cons__mic:hover { border-color: var(--ink, #111010); }

/* Пока идёт запись — кнопка «дышит», иначе непонятно, слушает ли он. */
.lx-cons .lx-cons__mic.is-on {
    border-color: #b3372c;
    color: #b3372c;
    background: #fff;
    animation: lx-cons-mic 1.1s ease-in-out infinite;
}

@keyframes lx-cons-mic {
    0%, 100% { box-shadow: 0 0 0 0 rgba(179, 55, 44, .35); }
    50% { box-shadow: 0 0 0 6px rgba(179, 55, 44, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .lx-cons__mic.is-on { animation: none; }
}

/* Пункт выдачи: тот же вид, что и у остальных полей формы заказа. */
.lx-cons__order select {
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 11px;
    background: #fff;
    font: inherit;
    font-size: 13.5px;
}

/* --- запись голоса ---------------------------------------------------------
   Пока идёт запись, поле ввода уступает место дорожке звука: видно, что
   микрофон слышит, и понятно, чем это закончить. */

.lx-cons__rec {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 6px;
    border-top: 1px solid var(--line, #e6e2de);
}

.lx-cons__rec button {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.lx-cons__rec-no { background: var(--bg-soft, #f2efeb); color: var(--ink, #111010); }
.lx-cons__rec-no:hover { background: #e6e1da; }
.lx-cons__rec-yes { background: #111010; color: #fff; }
.lx-cons__rec-yes:hover { background: var(--violet, #6b5cd6); }

.lx-cons__wave {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 32px;
    overflow: hidden;
}

.lx-cons__wave i {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: var(--ink, #111010);
    opacity: .75;
    transition: height .08s linear;
}

/* --- ответ на реплику ------------------------------------------------------
   Консультант спрашивает по три вещи разом; без указания, на какую именно
   отвечают, он переспрашивает то же самое. */

/* На реплику отвечают нажатием по ней самой. */
.lx-cons__msg--can { cursor: pointer; }
.lx-cons__msg--can:hover { background: var(--bg-soft, #efece8); }

.lx-cons__tip {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--mute, #8a8177);
}

.lx-cons__quote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 16px;
    padding: 8px 10px;
    border-left: 3px solid var(--ink, #111010);
    border-radius: 0 9px 9px 0;
    background: var(--bg-soft, #f4f2ef);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-2, #4a4340);
}

.lx-cons__quote[hidden] { display: none; }
.lx-cons__quote span { flex: 1; min-width: 0; }

.lx-cons__quote button {
    flex: none;
    padding: 0 2px;
    border: 0;
    background: none;
    font-size: 17px;
    line-height: 1;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

/* --- скрепка --------------------------------------------------------------- */

.lx-cons__clip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line2, #d9d4cf);
    border-radius: 50%;
    background: #fff;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

.lx-cons__clip:hover { border-color: var(--ink, #111010); color: var(--ink, #111010); }

.lx-cons__clip-menu {
    position: absolute;
    right: 60px;
    bottom: 52px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    width: 250px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(17, 16, 16, .18);
    overflow: hidden;
}

.lx-cons__clip-menu button {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid var(--line, #eee9e3);
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lx-cons__clip-menu button:last-child { border-bottom: 0; }
.lx-cons__clip-menu button:hover { background: var(--bg-soft, #f6f4f1); }
.lx-cons__clip-menu b { font-size: 13px; font-weight: 600; }
.lx-cons__clip-menu span { font-size: 11.5px; color: var(--mute, #8a8177); line-height: 1.35; }

/* --- время у реплик --------------------------------------------------------
   В разговоре важно, когда это было сказано: без времени вчерашняя
   переписка и сегодняшняя выглядят одинаково. */

.lx-cons__time {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1;
    color: var(--mute, #a49c92);
    text-align: right;
}

.lx-cons__msg--me .lx-cons__time { color: rgba(255, 255, 255, .6); }

/* --- корзина списком -------------------------------------------------------- */

.lx-cons__cart-open {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    color: var(--mute, #8a8177);
    text-align: left;
    cursor: pointer;
}

.lx-cons__cart-open:hover { color: var(--ink, #111010); }

.lx-cons__cart-open i {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.lx-cons__basket {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 230px;
    overflow-y: auto;
    padding: 10px 16px;
    border-top: 1px solid var(--line, #e6e2de);
    background: var(--bg-soft, #faf8f6);
}

.lx-cons__basket[hidden] { display: none; }

.lx-cons__basket-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
}

.lx-cons__basket-row img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 8px;
    background: #fff;
}

.lx-cons__basket-row a {
    flex: 1;
    min-width: 0;
    color: inherit;
    line-height: 1.35;
    text-decoration: none;
}

.lx-cons__basket-row a:hover { text-decoration: underline; }
.lx-cons__basket-row span { white-space: nowrap; color: var(--mute, #8a8177); }

.lx-cons__basket-row button {
    flex: none;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    font-size: 15px;
    line-height: 1;
    color: var(--mute, #8a8177);
    cursor: pointer;
}

.lx-cons__basket-row button:hover { background: #b3372c; color: #fff; }
.lx-cons__basket-row button:disabled { opacity: .5; }

.lx-cons__basket-foot {
    align-self: flex-end;
    font-size: 12.5px;
    font-weight: 600;
}