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

/* Header */
.support-chat__header { display:flex; align-items:center; gap:12px; padding:12px 16px; background:rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0; min-height:56px; }
.support-chat__back { background:none; border:none; color:#8B8D92; font-size:22px; padding:4px; cursor:pointer; line-height:1; transition:color .15s; }
.support-chat__back:hover { color:#DCDDE0; }
.support-chat__header-info { flex:1; min-width:0; }
.support-chat__header-title { font-size:16px; font-weight:600; color:#DCDDE0; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.support-chat__header-status { font-size:12px; color:#8B8D92; margin:0; }
.support-chat__header-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#4caf50; margin-right:4px; vertical-align:middle; }

/* Messages area — NO scrollbar */
.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; }

/* Empty / Loading */
.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; }

/* Skeleton shimmer for lazy loading */
.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} }

/* Message bubble — base */
.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; }

/* Time */
.support-chat__msg-time { display:none; }

/* ====== MEDIA BUBBLE ====== */
.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; }

/* Media with caption: flat bottom on media, caption carries the rounding */
.support-chat__msg--media .sc-media-wrap.sc-has-caption { border-bottom-left-radius:0; border-bottom-right-radius:0; }

/* Media skeleton placeholder */
.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; }

/* Time overlay on media */
.support-chat__msg--media .sc-time-overlay { display:none; }

/* Caption under media */
.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; }

/* ====== STICKER ====== */
.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; }

/* ====== EMOJI-ONLY MESSAGE (no bubble) ====== */
.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; }

/* Custom emoji inline */
.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; }

/* ====== VOICE — TG style ====== */
.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; }

/* ====== DOCUMENT ====== */
.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; }

/* ====== LIGHTBOX ====== */
.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); }

/* Source badge */
.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; }

/* =================== File preview =================== */
.support-chat__file-preview { display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.08);flex-shrink:0;min-height:52px; }
.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:8px;object-fit:cover; }
.support-chat__file-preview-doc { display:flex;align-items:center;gap:8px;color:#DCDDE0; }
.support-chat__file-preview-doc i { font-size:28px;color:#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:#8B8D92; }
.support-chat__file-preview-close { background:none;border:none;color:#8B8D92;font-size:16px;cursor:pointer;padding:6px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.support-chat__file-preview-close:hover { background:rgba(255,255,255,.1);color:#e57373; }

/* Drop zone */
.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; }

/* =================== Input area =================== */
.support-chat__input-area { display:flex;align-items:center;gap:0;padding:8px 10px;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.08);flex-shrink:0; }
.support-chat__attach { width:44px;height:44px;border-radius:0;background:none;border:none;color:#8B8D92;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s; }
.support-chat__attach:hover { color:#DCDDE0; }
.sc-icon { width:22px;height:22px;display:block; }
.support-chat__input { flex:1;background:transparent;border:none;border-radius:0;padding:10px 8px;color:#DCDDE0;font-size:15px;resize:none;max-height:550px;min-height:44px;height:44px;outline:none;line-height:1.4;font-family:inherit;scrollbar-width:none; }
.support-chat__input::-webkit-scrollbar { display:none; }
.support-chat__input::placeholder { color:#8B8D92; }
.support-chat__input:focus { border:none;outline:none; }

/* Send button */
.support-chat__send { width:44px;height:44px;border-radius:0;background:none;border:none;color:#40a7e3;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,transform .15s; }
.support-chat__send:hover:not(:disabled) { color:#5bbef5;transform:scale(1.05); }
.support-chat__send:disabled { color:#555;cursor:default; }

/* Header support button */
.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)); } }