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

.support-chat__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-top, 0px));
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, var(--ui-color-surface, #16181c) 0%, var(--ui-color-bg, #0b0d10) 100%);
    border-bottom: 0.0625rem solid var(--ui-color-border, rgba(255,255,255,0.08));
    flex-shrink: 0;
    min-height: 4rem;
    position: relative;
}
.support-chat__header::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: -0.0625rem;
    height: 0.0625rem;
    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: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 0.0625rem solid var(--ui-color-border, rgba(255,255,255,0.08));
    color: var(--ui-color-text-soft, #DCDDE0);
    font-size: 1.125rem;
    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: 0.9375rem;
    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: 0.75rem;
    color: var(--ui-color-text-muted, #9aa0a6);
    margin: 0.1875rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    line-height: 1.2;
}
.support-chat__header-dot {
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    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 0.375rem 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 0.375rem rgba(220, 78, 65, 0); }
}

.support-chat__messages { flex:1; overflow-y:auto; overflow-x:hidden; padding:0.75rem 1rem 0.5rem; display:flex; flex-direction:column; gap:0.1875rem; -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:0.5rem; padding:2.5rem 1.25rem; }
.support-chat__empty i { font-size:2.5rem; opacity:.4; }
.support-chat__empty p { margin:0; font-size:0.875rem; }
.support-chat__loading { display:flex; align-items:center; justify-content:center; flex:1; color:#8B8D92; font-size:0.875rem; gap:0.5rem; }
.support-chat__loading .spinner-border { width:1.25rem; height:1.25rem; border-width:0.125rem; }

.sc-skeleton { display:flex; flex-direction:column; gap:0.375rem; padding:0.5rem 0; }
.sc-skeleton__row { height:2.25rem; border-radius:0.875rem; 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:1rem; font-size:0.875rem; line-height:1.45; color:#DCDDE0; word-break:break-word; position:relative; animation:scMsgIn .18s ease; }
@keyframes scMsgIn { from{opacity:0;transform:translateY(0.375rem)} to{opacity:1;transform:translateY(0)} }
.support-chat__msg--user { align-self:flex-end; background:#0984c6; border-bottom-right-radius:0.25rem; }
.support-chat__msg--support { align-self:flex-start; background:rgba(255,255,255,.08); border-bottom-left-radius:0.25rem; }
.support-chat__msg--text { padding:0.5rem 0.75rem; }

.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:1rem; overflow:hidden; }
.support-chat__msg--user.support-chat__msg--media .sc-media-wrap { border-bottom-right-radius:0.25rem; }
.support-chat__msg--support.support-chat__msg--media .sc-media-wrap { border-bottom-left-radius:0.25rem; }
.support-chat__msg--media .sc-media-wrap img,
.support-chat__msg--media .sc-media-wrap video { display:block; max-width:18.75rem; max-height:22.5rem; 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:13.75rem; height:11.25rem; border-radius:1rem; 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:0.375rem 0.75rem 0.375rem; font-size:0.875rem; line-height:1.4; }
.support-chat__msg--user .sc-caption { background:#0984c6; border-radius:0 0 0.25rem 1rem; }
.support-chat__msg--support .sc-caption { background:rgba(255,255,255,.08); border-radius:0 0 1rem 0.25rem; }
.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:0.125rem !important; }
.support-chat__sticker { max-width:11.25rem; max-height:11.25rem; display:block; }
.sc-lottie-sticker { width:11.25rem; height:11.25rem; }

.support-chat__msg--emoji-only { background:none !important; padding:0.125rem !important; }
.sc-emoji-only { display:flex; gap:0.125rem; flex-wrap:wrap; }
.sc-emoji-only--x1 .support-chat__custom-emoji { width:3rem; height:3rem; }
.sc-emoji-only--x2 .support-chat__custom-emoji,
.sc-emoji-only--x3 .support-chat__custom-emoji { width:2.25rem; height:2.25rem; }

.support-chat__custom-emoji { display:inline-block; width:1.5rem; height:1.5rem; vertical-align:middle; margin:0 0.0625rem; }
.sc-lottie-emoji { display:inline-block; vertical-align:middle; margin:0 0.0625rem; }

.support-chat__msg--voice { padding:0.5rem 0.75rem; }
.sc-voice { display:flex; align-items:center; gap:0.625rem; min-width:12.5rem; }
.sc-voice__btn { width:2.25rem;height:2.25rem;border-radius:50%;border:none;background:#40a7e3;color:#fff;font-size:0.875rem;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:0.125rem;height:1.75rem;cursor:pointer; }
.sc-voice__bar { width:0.1875rem;border-radius:0.125rem;background:rgba(255,255,255,.25);transition:background .1s; }
.sc-voice__bar--played { background:#40a7e3; }
.sc-voice__dur { font-size:0.6875rem;color:rgba(255,255,255,.5);margin-top:0.125rem; }

.support-chat__doc { display:flex;align-items:center;gap:0.625rem;padding:0.625rem 0.875rem;text-decoration:none;color:#DCDDE0;transition:opacity .15s; }
.support-chat__doc:hover { opacity:.8; }
.support-chat__doc-icon { width:2.625rem;height:2.625rem;border-radius:0.625rem;background:#40a7e3;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#fff;flex-shrink:0; }
.support-chat__doc-info { min-width:0; }
.support-chat__doc-name { font-size:0.875rem;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:0.25rem;user-select:none; }
.sc-lightbox__close { position:absolute;top:0.75rem;right:1rem;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:1.375rem;width:2.5rem;height:2.5rem;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:0.6875rem;font-weight:500;padding:0.125rem 0.5rem;border-radius:0.5rem;display:inline-flex;align-items:center;gap:0.25rem;margin-bottom:0.25rem; }
.sc-source--tg { background:rgba(42,171,238,.15);color:#2aabee; }
.sc-source--tg i { font-size:0.75rem; }

.support-chat__file-preview {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    margin: 0 0.75rem;
    background: var(--ui-color-surface-2, #1b1e23);
    border: 0.0625rem solid var(--ui-color-border, rgba(255,255,255,.08));
    border-bottom: none;
    border-radius: var(--ui-radius-md, 1rem) var(--ui-radius-md, 1rem) 0 0;
    flex-shrink: 0;
    min-height: 3.5rem;
}
.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:3.75rem;max-width:6.25rem;border-radius:0.625rem;object-fit:cover; }
.support-chat__file-preview-doc { display:flex;align-items:center;gap:0.625rem;color:var(--ui-color-text-soft,#DCDDE0); }
.support-chat__file-preview-doc i { font-size:1.625rem;color:var(--ui-color-accent,#40a7e3); }
.support-chat__file-preview-name { font-size:0.8125rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12.5rem; }
.support-chat__file-preview-size { font-size:0.6875rem;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: 0.875rem;
    cursor: pointer;
    width: 1.875rem;
    height: 1.875rem;
    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(0.25rem);border:0.125rem dashed rgba(26,115,232,.5);flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;color:#5ba2f0;font-size:1rem;font-weight:500;pointer-events:none; }
.support-chat__drop-zone i { font-size:2.625rem; }
.support-chat__drop-zone.active { display:flex; }

.support-chat__input-area {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: linear-gradient(0deg, var(--ui-color-surface, #16181c) 0%, var(--ui-color-bg, #0b0d10) 100%);
    border-top: 0.0625rem solid var(--ui-color-border, rgba(255,255,255,.08));
    flex-shrink: 0;
    position: relative;
}
.support-chat__input-area::before {
    content: '';
    position: absolute;
    top: -0.0625rem;
    left: 1rem;
    right: 1rem;
    height: 0.0625rem;
    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: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 0.0625rem 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: 1.125rem; height: 1.125rem; display: block; }

.support-chat__input {
    flex: 1;
    background: var(--ui-color-surface-2, #1b1e23);
    border: 0.0625rem solid var(--ui-color-border, rgba(255,255,255,.08));
    border-radius: 1.375rem;
    padding: 0.5625rem 1rem;
    color: var(--ui-color-text, #fff);
    font-size: 0.9375rem;
    resize: none;
    max-height: 34.375rem;
    min-height: 2.5rem;
    height: 2.5rem;
    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: 2.5rem;
    height: 2.5rem;
    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 0.25rem 0.875rem 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:0.25rem;transition:all .2s;margin-left:0; }
.sc-header-support .bi-headset { padding-top:0.0625rem; }
#sc-header-badge { padding-top:0.0625rem; }
.web-top-bar__btn--back:not(.is-inactive) ~ .sc-header-support { margin-left:0.5rem; }
.sc-header-support.sc-has-unread { background:rgba(64,167,227,.12);border-radius:0.875rem;padding:0.25rem 0.625rem 0.25rem 0.375rem !important;animation:scPulse 2s ease-in-out infinite; }
.sc-header-count { font-size:0.8125rem;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(0.5rem + env(safe-area-inset-bottom)); } }