#chatWidgetRoot {
    position: fixed;
    inset: 0;
    z-index: 15300;
    pointer-events: none;
    font-family: var(--font-family-primary), sans-serif;
}

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

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

#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);
    color: var(--text-white-constant);
    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);
    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);
}

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

.chatWidgetResizeHandle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    touch-action: none;
}

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

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

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

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

.chatWidgetDateSep {
    align-self: center;
    margin: 10px 0 6px;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--layer-floor3);
    color: var(--text-secondary);
    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);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.chatWidgetMsg--own .chatWidgetMsgBubble {
    background: var(--background-brand);
    color: var(--text-white-constant);
    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);
}

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

.chatWidgetItemCard a {
    color: var(--text-brand);
    text-decoration: none;
}

.chatWidgetTyping {
    flex: 0 0 auto;
    min-height: 16px;
    padding: 0 12px;
    font-size: 12px;
    color: var(--text-secondary);
    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);
    background: var(--layer-floor2);
}

.chatWidgetComposerInput {
    flex: 1 1 auto;
    resize: none;
    max-height: 120px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-default);
    background: var(--layer-floor1);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.35;
    /* По умолчанию скрыт - autoResizeComposer (chatWidget.js) сам включает
       overflow-y: auto, когда текст реально выше 120px. Без этого браузер
       на мгновение показывает скроллбар при пересчёте высоты - см. коммент
       там же про "белую полоску". */
    overflow-y: hidden;
}

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

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

/* Без этого при подрастании textarea (autoResizeComposer) браузер на Windows
   рисует классический "толстый" скроллбар со стрелками - выглядит как
   визуальный артефакт справа от текста. Тонкий скроллбар - тем же приёмом,
   что и в остальных скролл-контейнерах виджета. */
.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);
    color: var(--text-white-constant);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.chatWidgetComposerSend:hover {
    background: var(--background-brand-hover);
}

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

/* Пока сообщение отправляется (см. sendCurrentMessage/setComposerSending в
   chatWidget.js) - крутим спиннер вместо стрелки, кнопка при этом тоже
   disabled, но не должна выглядеть просто "притушенной" как обычный
   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);
    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);
    touch-action: none;
    transition: background 0.12s ease;
}

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

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

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

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

.chatWidgetFilterTab {
    flex: 1 1 auto;
    padding: 5px 8px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    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);
    color: var(--text-primary);
}

.chatWidgetFilterTab--active {
    background: var(--background-brand);
    border-color: var(--background-brand);
    color: var(--text-white-constant);
}

.chatWidgetFilterTab--active:hover {
    background: var(--background-brand-hover);
    color: var(--text-white-constant);
}

.chatWidgetContactItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-default);
    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);
}

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

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

.chatWidgetContactAvatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--background-brand);
    color: var(--text-white-constant);
    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);
}

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

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

.chatWidgetContactMeta {
    font-size: 11px;
    color: var(--text-secondary);
    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);
    color: var(--text-white-constant);
    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);
    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);
    color: var(--text-primary);
    opacity: 1;
}

.chatWidgetContactMenu {
    position: fixed;
    z-index: 15400;
    min-width: 160px;
    padding: 4px;
    background: var(--layer-floor2);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    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);
    font: inherit;
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

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

.chatWidgetNativeBack {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-default);
    color: var(--text-brand, var(--background-brand));
    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);
}

@media (max-width: 480px) {
    .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;
}

.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 обязателен: без него flex-элемент не сжимается меньше
       ширины своего содержимого, и длинное имя файла без пробелов (например
       "Запись_на_прием_..._Министерства....pdf") раздувает всю строку,
       выталкивая кнопку "убрать файл" и композер за пределы экрана
       (особенно заметно на мобильной ширине). */
    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: 15310;
    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);
}

.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);
    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));
    cursor: pointer;
    text-decoration: none;
}

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

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