.support-chat-overlay { display:none; position:fixed; inset:0; z-index:9999; background:#121417; flex-direction:column; }
.support-chat-overlay.active { display:flex; }

.support-chat__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-top, 0px));
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, var(--ui-color-surface, #16181c) 0%, var(--ui-color-bg, #121417) 100%);
    border-bottom: 1px solid var(--ui-color-border, rgba(255,255,255,0.08));
    flex-shrink: 0;
    min-height: 64px;
    position: relative;
}
.support-chat__header::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--ui-color-border-strong, rgba(255,255,255,0.14)) 50%, transparent 100%);
    pointer-events: none;
}
.support-chat__back {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ui-color-border, rgba(255,255,255,0.08));
    color: var(--ui-color-text-soft, #DCDDE0);
    font-size: 18px;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--ui-duration-fast, 160ms) var(--ui-ease-standard, ease),
                color var(--ui-duration-fast, 160ms) var(--ui-ease-standard, ease),
                transform var(--ui-duration-fast, 160ms) var(--ui-ease-standard, ease);
}
.support-chat__back:hover { background: rgba(255, 255, 255, 0.12); color: var(--ui-color-text, #fff); }
.support-chat__back:active { transform: scale(0.94); }

.support-chat__header-info { flex: 1; min-width: 0; }
.support-chat__header-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ui-color-text, #fff);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.support-chat__header-status {
    font-size: 12px;
    color: var(--ui-color-text-muted, #9aa0a6);
    margin: 3px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}
.support-chat__header-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ui-color-success, #3d9966);
    box-shadow: 0 0 0 0 rgba(61, 153, 102, 0.55);
    margin: 0;
    vertical-align: middle;
    animation: scStatusDot 2.4s ease-in-out infinite;
    flex-shrink: 0;
}

.support-chat__header-dot.support-chat__header-dot--offline {
    background: #dc4e41;
    animation: scStatusDotOffline 2.4s ease-in-out infinite;
}
@keyframes scStatusDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(61, 153, 102, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(61, 153, 102, 0); }
}
@keyframes scStatusDotOffline {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 78, 65, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 78, 65, 0); }
}

.support-chat__messages { flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 16px 8px; display:flex; flex-direction:column; gap:3px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.support-chat__messages::-webkit-scrollbar { display:none; }

.support-chat__empty { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; color:#8B8D92; text-align:center; gap:8px; padding:40px 20px; }
.support-chat__empty i { font-size:40px; opacity:.4; }
.support-chat__empty p { margin:0; font-size:14px; }
.support-chat__loading { display:flex; align-items:center; justify-content:center; flex:1; color:#8B8D92; font-size:14px; gap:8px; }
.support-chat__loading .spinner-border { width:20px; height:20px; border-width:2px; }

.sc-skeleton { display:flex; flex-direction:column; gap:6px; padding:8px 0; }
.sc-skeleton__row { height:36px; border-radius:14px; background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%); background-size:400% 100%; animation:scShimmer 1.4s ease infinite; }
.sc-skeleton__row--short { width:55%; align-self:flex-end; }
.sc-skeleton__row--long { width:70%; align-self:flex-start; }
.sc-skeleton__row--med { width:40%; align-self:flex-end; }
@keyframes scShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.support-chat__msg { max-width:85%; border-radius:16px; font-size:14px; line-height:1.45; color:#DCDDE0; word-break:break-word; position:relative; animation:scMsgIn .18s ease; }
@keyframes scMsgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.support-chat__msg--user { align-self:flex-end; background:#0984c6; border-bottom-right-radius:4px; }
.support-chat__msg--support { align-self:flex-start; background:rgba(255,255,255,.08); border-bottom-left-radius:4px; }
.support-chat__msg--text { padding:8px 12px; }

.support-chat__msg-time { display:none; }

.support-chat__msg--media { padding:0 !important; background:none !important; }
.support-chat__msg--media .sc-media-wrap { position:relative; display:block; line-height:0; cursor:pointer; border-radius:16px; overflow:hidden; }
.support-chat__msg--user.support-chat__msg--media .sc-media-wrap { border-bottom-right-radius:4px; }
.support-chat__msg--support.support-chat__msg--media .sc-media-wrap { border-bottom-left-radius:4px; }
.support-chat__msg--media .sc-media-wrap img,
.support-chat__msg--media .sc-media-wrap video { display:block; max-width:300px; max-height:360px; width:100%; object-fit:cover; }

.support-chat__msg--media .sc-media-wrap.sc-has-caption { border-bottom-left-radius:0; border-bottom-right-radius:0; }

.sc-media-placeholder { width:220px; height:180px; border-radius:16px; background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%); background-size:400% 100%; animation:scShimmer 1.4s ease infinite; }

.support-chat__msg--media .sc-time-overlay { display:none; }

.sc-caption { padding:6px 12px 6px; font-size:14px; line-height:1.4; }
.support-chat__msg--user .sc-caption { background:#0984c6; border-radius:0 0 4px 16px; }
.support-chat__msg--support .sc-caption { background:rgba(255,255,255,.08); border-radius:0 0 16px 4px; }
.sc-caption .support-chat__msg-time { display:none; }

.support-chat__msg-text { margin:0; }
.support-chat__msg-text a { color:#40a7e3; text-decoration:underline; }

.support-chat__msg--sticker { background:transparent !important; padding:2px !important; }
.support-chat__sticker { max-width:180px; max-height:180px; display:block; }
.sc-lottie-sticker { width:180px; height:180px; }

.support-chat__msg--emoji-only { background:none !important; padding:2px !important; }
.sc-emoji-only { display:flex; gap:2px; flex-wrap:wrap; }
.sc-emoji-only--x1 .support-chat__custom-emoji { width:48px; height:48px; }
.sc-emoji-only--x2 .support-chat__custom-emoji,
.sc-emoji-only--x3 .support-chat__custom-emoji { width:36px; height:36px; }

.support-chat__custom-emoji { display:inline-block; width:24px; height:24px; vertical-align:middle; margin:0 1px; }
.sc-lottie-emoji { display:inline-block; vertical-align:middle; margin:0 1px; }

.support-chat__msg--voice { padding:8px 12px; }
.sc-voice { display:flex; align-items:center; gap:10px; min-width:200px; }
.sc-voice__btn { width:36px;height:36px;border-radius:50%;border:none;background:#40a7e3;color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s; }
.sc-voice__btn:hover { background:#3591c9; }
.sc-voice__body { flex:1;min-width:0; }
.sc-voice__bars { display:flex;align-items:center;gap:2px;height:28px;cursor:pointer; }
.sc-voice__bar { width:3px;border-radius:2px;background:rgba(255,255,255,.25);transition:background .1s; }
.sc-voice__bar--played { background:#40a7e3; }
.sc-voice__dur { font-size:11px;color:rgba(255,255,255,.5);margin-top:2px; }

.support-chat__doc { display:flex;align-items:center;gap:10px;padding:10px 14px;text-decoration:none;color:#DCDDE0;transition:opacity .15s; }
.support-chat__doc:hover { opacity:.8; }
.support-chat__doc-icon { width:42px;height:42px;border-radius:10px;background:#40a7e3;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;flex-shrink:0; }
.support-chat__doc-info { min-width:0; }
.support-chat__doc-name { font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#40a7e3; }

.sc-lightbox { position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;cursor:zoom-out;animation:scFadeIn .15s ease; }
@keyframes scFadeIn { from{opacity:0} to{opacity:1} }
.sc-lightbox img { max-width:95vw;max-height:95vh;object-fit:contain;border-radius:4px;user-select:none; }
.sc-lightbox__close { position:absolute;top:12px;right:16px;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:22px;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.sc-lightbox__close:hover { background:rgba(255,255,255,.3); }

.sc-source-badge { font-size:11px;font-weight:500;padding:2px 8px;border-radius:8px;display:inline-flex;align-items:center;gap:4px;margin-bottom:4px; }
.sc-source--tg { background:rgba(42,171,238,.15);color:#2aabee; }
.sc-source--tg i { font-size:12px; }

.support-chat__file-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 12px;
    background: var(--ui-color-surface-2, #1b1e23);
    border: 1px solid var(--ui-color-border, rgba(255,255,255,.08));
    border-bottom: none;
    border-radius: var(--ui-radius-md, 16px) var(--ui-radius-md, 16px) 0 0;
    flex-shrink: 0;
    min-height: 56px;
}
.support-chat__file-preview.ui-hidden-soft { display: none; }
.support-chat__file-preview-content { flex:1;min-width:0;display:flex;align-items:center; }
.support-chat__file-preview-img,.support-chat__file-preview-video { max-height:60px;max-width:100px;border-radius:10px;object-fit:cover; }
.support-chat__file-preview-doc { display:flex;align-items:center;gap:10px;color:var(--ui-color-text-soft,#DCDDE0); }
.support-chat__file-preview-doc i { font-size:26px;color:var(--ui-color-accent,#40a7e3); }
.support-chat__file-preview-name { font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px; }
.support-chat__file-preview-size { font-size:11px;color:var(--ui-color-text-muted,#8B8D92); }
.support-chat__file-preview-close {
    background: rgba(255,255,255,.06);
    border: none;
    color: var(--ui-color-text-muted, #8B8D92);
    font-size: 14px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ui-duration-fast, 160ms), color var(--ui-duration-fast, 160ms);
}
.support-chat__file-preview-close:hover { background:rgba(255,255,255,.12);color:#e57373; }

.support-chat__drop-zone { display:none;position:absolute;inset:0;z-index:50;background:rgba(26,115,232,.12);backdrop-filter:blur(4px);border:2px dashed rgba(26,115,232,.5);flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#5ba2f0;font-size:16px;font-weight:500;pointer-events:none; }
.support-chat__drop-zone i { font-size:42px; }
.support-chat__drop-zone.active { display:flex; }

.support-chat__input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(0deg, var(--ui-color-surface, #16181c) 0%, var(--ui-color-bg, #121417) 100%);
    border-top: 1px solid var(--ui-color-border, rgba(255,255,255,.08));
    flex-shrink: 0;
    position: relative;
}
.support-chat__input-area::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--ui-color-border-strong, rgba(255,255,255,0.14)) 50%, transparent 100%);
    pointer-events: none;
}

.support-chat__attach {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ui-color-border, rgba(255,255,255,.08));
    color: var(--ui-color-text-muted, #8B8D92);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
    transition: background var(--ui-duration-fast, 160ms),
                color var(--ui-duration-fast, 160ms),
                transform var(--ui-duration-fast, 160ms);
}
.support-chat__attach:hover { background: rgba(255, 255, 255, 0.1); color: var(--ui-color-text-soft, #DCDDE0); }
.support-chat__attach:active { transform: scale(0.94); }
.sc-icon { width: 18px; height: 18px; display: block; }

.support-chat__input {
    flex: 1;
    background: var(--ui-color-surface-2, #1b1e23);
    border: 1px solid var(--ui-color-border, rgba(255,255,255,.08));
    border-radius: 22px;
    padding: 9px 16px;
    color: var(--ui-color-text, #fff);
    font-size: 15px;
    resize: none;
    max-height: 550px;
    min-height: 40px;
    height: 40px;
    outline: none;
    line-height: 1.4;
    font-family: inherit;
    scrollbar-width: none;
    transition: border-color var(--ui-duration-fast, 160ms),
                background var(--ui-duration-fast, 160ms);
}
.support-chat__input::-webkit-scrollbar { display: none; }
.support-chat__input::placeholder { color: var(--ui-color-text-muted, #8B8D92); }
.support-chat__input:focus {
    border-color: var(--ui-color-accent, #3282d7);
    background: var(--ui-color-surface, #16181c);
    outline: none;
}

.support-chat__send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ui-color-accent, #3282d7);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
    transition: background var(--ui-duration-fast, 160ms),
                color var(--ui-duration-fast, 160ms),
                transform var(--ui-duration-fast, 160ms);
    box-shadow: 0 4px 14px rgba(50, 130, 215, 0.32);
}
.support-chat__send:hover:not(:disabled) {
    background: var(--ui-color-accent-hover, #2266b0);
    transform: scale(1.05);
}
.support-chat__send:active:not(:disabled) { transform: scale(0.94); }
.support-chat__send:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: var(--ui-color-text-muted, #8B8D92);
    cursor: default;
    box-shadow: none;
}

.sc-header-support { display:flex;align-items:center;gap:4px;transition:all .2s;margin-left:0; }
.sc-header-support .bi-headset { padding-top:1px; }
#sc-header-badge { padding-top:1px; }
.web-top-bar__btn--back:not(.is-inactive) ~ .sc-header-support { margin-left:8px; }
.sc-header-support.sc-has-unread { background:rgba(64,167,227,.12);border-radius:14px;padding:4px 10px 4px 6px !important;animation:scPulse 2s ease-in-out infinite; }
.sc-header-count { font-size:13px;font-weight:600;color:#40a7e3;white-space:nowrap; }
@keyframes scPulse { 0%,100%{opacity:1} 50%{opacity:.45} }

@supports (padding-bottom:env(safe-area-inset-bottom)) { .support-chat__input-area { padding-bottom:calc(8px + env(safe-area-inset-bottom)); } }