.support-widget {
    --sw-panel: #0d141d;
    --sw-panel-raised: #121b26;
    --sw-message: #17222f;
    --sw-input: #111a25;
    --sw-border: rgba(151, 170, 196, .13);
    --sw-border-strong: rgba(151, 170, 196, .2);
    --sw-text: #e7edf5;
    --sw-muted: #8290a3;
    --sw-dim: #627084;
    --sw-accent: #2673c9;
    --sw-accent-hover: #2d7fdc;

    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px));
    z-index: 1200;
    color: var(--sw-text);
    font-family: Inter, "Segoe UI", Tahoma, Arial, sans-serif;
    line-height: 1.45;
}

.support-widget *,
.support-widget *::before,
.support-widget *::after {
    box-sizing: border-box;
}

.support-widget button,
.support-widget textarea {
    font: inherit;
}

.support-widget [hidden] {
    display: none !important;
}

.support-widget__toggle {
    position: relative;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(123, 177, 238, .28);
    border-radius: 50%;
    color: #fff;
    background: #1768b9;
    box-shadow: 0 12px 30px rgba(0, 35, 78, .34);
    cursor: pointer;
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.support-widget__toggle:hover {
    background: #2076cb;
    box-shadow: 0 15px 34px rgba(0, 42, 92, .4);
    transform: translateY(-2px);
}

.support-widget__toggle:focus-visible,
.support-widget__header-actions button:focus-visible,
.support-widget__attach:focus-within,
.support-widget__send:focus-visible,
.support-widget__dialog button:focus-visible {
    outline: 2px solid rgba(104, 170, 248, .78);
    outline-offset: 2px;
}

.support-widget__toggle > svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.support-widget__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border: 2px solid #080d13;
    border-radius: 999px;
    color: #fff;
    background: #dc4d58;
    font-size: 9px;
    font-weight: 750;
}

.support-widget__panel {
    position: absolute;
    right: 0;
    bottom: 68px;
    width: min(390px, calc(100vw - 28px));
    height: min(620px, calc(100dvh - 112px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--sw-border-strong);
    border-radius: 16px;
    color: var(--sw-text);
    background: var(--sw-panel);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .46);
    transform-origin: bottom right;
    animation: support-widget-in .16s ease-out;
}

@keyframes support-widget-in {
    from {
        opacity: 0;
        transform: translateY(7px) scale(.985);
    }
}


.support-widget__header {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px 11px 14px;
    border-bottom: 1px solid var(--sw-border);
    background: linear-gradient(
        180deg,
        rgba(20, 29, 41, .92) 0%,
        rgba(17, 25, 35, .88) 100%
    );
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.support-widget__brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.support-widget__avatar,
.support-widget__guest-logo {
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--sw-border-strong);
    background: #f3f6fa;
}

.support-widget__avatar {
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

.support-widget__avatar img,
.support-widget__guest-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.support-widget__brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.support-widget__brand strong {
    overflow: hidden;
    color: #f0f4f9;
    font-size: 13px;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-widget__brand small {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: #7f8da1;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-widget__brand small i {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #38bd80;
}

.support-widget__header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.support-widget__header-actions button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: #8290a3;
    background: transparent;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.support-widget__header-actions button:hover {
    color: #e7edf5;
    background: rgba(255, 255, 255, .055);
}

.support-widget__icon {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.support-widget__icon--history {
    -webkit-mask-image: url("../icons/history.ce4deb7ce5ff.svg");
    mask-image: url("../icons/history.ce4deb7ce5ff.svg");
}

.support-widget__icon--close-ticket {
    -webkit-mask-image: url("../icons/close-ticket.a7f4f021810e.svg");
    mask-image: url("../icons/close-ticket.a7f4f021810e.svg");
}

.support-widget__icon--close {
    -webkit-mask-image: url("../icons/close.9dbbeb8dfc63.svg");
    mask-image: url("../icons/close.9dbbeb8dfc63.svg");
}

.support-widget__icon--attach {
    -webkit-mask-image: url("../icons/attach.b7071d8a495e.svg");
    mask-image: url("../icons/attach.b7071d8a495e.svg");
}

.support-widget__messages {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 18px 14px;
    background: #0c121a;
    scrollbar-width: thin;
    scrollbar-color: rgba(111, 134, 164, .32) transparent;
}

.support-widget__messages::-webkit-scrollbar,
.support-widget__history::-webkit-scrollbar {
    width: 6px;
}

.support-widget__messages::-webkit-scrollbar-thumb,
.support-widget__history::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(111, 134, 164, .3);
}




.support-widget__message {
    max-width: 82%;
    align-self: flex-start;
}

.support-widget__message.is-mine {
    align-self: flex-end;
}

.support-widget__bubble {
    padding: 9px 11px;
    border: 1px solid var(--sw-border);
    border-radius: 12px 12px 12px 4px;
    color: #dce5ef;
    background: var(--sw-message);
    font-size: 12px;
    line-height: 1.48;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.support-widget__message.is-mine .support-widget__bubble {
    border-color: rgba(82, 151, 224, .24);
    border-radius: 12px 12px 4px 12px;
    color: #fff;
    background: #2268af;
}

.support-widget__time {
    display: block;
    margin-top: 4px;
    color: #5f6d80;
    font-size: 8px;
}

.support-widget__message.is-mine .support-widget__time {
    text-align: right;
}

.support-widget__images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 6px;
}

.support-widget__images img {
    width: 100%;
    height: 110px;
    display: block;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
}

.support-widget__files {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 7px 11px;
    border-top: 1px solid var(--sw-border);
    background: var(--sw-panel);
}

.support-widget__file {
    max-width: 160px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border: 0;
    border-radius: 7px;
    color: #a8b5c5;
    background: #17212d;
    font-size: 9px;
    white-space: nowrap;
    cursor: pointer;
}

.support-widget__file > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.support-widget__file .support-widget__icon {
    width: 12px;
    height: 12px;
    color: #758399;
}

.support-widget__file:hover {
    color: #edf2f8;
    background: #1d2a39;
}

.support-widget__composer {
    min-height: 63px;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    padding: 10px 11px;
    border-top: 1px solid var(--sw-border);
    background: var(--sw-panel);
}

.support-widget__composer textarea {
    min-width: 0;
    max-height: 104px;
    flex: 1;
    resize: none;
    border: 1px solid var(--sw-border-strong);
    border-radius: 11px;
    outline: 0;
    padding: 9px 11px;
    color: #e4ebf4;
    background: var(--sw-input);
    font-size: 11px;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.support-widget__composer textarea::placeholder {
    color: #647286;
}

.support-widget__composer textarea:focus {
    border-color: rgba(73, 143, 219, .52);
    box-shadow: 0 0 0 3px rgba(73, 143, 219, .07);
}

.support-widget__attach,
.support-widget__send {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.support-widget__attach {
    color: #7f8da1;
    background: transparent;
    transition: color .15s ease, background .15s ease;
}

.support-widget__attach:hover {
    color: #e2e9f2;
    background: rgba(255, 255, 255, .05);
}

.support-widget__attach .support-widget__icon {
    width: 19px;
    height: 19px;
}

.support-widget__send {
    color: #fff;
    background: var(--sw-accent);
    transition: background .15s ease;
}

.support-widget__send:hover {
    background: var(--sw-accent-hover);
}

.support-widget__send:disabled {
    opacity: .48;
    cursor: wait;
}

.support-widget__send svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.support-widget__history {
    position: absolute;
    inset: 70px 0 0;
    z-index: 4;
    overflow-y: auto;
    padding: 12px;
    background: #0c121a;
}

.support-widget__history-new {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(70, 141, 218, .24);
    border-radius: 9px;
    color: #bcd9f8;
    background: rgba(38, 115, 201, .11);
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}

.support-widget__history-new:hover {
    background: rgba(38, 115, 201, .18);
}

.support-widget__history-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    padding: 10px 11px;
    border: 1px solid var(--sw-border);
    border-radius: 9px;
    color: #d8e1ec;
    background: #141e2a;
    text-align: left;
    cursor: pointer;
}

.support-widget__history-item:hover {
    border-color: rgba(120, 154, 196, .23);
    background: #182431;
}

.support-widget__history-item span {
    min-width: 0;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-widget__history-item small {
    flex: 0 0 auto;
    color: #708096;
    font-size: 8px;
}

.support-widget__closed {
    margin: 5px auto;
    padding: 6px 10px;
    border: 1px solid var(--sw-border);
    border-radius: 999px;
    color: #8290a3;
    background: rgba(255, 255, 255, .025);
    font-size: 9px;
}

.support-widget__guest {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px;
    text-align: center;
}

.support-widget__guest-logo {
    width: 54px;
    height: 54px;
    margin-bottom: 15px;
    border-radius: 14px;
}

.support-widget__guest strong {
    color: #edf2f8;
    font-size: 15px;
    font-weight: 680;
}

.support-widget__guest p {
    margin: 8px 0 18px;
    color: #7f8da1;
    font-size: 11px;
    line-height: 1.55;
}

.support-widget__guest a {
    padding: 9px 16px;
    border-radius: 9px;
    color: #fff;
    background: var(--sw-accent);
    text-decoration: none;
    font-size: 11px;
    font-weight: 650;
}

.support-widget__error {
    margin: auto;
    color: #eb9d9d;
    font-size: 11px;
    text-align: center;
}

.support-widget__dialog {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 22px;
}

.support-widget__dialog-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(3, 7, 11, .68);
    cursor: default;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.support-widget__dialog-card {
    position: relative;
    width: min(100%, 310px);
    padding: 20px;
    border: 1px solid var(--sw-border-strong);
    border-radius: 14px;
    outline: 0;
    background: #141d28;
    box-shadow: 0 20px 54px rgba(0, 0, 0, .42);
    text-align: center;
    animation: support-widget-dialog-in .15s ease-out;
}

@keyframes support-widget-dialog-in {
    from {
        opacity: 0;
        transform: translateY(5px) scale(.985);
    }
}

.support-widget__dialog-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 11px;
    color: #7eaddf;
    background: rgba(48, 116, 190, .12);
}

.support-widget__dialog-icon .support-widget__icon {
    width: 21px;
    height: 21px;
}

.support-widget__dialog-card > strong {
    display: block;
    color: #f0f4f9;
    font-size: 14px;
    font-weight: 680;
}

.support-widget__dialog-card > p {
    margin: 8px 0 0;
    color: #8492a5;
    font-size: 10px;
    line-height: 1.55;
}

.support-widget__dialog-error {
    color: #efa2a2 !important;
}

.support-widget__dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 17px;
}

.support-widget__dialog-actions button {
    min-height: 36px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
}

.support-widget__dialog-cancel {
    border: 1px solid var(--sw-border-strong);
    color: #aeb9c8;
    background: transparent;
}

.support-widget__dialog-cancel:hover {
    color: #eef3f9;
    background: rgba(255, 255, 255, .045);
}

.support-widget__dialog-confirm {
    border: 1px solid rgba(198, 82, 91, .3);
    color: #fff;
    background: #a63f49;
}

.support-widget__dialog-confirm:hover {
    background: #b84953;
}

.support-widget__dialog-confirm:disabled {
    opacity: .55;
    cursor: wait;
}

body[data-site-theme="white"] .support-widget {
    --sw-panel: #ffffff;
    --sw-panel-raised: #f7f9fc;
    --sw-message: #f1f4f8;
    --sw-input: #f7f9fc;
    --sw-border: rgba(30, 49, 75, .09);
    --sw-border-strong: rgba(30, 49, 75, .14);
    --sw-text: #1d2939;
    --sw-muted: #68778a;
    --sw-dim: #8390a0;
}

body[data-site-theme="white"] .support-widget__panel {
    box-shadow: 0 22px 58px rgba(25, 42, 66, .2);
}

body[data-site-theme="white"] .support-widget__header,
body[data-site-theme="white"] .support-widget__composer,
body[data-site-theme="white"] .support-widget__files {
    background: #fff;
}

body[data-site-theme="white"] .support-widget__messages,
body[data-site-theme="white"] .support-widget__history {
    background: #f7f9fc;
}

body[data-site-theme="white"] .support-widget__brand strong,
body[data-site-theme="white"] .support-widget__welcome strong,
body[data-site-theme="white"] .support-widget__guest strong,
body[data-site-theme="white"] .support-widget__dialog-card > strong {
    color: #1c2939;
}

body[data-site-theme="white"] .support-widget__bubble {
    color: #273548;
    border-color: #e0e6ee;
    background: #eef2f6;
}

body[data-site-theme="white"] .support-widget__message.is-mine .support-widget__bubble {
    color: #fff;
    border-color: rgba(43, 103, 170, .16);
    background: #2b70ba;
}

body[data-site-theme="white"] .support-widget__composer textarea {
    color: #1e2b3b;
    background: #f7f9fc;
}

body[data-site-theme="white"] .support-widget__history-item,
body[data-site-theme="white"] .support-widget__file {
    color: #3d4d62;
    background: #fff;
}

body[data-site-theme="white"] .support-widget__dialog-card {
    background: #fff;
    box-shadow: 0 20px 50px rgba(25, 42, 66, .22);
}

body[data-site-theme="white"] .support-widget__dialog-backdrop {
    background: rgba(22, 34, 51, .34);
}

@media (max-width: 620px) {
    .support-widget {
        right: 12px;
        bottom: max(78px, calc(env(safe-area-inset-bottom) + 66px));
    }

    .support-widget__toggle {
        width: 52px;
        height: 52px;
    }

    .support-widget__panel {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .support-widget__header {
        padding-top: max(11px, env(safe-area-inset-top));
    }

    .support-widget__composer {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

/* ---- Welcome card ---- */
.support-widget__welcome {
    width: min(100%, 320px);
    margin: auto;
    padding: 8px 12px;
    text-align: center;
}

.support-widget__welcome-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border: 1px solid rgba(73, 143, 219, .22);
    border-radius: 18px;
    color: #7eaddf;
    background: linear-gradient(145deg, rgba(48, 116, 190, .18), rgba(48, 116, 190, .05));
    animation: sw-welcome-icon-in .4s cubic-bezier(.2,.9,.3,1);
}

.support-widget__welcome-icon svg { width: 28px; height: 28px; }

@keyframes sw-welcome-icon-in {
    from { opacity: 0; transform: scale(.85) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.support-widget__welcome strong {
    display: block;
    color: #edf2f8;
    font-size: 15px;
    font-weight: 680;
}

.support-widget__welcome p {
    margin: 7px 0 0;
    color: #7d8b9f;
    font-size: 11px;
    line-height: 1.55;
}

/* ---- Quick chips ---- */
.support-widget__welcome-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 18px;
}

.support-widget__welcome-chips button {
    position: relative;
    padding: 7px 12px;
    border: 1px solid var(--sw-border-strong);
    border-radius: 999px;
    color: #a9b8ca;
    background: rgba(255, 255, 255, .025);
    font-size: 10px;
    font-weight: 550;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease,
                background .15s ease, transform .15s ease;
}

.support-widget__welcome-chips button:hover {
    color: #e7edf5;
    border-color: rgba(73, 143, 219, .5);
    background: rgba(38, 115, 201, .12);
    transform: translateY(-1px);
}

.support-widget__welcome-chips button:active {
    transform: translateY(0) scale(.97);
}

.support-widget__welcome-chips button:focus-visible {
    outline: 2px solid rgba(104, 170, 248, .78);
    outline-offset: 2px;
}

.support-widget__welcome-chips button:disabled {
    opacity: .45;
    cursor: wait;
    transform: none;
}

/* пока идёт отправка — пульсация */
.support-widget__welcome-chips button.is-sending {
    color: #dbe9fb;
    border-color: rgba(73, 143, 219, .55);
    background: rgba(38, 115, 201, .18);
}

.support-widget__welcome-chips button.is-sending::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(104, 170, 248, .55);
    animation: sw-chip-pulse 1s ease-out infinite;
    pointer-events: none;
}

@keyframes sw-chip-pulse {
    0%   { opacity: .9; transform: scale(1); }
    100% { opacity: 0;  transform: scale(1.15); }
}

/* ---- White theme ---- */
body[data-site-theme="white"] .support-widget__welcome-icon {
    color: #2b70ba;
    background: linear-gradient(145deg, rgba(43, 112, 186, .14), rgba(43, 112, 186, .04));
    border-color: rgba(43, 112, 186, .18);
    box-shadow: 0 8px 22px rgba(43, 112, 186, .12);
}

body[data-site-theme="white"] .support-widget__welcome-chips button {
    color: #55657a;
    border-color: rgba(30, 49, 75, .14);
    background: #fff;
}

body[data-site-theme="white"] .support-widget__welcome-chips button:hover {
    color: #1d2939;
    border-color: rgba(43, 112, 186, .5);
    background: rgba(43, 112, 186, .08);
}

@media (prefers-reduced-motion: reduce) {
    .support-widget *,
    .support-widget *::before,
    .support-widget *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}



/* Canned replies: the delay is purely visual, messages are already persisted. */
.support-widget__author {
    display: block;
    margin-bottom: 4px;
    color: var(--sw-muted);
    font-size: 9px;
    font-weight: 600;
}

.support-widget__message.is-bot .support-widget__bubble {
    border-color: rgba(73, 143, 219, .24);
}

.support-widget__typing-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 62px;
    min-height: 36px;
}

.support-widget__typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sw-muted);
    animation: sw-typing-dot 1s ease-in-out infinite;
}

.support-widget__typing-dots span:nth-child(2) { animation-delay: .15s; }
.support-widget__typing-dots span:nth-child(3) { animation-delay: .3s; }

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