/* Inter на plati грузится глобально (css/fonts.css), на сайте продавца
   (external-mode) его нет. Файлы лежат рядом (fonts/) - путь относительный,
   значит same-origin для любого домена, где отдаётся сам chatWidget.css
   (не нужен CORS - у plati.market он всё равно режется DDoS-Guard). */
@font-face {
    font-family: 'Inter';
    src: url("../fonts/Inter-Regular_1.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url("../fonts/Inter-Medium_1.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url("../fonts/Inter-Bold_1.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* z-index 950 - ниже сайтовых дропдаунов/попперов (z-index-1000/1100), выше
   обычного контента. Auth-модалка #modal1 (1200) выше и не конфликтует. */
#chatWidgetRoot {
    position: fixed;
    inset: 0;
    z-index: 950;
    pointer-events: none;
    font-family: var(--font-family-primary, "Inter"), sans-serif;
}

#chatWidgetRoot * {
    box-sizing: border-box;
}

/* Сброс UA-стилей форм/ссылок/списков - на plati его даёт общий bootstrap-reboot
   сайта, на стороннем сайте (external-mode) его нет, без сброса шрифт/margin
   у button/input/select берутся из системного UA-стиля, а не из темы виджета
   (см. lisupa.ru). :where() держит специфичность на уровне тега, чтобы классы
   виджета всегда перебивали сброс. border/background/appearance сюда намеренно
   не входят - checkbox/select в виджете без своей замены и станут невидимыми
   (регрессия на plati.market 14.08.2026), а все button уже полностью стилизованы
   классами (.chatWidgetLauncher и т.д.). */
:where(#chatWidgetRoot) button,
:where(#chatWidgetRoot) input,
:where(#chatWidgetRoot) textarea,
:where(#chatWidgetRoot) select {
    font: inherit;
    color: inherit;
    margin: 0;
}

:where(#chatWidgetRoot) button {
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
}

:where(#chatWidgetRoot) a {
    color: inherit;
    text-decoration: none;
}

:where(#chatWidgetRoot) ul,
:where(#chatWidgetRoot) ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(#chatWidgetRoot) h1,
:where(#chatWidgetRoot) h2,
:where(#chatWidgetRoot) h3,
:where(#chatWidgetRoot) h4,
:where(#chatWidgetRoot) p {
    margin: 0;
}

:where(#chatWidgetRoot) svg {
    display: block;
}

.chatWidgetLauncher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--background-brand, #1a73e8);
    color: #fff;
    box-shadow: var(--box-shadow, 0 4px 24px rgba(0,0,0,.18));
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chatWidgetLauncher:hover {
    background: var(--background-brand-hover, #3471EF);
}

#chatWidgetRoot[data-state="minimized"] .chatWidgetLauncher {
    display: flex;
}

.chatWidgetLauncherBadge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--background-error, #F54848);
    color: var(--text-white-constant, #FFFFFF);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    display: none;
}

.chatWidgetLauncherBadge--visible {
    display: block;
}

.chatWidgetWindow {
    position: fixed;
    display: none;
    flex-direction: column;
    background: var(--layer-floor2, #fff);
    border: 1px solid var(--border-default, #dadce0);
    border-radius: 12px;
    box-shadow: var(--box-shadow, 0 4px 24px rgba(0,0,0,.18));
    overflow: hidden;
    pointer-events: auto;
    min-width: 300px;
    min-height: 360px;
}

#chatWidgetRoot[data-state="open"] .chatWidgetWindow {
    display: flex;
}

.chatWidgetWindow--dragging,
.chatWidgetWindow--resizing {
    user-select: none;
}

.chatWidgetHeader {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--background-brand, #1a73e8);
    color: var(--text-white-constant, #fff);
    cursor: move;
    touch-action: none;
}

.chatWidgetHeaderTitle {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatWidgetHeaderActions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.chatWidgetHeaderBtn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-white-constant, #FFFFFF);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatWidgetHeaderBtn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.chatWidgetBody {
    position: relative;
    flex: 1 1 auto;
    background: var(--layer-floor2, #fff);
}

.chatWidgetBody iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.chatWidgetLoading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--layer-floor2, #FFFFFF);
}

.chatWidgetWindow:not(.chatWidgetWindow--loading) .chatWidgetLoading {
    display: none;
}

/* .chatWidgetWindow - overflow:hidden, поэтому хендлы лежат внутри границ окна
   (0, а не отрицательный отступ), иначе их не было бы видно/нажать. Углы (8px)
   идут в DOM после граней (6px) и перекрывают их в точке пересечения. */
.chatWidgetResizeHandle {
    position: absolute;
    touch-action: none;
}

.chatWidgetResizeHandle--n,
.chatWidgetResizeHandle--s {
    left: 8px;
    right: 8px;
    height: 6px;
    cursor: ns-resize;
}
.chatWidgetResizeHandle--n { top: 0; }
.chatWidgetResizeHandle--s { bottom: 0; }

.chatWidgetResizeHandle--e,
.chatWidgetResizeHandle--w {
    top: 8px;
    bottom: 8px;
    width: 6px;
    cursor: ew-resize;
}
.chatWidgetResizeHandle--e { right: 0; }
.chatWidgetResizeHandle--w { left: 0; }

.chatWidgetResizeHandle--ne,
.chatWidgetResizeHandle--nw,
.chatWidgetResizeHandle--se,
.chatWidgetResizeHandle--sw {
    width: 16px;
    height: 16px;
}
.chatWidgetResizeHandle--ne { top: 0; right: 0; cursor: nesw-resize; }
.chatWidgetResizeHandle--nw { top: 0; left: 0; cursor: nwse-resize; }
.chatWidgetResizeHandle--se { bottom: 0; right: 0; cursor: nwse-resize; }
.chatWidgetResizeHandle--sw { bottom: 0; left: 0; cursor: nesw-resize; }

.chatWidgetResizeHandle--se::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--border-default-hover, #D2D6DB);
    border-bottom: 2px solid var(--border-default-hover, #D2D6DB);
}

.chatWidgetNative {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.chatWidgetMessages {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Тонкий скроллбар как у .schat_list/.debates_content в чате продавца,
   ползунок проявляется только при hover/скролле */
.chatWidgetMessages,
.chatWidgetContacts {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.chatWidgetMessages:hover,
.chatWidgetMessages.is-scrolling,
.chatWidgetContacts:hover,
.chatWidgetContacts.is-scrolling {
    scrollbar-color: #cfd8dc transparent;
}
.chatWidgetMessages::-webkit-scrollbar,
.chatWidgetContacts::-webkit-scrollbar {
    width: 4px;
}
.chatWidgetMessages::-webkit-scrollbar-track,
.chatWidgetContacts::-webkit-scrollbar-track {
    background: transparent;
}
.chatWidgetMessages::-webkit-scrollbar-thumb,
.chatWidgetContacts::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}
.chatWidgetMessages:hover::-webkit-scrollbar-thumb,
.chatWidgetMessages.is-scrolling::-webkit-scrollbar-thumb,
.chatWidgetContacts:hover::-webkit-scrollbar-thumb,
.chatWidgetContacts.is-scrolling::-webkit-scrollbar-thumb {
    background: #cfd8dc;
}

.chatWidgetLoadingInline,
.chatWidgetEmpty {
    margin: auto;
    padding: 16px;
    text-align: center;
    color: var(--text-secondary, #6C737F);
    font-size: 13px;
}

.chatWidgetEmptyHint {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.75;
}

.chatWidgetDateSep {
    align-self: center;
    margin: 10px 0 6px;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--layer-floor3, #F9FAFB);
    color: var(--text-secondary, #6C737F);
    font-size: 11px;
}

.chatWidgetMsg {
    max-width: 80%;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
}

.chatWidgetMsg--seller {
    align-self: flex-start;
    align-items: flex-start;
}

.chatWidgetMsg--own {
    align-self: flex-end;
    align-items: flex-end;
}

.chatWidgetMsgBubble {
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
}

.chatWidgetMsg--seller .chatWidgetMsgBubble {
    background: var(--layer-floor3, #F9FAFB);
    color: var(--text-primary, #384250);
    border-bottom-left-radius: 4px;
}

.chatWidgetMsg--own .chatWidgetMsgBubble {
    background: var(--background-brand, #4884FF);
    color: var(--text-white-constant, #FFFFFF);
    border-bottom-right-radius: 4px;
}

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

.chatWidgetMsgMeta {
    margin-top: 2px;
    padding: 0 4px;
    font-size: 11px;
    color: var(--text-secondary, #6C737F);
}

.chatWidgetItemCard {
    margin-bottom: 4px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--layer-floor3, #F9FAFB);
    border: 1px solid var(--border-default, #E5E7EB);
    font-size: 12px;
    color: var(--text-secondary, #6C737F);
    max-width: 100%;
}

.chatWidgetItemCard a {
    color: var(--text-brand, var(--background-brand, #4884FF));
    text-decoration: none;
}

.chatWidgetTyping {
    flex: 0 0 auto;
    min-height: 16px;
    padding: 0 12px;
    font-size: 12px;
    color: var(--text-secondary, #6C737F);
    font-style: italic;
}

.chatWidgetComposer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--border-default, #E5E7EB);
    background: var(--layer-floor2, #FFFFFF);
}

.chatWidgetComposerInput {
    flex: 1 1 auto;
    resize: none;
    max-height: 120px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-default, #E5E7EB);
    background: var(--layer-floor1, #F3F4F6);
    color: var(--text-primary, #384250);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.35;
    overflow-y: hidden; /* autoResizeComposer сам включает auto, когда текст выше лимита */
}

.chatWidgetComposerInput:focus {
    outline: none;
    border-color: var(--border-brand, var(--background-brand, #4884FF));
}

.chatWidgetComposerInput:disabled {
    opacity: 0.6;
    cursor: default;
}

.chatWidgetComposerInput {
    scrollbar-width: thin;
}
.chatWidgetComposerInput::-webkit-scrollbar {
    width: 6px;
}
.chatWidgetComposerInput::-webkit-scrollbar-track {
    background: transparent;
}
.chatWidgetComposerInput::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.chatWidgetComposerSend {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: var(--background-brand, #4884FF);
    color: var(--text-white-constant, #FFFFFF);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.chatWidgetComposerSend:hover {
    background: var(--background-brand-hover, #3471EF);
}

.chatWidgetComposerSend:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Во время отправки - спиннер вместо стрелки, без "притушенного" вида disabled */
.chatWidgetComposerSend:disabled.chatWidgetComposerSend--sending {
    opacity: 1;
    cursor: default;
}

.chatWidgetComposerSend--sending svg {
    display: none;
}

.chatWidgetComposerSend--sending::after {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: var(--text-white-constant, #FFFFFF);
    animation: chatWidgetSpin 0.7s linear infinite;
}

@keyframes chatWidgetSpin {
    to { transform: rotate(360deg); }
}

.chatWidgetSplit {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.chatWidgetSplitList {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.chatWidgetSplitChat {
    display: none;
    flex: 1 1 auto;

    position: relative;
    overflow: hidden;
    min-width: 0;
}

.chatWidgetSplit--showChat .chatWidgetSplitList {
    display: none;
}

.chatWidgetSplit--showChat .chatWidgetSplitChat {
    display: flex;
}

.chatWidgetSplit--wide .chatWidgetSplitList {

    flex: 0 0 260px;
    width: 260px;
}

.chatWidgetSplit--wide .chatWidgetSplitChat {
    display: flex;
}

.chatWidgetSplitDivider {
    display: none;
    flex: 0 0 auto;
}

.chatWidgetSplit--wide .chatWidgetSplitDivider {
    display: block;
    flex: 0 0 6px;
    width: 6px;
    cursor: col-resize;
    background: var(--border-default, #E5E7EB);
    touch-action: none;
    transition: background 0.12s ease;
}

.chatWidgetSplitDivider:hover,
.chatWidgetSplitDivider--active {
    background: var(--background-brand, #4884FF);
}

.chatWidgetSplit--wide .chatWidgetNativeBack {
    display: none;
}

.chatWidgetContacts {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chatWidgetListFilter {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--border-default, #E5E7EB);
    background: var(--layer-floor2, #FFFFFF);
}

.chatWidgetFilterTab {
    flex: 1 1 auto;
    padding: 5px 8px;
    border: 1px solid var(--border-default, #E5E7EB);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #6C737F);
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.chatWidgetFilterTab:hover {
    background: var(--layer-floor3, #F9FAFB);
    color: var(--text-primary, #384250);
}

.chatWidgetFilterTab--active {
    background: var(--background-brand, #4884FF);
    border-color: var(--background-brand, #4884FF);
    color: var(--text-white-constant, #FFFFFF);
}

.chatWidgetFilterTab--active:hover {
    background: var(--background-brand-hover, #3471EF);
    color: var(--text-white-constant, #FFFFFF);
}

.chatWidgetContactItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-default, #E5E7EB);
    cursor: pointer;
    background: transparent;
    text-align: left;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    font: inherit;
    color: inherit;
}

.chatWidgetContactItem:hover {
    background: var(--layer-floor3, #F9FAFB);
}

.chatWidgetContactItem--active {
    background: var(--layer-floor3, #F9FAFB);
}

.chatWidgetSplit--wide .chatWidgetContactItem--active {
    box-shadow: inset 3px 0 0 var(--background-brand, #4884FF);
}

.chatWidgetContactAvatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--background-brand, #4884FF);
    color: var(--text-white-constant, #FFFFFF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
}

.chatWidgetContactAvatar--online::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--background-success, #2ecc71);
    border: 2px solid var(--layer-floor2, #FFFFFF);
}

.chatWidgetContactInfo {
    flex: 1 1 auto;
    min-width: 0;
}

.chatWidgetContactName {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #384250);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatWidgetContactMeta {
    font-size: 11px;
    color: var(--text-secondary, #6C737F);
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatWidgetContactUnread {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--background-error, #F54848);
    color: var(--text-white-constant, #FFFFFF);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.chatWidgetContactMenuBtn {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #6C737F);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.chatWidgetContactItem:hover .chatWidgetContactMenuBtn {
    opacity: 1;
}

.chatWidgetContactMenuBtn:hover {
    background: var(--border-default, #E5E7EB);
    color: var(--text-primary, #384250);
    opacity: 1;
}

.chatWidgetContactMenu {
    position: fixed;
    z-index: 960;
    min-width: 160px;
    padding: 4px;
    background: var(--layer-floor2, #FFFFFF);
    border: 1px solid var(--border-default, #E5E7EB);
    border-radius: 10px;
    box-shadow: var(--box-shadow, 0px 0px 6px rgba(17,25,39,.04), 0px 4px 8px rgba(17,25,39,.1));
    pointer-events: auto;
    display: flex;
    flex-direction: column;
}

.chatWidgetMenuItem {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary, #384250);
    font: inherit;
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.chatWidgetMenuItem:hover {
    background: var(--layer-floor3, #F9FAFB);
}

.chatWidgetNativeBack {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-default, #E5E7EB);
    color: var(--text-brand, var(--background-brand, #4884FF));
    font-size: 13px;
    cursor: pointer;
    background: transparent;
    border-left: none;
    border-right: none;
    border-top: none;
    text-align: left;
    width: 100%;
    font-family: inherit;
}

.chatWidgetNativeBack:hover {
    background: var(--layer-floor3, #F9FAFB);
}

/* Брейкпоинт совпадает с сайтовым переходом на мобильную шапку (d-xl-*/1199.98px) */
@media (max-width: 1199.98px) {
    .chatWidgetWindow {
        left: 0 !important;
        top: 0 !important;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0;
    }

    .chatWidgetResizeHandle {
        display: none;
    }

    .chatWidgetLauncher {
        right: 16px;
        bottom: 64px;
    }
}

@media (max-width: 1199.98px) {
    .chatWidgetLauncher {
        bottom: 64px;
        /* Контраст со sticky «Купить» (тот же brand blue) */
        background: var(--layer-floor1, #fff);
        color: var(--background-brand, #1a73e8);
        border: 2px solid var(--background-brand, #1a73e8);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    }

    .chatWidgetLauncher:hover {
        background: var(--layer-floor2, #f0f4ff);
    }
}

.chatWidgetAuthSlot {
    flex: 0 0 auto;
}

.chatWidgetNudge {
    padding: 8px 12px;
    background: var(--layer-floor2, #f0f4ff);
    border-top: 1px solid var(--border, #e0e0e0);
    font-size: 12px;
    color: var(--text-brand, #1a73e8);
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
}

.chatWidgetNudge:hover {
    background: var(--layer-floor3, #e3ecff);
}

.chatWidgetNudge--success {
    background: var(--layer-success, #e8f5e9);
    color: var(--text-success, #2e7d32);
    cursor: default;
}

.chatWidgetNudge--attention {
    animation: chatWidgetNudgeBlink 0.5s ease-in-out 2;
}

@keyframes chatWidgetNudgeBlink {
    0%, 100% { background-color: var(--layer-floor2, #f0f4ff); }
    50% { background-color: var(--background-brand, #4884FF); color: #fff; }
}

.chatWidgetOtpForm {
    padding: 8px 12px;
    background: var(--layer-floor2, #f0f4ff);
    border-top: 1px solid var(--border, #e0e0e0);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.chatWidgetOtpEmail,
.chatWidgetOtpCode {
    flex: 1 1 120px;
    padding: 5px 8px;
    border: 1px solid var(--border, #ccc);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    min-width: 0;
}

.chatWidgetOtpBtn {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    background: var(--background-brand, #1a73e8);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.chatWidgetOtpBtn:disabled {
    opacity: 0.5;
    cursor: default;
}

.chatWidgetOtpStatus {
    width: 100%;
    font-size: 11px;
    color: var(--text-secondary, #666);
}

.chatWidgetOtpError {
    width: 100%;
    font-size: 11px;
    color: var(--text-error, #c62828);
}

/* --- File attachment --- */
.chatWidgetComposerRow {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    width: 100%;
}

.chatWidgetComposerAttach {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-secondary, #666);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chatWidgetComposerAttach:hover {
    color: var(--background-brand, #1a73e8);
    background: var(--layer-floor2, #f0f4ff);
}

.chatWidgetComposerAttach:disabled {
    opacity: 0.5;
    cursor: default;
}

.chatWidgetAttachPreview {
    padding: 4px 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--layer-floor2, #f0f4ff);
    border-bottom: 1px solid var(--border, #e0e0e0);
    max-width: 100%;
    min-width: 0;
}
.chatWidgetAttachName {
    flex: 1 1 auto;
    min-width: 0; /* без этого длинное имя файла без пробелов раздувает строку */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #333);
}
.chatWidgetAttachRemove {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--text-secondary, #999);
    padding: 2px 4px;
    border-radius: 3px;
}
.chatWidgetAttachRemove:hover {
    color: var(--text-error, #c62828);
    background: rgba(198,40,40,.08);
}
.chatWidgetAttachError {
    color: var(--text-error, #c62828);
    font-size: 12px;
}

.chatWidgetMsgImg {
    display: block;
    margin-top: 6px;
}
.chatWidgetMsgImg img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 6px;
    display: block;
}
.chatWidgetMsgFile {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0,0,0,.04);
    color: var(--background-brand, #1a73e8);
    text-decoration: none;
    font-size: 13px;
    word-break: break-all;
}
.chatWidgetMsgFile:hover {
    background: rgba(0,0,0,.08);
}

/* --- Автоперевод (только для авторизованных гостей) --- */
.chatWidgetTranslateBtn svg {
    display: block;
}

.chatWidgetTranslatePanel {
    position: absolute;
    top: 44px;
    right: 8px;
    z-index: 955;
    width: 230px;
    padding: 10px 12px;
    background: var(--layer-floor2, #fff);
    border: 1px solid var(--border-default, #dadce0);
    border-radius: 10px;
    box-shadow: var(--box-shadow, 0 4px 24px rgba(0,0,0,.18));
    display: none;
    font-size: 13px;
    color: var(--text-primary, #384250);
}

.chatWidgetTranslatePanel--open {
    display: block;
}

.chatWidgetTranslatePanel__row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.chatWidgetTranslatePanel__row:last-child {
    margin-bottom: 0;
}

.chatWidgetTranslateLangSelect {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--border-default, #ccc);
    border-radius: 6px;
    background: var(--layer-floor1, #fff);
    color: var(--text-primary, #384250);
    font: inherit;
    font-size: 12px;
}

.chatWidgetMsgTranslateExtra {
    margin-top: 2px;
    padding: 0 4px;
    display: flex;
    gap: 10px;
    font-size: 11px;
}

.chatWidgetTranslateAction {
    color: var(--text-brand, var(--background-brand, #4884FF));
    cursor: pointer;
    text-decoration: none;
}

.chatWidgetTranslateAction:hover {
    text-decoration: underline;
}

.chatWidgetTranslateAction--busy,
.chatWidgetTranslateAction--err {
    color: var(--text-secondary, #6C737F);
    cursor: default;
    text-decoration: none;
}