.stream-layout-container { display: flex; width: 100%; height: calc(100vh - 65px); background: #0b0e14; overflow: hidden; }

@supports (height: 100dvh) {
    .stream-layout-container { height: calc(100dvh - 65px); }
}

.video-section { flex: 1; display: flex; flex-direction: column; border-right: 1px solid #26262c; overflow: hidden; min-width: 0;}

.iframe-wrapper { flex: 1; width: 100%; background: #000; position: relative; min-height: 0; display: flex; align-items: center; justify-content: center;}
.iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 2; opacity: 0; transition: opacity 0.5s ease; }
.loading-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity 0.5s ease; }

#mobile-collapsible-info { flex-shrink: 0; }

/* استایل‌های نوار عنوان و تعداد ویو */
.st-title-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px 10px; background: #0b0e14; }
#st-title { font-size: 20px !important; font-weight: bold; color: #fff; margin: 0; line-height: 1.4; }

/* === استایل تعداد بیننده‌ها === */
.st-viewers-badge {
    display:flex;
    align-items:center;
    gap:6px;
    background:transparent;
    padding:0;
    border-radius:0;
    font-size:13px;
    font-weight:800;
    color:#53fc18;
}
.st-viewers-badge svg{
    width:16px;
    height:16px;
    fill:#fff;
    flex:0 0 auto;
}
/* ==================================== */

.streamer-info-card { padding: 10px 20px 15px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 15px; background: #0b0e14; border-bottom: 1px solid #26262c; }

.st-main-info { display: flex; align-items: center; gap: 15px; flex: 1; }
.st-main-info img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #53fc18; object-fit: cover; }
.st-text h2 { font-size: 18px; color: #fff; margin: 0 0 5px 0; font-weight: bold; }
.st-text p { font-size: 14px; color: #adadb8; margin: 0; }

.st-right-section { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

/* ==== شروع استایل‌های جدید مشابه Kick.com ==== */
.st-actions { display: flex; gap: 10px; align-items: center; }

.action-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    padding: 8px 16px; 
    border-radius: 6px; 
    font-family: inherit; 
    font-weight: 600; 
    font-size: 14px; 
    border: none; 
    cursor: pointer; 
    transition: background-color 0.2s ease, transform 0.1s ease; 
}

.action-btn svg { width: 18px; height: 18px; fill: currentColor; }

.action-btn:not(.follow-btn) { background-color: #24272c; color: #ffffff; }
.action-btn:not(.follow-btn):hover { background-color: #2e3238; }

.follow-btn { background-color: #53fc18; color: #000000; }
.follow-btn:hover { background-color: #4be615; }

.follow-btn.following { background-color: #24272c; color: #ffffff; }
.follow-btn.following:hover { background-color: #2e3238; }

.donate-btn {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    overflow: hidden;
    flex-shrink: 0;
}

.donate-btn.is-disabled {
    opacity: 0.65;
    cursor: default;
}

.donate-btn .donate-text-wrap {
    position: relative;
    display: inline-block;
    width: 74px;
    overflow: hidden;
    white-space: nowrap;
    direction: rtl;
    text-align: right;
    vertical-align: middle;
}

.donate-btn .donate-text {
    display: inline-block;
    min-width: max-content;
    white-space: nowrap;
    will-change: transform;
}

.donate-btn.is-marquee .donate-text {
    padding-inline-start: 100%;
    animation: donateTicker 8s linear infinite;
}

@keyframes donateTicker {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
/* ==== پایان استایل‌های جدید ==== */

.st-stats-container { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.live-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: pulse 1.5s infinite; }
.st-uptime { font-size: 12px; color: #adadb8; background: #18181b; padding: 4px 10px; border-radius: 5px; border: 1px solid #26262c; }

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

.st-dropdown-container { position: relative; display: inline-block; }
.st-btn-icon { background: rgba(255, 255, 255, 0.05); color: #fff; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
.st-btn-icon:hover { background: rgba(255, 255, 255, 0.15); }

.st-dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; background: #18181b; border: 1px solid #26262c; border-radius: 8px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); display: none; z-index: 100; min-width: 170px; }
.st-dropdown-menu.show { display: block; }
html[dir="ltr"] .st-dropdown-menu { right: auto; left: 0; }

.st-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border: none; border-radius: 6px; font-size: 13px; font-weight: bold; cursor: pointer; transition: 0.2s; color: #ef4444; background: rgba(239, 68, 68, 0.1); font-family: inherit; white-space: nowrap; }
.st-dropdown-item:hover { background: rgba(239, 68, 68, 0.2); }

.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 99999; backdrop-filter: blur(4px); }
.modal-overlay.active { display: flex; }
.modal-content { background: #18181b; padding: 24px; border-radius: 12px; width: 90%; max-width: 400px; border: 1px solid rgba(255,255,255,0.1); direction: rtl; }
html[dir="ltr"] .modal-content { direction: ltr; }
.modal-title { color: #fff; font-size: 1.2rem; margin-bottom: 16px; font-weight: bold; }

.modal-select { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 12px; border-radius: 8px; margin-bottom: 12px; font-family: inherit; font-size: 0.95rem; outline: none; cursor: pointer; }
.modal-select:focus { border-color: #ef4444; }
.modal-select option { background: #18181b; color: #fff; padding: 10px; }

.modal-textarea { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 12px; border-radius: 8px; resize: vertical; min-height: 100px; margin-bottom: 16px; font-family: inherit; outline: none; }
.modal-textarea:focus { border-color: #ef4444; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }
.modal-btn { padding: 10px 20px; border-radius: 6px; border: none; cursor: pointer; font-weight: bold; font-family: inherit; transition: 0.2s; }
.modal-btn.cancel { background: transparent; color: #adadb8; }
.modal-btn.cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }
.modal-btn.submit { background: #ef4444; color: #fff; }
.modal-btn.submit:hover { background: #dc2626; }

/* ========================================= */
/* ======== استایل‌های مربوط به چت ======== */
/* ========================================= */

.chat-section.custom-chat { width: 392px; display: flex; flex-direction: column; background: #0b0e14; flex-shrink: 0; min-height: 0; }
.chat-header { padding: 15px; border-bottom: 1px solid #26262c; color: #efeff1; font-weight: bold; text-align: center; font-size: 14px; }

.chat-messages { flex: 1; padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-size: 15px !important; min-height: 0; text-align: right !important; }
.chat-messages > div { direction: rtl !important; text-align: right !important; }

.chat-input-wrapper { display: flex; flex-direction: column; flex-shrink: 0; border-top: 1px solid #26262c; background: #0b0e14; position: relative; }

.chat-input-area { padding: 15px; display: flex; gap: 8px; align-items: flex-end; }

/* استایل دیو قابل ویرایش (جایگزین اینپوت) */
.chat-input-area .editable-input {
    flex: 1;
    background: #18181b;
    border: 1px solid #26262c;
    border-radius: 6px;
    padding: 8px 12px;
    color: #fff;
    outline: none;
    transition: 0.2s;
    font-size: 14px !important;
    min-height: 38px;
    max-height: 120px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.chat-input-area .editable-input:focus { border-color: #53fc18; }
.chat-input-area .editable-input:empty:before {
    content: attr(data-placeholder);
    color: #adadb8;
    pointer-events: none;
    display: block;
}
.chat-input-area .editable-input img.input-inline-gif {
    height: 24px;
    vertical-align: middle;
    margin: 0 4px;
    border-radius: 4px;
    user-select: none;
    display: inline-block;
}

.chat-input-area button#sendBtn { background: #53fc18; border: none; border-radius: 6px; width: 40px; height: 38px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #000; flex-shrink: 0;}

/* استایل‌های دکمه ایموجی و پاپ‌آپ */
#emojiBtn { background: transparent; border: none; color: #adadb8; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 5px; height: 38px; transition: color 0.2s; flex-shrink: 0;}
#emojiBtn:hover, #emojiBtn.active { color: #53fc18; }

.emoji-picker-container { display: none; position: absolute; bottom: 100%; right: 0; left: 0; background: #12141c; border-top: 1px solid #26262c; padding: 15px; z-index: 50; flex-direction: column; box-shadow: 0 -5px 15px rgba(0,0,0,0.5); }
.emoji-picker-container.show { display: flex; }
.emoji-picker-header { color: #adadb8; font-size: 12px; margin-bottom: 12px; text-align: right; font-weight: bold;}
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 10px; max-height: 160px; overflow-y: auto; direction: rtl; }
.emoji-grid::-webkit-scrollbar { width: 6px; }
.emoji-grid::-webkit-scrollbar-thumb { background: #26262c; border-radius: 4px; }
.emoji-item { width: 32px; height: 32px; cursor: pointer; border-radius: 4px; object-fit: contain; transition: transform 0.2s, background 0.2s; padding: 2px;}
.emoji-item:hover { transform: scale(1.15); background: rgba(255,255,255,0.05); }

/* استایل گیف درون متن پیام */
.chat-inline-gif { height: 28px; vertical-align: middle; margin: 0 4px; border-radius: 4px; display: inline-block; }

.chat-msg { 
    position: relative; 
    padding: 6px 10px; 
    padding-left: 32px; 
    border-radius: 6px; 
    transition: background 0.2s; 
    line-height: 1.5; 
    word-wrap: break-word; 
}
.chat-msg:hover { background: rgba(255, 255, 255, 0.04); }

.chat-user { font-weight: bold; margin-left: 5px; cursor: pointer; transition: 0.2s; user-select: none; -webkit-user-select: none; } 
.chat-user:hover { text-decoration: underline; opacity: 0.8; }
.chat-text { color: #efeff1; }

.reply-icon-btn { position: absolute; left: 6px; top: 8px; background: transparent; border: none; color: #adadb8; cursor: pointer; opacity: 0; transition: opacity 0.2s; padding: 2px; display: flex; align-items: center; justify-content: center; z-index: 2;}
.chat-msg:hover .reply-icon-btn { opacity: 1; }
.reply-icon-btn:hover { color: #fff; }

/* ---------------------------------------------------- */
/* کلاس‌های جدید برای مدیریت اختصاصی ریپلای و ادمین  */
/* ---------------------------------------------------- */

.chat-msg.personal-highlight { 
    background: rgba(83, 252, 24, 0.08) !important; 
    border-right: 3px solid #53fc18 !important; 
    border-radius: 0 6px 6px 0; 
    margin-right: 2px;
}
.chat-msg.personal-highlight:hover { 
    background: rgba(83, 252, 24, 0.12) !important; 
}

.chat-msg.normal-reply { 
    background: transparent !important; 
    border-right: none !important; 
}
.chat-msg.normal-reply:hover { 
    background: rgba(255, 255, 255, 0.04) !important; 
}

.chat-mod-badge {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 4px;
    margin-top: -2px; 
}

.chat-mention { background: rgba(83, 252, 24, 0.15); color: #53fc18; padding: 0 4px; border-radius: 4px; font-weight: bold; }

.chat-msg-reply-box {
    background: rgba(255, 255, 255, 0.05);
    border-right: 3px solid rgba(83, 252, 24, 0.8);
    padding: 5px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 13px;
    color: #adadb8;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}
.reply-box-user { color: #53fc18; font-weight: bold; font-size: 12px; }
.reply-box-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: #efeff1; opacity: 0.8;}

.reply-preview-container { display: none; align-items: center; justify-content: space-between; padding: 10px 15px; background: #12141c; border-bottom: 1px solid #26262c; direction: rtl; }
.reply-close-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: 0.2s;}
.reply-close-btn:hover { opacity: 1; }
.reply-preview-text { color: #adadb8; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 85%; text-align: right; direction: rtl;}
#replyUsername { color: #fff; font-weight: bold; }

/* ========================================= */
/* ======== استایل‌های مربوط به دونیت ======== */
/* ========================================= */

.chat-msg.donation-msg {
    background: rgba(83, 252, 24, 0.08) !important;
    border: 1px solid rgba(83, 252, 24, 0.3) !important;
    border-right: 4px solid #53fc18 !important;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 12px;
    animation: slideInDonation 0.4s ease-out;
}

.chat-msg.donation-msg:hover {
    background: rgba(83, 252, 24, 0.12) !important;
}

.donation-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #53fc18;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(83, 252, 24, 0.15);
}

.donation-header svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 3px rgba(83, 252, 24, 0.6));
}

.donation-amount {
    background: #53fc18;
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
    margin-right: auto; /* برای چپ‌چین شدن در قالب راست‌چین */
}

.donation-text {
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}

@keyframes slideInDonation {
    from { opacity: 0; transform: translateY(15px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ========================================= */
/* ============ استایل‌های رسپانسیو ============ */
/* ========================================= */

@media (min-width: 850px) {
    #mobile-bottom-area { display: contents; }
    .mobile-spacer { display: none; }
    #mobile-chat-toggle { display: none; }
    .info-inner-wrapper { display: contents; }
}

@media (max-width: 1100px) { .chat-section.custom-chat { width: 320px; } }

@media (min-width: 1600px) {
    .chat-section.custom-chat { width: 430px; }
}


@media (max-width: 849px) {
    
    html, body {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: pan-x !important;
    }
    body.mobile-chat-is-open { overflow: hidden !important; }

    .stream-layout-container {
        flex-direction: column;
        height: calc(100dvh - 65px) !important;
        max-height: calc(100dvh - 65px) !important;
        overflow: hidden !important;
    }
    
    .video-section {
        flex: none;
        width: 100%;
        border-right: none;
        overflow: hidden !important;
        min-height: 0 !important;
    }
    .video-section, .st-stream-details, .stream-info-card, .st-title-bar, .stream-actions {
        overscroll-behavior: none !important;
    }
    
    .iframe-wrapper { flex: none; aspect-ratio: 16 / 9; min-height: auto; }

    /* ====== تغییرات چیدمان ویو و تایتل در موبایل ====== */
    .st-title-bar { 
        padding: 10px 15px; 
        flex-direction: row; 
        align-items: center !important; 
        justify-content: space-between !important; 
        gap: 10px !important;
    }
    
    #st-title { 
        font-size: 16px !important; 
        text-align: right;
        flex: 1;
    }

    .st-viewers-badge {
        padding: 0;
    }
    /* ==================================================== */
    
    .streamer-info-card { flex-direction: column; align-items: flex-start; padding: 10px 15px; border-bottom: none; }
    .st-right-section { width: 100%; align-items: flex-start; margin-top: 5px; }
    
    .st-actions { width: 100%; flex-wrap: nowrap; gap: 6px; justify-content: flex-start; }
    
    /* استایل‌های موبایل که حفظ شده‌اند */
    .action-btn { padding: 6px 10px; font-size: 12px; gap: 4px; }
    .action-btn svg { width: 14px; height: 14px; }
    .st-btn-icon { width: 32px; height: 32px; }
    .st-btn-icon svg { width: 16px; height: 16px; }

    .st-dropdown-menu { top: auto; bottom: calc(100% + 8px); right: 0; }

    .st-stats-container { width: 100%; justify-content: flex-start; margin-top: 5px; }
    
    #mobile-collapsible-info {
        display: grid;
        grid-template-rows: 1fr;
        opacity: 1;
        transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }
    .info-inner-wrapper { overflow: hidden; min-height: 0; }
    
    body.mobile-chat-is-open #mobile-collapsible-info {
        grid-template-rows: 0fr;
        opacity: 0;
    }

    #mobile-bottom-area {
        flex: 1;
        display: grid;
        grid-template-rows: 1fr auto 0fr; 
        transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        min-height: 0; 
    }
    body.mobile-chat-is-open #mobile-bottom-area {
        grid-template-rows: 0fr auto 1fr; 
    }

    .mobile-spacer { min-height: 0; }

    #mobile-chat-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 15px;
        background: #0b0e14;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        cursor: pointer;
        color: #efeff1;
    }
    #mobile-chat-toggle span { font-size: 15px; font-weight: bold; }
    #mobile-chat-toggle .chevron-up { transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
    body.mobile-chat-is-open #mobile-chat-toggle .chevron-up { transform: rotate(180deg); }

    .chat-section.custom-chat { 
        width: 100%; 
        border-top: none;
        min-height: 0; 
        overflow: hidden; 
    }
    .chat-header { display: none; } 
}

@media (max-width: 380px) {
    .st-actions { gap: 4px; }
    /* استایل‌های موبایل که حفظ شده‌اند */
    .action-btn { padding: 5px 6px; font-size: 10px; }
    .action-btn svg { width: 12px; height: 12px; }
    .st-btn-icon { width: 28px; height: 28px; }
    .st-btn-icon svg { width: 14px; height: 14px; }
}
/* استایل آیکون ربات سایت */
.chat-bot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #5865F2; /* رنگ بنفش-آبی مدرن */
    color: #ffffff;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 6px;
    margin-top: -2px;
}

.chat-bot-badge svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}


.chat-ban-state span {
    display: block;
    width: 100%;
}

.chat-msg {
    padding-right: 34px;
}

.chat-mod-action-btn {
    position: absolute;
    right: 6px;
    top: 8px;
    background: rgba(83, 252, 24, 0.08);
    border: 1px solid rgba(83, 252, 24, 0.18);
    color: #8dff69;
    border-radius: 8px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transform: translateY(2px);
}
.chat-msg:hover .chat-mod-action-btn {
    opacity: 1;
    transform: translateY(0);
}
.chat-mod-action-btn:hover {
    background: rgba(83, 252, 24, 0.16);
    color: #c9ffb5;
}

.chat-mod-modal {
    max-width: 460px;
}
.chat-mod-userline {
    color: #53fc18;
    font-weight: 800;
    margin-bottom: 10px;
    font-size: 1rem;
}
.chat-mod-preview {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: #efeff1;
    padding: 12px;
    line-height: 1.8;
    margin-bottom: 14px;
    font-size: 14px;
    word-break: break-word;
}
.chat-mod-actions-grid {
    display: flex;
    margin-bottom: 14px;
}
.modal-btn.danger {
    background: #b91c1c;
    color: #fff;
    width: 100%;
}
.modal-btn.danger:hover {
    background: #991b1b;
}
.chat-mod-ban-box {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 14px;
}
.chat-mod-subtitle {
    color: #fff;
    font-weight: 700;
    margin-bottom: 10px;
}
.chat-mod-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.chat-ban-preset {
    background: rgba(83,252,24,0.08);
    border: 1px solid rgba(83,252,24,0.15);
    color: #d7ffca;
    border-radius: 999px;
    padding: 8px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
}
.chat-ban-preset.permanent {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.2);
    color: #ffb4b4;
}
.chat-mod-input-label {
    display: block;
    color: #d4d4da;
    font-size: 13px;
    margin-bottom: 8px;
}
.chat-mod-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    border-radius: 8px;
    padding: 11px 12px;
    outline: none;
    direction: ltr;
    margin-bottom: 8px;
}
.chat-mod-input:focus {
    border-color: rgba(83,252,24,0.5);
}
.chat-mod-hint {
    color: #9d9daa;
    font-size: 12px;
    margin-bottom: 10px;
}
.chat-bot-badge {
    width: 18px;
    height: 18px;
    margin: 0 3px;
    transform: translateY(3px);
}
.chat-bot-badge svg {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0px 2px 4px rgba(83, 252, 24, 0.28));
}

@media (max-width: 849px) {
    .chat-mod-action-btn {
        opacity: 1;
        transform: translateY(0);
    }
}


/* v4 chat controls + logo spacing */
.chat-msg {
    padding-left: 70px !important;
    padding-right: 12px !important;
}
.chat-msg-content {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1px;
    min-width: 0;
}
.chat-msg-actions {
    position: absolute;
    left: 8px;
    top: 7px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 3;
}
.reply-icon-btn,
.chat-mod-action-btn {
    position: static !important;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.2s, transform 0.2s, background 0.2s, color 0.2s;
}
.reply-icon-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #c9c9d1;
}
.reply-icon-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.chat-msg:hover .reply-icon-btn,
.chat-msg:hover .chat-mod-action-btn {
    opacity: 1;
    transform: translateY(0);
}
.chat-msg-content svg { flex: 0 0 auto; }
@media (max-width: 768px) {
    .reply-icon-btn,
    .chat-mod-action-btn {
        opacity: 1;
        transform: none;
    }
    .chat-msg {
        padding-left: 72px !important;
    }
}


/* v5 fixes */
.chat-bot-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 20px !important;
    margin: 0 4px !important;
    background: transparent !important;
    border-radius: 0 !important;
    transform: translateY(2px) !important;
}
.chat-bot-badge svg {
    width: 20px !important;
    height: 20px !important;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(83,252,24,0.35)) !important;
}
.chat-msg {
    padding-right: 76px !important;
    padding-left: 12px !important;
}
.chat-msg-actions {
    left: auto !important;
    right: 8px !important;
    top: 7px;
    flex-direction: row-reverse;
}
.chat-msg:hover .reply-icon-btn,
.chat-msg:hover .chat-mod-action-btn {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 768px) {
    .chat-msg {
        padding-right: 76px !important;
        padding-left: 10px !important;
    }
}


/* v6 chat layout fixes */
.chat-msg {
    padding: 8px 12px 24px 12px !important;
}
.chat-msg-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.chat-msg-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.8;
    flex-wrap: wrap;
}
.chat-msg-actions {
    position: absolute;
    left: 8px !important;
    right: auto !important;
    bottom: 6px;
    top: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    z-index: 3;
}
.reply-icon-btn,
.chat-mod-action-btn {
    position: static !important;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: #b9bbc7;
    opacity: 0;
    transform: none !important;
}
.chat-mod-action-btn .dots-icon {
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.5px;
    transform: translateY(-1px);
}
.reply-icon-btn:hover,
.chat-mod-action-btn:hover {
    color: #fff;
    background: transparent !important;
}
.chat-msg:hover .reply-icon-btn,
.chat-msg:hover .chat-mod-action-btn {
    opacity: 1;
}
.chat-user,
.chat-text {
    line-height: 1.8;
}
.chat-msg-content > .reply-icon-btn {
    flex: 0 0 auto;
    align-self: center;
}
.chat-bot-badge,
.chat-msg-content > svg {
    align-self: center;
}
.chat-bot-badge {
    width: 18px !important;
    height: 18px !important;
    margin: 0 2px 0 4px !important;
    transform: translateY(0) !important;
}
.chat-bot-badge svg {
    width: 18px !important;
    height: 18px !important;
}
.chat-msg-content > svg {
    margin: 0 2px 0 4px !important;
    transform: translateY(0) !important;
}
@media (max-width: 768px) {
    .chat-msg { padding: 8px 12px 24px 12px !important; }
    .reply-icon-btn,
    .chat-mod-action-btn { opacity: 1; }
}


/* v7 chat layout cleanup */
.chat-link{
    color:#4da3ff;
    text-decoration:none;
    direction:ltr;
    unicode-bidi:plaintext;
}
.chat-link:hover{ text-decoration:underline; }
.chat-msg{
    padding:8px 12px 8px 34px !important;
    min-height:0 !important;
}
.chat-msg-content{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    min-width:0;
}
.chat-msg-inline{
    display:inline-flex !important;
    align-items:center !important;
    gap:4px !important;
    min-width:0;
    flex:1 1 auto;
    line-height:1.55 !important;
    flex-wrap:wrap;
}
.chat-user,.chat-text{ line-height:1.55 !important; }
.chat-msg-actions{
    position:absolute !important;
    left:8px !important;
    right:auto !important;
    top:5px !important;
    bottom:auto !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:0 !important;
}
.chat-mod-action-btn{
    width:auto !important;
    height:auto !important;
    min-width:18px !important;
    color:#53fc18 !important;
    opacity:0;
}
.chat-mod-action-btn .dots-icon{
    font-size:18px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    display:block;
    transform:translateY(-1px);
}
.reply-icon-btn{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    color:#a8abb8 !important;
    opacity:0;
}
.reply-icon-btn svg{ display:block; }
.chat-msg:hover .reply-icon-btn,
.chat-msg:hover .chat-mod-action-btn{ opacity:1 !important; }
.chat-bot-badge,
.chat-msg-content > svg{
    align-self:center !important;
    margin:0 2px 0 4px !important;
    transform:translateY(-1px) !important;
}
.chat-bot-badge svg{ transform:translateY(-1px); }
@media (max-width:768px){
    .chat-msg{ padding:8px 12px 8px 34px !important; }
    .reply-icon-btn,.chat-mod-action-btn{ opacity:1 !important; }
}


/* v11 chat layout refinement */
.chat-messages{
    padding:8px 4px !important;
    gap:4px !important;
    overflow-y:auto !important;
}
.chat-link{
    color:#4da3ff;
    text-decoration:none;
    direction:ltr;
    unicode-bidi:isolate;
    display:inline;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.chat-link:hover{ text-decoration:underline; }
.chat-msg{
    position:relative !important;
    display:block !important;
    padding:7px 10px 7px 10px !important;
    margin:0 !important;
    min-height:34px !important;
    border-radius:8px !important;
    overflow:visible !important;
}
.chat-msg:hover{ background:rgba(255,255,255,0.04); }
.chat-msg-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    min-width:0 !important;
}
.chat-msg-content{
    flex:1 1 auto !important;
    min-width:0 !important;
    padding:0 !important;
    display:block !important;
}
.chat-msg-inline{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:2px 4px !important;
    min-width:0 !important;
    line-height:1.45 !important;
    direction:rtl !important;
    unicode-bidi:plaintext !important;
}
.chat-user,
.chat-text,
.chat-link{
    line-height:1.45 !important;
    white-space:normal !important;
    word-break:normal !important;
}
.chat-user{
    flex:0 0 auto !important;
    font-weight:700 !important;
}
.chat-text{
    flex:1 1 auto !important;
    min-width:0 !important;
    color:#efeff1;
    overflow-wrap:break-word !important;
    word-break:normal !important;
}
.chat-msg-actions{ display:none !important; }
.chat-mod-action-btn{
    position:absolute !important;
    left:10px !important;
    top:-12px !important;
    z-index:6 !important;
    width:28px !important;
    height:22px !important;
    min-width:28px !important;
    padding:0 !important;
    border:1px solid rgba(83,252,24,0.30) !important;
    border-radius:999px !important;
    background:linear-gradient(180deg, rgba(25,54,19,0.97), rgba(17,35,14,0.98)) !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.32), 0 0 0 1px rgba(83,252,24,0.12) inset !important;
    color:#53fc18 !important;
    opacity:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.chat-mod-action-btn .dots-icon{
    display:block !important;
    font-size:16px !important;
    line-height:1 !important;
    letter-spacing:-1px !important;
    transform:translateY(-1px) !important;
    font-weight:900 !important;
}
.reply-icon-btn{
    position:static !important;
    transform:none !important;
    flex:0 0 auto !important;
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    color:#aeb3c2 !important;
    opacity:0 !important;
    z-index:4 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
}
.reply-icon-btn svg{
    width:16px !important;
    height:16px !important;
    display:block !important;
}
.reply-icon-btn:hover{ color:#fff !important; background:transparent !important; }
.chat-msg:hover .reply-icon-btn,
.chat-msg:hover .chat-mod-action-btn{ opacity:1 !important; }
.chat-bot-badge,
.chat-msg-content > svg,
.chat-msg-inline > svg{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    vertical-align:middle !important;
    margin:0 0 0 2px !important;
    transform:translateY(-2px) !important;
}
.chat-bot-badge svg{
    display:block !important;
    transform:translateY(0) !important;
}
.chat-msg .chat-text br{ display:block; margin:0; }
@media (max-width:768px){
    .chat-messages{ padding:8px 3px !important; }
    .chat-msg{ min-height:35px !important; padding:7px 9px !important; }
    .chat-mod-action-btn,
    .reply-icon-btn{ opacity:1 !important; }
    .chat-mod-action-btn{ left:8px !important; top:-11px !important; }
}

/* v12 final chat fixes */
.chat-messages{overflow-y:auto !important; overflow-x:hidden !important;}
.chat-msg{position:relative; display:block !important; min-height:40px; padding:8px 10px !important; margin:0 !important; border-bottom:1px solid rgba(255,255,255,0.02);}
.chat-msg-row{display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:8px !important; width:100% !important;}
.chat-msg-main{flex:1 1 auto; min-width:0;}
.chat-msg-content{display:flex !important; align-items:flex-start !important; gap:4px !important; min-width:0 !important; line-height:1.65 !important; white-space:normal !important; overflow-wrap:anywhere; word-break:normal;}
.chat-msg-content > svg,.chat-bot-badge{flex:0 0 auto; transform:translateY(1px) !important;}
.chat-user{flex:0 0 auto; font-weight:800;}
.chat-text{min-width:0; white-space:normal !important; overflow-wrap:anywhere; word-break:normal;}
.chat-link{overflow-wrap:anywhere; word-break:break-all;}
.chat-msg-side{flex:0 0 auto; width:34px; display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:1px;}
.reply-icon-btn{position:static !important; opacity:1 !important; background:transparent !important; border:none !important; color:#9ca3af; width:20px; height:20px; padding:0;}
.chat-mod-action-btn{position:static !important; opacity:1 !important; width:26px; height:20px; padding:0 6px; border-radius:999px; background:linear-gradient(180deg, rgba(83,252,24,0.22), rgba(24,140,8,0.22)); border:1px solid rgba(83,252,24,0.35); color:#7dff5a; box-shadow:0 2px 10px rgba(83,252,24,0.18);}
.chat-mod-action-btn .dots-icon{font-size:15px; line-height:1; transform:translateY(-1px);}
.reply-icon-btn svg{display:block;}
.bot-msg .chat-msg-content{align-items:flex-start !important;}
.system-msg{padding:8px 10px !important; background:rgba(83,252,24,0.05);}
.chat-system-text{color:#c8f8bb; font-size:12px; line-height:1.7;}
.deleted-preview-btn{margin-top:6px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:#ddd; border-radius:10px; padding:7px 9px; text-align:right; width:100%; cursor:pointer;}
.deleted-preview-btn small{display:block; color:#8f93a1; margin-top:3px;}
.deleted-preview-content{display:none; margin-top:7px; color:#fff;}
.deleted-preview-btn.open .deleted-preview-content{display:block;}
.chat-command-suggestions{display:none; position:absolute; bottom:100%; left:8px; right:8px; margin-bottom:8px; background:#11141a; border:1px solid rgba(83,252,24,0.18); border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,0.35); z-index:40; overflow:hidden;}
.chat-command-suggestion-item{display:block; width:100%; text-align:right; background:transparent; border:none; color:#fff; padding:10px 12px; cursor:pointer;}
.chat-command-suggestion-item:hover{background:rgba(83,252,24,0.08);}
.chat-input-area{position:relative;}
@media (max-width:768px){
  .chat-msg{padding:8px 8px !important;}
  .chat-msg-side{width:30px;}
}

/* v12 chat stability */
.chat-messages{
  padding:8px 6px !important;
  gap:6px !important;
  overflow-y:auto !important;
}
.chat-msg{
  position:relative !important;
  display:block !important;
  padding:8px 10px !important;
  min-height:40px !important;
  margin:0 !important;
  border-radius:10px !important;
  overflow:visible !important;
}
.chat-msg-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
  min-width:0 !important;
}
.chat-msg-content{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:block !important;
  text-align:right !important;
}
.chat-msg-inline{
  display:inline-flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  gap:3px 5px !important;
  min-width:0 !important;
  line-height:1.5 !important;
  direction:rtl !important;
  unicode-bidi:plaintext !important;
}
.chat-user{
  flex:0 0 auto !important;
  font-weight:700 !important;
  line-height:1.5 !important;
}
.chat-text{
  flex:1 1 auto !important;
  min-width:0 !important;
  line-height:1.5 !important;
  color:#efeff1 !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
.chat-text a,
.chat-link{
  direction:ltr !important;
  unicode-bidi:isolate !important;
  overflow-wrap:anywhere !important;
  word-break:break-all !important;
}
.chat-msg-tools{
  flex:0 0 auto !important;
  width:42px !important;
  min-width:42px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding-top:1px !important;
}
.chat-mod-action-btn,
.reply-icon-btn{
  position:static !important;
  opacity:1 !important;
}
.chat-mod-action-btn{
  width:30px !important;
  height:24px !important;
  min-width:30px !important;
  border:1px solid rgba(83,252,24,.34) !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, rgba(31,65,23,.98), rgba(17,34,13,.98)) !important;
  color:#53fc18 !important;
  box-shadow:0 4px 12px rgba(0,0,0,.24), 0 0 0 1px rgba(83,252,24,.08) inset !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.chat-mod-action-btn .dots-icon{
  font-size:16px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-1px !important;
  transform:translateY(-1px) !important;
}
.reply-icon-btn{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  color:#aeb3c2 !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:center !important;
}
.reply-icon-btn svg{
  width:16px !important;
  height:16px !important;
  display:block !important;
}
.chat-msg:hover{ background:rgba(255,255,255,.04) !important; }
.chat-mod-action-btn:hover{ filter:brightness(1.08); }
.reply-icon-btn:hover{ color:#fff !important; }
.chat-bot-badge,
.chat-role-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  flex:0 0 auto !important;
  margin-inline-start:2px !important;
  transform:translateY(-1px) !important;
}
.chat-bot-badge svg,
.chat-role-badge{
  width:18px !important;
  height:18px !important;
}
.bot-msg .chat-msg-inline{ align-items:flex-start !important; }
.system-msg{
  background:rgba(83,252,24,.06) !important;
}
.chat-system-text{
  color:#dfffd0 !important;
  font-size:13px !important;
  line-height:1.6 !important;
}
.deleted-msg{
  background:rgba(255,255,255,.03) !important;
}
.chat-deleted-text{
  color:#b9bfcc !important;
  font-size:13px !important;
}
.deleted-preview-btn{
  margin-top:6px !important;
  display:block !important;
  width:100% !important;
  text-align:right !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  color:#d9dbe5 !important;
  border-radius:8px !important;
  padding:6px 8px !important;
}
.deleted-preview-btn small{
  display:block !important;
  margin-top:2px !important;
  color:#8d93a4 !important;
}
.deleted-preview-content{
  display:none;
  margin-top:6px;
  color:#fff;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.deleted-preview-btn.open .deleted-preview-content{ display:block; }
.chat-command-suggestions{
  display:none;
  position:absolute;
  bottom:100%;
  right:10px;
  left:10px;
  margin-bottom:8px;
  background:#12161d;
  border:1px solid rgba(83,252,24,.14);
  border-radius:10px;
  overflow:hidden;
  z-index:30;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.chat-command-suggestion-item{
  width:100%;
  background:transparent;
  border:none;
  color:#fff;
  text-align:right;
  padding:9px 12px;
}
.chat-command-suggestion-item:hover{ background:rgba(83,252,24,.08); }
@media (max-width:768px){
  .chat-messages{ padding:8px 4px !important; }
  .chat-msg{ padding:8px 8px !important; min-height:39px !important; }
  .chat-msg-tools{ width:38px !important; min-width:38px !important; gap:7px !important; }
  .chat-mod-action-btn{ width:28px !important; min-width:28px !important; height:23px !important; }
}

/* v13 chat layout + auto height */
.chat-messages{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:8px 8px 12px !important;
}
.chat-msg{
  position:relative !important;
  display:block !important;
  flex:0 0 auto !important;
  min-height:34px !important;
  padding:7px 10px !important;
  margin:0 !important;
  border-radius:10px !important;
  background:rgba(255,255,255,0.02) !important;
  overflow:visible !important;
}
.chat-msg.bot-msg{ background:rgba(83,252,24,0.02) !important; }
.chat-msg-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
  min-width:0 !important;
}
.chat-msg-content{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:block !important;
  text-align:right !important;
}
.chat-msg-inline{
  display:inline-flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  align-content:flex-start !important;
  gap:2px 5px !important;
  min-width:0 !important;
  max-width:100% !important;
  line-height:1.48 !important;
  direction:rtl !important;
  unicode-bidi:plaintext !important;
}
.chat-bot-badge,.chat-role-badge,.chat-msg-inline > svg{
  flex:0 0 auto !important;
  display:inline-flex !important;
  vertical-align:middle !important;
  transform:translateY(-1px) !important;
  margin:0 0 0 2px !important;
}
.chat-user{
  flex:0 0 auto !important;
  font-weight:800 !important;
  line-height:1.48 !important;
}
.chat-text{
  min-width:0 !important;
  white-space:normal !important;
  line-height:1.48 !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
}
.chat-link{
  overflow-wrap:anywhere !important;
  word-break:break-all !important;
}
.chat-msg-tools{
  flex:0 0 auto !important;
  width:30px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  padding-top:1px !important;
}
.reply-icon-btn{
  position:static !important;
  width:18px !important;
  height:18px !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  color:#9298a6 !important;
  opacity:1 !important;
}
.reply-icon-btn svg{ width:16px !important; height:16px !important; display:block !important; }
.chat-mod-action-btn{
  position:static !important;
  width:28px !important;
  min-width:28px !important;
  height:22px !important;
  border-radius:999px !important;
  padding:0 6px !important;
  border:1px solid rgba(83,252,24,0.28) !important;
  background:linear-gradient(180deg, rgba(83,252,24,0.18), rgba(22,118,8,0.22)) !important;
  color:#8bff6c !important;
  box-shadow:0 4px 14px rgba(83,252,24,0.16) !important;
  opacity:1 !important;
}
.chat-mod-action-btn .dots-icon{ font-size:16px !important; line-height:1 !important; transform:translateY(-1px) !important; }
.system-msg{ background:rgba(83,252,24,0.04) !important; }
.chat-system-text{ color:#cef7c2 !important; line-height:1.7 !important; font-size:12px !important; }
.deleted-msg{ background:rgba(255,255,255,0.03) !important; }
.deleted-preview-btn{ margin-top:6px !important; }
@media (max-width:768px){
  .chat-messages{ padding:8px 6px 12px !important; }
  .chat-msg{ padding:7px 8px !important; }
  .chat-msg-tools{ width:28px !important; gap:7px !important; }
}


/* v14 chat cleanup */
.deleted-preview-btn{display:inline-flex !important; align-items:center !important; gap:6px !important; padding:0 !important; background:none !important; border:none !important; color:#a7f3d0 !important; font-size:12px !important; cursor:pointer !important; line-height:1.35 !important; text-align:right !important; box-shadow:none !important;}
.deleted-preview-btn .deleted-preview-summary{display:inline-flex !important; align-items:center !important; gap:4px !important; color:#9ca3af !important;}
.deleted-preview-btn .deleted-preview-content{display:none; margin-right:6px; color:#e5e7eb; max-width:100%;}
.deleted-preview-btn.open .deleted-preview-content{display:inline !important;}
.chat-msg.deleted-msg{min-height:34px !important; padding:6px 10px !important;}
.chat-msg.deleted-msg .chat-msg-row{align-items:center !important;}
.chat-msg.deleted-msg .chat-msg-content{line-height:1.35 !important;}
.chat-msg-tools .chat-mod-action-btn{display:none !important;}
.chat-command-suggestions{z-index:50;}
.chat-command-suggestion-item{cursor:pointer;}


/* v15 overrides */
.chat-msg{min-height:38px !important;}
.chat-msg-row{display:flex !important; align-items:flex-start !important; gap:8px !important;}
.chat-msg-content{flex:1 1 auto !important; min-width:0 !important;}
.chat-msg-inline{display:flex !important; align-items:flex-start !important; gap:4px !important; min-width:0 !important; flex-wrap:nowrap !important;}
.chat-user{flex:0 0 auto !important; white-space:nowrap !important;}
.chat-text{display:inline-block !important; min-width:0 !important; white-space:normal !important; overflow-wrap:normal !important; word-break:normal !important; line-break:auto !important;}
.chat-text a.chat-link{word-break:break-all !important; overflow-wrap:anywhere !important;}
.chat-inline-gif{max-width:180px !important; max-height:92px !important; width:auto !important; height:auto !important; object-fit:contain !important; vertical-align:middle !important; border-radius:6px !important;}
.chat-msg-tools{flex:0 0 auto !important; display:flex !important; align-items:center !important; align-self:flex-start !important; margin-right:auto !important;}
.reply-icon-btn{position:static !important; margin-top:2px !important; opacity:1 !important;}
.chat-ban-state{min-height:58px;}
.deleted-preview-btn{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}


/* --- v16 chat/gem/gif/mobile refinements --- */
.chat-msg{position:relative !important; display:block !important; margin:0 !important; padding:5px 8px !important; min-height:30px !important; box-sizing:border-box !important;}
.chat-msg-row{display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:8px !important; width:100% !important; min-height:20px !important;}
.chat-msg-content{flex:1 1 auto !important; min-width:0 !important; line-height:1.5 !important; overflow:hidden !important;}
.chat-msg-inline{display:flex !important; align-items:flex-start !important; gap:4px !important; min-width:0 !important; width:100% !important; flex-wrap:nowrap !important;}
.chat-user{flex:0 0 auto !important; white-space:nowrap !important;}
.chat-text{display:block !important; flex:1 1 auto !important; min-width:0 !important; white-space:normal !important; overflow-wrap:break-word !important; word-break:normal !important; line-break:auto !important;}
.chat-text a.chat-link{word-break:break-all !important; overflow-wrap:anywhere !important;}
.chat-text img.chat-inline-gif, .chat-inline-gif{max-width:min(180px, 55vw) !important; max-height:92px !important; width:auto !important; height:auto !important; object-fit:contain !important; vertical-align:middle !important; border-radius:6px !important; display:inline-block !important; margin:0 4px !important;}
.chat-msg-tools{flex:0 0 auto !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; width:22px !important; min-width:22px !important; margin-right:auto !important;}
.reply-icon-btn{position:static !important; margin-top:1px !important; width:20px !important; height:20px !important; opacity:1 !important;}
.chat-bot-badge,.chat-role-badge,.chat-msg-inline > svg{transform:translateY(-1px) !important;}

.gem-msg .chat-msg-content{overflow:visible !important;}
.gem-event-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:linear-gradient(135deg, rgba(14,18,20,.96), rgba(8,10,12,.98));border:1px solid rgba(255,255,255,.06);width:100%;min-width:0;box-sizing:border-box;box-shadow:0 14px 30px rgba(0,0,0,.22);position:relative;overflow:hidden;}
.gem-event-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(83,252,24,.14), transparent 38%);pointer-events:none;}
.gem-event-card.tier-2{border-color:rgba(83,252,24,.16);}
.gem-event-card.tier-3{border-color:rgba(83,252,24,.22);box-shadow:0 16px 32px rgba(0,0,0,.24), 0 0 0 1px rgba(83,252,24,.05) inset;}
.gem-event-card.tier-4{border-color:rgba(255,215,0,.24);box-shadow:0 18px 36px rgba(0,0,0,.26), 0 0 18px rgba(83,252,24,.08);}
.gem-event-card.tier-5{border-color:rgba(255,215,0,.34);box-shadow:0 18px 38px rgba(0,0,0,.28), 0 0 24px rgba(255,215,0,.1);}
.gem-event-gift-wrap{position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:16px;background:radial-gradient(circle at 50% 18%, rgba(83,252,24,.18), transparent 55%), rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);}
.gem-event-gift{display:block;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.3));}
.gem-event-gift-badge{position:absolute;left:-2px;bottom:-2px;width:20px;height:20px;border-radius:999px;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 14px rgba(0,0,0,.22);}
.gem-event-badge-icon{width:12px !important;height:12px !important;}
.gem-event-main{display:flex;flex-direction:column;min-width:0;gap:4px;position:relative;z-index:1;flex:1 1 auto;}
.gem-event-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;}
.gem-event-user{color:#fff;font-weight:900;font-size:13px;}
.gem-event-verb{color:#cfe9c5;font-size:12px;font-weight:700;}
.gem-event-amount-pill{display:inline-flex;align-items:center;gap:2px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(83,252,24,.15);color:#eef4f7;font-size:12px;font-weight:800;line-height:1;white-space:nowrap;direction:ltr;}
.gem-event-amount-pill strong{font-size:12px;color:#fff;}
.gem-event-amount-pill span:last-child{color:#9df471;font-size:11px;font-weight:900;letter-spacing:.02em;}
.gem-event-pill-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0;}
.gem-event-pill-icon .top-supporter-gem-svg{width:14px !important;height:14px !important;}
.gem-event-note{display:block;color:#eef1f4;min-width:0;overflow-wrap:break-word;word-break:normal;line-height:1.8;font-size:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);padding:8px 10px;border-radius:12px;}
.gem-event-note a{word-break:break-all;}
@media (max-width: 640px){
  .gem-event-card{padding:9px 10px;gap:8px;border-radius:14px;}
  .gem-event-gift-wrap{width:46px;height:46px;border-radius:14px;}
  .gem-event-gift{width:39px;height:39px;}
  .gem-event-gift-badge{width:18px;height:18px;}
  .gem-event-user{font-size:12px;}
  .gem-event-verb,.gem-event-note{font-size:11px;}
  .gem-event-amount-pill{padding:4px 8px;font-size:11px;}
}

@media (max-width: 849px){
  .chat-msg{padding:4px 6px !important;}
  .chat-inline-gif{max-width:min(160px, 58vw) !important; max-height:86px !important;}
  .gem-event-card{padding:6px 8px; gap:6px;}
}

html.mobile-chat-is-open, body.mobile-chat-is-open { overflow: hidden !important; height: 100vh !important; }
@media (max-width: 768px) {
  body.mobile-chat-is-open .main-wrapper, body.mobile-chat-is-open .content, body.mobile-chat-is-open .stream-layout-container { height: 100vh !important; overflow: hidden !important; }
  body.mobile-chat-is-open .video-section { overflow: hidden !important; }
  .st-actions { align-items:center !important; }
  .st-viewers-badge { order: -1; margin-left: auto; }
  #mobile-chat-toggle { position: sticky; bottom: 0; z-index: 8; }
  .chat-section.custom-chat { display:flex; flex-direction:column; min-height:0; }
  #chatBox { min-height:0; overscroll-behavior:contain; }
}
.chat-msg-row{display:flex !important; align-items:flex-start !important; gap:8px !important; min-height:32px !important;}
.chat-msg{padding:6px 10px !important; margin:0 !important; line-height:1.55 !important;}
.chat-msg-content{display:flex !important; align-items:flex-start !important; gap:4px !important; flex:1 1 auto !important; min-width:0 !important; overflow:hidden !important;}
.chat-msg-content > svg, .chat-msg-content .chat-bot-badge, .chat-msg-content .chat-verified-badge{transform:translateY(-1px) !important; flex:0 0 auto !important;}
.chat-user{flex:0 0 auto !important; white-space:nowrap !important;}
.chat-text{flex:1 1 auto !important; min-width:0 !important; white-space:pre-wrap !important; overflow-wrap:break-word !important; word-break:normal !important;}
.chat-text a, .chat-link{word-break:break-all !important; overflow-wrap:anywhere !important;}
.chat-msg-tools{flex:0 0 auto !important; display:flex !important; align-items:center !important; min-width:20px !important;}
.reply-icon-btn{margin-top:2px !important; align-self:flex-start !important;}
.chat-inline-gif{display:inline-block !important; vertical-align:middle !important; max-width:min(170px,55vw) !important; max-height:88px !important; width:auto !important; height:auto !important;}
.donate-btn .donate-text-wrap{direction:unset !important; text-align:start !important;}
.donate-btn.is-marquee .donate-text{animation-duration:10s !important; animation-timing-function:linear !important;}
.donate-btn.is-marquee-rtl .donate-text{padding-inline-start:100% !important; animation-name:donateTickerRtl !important;}
.donate-btn.is-marquee-ltr .donate-text{padding-inline-end:100% !important; animation-name:donateTickerLtr !important;}
@keyframes donateTickerRtl{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes donateTickerLtr{from{transform:translateX(0)}to{transform:translateX(100%)}}


/* ===== v18 final overrides ===== */
.chat-msg{padding:5px 10px !important; min-height:28px !important;}
.chat-msg-row{display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:start !important; gap:6px !important; width:100% !important; min-height:28px !important;}
.chat-msg-content{display:flex !important; align-items:flex-start !important; flex-wrap:wrap !important; gap:4px !important; min-width:0 !important; overflow:visible !important; line-height:1.55 !important;}
.chat-msg-content > svg,.chat-msg-content .chat-bot-badge,.chat-msg-content .chat-role-badge{flex:0 0 auto !important; margin-top:0 !important; transform:translateY(-2px) !important;}
.chat-user{flex:0 0 auto !important; white-space:nowrap !important; margin-left:4px !important;}
.chat-text{display:inline !important; flex:1 1 auto !important; min-width:0 !important; white-space:pre-wrap !important; overflow-wrap:break-word !important; word-break:normal !important; line-break:auto !important;}
.chat-link,a.chat-link{word-break:break-all !important; overflow-wrap:anywhere !important;}
.chat-msg-tools{flex:0 0 auto !important; display:flex !important; align-items:flex-start !important; justify-content:flex-start !important; min-width:24px !important; margin-right:auto !important; padding-top:1px !important;}
.reply-icon-btn{position:static !important; opacity:1 !important; margin:0 !important; padding:2px !important; align-self:flex-start !important; transform:none !important;}
.chat-msg:hover .reply-icon-btn{opacity:1 !important;}
.chat-inline-gif{max-width:min(170px,58vw) !important; max-height:96px !important; height:auto !important; width:auto !important; object-fit:contain !important;}
.chat-bot-badge,.streamer-badge,.mod-badge,.site-admin-badge{vertical-align:middle !important;}
.streamer-badge{filter:drop-shadow(0 2px 5px rgba(124,58,237,.35));}
.donate-btn{width:140px !important; min-width:140px !important; max-width:140px !important;}
.donate-btn .donate-text-wrap{display:inline-block !important; width:72px !important; overflow:hidden !important; white-space:nowrap !important;}
.donate-btn.is-marquee .donate-text{animation-duration:7.5s !important;}
@media (max-width:849px){
  body.mobile-chat-is-open{overflow:hidden !important;}
  .video-section{overflow:visible !important;}
  #mobile-bottom-area{display:grid !important; grid-template-rows:auto 1fr !important; min-height:0 !important;}
  .chat-section.custom-chat{width:100% !important; min-height:58vh !important; max-height:58vh !important; display:flex !important; flex-direction:column !important;}
  body.mobile-chat-is-open .chat-section.custom-chat{min-height:58vh !important; max-height:58vh !important;}
  .chat-messages{flex:1 1 auto !important; min-height:0 !important; padding:8px !important;}
  .chat-input-wrapper{position:sticky !important; bottom:0 !important; z-index:9 !important; background:#0b0e14 !important;}
  .chat-input-area{padding:10px 12px calc(10px + env(safe-area-inset-bottom)) !important;}
  .st-title-bar{display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important;}
  #st-title{justify-self:start !important; text-align:right !important;}
  .st-viewers-badge{justify-self:end !important; margin-right:auto !important;}
}


/* ===== v19 mobile/live fixes ===== */
@media (max-width:849px){
  .st-title-bar{display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:'title viewers' 'actions actions' !important; row-gap:8px !important; align-items:center !important;}
  #st-title{grid-area:title !important; margin:0 !important;}
  .st-viewers-badge{grid-area:viewers !important; justify-self:start !important; margin:0 !important; margin-left:0 !important; padding:0 !important; position:relative !important; left:auto !important;}
  .st-actions{grid-area:actions !important; width:100% !important; justify-content:flex-start !important; gap:8px !important; flex-direction:row !important;}
  .st-actions .share-btn span{display:none !important;}
  .st-actions .share-btn{width:38px !important; min-width:38px !important; padding:8px !important; justify-content:center !important; border-radius:10px !important;}
  .follow-btn,.donate-btn{font-size:13px !important; padding:8px 12px !important; border-radius:10px !important;}
  .follow-btn,.donate-btn{min-height:36px !important;}
  .st-dropdown-container{display:none !important;}
  #mobile-bottom-area{position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:60 !important; display:block !important; pointer-events:none !important;}
  #mobile-chat-toggle,.chat-section.custom-chat{pointer-events:auto !important;}
  .mobile-spacer{display:none !important;}
  #mobile-chat-toggle{position:relative !important; bottom:0 !important; margin-top:0 !important; box-shadow:0 -8px 24px rgba(0,0,0,.28);}
  .chat-section.custom-chat{display:none !important; width:100% !important; height:56vh !important; max-height:56vh !important; min-height:56vh !important; background:#0b0e14 !important; border-top:1px solid rgba(255,255,255,.06) !important;}
  body.mobile-chat-is-open .chat-section.custom-chat{display:flex !important; flex-direction:column !important;}
  .chat-input-wrapper{position:sticky !important; bottom:0 !important;}
  .chat-messages{padding:8px 10px 10px !important;}
  .chat-msg{padding:6px 8px !important;}
}


/* ===== v20 mobile/header polish ===== */
.st-title-bar{display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:'title viewers' 'actions actions' !important; row-gap:10px !important; align-items:center !important;}
#st-title{grid-area:title !important; min-width:0 !important;}
.st-viewers-badge{grid-area:viewers !important; justify-self:start !important; margin:0 !important; padding:0 !important;}
.st-actions{grid-area:actions !important; width:100% !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:10px !important; flex-wrap:wrap !important;}
#st-username{direction:ltr !important; text-align:center !important; unicode-bidi:isolate !important; letter-spacing:.15px;}
.follow-btn svg,.donate-btn svg,.share-btn svg,.st-btn-icon svg{flex:0 0 auto;}
.follow-icon-svg{fill:none; stroke:currentColor; filter:drop-shadow(0 2px 4px rgba(83,252,24,.18));}
@media (max-width:849px){
  .st-title-bar{grid-template-columns:auto minmax(0,1fr) !important; grid-template-areas:'viewers title' 'actions actions' !important; column-gap:10px !important;}
  .st-viewers-badge{justify-self:start !important; align-self:center !important; margin-left:0 !important;}
  #st-title{justify-self:end !important; text-align:right !important;}
  .st-actions{justify-content:flex-start !important; gap:8px !important;}
  .follow-btn,.donate-btn{font-size:13px !important; padding:8px 12px !important; border-radius:4px !important; min-height:37px !important;}
  .follow-btn{min-width:118px !important;}
  .donate-btn{width:138px !important; min-width:138px !important; max-width:138px !important; border-radius:4px !important;}
  .donate-btn .donate-text-wrap{width:70px !important;}
  .st-actions .share-btn,.st-btn-icon{width:40px !important; min-width:40px !important; height:37px !important; padding:8px !important; border-radius:4px !important; display:inline-flex !important;}
  .st-actions .share-btn span{display:none !important;}
  .st-dropdown-container{display:inline-flex !important;}
}
.donate-btn .donate-text-wrap{direction:unset !important; text-align:start !important; overflow:hidden !important; white-space:nowrap !important;}
.donate-btn .donate-text{display:inline-block !important; white-space:nowrap !important; will-change:transform !important;}
.donate-btn.is-marquee .donate-text{animation-duration:12s !important; animation-timing-function:linear !important; animation-iteration-count:infinite !important;}
.donate-btn.is-marquee-rtl .donate-text{animation-name:donateTickerRtlV20 !important;}
.donate-btn.is-marquee-ltr .donate-text{animation-name:donateTickerLtrV20 !important;}
@keyframes donateTickerRtlV20{0%{transform:translateX(0)}100%{transform:translateX(calc(var(--ticker-distance, 150px) * -1))}}
@keyframes donateTickerLtrV20{0%{transform:translateX(calc(var(--ticker-distance, 150px) * -1))}100%{transform:translateX(0)}}


/* ===== v21 fixes ===== */
.action-btn,.st-btn-icon{border-radius:6px !important;}
.follow-icon-svg{width:17px !important;height:17px !important;}
.donate-btn .donate-text-wrap{width:80px !important;}
.donate-btn.is-marquee .donate-text{padding-inline-start:110% !important; animation:donateMarqueeLeft 9.5s linear infinite !important;}
.donate-btn.is-marquee-ltr .donate-text,.donate-btn.is-marquee-rtl .donate-text{animation:donateMarqueeLeft 9.5s linear infinite !important;}
@keyframes donateMarqueeLeft{0%{transform:translateX(0)}100%{transform:translateX(calc(var(--ticker-distance,150px) * -1))}}
.chat-msg{padding:6px 10px !important; min-height:32px !important;}
.chat-msg-row{grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; min-height:32px !important;}
.chat-msg-content{align-items:flex-start !important; flex-wrap:nowrap !important;}
.chat-user{margin-left:3px !important;}
.chat-text{display:block !important; overflow-wrap:break-word !important; word-break:normal !important; min-width:0 !important;}
.chat-text a,.chat-link{word-break:break-all !important;}
.chat-msg-tools{align-items:center !important; padding-top:0 !important; min-width:26px !important;}
.reply-icon-btn{align-self:center !important;}
@media (max-width:849px){
  .st-title-bar{grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:'title viewers' 'actions actions' !important;}
  #st-title{justify-self:start !important; text-align:right !important;}
  .st-viewers-badge{justify-self:end !important; margin-right:0 !important; margin-left:auto !important;}
  .follow-btn,.donate-btn{border-radius:3px !important;}
  .st-actions{justify-content:flex-start !important;}
}


/* v22 fixes */
.action-btn,.st-btn-icon,.modal-btn,.modal-select,.modal-textarea,.chat-input-area button#sendBtn{border-radius:4px !important;}
.follow-btn,.donate-btn,.share-btn{border-radius:4px !important;}
.follow-btn{background:#53fc18 !important;color:#fff !important;}
.follow-btn:hover{background:#49df13 !important;color:#fff !important;}
.follow-btn.following{background:#24272c !important;color:#fff !important;}
.follow-btn .follow-icon-svg{width:18px !important;height:18px !important;stroke:currentColor;fill:none;flex:0 0 auto;}
.donate-btn{border-radius:4px !important;overflow:hidden !important;}
.donate-btn .donate-text-wrap{display:block !important; width:84px !important; overflow:hidden !important; white-space:nowrap !important; direction:ltr !important; text-align:center !important;}
.donate-btn .donate-text{display:inline-block !important; white-space:nowrap !important; min-width:max-content !important; padding-inline-start:110% !important; animation:donateMarqueeLeft 8.5s linear infinite !important; will-change:transform !important;}
.donate-btn:not(.is-marquee) .donate-text{animation:donateMarqueeLeft 8.5s linear infinite !important;}
@keyframes donateMarqueeLeft{0%{transform:translateX(0)}100%{transform:translateX(calc(-100% - 20px))}}
.chat-msg{position:relative; display:block !important; margin:0 0 6px 0 !important; min-height:34px !important;}
.chat-msg-row{display:flex !important; align-items:flex-start !important; gap:8px !important; width:100% !important;}
.chat-msg-content{flex:1 1 auto !important; min-width:0 !important; line-height:1.45 !important;}
.chat-msg-tools{flex:0 0 auto !important; align-self:center !important; min-width:22px !important;}
.reply-icon-btn{position:static !important; transform:none !important; align-self:center !important; margin:0 !important;}
.chat-text{display:inline !important; white-space:pre-wrap !important; overflow-wrap:anywhere !important; word-break:normal !important;}
.chat-inline-gif{display:inline-block !important; vertical-align:middle !important;}
#chatBox{overflow-y:auto !important; contain:layout paint style; }


/* v23 hotfix */
.follow-btn{background:#53fc18 !important;color:#0b0b0d !important;border-color:rgba(0,0,0,.12) !important;}
.follow-btn:hover{background:#4ae116 !important;color:#0b0b0d !important;}
.follow-btn .follow-icon-svg,.follow-btn #follow-text,.follow-btn span{color:#0b0b0d !important;stroke:currentColor !important;fill:none !important;}
.follow-btn.following{background:#24272c !important;color:#fff !important;}
.follow-btn.following .follow-icon-svg,.follow-btn.following #follow-text,.follow-btn.following span{color:#fff !important;stroke:currentColor !important;}
.donate-btn{border-radius:4px !important;overflow:hidden !important;}
.donate-btn .donate-text-wrap{direction:ltr !important;text-align:center !important;display:inline-block !important;width:74px !important;overflow:hidden !important;vertical-align:middle !important;}
.donate-btn .donate-text{display:inline-block !important;min-width:max-content !important;white-space:nowrap !important;will-change:transform !important;}
.donate-btn.is-marquee-ltr .donate-text{padding-inline-start:100% !important;padding-inline-end:0 !important;animation:donateMarqueeLtr 9s linear infinite !important;}
.donate-btn.is-marquee-rtl .donate-text{padding-inline-start:0 !important;padding-inline-end:100% !important;animation:donateMarqueeRtl 9s linear infinite !important;}
@keyframes donateMarqueeLtr{0%{transform:translateX(0)}100%{transform:translateX(calc(var(--ticker-distance,150px) * -1))}}
@keyframes donateMarqueeRtl{0%{transform:translateX(calc(var(--ticker-distance,150px) * -1))}100%{transform:translateX(0)}}


@media (min-width: 0px){ .top-nav, .site-header, .main-header { min-height: 60px !important; } .header-inner, .nav-inner { min-height: 60px !important; padding-top: 8px !important; padding-bottom: 8px !important; } }


/* ===== v38 polish overrides ===== */
@media (min-width: 850px){
  header,.top-nav,.site-header,.main-header{min-height:52px !important; padding-top:4px !important; padding-bottom:4px !important;}
  .header-inner,.nav-inner{min-height:52px !important; padding-top:4px !important; padding-bottom:4px !important;}
  .logo-image img{height:60px !important; max-width:290px !important; margin-block:-2px !important;}
  .follow-btn,.donate-btn,.share-btn,.st-btn-icon{border-radius:4px !important;}
}

.chat-msg{padding:7px 10px !important;}
.chat-msg-row{align-items:center !important; min-height:30px !important;}
.chat-msg-content{align-items:center !important; line-height:1.5 !important;}
.chat-msg-content > svg,
.chat-msg-content .chat-bot-badge,
.chat-msg-content .chat-role-badge,
.chat-msg-content .streamer-badge{transform:translateY(1px) !important;}
.chat-bot-badge svg,
.chat-role-badge,
.streamer-badge{display:inline-flex !important; align-items:center !important; justify-content:center !important;}
.chat-inline-gif{height:24px !important; max-height:24px !important; width:auto !important; max-width:24px !important; border-radius:4px !important; vertical-align:middle !important;}

.donate-btn{border-radius:4px !important;}
.donate-btn .donate-text-wrap{width:82px !important; overflow:hidden !important; white-space:nowrap !important; direction:unset !important; text-align:start !important;}
.donate-btn .donate-track{display:inline-flex !important; align-items:center !important; gap:26px !important; white-space:nowrap !important; will-change:transform !important;}
.donate-btn .donate-text-seg{display:inline-block !important; white-space:nowrap !important;}
.donate-btn.is-marquee .donate-track{animation:donateLoop 6.8s linear infinite !important;}
@keyframes donateLoop{from{transform:translateX(0)}to{transform:translateX(-50%)} }

@media (max-width:849px){
  #mobile-bottom-area{position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:60 !important; display:block !important; pointer-events:none !important;}
  #mobile-chat-toggle,.chat-section.custom-chat{pointer-events:auto !important;}
  #mobile-chat-toggle{position:relative !important; bottom:0 !important; margin-top:0 !important; box-shadow:0 -8px 24px rgba(0,0,0,.28);}
  .chat-section.custom-chat{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:min(44vh, 420px) !important;
    min-height:min(44vh, 420px) !important;
    max-height:min(44vh, 420px) !important;
    background:#0b0e14 !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
    border-top-left-radius:14px !important;
    border-top-right-radius:14px !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(calc(100% + 10px)) !important;
    transition:transform .28s cubic-bezier(.22,.9,.22,1), opacity .22s ease, visibility 0s linear .28s !important;
  }
  body.mobile-chat-is-open .chat-section.custom-chat{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
    transition-delay:0s !important;
  }
  .chat-input-wrapper{position:sticky !important; bottom:0 !important; z-index:5 !important;}
  .chat-messages{padding:8px 10px 10px !important;}
}


/* ===== v39 final polish overrides ===== */
@media (min-width: 850px){
  header,.top-nav,.site-header,.main-header{min-height:50px !important; padding-top:3px !important; padding-bottom:3px !important;}
  .header-inner,.nav-inner{min-height:50px !important; padding-top:3px !important; padding-bottom:3px !important;}
  .logo-image img{height:58px !important; max-width:280px !important; margin-block:-4px !important;}
}

.chat-msg{padding:8px 10px !important;}
.chat-msg-row{display:flex !important; align-items:center !important; gap:8px !important; width:100% !important; min-height:34px !important;}
.chat-msg-content{display:flex !important; align-items:center !important; flex:1 1 auto !important; min-width:0 !important; gap:4px !important; line-height:1.45 !important; overflow:visible !important;}
.chat-msg-content > svg,
.chat-msg-content .chat-bot-badge,
.chat-msg-content .chat-role-badge,
.chat-msg-content .streamer-badge{transform:translateY(2px) !important; flex:0 0 auto !important;}
.chat-msg-tools{flex:0 0 auto !important; display:flex !important; align-items:center !important; align-self:center !important; min-width:22px !important;}
.reply-icon-btn{position:static !important; align-self:center !important; margin:0 !important; padding:1px !important; transform:none !important;}
.reply-icon-btn svg{display:block !important; width:16px !important; height:16px !important;}
.chat-msg .chat-inline-gif,
.chat-text .chat-inline-gif,
.chat-msg .chat-text img.chat-inline-gif{
  width:36px !important;
  min-width:36px !important;
  max-width:36px !important;
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  object-fit:cover !important;
  border-radius:6px !important;
  display:inline-block !important;
  vertical-align:middle !important;
  margin:0 4px !important;
}
.editable-input img[data-gif]{
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  height:28px !important;
  min-height:28px !important;
  max-height:28px !important;
  object-fit:cover !important;
  border-radius:5px !important;
  vertical-align:middle !important;
}

.donate-btn{border-radius:4px !important;}
.donate-btn .donate-text-wrap{
  display:block !important;
  width:82px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  direction:unset !important;
  text-align:start !important;
  unicode-bidi:plaintext !important;
}
.donate-btn .donate-track{
  display:inline-flex !important;
  align-items:center !important;
  gap:24px !important;
  white-space:nowrap !important;
  width:max-content !important;
  will-change:transform !important;
}
.donate-btn .donate-text-seg,
.donate-btn .donate-text{
  display:inline-block !important;
  white-space:nowrap !important;
}
.donate-btn.is-marquee .donate-track{animation-duration:6.1s !important; animation-timing-function:linear !important; animation-iteration-count:infinite !important;}
.donate-btn.is-marquee-ltr .donate-track{animation-name:donateLoopLtrV39 !important;}
.donate-btn.is-marquee-rtl .donate-track{direction:rtl !important; animation-name:donateLoopRtlV39 !important;}
@keyframes donateLoopLtrV39{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes donateLoopRtlV39{from{transform:translateX(-50%)}to{transform:translateX(0)}}

@media (max-width:849px){
  #mobile-bottom-area{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:60 !important;
    display:block !important;
    pointer-events:none !important;
  }
  #mobile-chat-toggle,
  .chat-section.custom-chat{pointer-events:auto !important;}
  #mobile-chat-toggle{
    position:relative !important;
    bottom:0 !important;
    margin-top:0 !important;
    border-top-left-radius:12px !important;
    border-top-right-radius:12px !important;
    box-shadow:0 -8px 24px rgba(0,0,0,.28) !important;
  }
  .chat-section.custom-chat{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:min(36vh, 340px) !important;
    min-height:min(36vh, 340px) !important;
    max-height:min(36vh, 340px) !important;
    background:#0b0e14 !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
    border-top-left-radius:14px !important;
    border-top-right-radius:14px !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(calc(100% + 8px)) !important;
    transition:transform .34s cubic-bezier(.22,.9,.22,1), opacity .26s ease, visibility 0s linear .34s !important;
  }
  body.mobile-chat-is-open .chat-section.custom-chat{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
    transition-delay:0s !important;
  }
  .chat-input-wrapper{position:sticky !important; bottom:0 !important; z-index:5 !important;}
  .chat-messages{padding:8px 10px 8px !important;}
}


/* ===== v40 mobile chat + gif size final tweaks ===== */
.chat-msg .chat-inline-gif,
.chat-text .chat-inline-gif,
.chat-msg .chat-text img.chat-inline-gif{
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  height:28px !important;
  min-height:28px !important;
  max-height:28px !important;
  object-fit:cover !important;
  border-radius:6px !important;
  vertical-align:middle !important;
}

@media (max-width:849px){
  #mobile-bottom-area{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:80 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
    pointer-events:none !important;
    padding-bottom:0 !important;
    gap:0 !important;
  }
  #mobile-bottom-area .mobile-spacer{display:none !important; height:0 !important; min-height:0 !important;}
  #mobile-chat-toggle,
  .chat-section.custom-chat{pointer-events:auto !important;}
  #mobile-chat-toggle{
    order:2 !important;
    position:relative !important;
    bottom:0 !important;
    margin:0 !important;
    min-height:54px !important;
    padding:13px 16px calc(13px + env(safe-area-inset-bottom)) !important;
    border-top-left-radius:14px !important;
    border-top-right-radius:14px !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
    box-shadow:0 -10px 24px rgba(0,0,0,.24) !important;
  }
  .chat-section.custom-chat{
    order:1 !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:min(39vh, 360px) !important;
    min-height:min(39vh, 360px) !important;
    max-height:min(39vh, 360px) !important;
    border-top-left-radius:14px !important;
    border-top-right-radius:14px !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
    background:#0b0e14 !important;
    overflow:hidden !important;
    box-shadow:0 -12px 30px rgba(0,0,0,.28) !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(calc(100% + 6px)) !important;
    transition:transform .30s cubic-bezier(.22,.9,.22,1), opacity .24s ease, visibility 0s linear .30s !important;
  }
  body.mobile-chat-is-open .chat-section.custom-chat{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
    transition-delay:0s !important;
  }
  .chat-input-wrapper{
    position:sticky !important;
    bottom:0 !important;
    z-index:6 !important;
    background:#0b0e14 !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }
  .chat-messages{padding:10px 12px 8px !important;}
}


/* ===== v41 final mobile chat + anti-duplicate fixes ===== */
@media (min-width: 850px){
  header,.top-nav,.site-header,.main-header,.header-inner,.nav-inner{min-height:46px !important; height:auto !important; padding-top:2px !important; padding-bottom:2px !important;}
  .logo-image img,#header-logo,.site-logo img{height:62px !important; max-width:300px !important;}
}

.send-btn.is-sending{opacity:.7 !important; pointer-events:none !important; filter:saturate(.9);}

@media (max-width:849px){
  #mobile-bottom-area{
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    display:block !important;
    z-index:85 !important;
    pointer-events:none !important;
  }
  #mobile-chat-toggle,.chat-section.custom-chat{pointer-events:auto !important;}
  #mobile-chat-toggle{
    position:relative !important;
    z-index:3 !important;
    margin:0 !important;
    min-height:48px !important;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
    border-radius:0 !important;
    background:linear-gradient(180deg, rgba(8,14,24,.97), rgba(6,10,18,.99)) !important;
    border-top:1px solid rgba(83,252,24,.12) !important;
    box-shadow:0 -8px 22px rgba(0,0,0,.28) !important;
  }
  .chat-section.custom-chat{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:calc(48px + env(safe-area-inset-bottom)) !important;
    width:100% !important;
    height:min(31vh, 292px) !important;
    min-height:min(31vh, 292px) !important;
    max-height:min(31vh, 292px) !important;
    border-radius:0 !important;
    background:linear-gradient(180deg, #08101a 0%, #09111c 58%, #0a111b 100%) !important;
    border-top:1px solid rgba(83,252,24,.10) !important;
    box-shadow:0 -14px 28px rgba(0,0,0,.30) !important;
    transform:translateY(calc(100% + 6px)) !important;
    opacity:1 !important;
    visibility:visible !important;
    transition:transform .30s cubic-bezier(.22,.9,.22,1) !important;
    overflow:hidden !important;
    z-index:2 !important;
  }
  body.mobile-chat-is-open .chat-section.custom-chat{
    transform:translateY(0) !important;
  }
  body.mobile-chat-is-open #mobile-chat-toggle{
    box-shadow:0 -8px 18px rgba(0,0,0,.18) !important;
  }
  .chat-header{
    background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)) !important;
    border-bottom:1px solid rgba(255,255,255,.045) !important;
    min-height:38px !important;
    padding:8px 14px !important;
  }
  .chat-messages{
    padding:8px 10px 6px !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .chat-input-wrapper{
    background:linear-gradient(180deg, rgba(7,10,17,.92), rgba(11,14,22,.98)) !important;
    border-top:1px solid rgba(255,255,255,.05) !important;
  }
  .chat-msg{
    background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.01)) !important;
    border:1px solid rgba(255,255,255,.035) !important;
    border-radius:12px !important;
    margin-bottom:8px !important;
  }
}

/* ===== v44 mobile chat drawer corrected: toggle rises with drawer ===== */
@media (max-width:849px){
  :root{
    --mobile-chat-toggle-h: 52px;
    --mobile-chat-panel-h: min(39vh, 320px);
  }
  #mobile-bottom-area{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:90 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    height:calc(var(--mobile-chat-toggle-h) + var(--mobile-chat-panel-h) + env(safe-area-inset-bottom)) !important;
    transform:translateY(calc(var(--mobile-chat-panel-h) + 1px)) !important;
    transition:transform .34s cubic-bezier(.22,.9,.22,1) !important;
    pointer-events:none !important;
    overflow:hidden !important;
    border-top-left-radius:16px !important;
    border-top-right-radius:16px !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
    box-shadow:0 -14px 30px rgba(0,0,0,.28) !important;
    background:linear-gradient(180deg,#08101a 0%,#09111c 58%,#0a111b 100%) !important;
  }
  body.mobile-chat-is-open #mobile-bottom-area{
    transform:translateY(0) !important;
  }
  #mobile-chat-toggle,
  .chat-section.custom-chat{pointer-events:auto !important;}
  #mobile-chat-toggle{
    order:1 !important;
    position:relative !important;
    z-index:3 !important;
    min-height:var(--mobile-chat-toggle-h) !important;
    height:var(--mobile-chat-toggle-h) !important;
    padding:10px 16px !important;
    margin:0 !important;
    border-radius:0 !important;
    background:linear-gradient(180deg, rgba(8,14,24,.97), rgba(6,10,18,.99)) !important;
    border-top-left-radius:16px !important;
    border-top-right-radius:16px !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
    border-top:1px solid rgba(83,252,24,.10) !important;
    border-bottom:1px solid rgba(255,255,255,.04) !important;
    box-shadow:none !important;
    flex:0 0 var(--mobile-chat-toggle-h) !important;
  }
  .chat-section.custom-chat{
    order:2 !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    flex:0 0 var(--mobile-chat-panel-h) !important;
    height:var(--mobile-chat-panel-h) !important;
    min-height:var(--mobile-chat-panel-h) !important;
    max-height:var(--mobile-chat-panel-h) !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    border-radius:0 !important;
    background:transparent !important;
    border-top:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }
  .chat-header{display:none !important;}
  .chat-messages{
    padding:8px 10px 6px !important;
    height:100% !important;
  }
  .chat-input-wrapper{
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }
  body:not(.mobile-chat-is-open) .chat-section.custom-chat{
    pointer-events:none !important;
  }
}

/* ===== v45 mobile drawer final layout fix ===== */
@media (max-width:849px){
  :root{
    --mobile-chat-toggle-h: 50px;
    --mobile-chat-panel-h: min(34vh, 290px);
  }
  #mobile-bottom-area{
    height:calc(var(--mobile-chat-toggle-h) + var(--mobile-chat-panel-h) + env(safe-area-inset-bottom)) !important;
    transform:translateY(var(--mobile-chat-panel-h)) !important;
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.mobile-chat-is-open #mobile-bottom-area{
    transform:translateY(0) !important;
  }
  .chat-section.custom-chat{
    order:1 !important;
    background:linear-gradient(180deg,#07111a 0%, #07111a 100%) !important;
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
    border-top:1px solid rgba(83,252,24,.06) !important;
  }
  #mobile-chat-toggle{
    order:2 !important;
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
    border-top:1px solid rgba(255,255,255,.05) !important;
    border-bottom:0 !important;
    box-shadow:none !important;
  }
  .chat-messages{
    padding:6px 8px 4px !important;
    gap:3px !important;
  }
  .chat-msg{
    padding:3px 8px !important;
    min-height:26px !important;
    border-radius:12px !important;
    margin:0 !important;
  }
  .chat-msg-row{min-height:24px !important; gap:6px !important;}
  .chat-msg-content{line-height:1.42 !important;}
  .chat-input-wrapper{
    padding-top:4px !important;
    background:linear-gradient(180deg, rgba(7,17,26,0), #07111a 18%) !important;
  }
}

/* ===== v46 mobile chat drawer: toggle rises with drawer ===== */
@media (max-width:849px){
  :root{
    --mobile-chat-toggle-h: 48px;
    --mobile-chat-panel-h: min(31vh, 270px);
  }
  #mobile-bottom-area{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:1100 !important;
    display:flex !important;
    flex-direction:column !important;
    height:calc(var(--mobile-chat-toggle-h) + var(--mobile-chat-panel-h) + env(safe-area-inset-bottom)) !important;
    transform:translateY(var(--mobile-chat-panel-h)) !important;
    transition:transform .32s cubic-bezier(.22,.8,.2,1) !important;
    background:#07111a !important;
    border-top:1px solid rgba(255,255,255,.05) !important;
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
    overflow:hidden !important;
    box-shadow:0 -12px 30px rgba(0,0,0,.30) !important;
  }
  body.mobile-chat-is-open #mobile-bottom-area{ transform:translateY(0) !important; }
  #mobile-chat-toggle,
  .chat-section.custom-chat{ pointer-events:auto !important; }
  #mobile-chat-toggle{
    order:1 !important;
    position:relative !important;
    z-index:2 !important;
    min-height:var(--mobile-chat-toggle-h) !important;
    height:var(--mobile-chat-toggle-h) !important;
    flex:0 0 var(--mobile-chat-toggle-h) !important;
    margin:0 !important;
    padding:10px 14px !important;
    background:linear-gradient(180deg, rgba(8,14,24,.98), rgba(6,10,18,.99)) !important;
    border-radius:0 !important;
    border-top:0 !important;
    border-bottom:1px solid rgba(255,255,255,.04) !important;
    box-shadow:none !important;
  }
  .chat-section.custom-chat{
    order:2 !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    flex:0 0 var(--mobile-chat-panel-h) !important;
    height:var(--mobile-chat-panel-h) !important;
    min-height:var(--mobile-chat-panel-h) !important;
    max-height:var(--mobile-chat-panel-h) !important;
    background:#07111a !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    border-radius:0 !important;
    border-top:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }
  .chat-header{ display:none !important; }
  .chat-messages{
    padding:6px 8px 4px !important;
    gap:2px !important;
    overflow-y:auto !important;
    background:#07111a !important;
  }
  .chat-msg{
    margin:0 !important;
    padding:2px 8px !important;
    min-height:24px !important;
    border-radius:10px !important;
  }
  .chat-msg-row{ min-height:22px !important; gap:5px !important; }
  .chat-msg-content{ line-height:1.35 !important; }
  .chat-input-wrapper{
    background:#07111a !important;
    padding-top:4px !important;
    border-top:1px solid rgba(255,255,255,.04) !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
  }
}

/* ===== v47 mobile chat drawer absolute layout fix ===== */
@media (max-width:849px){
  :root{
    --mobile-chat-toggle-h: 46px;
    --mobile-chat-panel-h: min(33vh, 285px);
  }
  #mobile-bottom-area{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:1200 !important;
    height:calc(var(--mobile-chat-toggle-h) + var(--mobile-chat-panel-h) + env(safe-area-inset-bottom)) !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    transform:translateY(var(--mobile-chat-panel-h)) !important;
    transition:transform .32s cubic-bezier(.22,.8,.2,1) !important;
    pointer-events:none !important;
  }
  body.mobile-chat-is-open #mobile-bottom-area{transform:translateY(0) !important;}
  #mobile-bottom-area > .mobile-spacer{display:none !important; width:0 !important; height:0 !important; flex:0 0 0 !important;}

  #mobile-bottom-area > #mobile-chat-toggle{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:var(--mobile-chat-toggle-h) !important;
    min-height:var(--mobile-chat-toggle-h) !important;
    max-height:var(--mobile-chat-toggle-h) !important;
    margin:0 !important;
    padding:0 14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:linear-gradient(180deg, rgba(6,12,20,.98), rgba(5,10,17,.99)) !important;
    border-top:1px solid rgba(255,255,255,.05) !important;
    border-bottom:1px solid rgba(255,255,255,.04) !important;
    border-radius:0 !important;
    box-shadow:0 -8px 24px rgba(0,0,0,.25) !important;
    z-index:3 !important;
    pointer-events:auto !important;
  }
  #mobile-bottom-area > #mobile-chat-toggle span{flex:1 1 auto !important; text-align:center !important;}

  #mobile-bottom-area > .chat-section.custom-chat{
    position:absolute !important;
    top:var(--mobile-chat-toggle-h) !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:var(--mobile-chat-panel-h) !important;
    min-height:var(--mobile-chat-panel-h) !important;
    max-height:var(--mobile-chat-panel-h) !important;
    display:flex !important;
    flex-direction:column !important;
    background:#07111a !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    pointer-events:auto !important;
    z-index:2 !important;
  }
  #mobile-bottom-area > .chat-section.custom-chat::before{content:''; position:absolute; inset:0; background:#07111a; z-index:0;}
  #mobile-bottom-area > .chat-section.custom-chat > *{position:relative; z-index:1;}
  .chat-header{display:none !important;}
  .chat-messages{padding:4px 6px 3px !important; gap:2px !important;}
  .chat-msg{padding:4px 8px !important; border-radius:5px !important;}
  .reply-icon-btn{top:6px !important; left:5px !important;}
  .chat-input-area{padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important; gap:6px !important;}
  .chat-input-area .editable-input{min-height:36px !important; padding:7px 10px !important; border-radius:5px !important;}
  .chat-input-area button#sendBtn{width:38px !important; height:36px !important; border-radius:5px !important;}
}


/* ===== v48 mobile chat drawer fully fills dark area and toggle rises ===== */
@media (max-width:849px){
  :root{
    --mobile-chat-toggle-h: 48px;
    --mobile-chat-panel-actual-h: 320px;
  }
  #mobile-bottom-area{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:1300 !important;
    height:0 !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    pointer-events:none !important;
    transform:none !important;
  }
  #mobile-bottom-area > .mobile-spacer{display:none !important; width:0 !important; height:0 !important; flex:0 0 0 !important;}
  #mobile-bottom-area > #mobile-chat-toggle{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    height:var(--mobile-chat-toggle-h) !important;
    min-height:var(--mobile-chat-toggle-h) !important;
    max-height:var(--mobile-chat-toggle-h) !important;
    margin:0 !important;
    padding:0 14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:linear-gradient(180deg, rgba(6,12,20,.99), rgba(5,10,17,.99)) !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
    border-bottom:1px solid rgba(255,255,255,.04) !important;
    border-radius:0 !important;
    box-shadow:0 -8px 24px rgba(0,0,0,.24) !important;
    z-index:4 !important;
    pointer-events:auto !important;
    transition:transform .34s cubic-bezier(.22,.8,.2,1) !important;
    transform:translateY(0) !important;
  }
  body.mobile-chat-is-open #mobile-bottom-area > #mobile-chat-toggle{
    transform:translateY(calc(-1 * var(--mobile-chat-panel-actual-h))) !important;
  }
  #mobile-bottom-area > #mobile-chat-toggle span{flex:1 1 auto !important; text-align:center !important;}
  #mobile-bottom-area > .chat-section.custom-chat{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:var(--mobile-chat-panel-actual-h) !important;
    min-height:var(--mobile-chat-panel-actual-h) !important;
    max-height:var(--mobile-chat-panel-actual-h) !important;
    display:flex !important;
    flex-direction:column !important;
    background:#07111a !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    pointer-events:auto !important;
    z-index:3 !important;
    transform:translateY(calc(100% + 1px)) !important;
    opacity:0 !important;
    transition:transform .34s cubic-bezier(.22,.8,.2,1), opacity .2s ease !important;
  }
  body.mobile-chat-is-open #mobile-bottom-area > .chat-section.custom-chat{
    transform:translateY(0) !important;
    opacity:1 !important;
  }
  #mobile-bottom-area > .chat-section.custom-chat::before{content:''; position:absolute; inset:0; background:#07111a; z-index:0;}
  #mobile-bottom-area > .chat-section.custom-chat > *{position:relative; z-index:1;}
  .chat-header{display:none !important;}
  .chat-messages{
    padding:3px 6px 2px !important;
    gap:1px !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    align-content:flex-start !important;
  }
  .chat-msg{
    padding:3px 7px !important;
    border-radius:5px !important;
    margin:0 !important;
  }
  .reply-icon-btn{top:5px !important; left:5px !important;}
  .chat-input-wrapper{background:#07111a !important; border-top:1px solid rgba(255,255,255,.04) !important;}
  .chat-input-area{padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important; gap:6px !important;}
  .chat-input-area .editable-input{min-height:36px !important; padding:7px 10px !important; border-radius:5px !important;}
  .chat-input-area button#sendBtn{width:38px !important; height:36px !important; border-radius:5px !important;}
}


/* ===== v49 mobile drawer full-height + slightly larger chat rows ===== */
@media (max-width: 849px){
  :root{
    --mobile-chat-toggle-h: 50px;
  }
  body.mobile-chat-is-open #mobile-bottom-area > #mobile-chat-toggle{
    transform:translateY(calc(-1 * var(--mobile-chat-panel-actual-h))) !important;
  }
  #mobile-bottom-area > .chat-section.custom-chat{
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
  }
  .chat-messages{
    padding:6px 8px 6px !important;
    gap:4px !important;
    font-size:16px !important;
  }
  .chat-message,
  .chat-messages > div,
  .chat-msg,
  .chat-item{
    min-height:42px !important;
  }
  .chat-msg-content,
  .chat-message-content{
    font-size:16px !important;
    line-height:1.55 !important;
  }
  .chat-user{font-size:16px !important;}
  .chat-text{font-size:15px !important;}
}


/* ===== chat pin ===== */
.chat-pin-box{
  margin:8px 10px 8px;
  border:1px solid rgba(152,160,175,.28);
  background:linear-gradient(180deg, #1f2630 0%, #1b212a 100%);
  border-radius:8px;
  overflow:hidden;
  max-height:58px;
  transition:max-height .3s cubic-bezier(.22,.8,.2,1), border-color .2s ease, background .2s ease;
  flex:0 0 auto;
}
.chat-pin-box.is-expanded{border-color:rgba(152,160,175,.35);}
.chat-pin-header{
  width:100%; background:transparent; border:0; color:#eef3f8; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 12px; min-height:56px; text-align:left; font-family:inherit;
}
.chat-pin-header-left,.chat-pin-header-right,.chat-pin-bot{display:flex; align-items:center;}
.chat-pin-header-left{gap:8px; min-width:0; flex:1 1 auto;}
.chat-pin-header-right{gap:12px; color:#f2f6fb; flex:0 0 auto;}
.chat-pin-label{font-size:18px; font-weight:800; line-height:1;}
.chat-pin-sep{width:1px; height:16px; background:rgba(255,255,255,.35); display:inline-block;}
.chat-pin-bot{gap:8px; min-width:0;}
.chat-pin-pinicon{display:inline-flex; align-items:center; justify-content:center; color:#54fc18; transform:translateY(-1px);}
.chat-pin-pinicon svg,.chat-pin-hideicon svg,.chat-pin-chevron svg,.chat-pin-verify svg{display:block;}
.chat-pin-botname{font-size:18px; font-weight:800; line-height:1; color:#6dff48;}
.chat-pin-verify{display:inline-flex; align-items:center; justify-content:center; transform:translateY(-1px);}
.chat-pin-hideicon{display:inline-flex; align-items:center; justify-content:center; color:#f1f4f8; opacity:.92; transform:translateY(-1px);}
.chat-pin-chevron{display:inline-flex; align-items:center; justify-content:center; color:#f1f4f8; transition:transform .26s ease; transform:translateY(-1px);}
.chat-pin-box.is-expanded .chat-pin-chevron{transform:translateY(-1px) rotate(180deg);}
.chat-pin-body{padding:0 12px 14px; opacity:0; transform:translateY(-6px); transition:opacity .24s ease, transform .24s ease; pointer-events:none;}
.chat-pin-box.is-expanded .chat-pin-body{opacity:1; transform:translateY(0); pointer-events:auto;}
.chat-pin-message{color:#ffffff; font-size:19px; font-weight:700; line-height:1.6; text-align:left; word-break:break-word; overflow-wrap:anywhere; white-space:normal;}

@media (max-width:849px){
  .chat-pin-box{margin:8px 8px 8px; border-radius:8px; max-height:68px;}
  .chat-pin-header{min-height:68px; padding:14px 12px;}
  .chat-pin-label,.chat-pin-botname{font-size:23px;}
  .chat-pin-message{font-size:22px; line-height:1.68; padding-bottom:8px;}
  .chat-pin-pinicon svg,.chat-pin-hideicon svg,.chat-pin-chevron svg,.chat-pin-verify svg{width:19px; height:19px;}
  .chat-pin-header-right{gap:10px;}
}

@media (max-width:480px){
  .chat-pin-box{margin:8px 8px 8px; max-height:66px;}
  .chat-pin-header{min-height:66px; padding:14px 12px;}
  .chat-pin-label,.chat-pin-botname{font-size:18px;}
  .chat-pin-pinicon svg,.chat-pin-hideicon svg,.chat-pin-chevron svg,.chat-pin-verify svg{width:17px; height:17px;}
  .chat-pin-message{font-size:17px; line-height:1.82; padding-bottom:10px;}
  .chat-messages{padding-top:6px !important;}
}

/* ===== desktop kick-like stream layout patch ===== */
#desktop-stream-info{display:none}
@media (min-width:1024px){
  #desktop-stream-info{
    display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
    margin-top:24px;padding:14px 18px 14px;background:#050607;border-top:1px solid #0f1114;border-bottom:1px solid #24272c;border-radius:0;
    min-height:88px;
  }
  #mobile-collapsible-info{display:none !important}
  .stream-layout-container{display:grid !important;grid-template-columns:minmax(0,1fr) 340px !important;height:calc(100vh - 65px) !important;background:#000 !important}
  .video-section{min-width:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid #24272c !important}
  .iframe-wrapper,.simple-player-shell{flex:1 1 auto;min-height:0;border:none !important;box-shadow:none !important;background:#000 !important}
  .simple-video-wrap{height:100%;aspect-ratio:auto !important;background:#000 !important}
  .simple-loading-cover,#stream-player{object-fit:contain}
  .chat-section.custom-chat{width:auto !important;border-left:1px solid #24272c;background:#0b0b0c !important}
  .chat-header{min-height:46px;padding:11px 14px;border-bottom:2px solid #24272c;text-align:center;font-size:16px;font-weight:700}
  .chat-top-supporters{padding:10px 10px 8px;border-bottom:1px solid #24272c;background:#0b0b0c}
  .top-supporters-shell{display:flex;align-items:stretch;gap:10px;width:100%;min-width:0}
  .top-supporter-card{display:flex;align-items:center;gap:8px;min-width:0;background:#0f1114;border:1px solid #24272c;border-radius:4px;padding:8px 10px;color:#fff}
  .top-supporter-card.is-empty{opacity:.74}
  .top-supporter-card-rank1{flex:0 1 52%;min-width:0}
  .top-supporter-side-list{display:flex;flex:1 1 48%;min-width:0;flex-direction:column;gap:8px}
  .top-supporter-card-compact{justify-content:space-between;min-height:38px}
  .top-supporter-card-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}
  .top-supporter-rank{display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .top-supporter-rank-icon{display:block;object-fit:contain}
  .top-supporter-rank-icon-lg{width:32px;height:32px}
  .top-supporter-rank-icon-sm{width:16px;height:16px}
  .top-supporter-main-copy{display:flex;flex-direction:column;min-width:0;gap:2px}
  .top-supporter-name-wrap{min-width:0;flex:1 1 auto}
  .top-supporter-name{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-supporter-name-rank1{color:#ffb14a;font-size:12px;font-weight:800;text-align:left}
  .top-supporter-name-rank2{color:#f2f4f6;font-size:12px;font-weight:700}
  .top-supporter-name-rank3{color:#ff8e42;font-size:12px;font-weight:700}
  .top-supporter-amount-row{display:flex;align-items:center;gap:5px;min-width:0;flex:0 0 auto;color:#aeb4be;font-size:12px;font-weight:700}
  .top-supporter-amount{color:#d5d8de;font-size:12px;font-weight:700;direction:ltr}
  .top-supporter-gem-svg{width:16px;height:16px;flex:0 0 auto}
  .desktop-stream-left{display:flex;align-items:flex-start;gap:14px;min-width:0;flex:1}
  .desktop-stream-avatar{position:relative;width:64px;height:64px;min-width:64px;border:none;background:transparent;padding:0;cursor:pointer}
  .desktop-stream-avatar img{width:64px;height:64px;border-radius:999px;border:4px solid #53fc18;object-fit:cover;display:block}
  .desktop-live-badge{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);background:#53fc18;color:#0b0b0c;font-weight:800;font-size:10px;line-height:1;padding:4px 6px;border-radius:4px}
  .desktop-stream-copy{min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:2px}
  .desktop-stream-name-row{display:flex;align-items:center;gap:8px;min-width:0}
  .desktop-stream-name-row h2{margin:0;color:#fff;font-size:18px;line-height:1.2;font-weight:800;white-space:nowrap}
  .desktop-verified-badge{display:inline-flex;width:18px;height:18px;color:#53fc18;flex:0 0 auto}.desktop-verified-badge svg{width:100%;height:100%}
  .desktop-stream-title{margin:0;color:#fff;font-size:13px;font-weight:700;max-width:860px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .desktop-stream-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .desktop-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:#31343b;color:#fff;font-size:12px;font-weight:600}
  .desktop-tag-primary{background:transparent;color:#53fc18;padding-inline:0}
  .desktop-stream-right{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:0 0 auto}
  .desktop-action-row{display:flex;align-items:center;gap:8px}
  .desktop-icon-btn,.desktop-follow-mini{width:40px;height:40px;border:none;border-radius:4px;background:#3a3f46;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
  .desktop-icon-btn svg,.desktop-follow-mini svg{width:18px;height:18px;fill:currentColor}
  .desktop-pill-btn{height:40px;border:none;border-radius:4px;background:#3a3f46;color:#fff;padding:0 14px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;cursor:pointer}
  .desktop-pill-btn svg{width:18px;height:18px;fill:currentColor}
  .desktop-subscribe-btn{height:40px;border:none;border-radius:4px;background:#53fc18;color:#0b0b0c;padding:0 14px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;cursor:pointer}
  .desktop-subscribe-btn svg{width:18px;height:18px;fill:currentColor}
  .desktop-meta-row{display:flex;align-items:center;gap:12px;color:#fff}
  .desktop-viewers{display:flex;align-items:center;gap:6px;color:#53fc18;font-size:13px;font-weight:800}.desktop-viewers span:last-child{color:#a8acb3;font-weight:700}
  .desktop-viewers svg{width:16px;height:16px;fill:#fff;flex:0 0 auto}
  .desktop-plain-icon{width:24px;height:24px;border:none;background:transparent;color:#fff;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:.95}
  .desktop-plain-icon svg{width:16px;height:16px;fill:currentColor}
  .chat-messages{padding:8px 6px 10px !important;font-size:14px !important}
  .chat-input-wrapper{border-top:1px solid #24272c;background:#0b0b0c}
}
@media (max-width:1023px){#desktop-stream-info{display:none !important}}


/* v39 button dot4 + chat top gifters polish */
.chat-input-area,.chat-ban-state{border-radius:4px !important;}
#sendBtn,#emojiBtn,.mobile-send-btn,.mobile-emoji-btn{border-radius:4px !important;}
.chat-input-wrapper .editable-input{border-radius:4px !important;}
.chat-top-gifters-grid .gifter-card{box-shadow:none;}


@media (max-width: 1023px){
  .chat-top-supporters{padding:8px 10px;border-bottom:1px solid #24272c;background:#0b0b0c}
  .top-supporters-shell{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    align-items:stretch;
  }
  .top-supporter-card,
  .top-supporter-card-rank1,
  .top-supporter-card-compact{
    flex:none;
    min-width:0;
    min-height:64px;
    padding:8px 8px;
    border-radius:4px;
    justify-content:center;
  }
  .top-supporter-card-rank1,
  .top-supporter-side-list{
    display:contents;
  }
  .top-supporter-card,
  .top-supporter-card-left{
    flex-direction:column;
    gap:4px;
    text-align:center;
  }
  .top-supporter-side-list{min-width:0}
  .top-supporter-name-wrap,
  .top-supporter-main-copy{width:100%;align-items:center}
  .top-supporter-name,
  .top-supporter-name-rank1,
  .top-supporter-name-rank2,
  .top-supporter-name-rank3{
    max-width:100%;
    text-align:center;
    font-size:11px;
  }
  .top-supporter-rank-icon-lg{width:22px;height:22px}
  .top-supporter-rank-icon-sm{width:18px;height:18px}
  .top-supporter-amount-row{justify-content:center;font-size:11px}
  .top-supporter-amount{font-size:11px}
}

/* ===== v40 top supporters redesign desktop + mobile accordion ===== */
@media (min-width:1024px){
  .chat-top-supporters{
    padding:9px 10px 8px;
    border-bottom:1px solid #24272c;
    background:linear-gradient(180deg,#0a0c10 0%,#090b0f 100%);
  }
  .mobile-top-supporters-toggle{display:none !important;}
  .top-supporters-shell{
    gap:8px;
  }
  .top-supporter-card{
    background:linear-gradient(180deg,rgba(20,24,30,.96),rgba(11,14,18,.96));
    border:1px solid rgba(255,255,255,.08);
    border-radius:5px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  }
  .top-supporter-card-rank1{
    flex:0 1 54%;
    padding:8px 10px;
    gap:8px;
  }
  .top-supporter-side-list{flex:1 1 46%;gap:8px;}
  .top-supporter-card-compact{min-height:36px;padding:6px 8px;}
  .top-supporter-rank-icon-lg{width:30px;height:30px;}
  .top-supporter-rank-icon-sm{width:16px;height:16px;}
  .top-supporter-main-copy{gap:2px;}
  .top-supporter-name-rank1{font-size:13px;font-weight:800;color:#ffb54a;}
  .top-supporter-name-rank2{font-size:12px;font-weight:700;color:#eef1f5;}
  .top-supporter-name-rank3{font-size:12px;font-weight:700;color:#f09b5c;}
  .top-supporter-amount-row{gap:4px;}
  .top-supporter-amount{font-size:12px;color:#c8ced8;}
}

@media (max-width:1023px){
  .chat-top-supporters{
    position:relative;
    padding:0 !important;
    background:#081019 !important;
    border-bottom:1px solid rgba(255,255,255,.05) !important;
    overflow:hidden;
  }
  .mobile-top-supporters-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:0;
    background:linear-gradient(180deg,rgba(8,16,25,.98),rgba(6,13,20,.98));
    color:#fff;
    padding:8px 10px;
    margin:0;
    cursor:pointer;
  }
  .mobile-top-supporters-preview{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    flex:1 1 auto;
  }
  .mobile-top-supporters-preview.is-empty{opacity:.76;}
  .mobile-top-supporters-rank{width:24px;height:24px;display:block;object-fit:contain;flex:0 0 auto;}
  .mobile-top-supporters-preview-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
  }
  .mobile-top-supporters-preview-name{
    display:block;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#ffb54a;
    font-size:12px;
    font-weight:800;
    line-height:1.15;
  }
  .mobile-top-supporters-preview-amount{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:#cdd3dc;
    font-size:11px;
    font-weight:700;
    line-height:1.15;
  }
  .mobile-top-supporters-preview-amount .top-supporter-gem-svg{width:14px;height:14px;}
  .mobile-top-supporters-toggle-right{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:6px;
    color:#c9d1db;
  }
  .mobile-top-supporters-toggle-label{font-size:11px;font-weight:700;color:#8f98a5;}
  .mobile-top-supporters-chevron{transition:transform .24s ease;}
  .chat-top-supporters.is-expanded .mobile-top-supporters-chevron{transform:rotate(180deg);}
  .top-supporters-shell{
    display:none;
    padding:0 9px 7px;
    grid-template-columns:1fr;
    gap:7px;
    background:#081019;
  }
  .chat-top-supporters.is-expanded .top-supporters-shell{display:grid;}
  .top-supporter-card,
  .top-supporter-card-rank1,
  .top-supporter-card-compact{
    min-height:40px;
    padding:6px 8px;
    border-radius:5px;
    background:linear-gradient(180deg,rgba(17,22,29,.98),rgba(11,15,21,.98));
    border:1px solid rgba(255,255,255,.07);
    justify-content:space-between;
    flex-direction:row;
  }
  .top-supporter-card-rank1,
  .top-supporter-side-list{display:contents;}
  .top-supporter-card-left,
  .top-supporter-main-copy,
  .top-supporter-name-wrap{display:flex;align-items:center;gap:8px;min-width:0;width:auto;}
  .top-supporter-main-copy{flex:1 1 auto;justify-content:space-between;}
  .top-supporter-name,
  .top-supporter-name-rank1,
  .top-supporter-name-rank2,
  .top-supporter-name-rank3{
    text-align:right;
    font-size:12px;
    max-width:100%;
  }
  .top-supporter-rank-icon-lg,
  .top-supporter-rank-icon-sm{width:18px;height:18px;}
  .top-supporter-amount-row{justify-content:flex-end;font-size:11px;}
  .top-supporter-amount{font-size:11px;}
}


/* ===== v41 tighter mobile top supporters + immediate live updates ===== */
.top-supporter-amount{display:inline-flex;align-items:center;}
.top-supporter-amount-text{display:inline-block;line-height:1;}

@media (max-width:1023px){
  .chat-top-supporters{
    margin-top:0 !important;
    padding:2px 8px 0 !important;
    background:transparent !important;
    border-bottom:0 !important;
    overflow:visible !important;
  }
  .mobile-top-supporters-toggle{display:none !important;}
  .top-supporters-shell{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:0 !important;
    padding:0 !important;
    background:transparent !important;
    overflow:visible !important;
  }
  .top-supporter-card,
  .top-supporter-card-rank1,
  .top-supporter-card-compact{
    min-height:auto !important;
    padding:0 8px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    direction:rtl;
    position:relative;
  }
  .top-supporter-card-rank1,
  .top-supporter-card-compact{
    flex:1 1 0;
    min-width:0;
    display:flex !important;
    align-items:center;
    gap:5px !important;
  }
  .top-supporter-card-rank1::after,
  .top-supporter-card-rank2::after{
    content:'|';
    position:absolute;
    left:-1px;
    top:50%;
    transform:translateY(-50%);
    color:rgba(255,255,255,.22);
    font-size:14px;
    font-weight:700;
    line-height:1;
    pointer-events:none;
  }
  .top-supporter-side-list{
    flex:2 1 0;
    min-width:0;
    display:flex !important;
    align-items:center;
    gap:0 !important;
  }
  .top-supporter-main-copy,
  .top-supporter-card-left,
  .top-supporter-name-wrap{
    display:flex;
    align-items:center;
    gap:5px !important;
    min-width:0;
  }
  .top-supporter-main-copy,
  .top-supporter-card-left{
    flex:1 1 auto;
    justify-content:flex-start;
  }
  .top-supporter-main-copy{flex-direction:row;}
  .top-supporter-name-wrap{flex:0 1 auto;}
  .top-supporter-rank-icon-lg,
  .top-supporter-rank-icon-sm{width:16px !important;height:16px !important;}
  .top-supporter-name,
  .top-supporter-name-rank1,
  .top-supporter-name-rank2,
  .top-supporter-name-rank3{
    display:block;
    font-size:11px !important;
    line-height:1.05 !important;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:right;
  }
  .top-supporter-amount-row{
    margin-inline-start:auto;
    gap:3px !important;
    flex:0 0 auto;
    white-space:nowrap;
    justify-content:flex-start;
  }
  .top-supporter-amount{font-size:10px !important;line-height:1 !important;}
  .top-supporter-gem-svg{width:12px !important;height:12px !important;}
  .top-supporter-card.is-empty{opacity:.88;}
  .top-supporter-card.is-empty .top-supporter-name,
  .top-supporter-card.is-empty .top-supporter-name-rank1,
  .top-supporter-card.is-empty .top-supporter-name-rank2,
  .top-supporter-card.is-empty .top-supporter-name-rank3{display:block !important;color:#a8afb9 !important;}
}


.gem-chat-msg-content{width:100%;}
.top-supporters-mobile-separator{display:none;align-self:center;color:#707887;font-weight:900;font-size:14px;line-height:1;}
.top-supporters-mobile-separator-inline{display:none;}
@media (max-width:768px){
  .chat-top-supporters{padding:6px 10px 6px !important;background:#0b0b0c !important;}
  .mobile-top-supporters-toggle{display:none !important;}
  .top-supporters-shell{display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;grid-template-columns:none !important;padding:0 !important;}
  .top-supporter-side-list{display:flex !important;align-items:center !important;flex-direction:row !important;gap:8px !important;flex:0 1 auto !important;min-width:0 !important;}
  .top-supporter-card,.top-supporter-card-rank1,.top-supporter-card-compact{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;min-height:0 !important;display:flex !important;align-items:center !important;gap:6px !important;flex:0 1 auto !important;width:auto !important;max-width:none !important;position:relative;}
  .top-supporter-card-left,.top-supporter-main-copy,.top-supporter-name-wrap{display:flex !important;align-items:center !important;gap:6px !important;min-width:0 !important;width:auto !important;}
  .top-supporter-main-copy,.top-supporter-card-left{flex-direction:row !important;justify-content:flex-start !important;}
  .top-supporter-rank-icon-lg,.top-supporter-rank-icon-sm{width:18px !important;height:18px !important;}
  .top-supporter-name,.top-supporter-name-rank1,.top-supporter-name-rank2,.top-supporter-name-rank3{font-size:11px !important;line-height:1.3 !important;max-width:62px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;text-align:right !important;display:block !important;}
  .top-supporter-amount-row{gap:3px !important;justify-content:flex-start !important;}
  .top-supporter-amount{font-size:10px !important;}
  .top-supporter-gem-svg{width:11px !important;height:11px !important;}
  .top-supporter-card.is-empty .top-supporter-name,.top-supporter-card.is-empty .top-supporter-name-rank1,.top-supporter-card.is-empty .top-supporter-name-rank2,.top-supporter-card.is-empty .top-supporter-name-rank3{color:#aeb5bf !important;}
  .top-supporters-mobile-separator,.top-supporters-mobile-separator-inline{display:inline-flex !important;align-items:center !important;justify-content:center !important;}
  .top-supporter-side-list .top-supporters-mobile-separator-inline{margin-inline:2px;}
}

/* exact controls + pinned + about + gift subs popup */
.desktop-icon-slot{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.desktop-icon-slot svg{display:block;width:18px;height:18px;fill:currentColor}
.desktop-action-row{position:relative;gap:8px}
.desktop-action-row .is-hidden{display:none !important}
.desktop-notify-btn.is-active{background:#3a3f46;color:#fff}
.desktop-follow-mini.is-hollow{background:#3a3f46 !important;color:#fff !important}
.desktop-follow-mini.is-filled{background:#53fc18 !important;color:#0b0b0c !important}
.desktop-follow-mini.is-filled .desktop-icon-slot svg{fill:currentColor}
.desktop-subscribe-pill{background:#53fc18 !important;color:#0b0b0c !important;font-weight:800}
.desktop-subscribe-pill .desktop-icon-slot svg{width:18px;height:18px;fill:currentColor}
.desktop-gift-btn{background:#53fc18 !important;color:#0b0b0c !important;font-weight:800}
.desktop-gift-btn.is-open{background:#3a3f46 !important;color:#fff !important}
.desktop-gift-btn .desktop-icon-slot svg{width:20px;height:20px;fill:currentColor}
.desktop-subscribed-badge{background:rgba(58,63,70,.58) !important;color:#fff !important;outline:1px solid rgba(255,255,255,.05)}
.desktop-subscribed-badge .desktop-icon-slot svg{width:18px;height:18px;fill:currentColor}
.desktop-action-row.is-subscribed #desktopSubscribedBadge{order:3}
.desktop-action-row.is-subscribed #desktopGiftSubsBtn{order:4}
.desktop-action-row:not(.is-subscribed) #desktopSubscribeBtn{order:3}
.desktop-action-row:not(.is-subscribed) #desktopGiftSubsBtn{order:4}

.gift-subs-popover{position:fixed;z-index:900;direction:ltr}
.gift-subs-popover[hidden]{display:none !important}
.gift-subs-card{width:408px;max-width:min(408px,calc(100vw - 24px));background:#111317;border:1px solid #2a2d31;border-radius:12px;box-shadow:0 22px 80px rgba(0,0,0,.48);padding:16px;display:flex;flex-direction:column;gap:10px;color:#fff}
.gift-subs-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gift-subs-header h2{margin:0;font-size:16px;font-weight:800;color:#fff}
.gift-subs-close{width:32px;height:32px;border:none;border-radius:8px;background:#2a2d31;color:#fff;font-size:22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.gift-subs-subtext,.gift-subs-footer{margin:0;color:#9aa4af;font-size:12px;line-height:1.7}
.gift-subs-list{max-height:302px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-inline-end:3px}
.gift-sub-row{display:flex;align-items:center;gap:10px;background:#1a1d22;border-radius:8px;padding:12px}
.gift-sub-row-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.gift-sub-row-icon svg{width:20px;height:20px;display:block}
.gift-sub-row-label{flex:1 1 auto;font-size:14px;font-weight:700;color:#fff}
.gift-sub-row-price{border:none;border-radius:8px;background:#53fc18;color:#0b0b0c;font-size:13px;font-weight:800;padding:8px 12px;cursor:pointer}
.gift-sub-row-custom{align-items:center}
.gift-sub-custom-input{width:48px;height:32px;border:1px solid #3a3f46;border-radius:8px;background:#0b0b0c;color:#fff;text-align:center;outline:none}
.gift-sub-custom-copy{display:flex;flex-direction:column;gap:4px;flex:1 1 auto}
.gift-sub-custom-hint{color:#9aa4af;font-size:11px;line-height:1}
body.gift-subs-open{overflow:hidden}
@media (max-width:1023px){
  .gift-subs-popover{inset:0 !important;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.66);padding:0}
  .gift-subs-card{width:100%;max-width:none;border-radius:18px 18px 0 0;padding:18px 16px 20px;max-height:92dvh}
  .gift-subs-list{max-height:58dvh}
}

.chat-pin-box{margin:8px 8px 10px;border-radius:10px;border:2px solid rgba(118,255,85,.32);background:#14161a;overflow:hidden;transition:max-height .28s ease,border-color .22s ease}
.chat-pin-outer{padding:8px 8px 10px}
.chat-pin-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.chat-pin-top-meta{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.chat-pin-sent-label{font-size:12px;font-weight:700;color:#e5ebf1}
.chat-pin-badges{display:flex;align-items:center;gap:4px}
.chat-pin-badge-square,.chat-pin-badge-verify{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
.chat-pin-badge-square svg,.chat-pin-badge-verify svg{width:18px;height:18px;display:block}
.chat-pin-bot-button{border:none;background:transparent;color:#e9113c;font-size:13px;font-weight:800;padding:0;cursor:default}
.chat-pin-hide-btn,.chat-pin-expand-btn{width:32px;height:32px;border:none;border-radius:8px;background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.chat-pin-hide-btn svg,.chat-pin-expand-btn svg{width:18px;height:18px;fill:currentColor}
.chat-pin-content-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.chat-pin-message{color:#f5f7fb;font-size:14px;font-weight:700;line-height:1.7;word-break:break-word;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:1 1 auto;text-align:left}
.chat-pin-box.is-expanded .chat-pin-message{-webkit-line-clamp:unset;overflow:visible}
.chat-pin-box.is-expanded .chat-pin-expand-icon{transform:rotate(90deg)}
.chat-pin-expand-icon{transition:transform .22s ease}
@media (max-width:1023px){
  .chat-pin-box{margin:8px 8px 8px;border-radius:8px}
  .chat-pin-message{font-size:13px}
}

.stream-about-section{margin:0 16px 20px;border-radius:14px;background:#14161a;padding:18px 18px 16px;display:flex;flex-direction:column;gap:14px}
.stream-about-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.stream-about-title{display:flex;align-items:center;gap:6px;color:#fff;font-size:18px;font-weight:800}
.stream-about-title span{display:inline-flex;align-items:center}
.stream-about-verified svg{width:18px;height:18px;display:block}
.stream-about-followers{color:#adb5c2;font-size:14px;font-weight:700}
.stream-about-followers #followers-count{color:#fff;font-weight:800;margin-inline-end:4px}
.stream-about-socials{display:flex;flex-wrap:wrap;gap:8px}
.stream-about-social{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:10px;color:#fff;text-decoration:none;background:#1a1d22;max-width:240px}
.stream-about-social-icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.stream-about-social-icon svg{width:16px;height:16px;display:block}
.stream-about-social-text{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stream-about-description{margin:0;color:#aeb6c2;font-size:14px;line-height:1.95;white-space:pre-line}
@media (max-width:1023px){
  .stream-about-section{margin:14px 10px 18px;padding:16px 14px 14px;border-radius:10px}
  .stream-about-title{font-size:16px}
  .stream-about-social{max-width:100%}
  .stream-about-description{font-size:13px;line-height:1.9}
}
.chat-pin-link{color:#fff;text-decoration:underline;word-break:break-all}.chat-pin-link:hover{color:#53fc18}

/* --- chat composer refresh + quick emotes --- */
.chat-input-wrapper{overflow:visible !important}
.chat-input-area.chat-input-area-modern{
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
}
.quick-emotes-holder{
  display:block;
  width:100%;
  padding:0 10px 4px;
  overflow:hidden;
  scrollbar-width:none;
}
.quick-emotes-holder::-webkit-scrollbar{display:none}
.quick-emotes-list{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:6px;
  min-height:36px;
  width:100%;
  min-width:100%;
  justify-content:flex-start;
}
.quick-emote-btn{
  width:34px;
  height:34px;
  padding:3px;
  border:1px solid rgba(255,255,255,.08);
  background:#0f1215;
  border-radius:7px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:none;
  flex:0 0 auto;
}
.quick-emote-btn:hover{background:#0f1215;border-color:rgba(255,255,255,.08);transform:none}
.quick-emote-image{width:100%;height:100%;object-fit:contain;display:block}
.chat-composer-main{display:flex;flex-direction:column;gap:10px;padding:0 10px 10px;width:100%}
.chat-modern-input-card{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
  border:2px solid #2c3138;
  border-radius:10px;
  padding:0 8px 0 10px;
  background:#101215;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.chat-modern-input-card:focus-within{
  border-color:transparent;
  background:#070809;
  box-shadow:0 0 0 1px #f4f5f6, 0 0 0 2px rgba(244,245,246,.08);
}
.chat-subscriber-badge-btn,
.chat-modern-emoji-btn,
.chat-modern-settings-btn{
  border:none;
  background:transparent;
  color:#fff;
  cursor:pointer;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.chat-subscriber-badge-btn{width:30px;height:30px;padding:0;margin-top:2px;align-self:flex-start}
.chat-subscriber-badge-btn img{width:20px;height:20px;display:block}
.chat-modern-input-shell{
  position:relative;
  flex:1 1 auto;
  min-width:0;
}
.chat-modern-input-shell .chat-command-suggestions{
  left:0 !important;
  right:0 !important;
  bottom:calc(100% + 8px) !important;
}
#chatInput.modern-editable-input{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  width:100%;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  padding:12px 0 11px !important;
  line-height:1.35 !important;
  color:#fff;
  display:block !important;
  overflow-y:hidden !important;
  overflow-x:hidden !important;
  white-space:pre-wrap !important;
  word-break:break-word !important;
}
#chatInput.modern-editable-input:focus{border:none !important;box-shadow:none !important}
#chatInput.modern-editable-input:empty:before{content:attr(data-placeholder);color:#768087}
.chat-modern-emoji-btn{
  width:36px;
  height:36px;
  border-radius:7px;
  margin-left:2px;
}
.chat-modern-emoji-btn:hover,
.chat-modern-settings-btn:hover{background:rgba(255,255,255,.08)}
.chat-modern-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  direction:ltr;
}
.chat-modern-tools,
.chat-modern-actions{display:flex;align-items:center;gap:8px}
.chat-modern-tools{margin-left:0}
.chat-modern-tool-pill{
  border:none;
  background:transparent;
  color:#d6dbe5;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:0;
  border-radius:0;
  font-size:13px;
  font-weight:700;
}
.chat-modern-tool-pill svg{color:#d6dbe5 !important}
.chat-modern-presence-pill{white-space:nowrap}
.chat-modern-send-btn{
  border:none;
  background:#53fc18;
  color:#0c0c0f;
  min-width:74px;
  height:34px;
  padding:0 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}
.chat-modern-send-btn:hover{filter:brightness(1.02)}
.chat-modern-send-btn:active{transform:scale(.97)}
.chat-modern-send-btn:disabled{opacity:.6;cursor:not-allowed}
.chat-modern-settings-btn{
  width:32px;
  height:32px;
  border-radius:8px;
}
.chat-input-wrapper .emoji-picker-container{
  left:10px !important;
  right:10px !important;
  bottom:calc(100% + 12px) !important;
  width:auto !important;
}
@media (max-width: 991px){
  .chat-input-wrapper{padding:10px 0 calc(10px + env(safe-area-inset-bottom)) !important}
  .chat-composer-main{padding:0 8px 8px}
  .quick-emotes-holder{padding:0 8px 4px}
  .quick-emote-btn{width:30px;height:30px}
  .quick-emotes-list{min-height:30px}
  .chat-subscriber-badge-btn{display:none}
  .chat-modern-input-card{padding:0 6px 0 10px;border-radius:9px}
  #chatInput.modern-editable-input{height:40px !important;min-height:40px !important;max-height:40px !important;padding:11px 0 10px !important;font-size:14px !important}
  .chat-modern-send-btn{min-width:68px;height:32px;border-radius:7px}
  .chat-modern-settings-btn{width:30px;height:30px}
  .chat-modern-tool-pill{padding:0;font-size:12px}
}

.chat-modern-tool-pill.is-empty #chatMetaCount{display:none}
.chat-modern-tool-pill.is-empty{opacity:.92}
.chat-modern-send-btn{border-radius:7px}
.chat-modern-settings-btn{border-radius:7px}

/* ===== stage 5: kick-like desktop stream shell + proper sticky chat rail ===== */
.stream-main-column{
  min-width:0;
}

@media (min-width:1024px){
  :root{
    --stream-desktop-chat-col:340px;
  }
  .main-wrapper{
    align-items:flex-start;
  }
  main.content{
    overflow:visible !important;
    padding:0 !important;
  }
  main.content > .stream-layout-container,
  main.content > #streamAboutSection{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .stream-layout-container{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) var(--stream-desktop-chat-col) !important;
    align-items:start !important;
    gap:0 !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    background:#000 !important;
  }
  .stream-main-column,
  #mobile-bottom-area{
    display:contents !important;
  }
  .mobile-spacer,
  #mobile-chat-toggle{
    display:none !important;
  }
  .video-section{
    grid-column:1 !important;
    min-width:0;
    display:block !important;
    overflow:visible !important;
    border-right:none !important;
  }
  .simple-player-shell,
  .iframe-wrapper{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    background:#000 !important;
    box-shadow:none !important;
    border:none !important;
  }
  .simple-video-wrap{
    aspect-ratio:16/9 !important;
    height:auto !important;
    min-height:0 !important;
    background:#000 !important;
  }
  #desktop-stream-info{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:28px;
    margin-top:0 !important;
    padding:18px 22px 16px !important;
    background:#050607;
    border-top:1px solid #0f1114;
    border-bottom:1px solid #1a1d22;
    min-height:98px;
  }
  .desktop-stream-left{
    gap:16px;
    align-items:flex-start;
  }
  .desktop-stream-avatar{
    width:62px;
    height:62px;
    min-width:62px;
  }
  .desktop-stream-avatar img{
    width:62px;
    height:62px;
    border:4px solid #53fc18;
  }
  .desktop-live-badge{
    padding:4px 7px;
    bottom:-8px;
    font-size:10px;
    border-radius:5px;
  }
  .desktop-stream-copy{
    gap:6px;
    padding-top:1px;
  }
  .desktop-stream-name-row h2{
    font-size:17px;
    font-weight:800;
  }
  .desktop-stream-title{
    max-width:none;
    font-size:12px;
    line-height:1.45;
    font-weight:700;
    color:#f1f3f5;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .desktop-stream-tags{
    gap:7px;
  }
  .desktop-tag{
    height:26px;
    padding:0 11px;
    border-radius:999px;
    background:#2f333a;
    color:#f4f5f6;
    font-size:11px;
    font-weight:700;
  }
  .desktop-tag-primary{
    background:transparent;
    color:#53fc18;
    padding-inline:0;
  }
  .desktop-stream-right{
    align-items:flex-end;
    gap:12px;
    padding-top:2px;
  }
  .desktop-action-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .desktop-action-row .desktop-notify-btn{
    display:none !important;
  }
  .desktop-pill-btn,
  .desktop-follow-pill,
  .desktop-subscribe-pill,
  .desktop-gift-btn{
    height:36px;
    border-radius:4px;
    padding:0 14px;
    border:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:filter .18s ease, transform .18s ease;
  }
  .desktop-pill-btn:hover,
  .desktop-follow-pill:hover,
  .desktop-subscribe-pill:hover,
  .desktop-gift-btn:hover{
    filter:brightness(1.05);
  }
  .desktop-pill-btn:active,
  .desktop-follow-pill:active,
  .desktop-subscribe-pill:active,
  .desktop-gift-btn:active{
    transform:translateY(1px);
  }
  .desktop-follow-pill{
    background:#53fc18 !important;
    color:#050607 !important;
    min-width:92px;
  }
  .desktop-follow-pill.is-filled,
  .desktop-follow-pill.is-hollow{
    background:#53fc18 !important;
    color:#050607 !important;
  }
  .desktop-subscribe-pill,
  .desktop-gift-btn{
    background:#353941 !important;
    color:#fff !important;
  }
  .desktop-pill-btn svg,
  .desktop-follow-pill svg,
  .desktop-subscribe-pill svg,
  .desktop-gift-btn svg{
    width:16px;
    height:16px;
    fill:currentColor;
  }
  .desktop-icon-slot{
    line-height:0;
  }
  .desktop-meta-row{
    gap:14px;
    font-size:13px;
  }
  .desktop-viewers{
    gap:6px;
    color:#53fc18;
    font-size:13px;
    font-weight:800;
  }
  .desktop-viewers span:last-child{
    color:#b6bbc3;
    font-weight:700;
  }
  .desktop-plain-icon{
    width:18px;
    height:18px;
    opacity:.92;
  }
  .desktop-plain-icon svg{
    width:16px;
    height:16px;
  }
  .desktop-action-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .desktop-action-row .desktop-notify-btn{
    display:inline-flex !important;
  }
  .desktop-action-row .desktop-icon-btn,
  .desktop-action-row .desktop-pill-btn{
    height:36px;
    border-radius:4px;
    border:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:background .18s ease, color .18s ease, filter .18s ease, transform .18s ease, width .22s ease, padding .22s ease;
    position:relative;
  }
  .desktop-action-row .desktop-icon-btn:hover,
  .desktop-action-row .desktop-pill-btn:hover{
    filter:brightness(1.05);
  }
  .desktop-action-row .desktop-icon-btn:active,
  .desktop-action-row .desktop-pill-btn:active{
    transform:translateY(1px);
  }
  .desktop-action-row .desktop-icon-btn{
    width:36px;
    min-width:36px;
    padding:0;
    background:#353941 !important;
    color:#fff !important;
  }
  .desktop-action-row .desktop-pill-btn{
    padding:0 14px;
  }
  .desktop-action-row .desktop-follow-main{
    min-width:95px;
    background:#53fc18 !important;
    color:#050607 !important;
  }
  .desktop-action-row .desktop-follow-mini,
  .desktop-action-row .desktop-notify-btn{
    background:#353941 !important;
    color:#fff !important;
  }
  .desktop-action-row .desktop-notify-btn.is-active::after{
    content:'';
    position:absolute;
    inset:6px 17px 6px auto;
    width:0;
    opacity:0;
    border-left:2px solid currentColor;
    transform:rotate(-34deg);
    transform-origin:center;
    transition:opacity .18s ease;
    pointer-events:none;
  }
  .desktop-action-row .desktop-notify-btn.is-active:hover::after{
    opacity:.95;
  }
  .desktop-action-row .desktop-support-btn{
    width:36px;
    min-width:36px;
    padding:0;
    justify-content:center;
    background:#353941 !important;
    color:#fff !important;
    overflow:hidden;
  }
  .desktop-action-row .desktop-support-btn.is-expanded{
    width:auto;
    min-width:96px;
    max-width:156px;
    padding:0 10px;
    justify-content:flex-start;
  }
  .desktop-action-row .desktop-support-btn.is-disabled{
    display:inline-flex !important;
    opacity:.48;
    cursor:not-allowed;
  }
  .desktop-action-row .desktop-support-btn .desktop-support-text-wrap{
    display:none;
    min-width:0;
    max-width:92px;
    overflow:hidden;
    white-space:nowrap;
    direction:rtl;
  }
  .desktop-action-row .desktop-support-btn.is-expanded .desktop-support-text-wrap{
    display:block;
  }
  .desktop-action-row .desktop-support-text,
  .desktop-action-row .desktop-support-sep{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
  }
  .desktop-action-row .desktop-support-text-wrap.is-marquee{
    mask-image:none;
    -webkit-mask-image:none;
  }
  .desktop-action-row .desktop-support-track{
    display:inline-flex;
    align-items:center;
    gap:12px;
    width:max-content;
    will-change:transform;
    animation:desktopSupportTicker var(--support-marquee-duration, 8s) linear infinite;
  }
  .desktop-action-row .desktop-gift-btn{
    background:#353941 !important;
    color:#fff !important;
  }
  .desktop-action-row.is-subscribed .desktop-gift-btn{
    background:#53fc18 !important;
    color:#050607 !important;
  }
  .desktop-action-row .desktop-subscribe-pill{
    background:#53fc18 !important;
    color:#050607 !important;
  }
  .desktop-action-row .desktop-subscribed-badge{
    background:rgba(83,252,24,.16) !important;
    color:#fff !important;
  }
  .desktop-action-row .desktop-icon-slot{
    line-height:0;
    flex:0 0 auto;
  }
  .desktop-action-row svg{
    width:16px;
    height:16px;
    fill:currentColor;
  }
  .desktop-support-copy{
    display:inline-flex;
    align-items:center;
    gap:12px;
    flex:0 0 auto;
  }
  @keyframes desktopSupportTicker{
    0%{transform:translateX(0);}
    100%{transform:translateX(calc(-1 * var(--support-marquee-distance, 120px)));}
  }
  .stream-about-section{
    width:calc(100% - var(--stream-desktop-chat-col)) !important;
    max-width:calc(100% - var(--stream-desktop-chat-col)) !important;
    margin:12px 0 24px !important;
    border-radius:8px !important;
    border:none !important;
    background:#171A1C !important;
    padding:24px !important;
    gap:14px;
    box-shadow:none !important;
  }
  .stream-about-header{
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:nowrap;
  }
  .stream-about-title{
    gap:7px;
    font-size:14px;
    font-weight:800;
    color:#fff;
    min-width:0;
  }
  .stream-about-title #aboutStreamerName{
    white-space:nowrap;
  }
  .stream-about-verified svg{
    width:16px;
    height:16px;
  }
  .stream-about-followers{
    flex:0 0 auto;
    color:#53fc18;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
    margin-inline-start:auto;
  }
  .stream-about-followers #followers-count{
    color:#53fc18;
    margin-inline-end:6px;
    font-weight:800;
  }
  .stream-about-socials{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .stream-about-social{
    min-height:32px;
    padding:0 12px;
    border-radius:10px;
    background:#242932;
    border:none;
    color:#e8edf2;
    gap:7px;
    max-width:none;
  }
  .stream-about-social:hover{
    background:#2a3039;
  }
  .stream-about-social-icon,
  .stream-about-social-icon svg{
    width:15px;
    height:15px;
  }
  .stream-about-social-text{
    font-size:12px;
    font-weight:700;
  }
  .stream-about-description{
    margin:2px 0 0;
    color:#aeb5c1;
    font-size:13px;
    line-height:1.7;
  }
  .chat-section.custom-chat{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    position:sticky !important;
    top:60px !important;
    align-self:start !important;
    height:calc(100vh - 60px) !important;
    max-height:calc(100vh - 60px) !important;
    min-height:calc(100vh - 60px) !important;
    width:var(--stream-desktop-chat-col) !important;
    margin:0 !important;
    border-left:1px solid #24272c;
    background:#0b0b0c !important;
    overflow:hidden !important;
    z-index:5 !important;
  }
  .chat-header{
    min-height:46px;
    padding:11px 14px;
    border-bottom:1px solid #24272c;
    text-align:center;
    font-size:16px;
    font-weight:700;
    background:#0b0b0c;
  }
  .chat-top-supporters{
    padding:10px 10px 8px;
    border-bottom:1px solid #24272c;
    background:#0b0b0c;
  }
  .chat-messages{
    flex:1 1 auto;
    min-height:0;
  }
}

@media (min-width:1440px){
  :root{
    --stream-desktop-chat-col:360px;
  }
}

@media (min-width:1800px){
  :root{
    --stream-desktop-chat-col:372px;
  }
}

@media (max-width:1023px){
  .stream-main-column{
    display:contents;
  }
}


/* ===== stage 6: absolute black stream surface + flatter chat ===== */
html, body,
body.is-stream-page,
body.stream-page,
main.content,
.main-wrapper,
.stream-layout-container,
.video-section,
.simple-player-shell,
.simple-video-wrap,
.iframe-wrapper,
.stream-page-shell,
#desktop-stream-info,
#mobile-bottom-area,
.chat-section.custom-chat,
.chat-header,
.chat-top-supporters,
.chat-input-wrapper,
.chat-input-area.chat-input-area-modern,
.chat-composer-main,
.quick-emotes-holder,
.chat-modern-footer,
.chat-messages{
  background:#000 !important;
}

@media (min-width:1024px){
  .stream-layout-container,
  .video-section,
  .chat-section.custom-chat,
  #desktop-stream-info{
    background:#000 !important;
    border:none !important;
    box-shadow:none !important;
  }

  #desktop-stream-info{
    border-top:none !important;
    border-bottom:none !important;
    padding-bottom:18px !important;
  }

  .chat-section.custom-chat{
    border-left:none !important;
  }
}

.chat-header,
.chat-top-supporters,
.chat-input-wrapper,
.quick-emotes-holder,
.chat-modern-footer,
.chat-modern-input-card,
.chat-messages,
.chat-pin-box{
  box-shadow:none !important;
}

.chat-header,
.chat-top-supporters,
.chat-input-wrapper,
.chat-modern-input-card,
.quick-emotes-holder,
.chat-modern-footer,
.chat-pin-box,
.chat-messages,
.chat-section.custom-chat,
.top-supporters-mobile{
  border-color:transparent !important;
}

.quick-emotes-holder,
.chat-top-supporters,
.chat-input-wrapper,
.chat-modern-footer,
.chat-header{
  border:none !important;
}

.chat-top-supporters{
  padding-top:8px !important;
  padding-bottom:6px !important;
}

.quick-emotes-holder{
  padding:0 8px 2px !important;
}

.quick-emotes-list{
  gap:6px !important;
  min-height:32px !important;
}

.quick-emote-btn{
  background:#000 !important;
  border:none !important;
  border-radius:6px !important;
  width:30px !important;
  height:30px !important;
  padding:2px !important;
}
.quick-emote-btn:hover,
.quick-emote-btn:focus-visible{
  background:#000 !important;
  border:none !important;
  transform:none !important;
  box-shadow:none !important;
}

.chat-composer-main{
  gap:8px !important;
  padding:0 8px 8px !important;
}

.chat-modern-input-card{
  background:#000 !important;
  border:1px solid #3a3f45 !important;
  border-radius:8px !important;
  padding:0 8px 0 10px !important;
}
.chat-modern-input-card:focus-within{
  background:#000 !important;
  border-color:#8b929a !important;
  box-shadow:none !important;
}

#chatInput.modern-editable-input{
  background:#000 !important;
  color:#f2f4f5 !important;
  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;
  line-height:1.3 !important;
  padding:10px 0 !important;
  overflow:hidden !important;
}
#chatInput.modern-editable-input:empty:before{
  color:#6f7881 !important;
}

.chat-modern-emoji-btn,
.chat-modern-settings-btn{
  background:transparent !important;
}
.chat-modern-emoji-btn:hover,
.chat-modern-settings-btn:hover,
.chat-modern-emoji-btn:focus-visible,
.chat-modern-settings-btn:focus-visible{
  background:transparent !important;
  box-shadow:none !important;
}

.chat-modern-tool-pill,
.chat-modern-tool-pill:hover,
.chat-modern-tool-pill:focus-visible{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:30px !important;
}

.chat-modern-send-btn{
  border-radius:8px !important;
}

.chat-messages{
  padding:4px 8px 6px !important;
  gap:1px !important;
}

.chat-msg,
.chat-msg:hover,
.chat-msg.bot-msg,
.chat-msg.donation-msg,
.chat-msg.personal-highlight,
.chat-msg.personal-highlight:hover,
.chat-msg.normal-reply,
.chat-msg.normal-reply:hover,
.chat-messages > div{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.chat-msg{
  min-height:24px !important;
  padding:3px 6px !important;
  margin:0 !important;
}
.chat-msg-row{
  min-height:20px !important;
  gap:6px !important;
}
.chat-msg-content{
  line-height:1.32 !important;
  gap:3px !important;
}
.chat-user,
.chat-text,
.chat-system-text{
  line-height:1.32 !important;
}
.chat-user{
  margin-left:3px !important;
}
.chat-text{
  font-size:14px !important;
}

.chat-msg-tools{
  min-width:18px !important;
  width:18px !important;
}

.chat-pin-box{
  background:#111315 !important;
  border:1px solid rgba(83,252,24,.22) !important;
}

@media (max-width:1023px){
  html, body, main.content, .main-wrapper, .stream-layout-container, .video-section, #mobile-bottom-area,
  .chat-section.custom-chat, .chat-header, .chat-top-supporters, .chat-input-wrapper, .chat-messages{
    background:#000 !important;
  }

  .chat-section.custom-chat{
    border-top:none !important;
    box-shadow:none !important;
  }

  .chat-modern-input-card{
    border-radius:8px !important;
  }

  .chat-msg{
    min-height:22px !important;
    padding:3px 5px !important;
  }

  .chat-msg-row{
    min-height:18px !important;
    gap:5px !important;
  }

  .chat-msg-content,
  .chat-user,
  .chat-text,
  .chat-system-text{
    line-height:1.28 !important;
  }
}


/* ===== stage 7: pixel-tuned desktop about/chat refinements ===== */
@media (min-width:1024px){
  #desktop-stream-info{
    background:#000 !important;
    border:none !important;
    min-height:104px !important;
    padding:16px 18px 18px !important;
  }
  .desktop-stream-left{gap:18px !important;}
  .desktop-stream-avatar,
  .desktop-stream-avatar img{
    width:64px !important;
    height:64px !important;
    min-width:64px !important;
  }
  .desktop-stream-copy{gap:4px !important; padding-top:2px !important;}
  .desktop-stream-name-row{gap:8px !important;}
  .desktop-stream-name-row h2{
    font-size:20px !important;
    line-height:1.4 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
  }
  .desktop-stream-title{
    font-size:14px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
    color:#f4f5f6 !important;
    margin-top:0 !important;
  }
  .desktop-stream-tags{gap:8px !important; margin-top:1px !important;}
  .desktop-tag{
    height:28px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:13px !important;
    font-weight:700 !important;
    background:#2f333a !important;
  }
  .desktop-tag-primary{
    background:transparent !important;
    color:#53FC18 !important;
    padding-inline:0 !important;
  }
  .desktop-stream-right{gap:14px !important;}
  .desktop-meta-row{gap:16px !important; align-items:center !important;}
  .desktop-viewers{
    font-size:14px !important;
    gap:6px !important;
  }
  .desktop-viewers span:last-child,
  .desktop-plain-icon{color:#9FA6AD !important;}

  .stream-about-section{
    width:calc(100% - var(--stream-desktop-chat-col)) !important;
    max-width:calc(100% - var(--stream-desktop-chat-col)) !important;
    margin:14px 0 24px !important;
    padding:24px !important;
    border-radius:8px !important;
    background:#171A1C !important;
    box-shadow:none !important;
    border:none !important;
    gap:14px !important;
  }
  .stream-about-header{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:12px !important;
  }
  .stream-about-title{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    color:#FFFFFF !important;
    font-size:16px !important;
    line-height:24px !important;
    font-weight:700 !important;
    min-width:0 !important;
  }
  .stream-about-title #aboutStreamerName{
    display:inline-flex !important;
    align-items:center !important;
  }
  .stream-about-verified svg{
    width:20px !important;
    height:20px !important;
  }
  .stream-about-followers{
    flex:0 0 auto !important;
    margin-inline-start:0 !important;
    color:#9FA6AD !important;
    font-size:14px !important;
    line-height:20px !important;
    font-weight:600 !important;
    white-space:nowrap !important;
  }
  .stream-about-followers #followers-count{
    color:#9FA6AD !important;
    margin-inline-end:4px !important;
    font-weight:600 !important;
  }
  .stream-about-socials{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:12px 22px !important;
  }
  .stream-about-social{
    min-height:36px !important;
    height:36px !important;
    padding:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    border:none !important;
    color:#FFFFFF !important;
    gap:8px !important;
    max-width:none !important;
    box-shadow:none !important;
  }
  .stream-about-social:hover,
  .stream-about-social:focus-visible{
    background:transparent !important;
    color:#FFFFFF !important;
    box-shadow:none !important;
  }
  .stream-about-social-icon,
  .stream-about-social-icon svg{
    width:20px !important;
    height:20px !important;
  }
  .stream-about-social-text{
    font-size:14px !important;
    line-height:20px !important;
    font-weight:700 !important;
    color:#FFFFFF !important;
  }
  .stream-about-description{
    margin:0 !important;
    color:#9FA6AD !important;
    font-size:14px !important;
    line-height:1.45 !important;
    font-weight:400 !important;
    max-width:none !important;
  }

  .chat-section.custom-chat{
    background:#000 !important;
    top:0 !important;
    height:100vh !important;
    max-height:100vh !important;
    min-height:100vh !important;
  }
  .chat-header{
    min-height:44px !important;
    height:44px !important;
    padding:10px 14px !important;
    font-size:15px !important;
    background:#000 !important;
    border:none !important;
  }
  .chat-top-supporters{
    padding:8px 10px 6px !important;
    background:#000 !important;
    border:none !important;
  }
  .chat-messages{
    padding:6px 8px 8px !important;
    gap:0 !important;
    background:#000 !important;
  }
  .chat-msg,
  .chat-messages > div{
    min-height:32px !important;
    padding:4px 8px !important;
    margin:0 !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .chat-msg-row,
  .chat-msg-row:hover,
  .chat-msg-row:focus-within,
  .chat-msg > .chat-msg-row,
  .chat-msg > .chat-msg-row:hover,
  .chat-msg > div,
  .chat-msg > div:hover{
    min-height:24px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    width:100% !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .chat-msg-content,
  .chat-message-content{
    display:flex !important;
    align-items:center !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:4px !important;
    line-height:1.42 !important;
    overflow:visible !important;
    background:transparent !important;
  }
  .chat-user,
  .chat-text,
  .chat-system-text{
    line-height:1.42 !important;
  }
  .chat-text,
  .chat-system-text{
    font-size:14px !important;
  }
  .chat-user{
    margin-left:2px !important;
  }
  .chat-msg-tools{
    width:20px !important;
    min-width:20px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-right:auto !important;
    background:transparent !important;
  }
}


/* ===== stage 8: responsive desktop chat rail + requested composer CSS ===== */
@media (min-width:1024px){
  .chat-section.custom-chat{
    top:60px !important;
    height:calc(100dvh - 60px) !important;
    max-height:calc(100dvh - 60px) !important;
    min-height:calc(100dvh - 60px) !important;
  }
}
@supports not (height:100dvh){
  @media (min-width:1024px){
    .chat-section.custom-chat{
      top:60px !important;
      height:calc(100vh - 60px) !important;
      max-height:calc(100vh - 60px) !important;
      min-height:calc(100vh - 60px) !important;
    }
  }
}
.chat-input-area.chat-input-area-modern{
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  width:100% !important;
}
.chat-composer-main{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding:0 8px 8px !important;
  width:100% !important;
}
.chat-modern-input-card{
  border:2px solid rgba(255,255,255,0.1) !important;
  margin-bottom:5px !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:8px !important;
  border-radius:4px !important;
  width:100% !important;
  background:none !important;
  padding:5px !important;
  color:var(--text-primary, #ffffff) !important;
  font-family:'KalamehWeb','PeydaWeb','IRANSansX',Tahoma,sans-serif !important;
  font-size:13px !important;
  outline:none !important;
  min-height:38px !important;
  max-height:250px !important;
  box-shadow:none !important;
}
.chat-modern-input-card:focus-within{
  border-color:rgba(255,255,255,0.18) !important;
  background:none !important;
  box-shadow:none !important;
}
.chat-subscriber-badge-btn{
  width:28px !important;
  height:28px !important;
  padding:0 !important;
  margin-top:0 !important;
  align-self:center !important;
}
.chat-subscriber-badge-btn img{
  width:18px !important;
  height:18px !important;
  display:block !important;
}
.chat-modern-input-shell{
  position:relative !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:flex-start !important;
}
#chatInput.modern-editable-input{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  width:100% !important;
  height:38px !important;
  min-height:38px !important;
  max-height:250px !important;
  padding:7px 0 6px !important;
  color:#FFFFFF !important;
  font-family:'KalamehWeb','PeydaWeb','IRANSansX',Tahoma,sans-serif !important;
  font-size:13px !important;
  line-height:1.55 !important;
  outline:none !important;
  resize:none !important;
  overflow-x:hidden !important;
  overflow-y:hidden !important;
  white-space:pre-wrap !important;
  word-break:break-word !important;
  text-align:right !important;
}
[dir="ltr"] #chatInput.modern-editable-input,
#chatInput.modern-editable-input[dir="ltr"]{
  text-align:center !important;
}
#chatInput.modern-editable-input[dir="rtl"]{
  text-align:right !important;
}
#chatInput.modern-editable-input:empty:before{
  color:#6F7881 !important;
}
.chat-modern-emoji-btn{
  width:28px !important;
  height:28px !important;
  border-radius:4px !important;
  margin-left:0 !important;
  align-self:center !important;
}
.chat-modern-emoji-btn:hover,
.chat-modern-emoji-btn:focus-visible,
.chat-modern-settings-btn:hover,
.chat-modern-settings-btn:focus-visible{
  background:transparent !important;
  box-shadow:none !important;
}
.chat-modern-footer{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  width:100% !important;
  min-height:32px !important;
  direction:ltr !important;
}
.chat-modern-tools,
.chat-modern-actions{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}


/* ===== stage 9: mobile scroll unlocked while composer stays pinned ===== */
@media (max-width:849px){
  html.mobile-chat-is-open,
  body.mobile-chat-is-open{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    height:auto !important;
    min-height:100% !important;
    touch-action:auto !important;
  }
  body.mobile-chat-is-open .main-wrapper,
  body.mobile-chat-is-open .content,
  body.mobile-chat-is-open .stream-layout-container,
  body.mobile-chat-is-open .video-section{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  #mobile-bottom-area{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:1300 !important;
    pointer-events:none !important;
  }
  #mobile-bottom-area > #mobile-chat-toggle,
  #mobile-bottom-area > .chat-section.custom-chat{
    pointer-events:auto !important;
  }
  #mobile-bottom-area > .chat-section.custom-chat{
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  .chat-messages{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }
  .chat-input-wrapper{
    position:sticky !important;
    bottom:0 !important;
    z-index:12 !important;
    background:#07111a !important;
  }
  .chat-composer-main{padding:0 8px calc(8px + env(safe-area-inset-bottom)) !important;}
  .chat-modern-input-card{margin-bottom:4px !important;}
  .chat-modern-footer{padding-bottom:0 !important;}
}


/* stage10 stability + mobile parity */
.quick-emotes-holder.is-hidden-by-picker{
  display:none !important;
}

.st-viewers-badge svg{
  position:relative;
  top:-1px;
}

@media (max-width: 991px){
  #mobile-chat-toggle .mobile-chat-toggle-top3{
    display:none;
    align-items:stretch;
    gap:6px;
    flex:1 1 auto;
    min-width:0;
    justify-content:flex-start;
    padding-inline-end:12px;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-item{
    display:inline-flex;
    flex-direction:row-reverse;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-width:0;
    flex:1 1 0;
    padding:2px 1px;
    background:transparent;
    color:#fff;
    direction:ltr;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-item.is-empty{
    opacity:.72;
    color:#9aa3af;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-item-rank1,
  #mobile-chat-toggle .mobile-chat-toggle-top3-item-rank2,
  #mobile-chat-toggle .mobile-chat-toggle-top3-item-rank3{
    background:transparent;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-rank{
    width:22px;
    height:22px;
    flex:0 0 auto;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-meta{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
    gap:1px;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-name{
    display:block;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:9px;
    font-weight:700;
    line-height:1.05;
    text-align:center !important;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-amount{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    padding:0;
    border-radius:0;
    background:transparent;
    color:#94a3b8 !important;
    font-size:7px !important;
    font-weight:700 !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  body.mobile-chat-is-open #mobile-chat-toggle{
    justify-content:flex-start !important;
    gap:8px !important;
  }
  body.mobile-chat-is-open #mobile-chat-toggle .mobile-chat-toggle-label,
  body.mobile-chat-is-open #mobile-chat-toggle .chat-icon{
    display:none !important;
  }
  body.mobile-chat-is-open #mobile-chat-toggle .mobile-chat-toggle-top3{
    display:inline-flex !important;
  }

  #mobile-chat-panel .chat-top-supporters{
    display:none !important;
  }

  #mobile-chat-toggle .mobile-chat-toggle-top3,
  #mobile-chat-toggle .mobile-chat-toggle-top3 *{
    text-align:center !important;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-item,
  #mobile-chat-toggle .mobile-chat-toggle-top3-name,
  #mobile-chat-toggle .mobile-chat-toggle-top3-amount,
  #mobile-chat-toggle .mobile-chat-toggle-top3-amount-value{
    flex:0 0 auto !important;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-name{
    font-size:9px !important;
    font-weight:700 !important;
    max-width:100% !important;
    line-height:1.05 !important;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-amount{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    max-width:100% !important;
    color:#94a3b8 !important;
    font-size:7px !important;
    font-weight:700 !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-kick-icon-wrap{
    display:inline-flex !important;
    width:9px !important;
    height:9px !important;
    flex:0 0 auto !important;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-kick-icon-wrap .top-supporter-gem-svg,
  #mobile-chat-toggle .mobile-chat-toggle-top3-kick-icon-wrap svg,
  #mobile-chat-toggle .mobile-chat-toggle-top3-kick-icon-wrap img{
    width:9px !important;
    height:9px !important;
  }
  #mobile-chat-toggle .mobile-chat-toggle-top3-amount-value{
    display:inline-block !important;
    font-size:7px !important;
    line-height:1 !important;
  }

@media (max-width: 991px){
  html,body,.main-wrapper,.content,.stream-layout-container,.stream-main-column,.video-section,#mobile-bottom-area{
    background:#000 !important;
  }

  .chat-section.custom-chat,
  .chat-shell,
  .chat-container,
  .chat-input-wrapper,
  .chat-modern-shell,
  .chat-modern-actions,
  .chat-header,
  .chat-top-supporters,
  .top-supporters-shell,
  .streamer-info-card,
  .stream-info-card,
  .stream-about-card,
  .stream-info-about,
  #desktop-stream-info,
  .st-actions,
  .stream-chat-shell,
  .stream-page-chat-column,
  .channel-about-card,
  .desktop-stream-right,
  .desktop-stream-left,
  .desktop-action-row{
    background:#000 !important;
  }

  .quick-emotes-holder{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .quick-emotes-holder::-webkit-scrollbar,
  .emoji-grid::-webkit-scrollbar{
    display:none;
  }
  .quick-emotes-list{
    display:flex !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    min-width:100% !important;
    gap:8px !important;
  }

  .emoji-picker-container{
    overflow:hidden !important;
    left:8px !important;
    right:8px !important;
    bottom:calc(100% - 20px) !important;
    padding:14px 12px 12px !important;
  }
  .emoji-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(36px, 1fr)) !important;
    gap:10px !important;
    max-height:220px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:0 !important;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .emoji-item{
    width:36px !important;
    height:36px !important;
    flex:none !important;
  }

  .mobile-stream-actions,
  .mobile-action-row,
  .mobile-action-buttons,
  .streamer-info-card,
  .st-main-info,
  .st-text,
  .st-right-section{
    background:#000 !important;
  }

  .chat-messages{
    gap:0 !important;
    padding:6px 8px 6px !important;
  }
  .chat-msg,
  .chat-messages > div,
  .chat-message,
  .chat-item{
    min-height:26px !important;
    padding:3px 8px !important;
    margin:0 !important;
  }
  .chat-msg-row,
  .chat-msg > .chat-msg-row,
  .chat-msg > div,
  .chat-message-content,
  .chat-msg-content{
    min-height:20px !important;
    gap:3px !important;
    line-height:1.32 !important;
  }
  .chat-user,
  .chat-text,
  .chat-system-text{
    line-height:1.32 !important;
  }
}

/* ===== stage 16: mobile gif stability + no zoom + desktop-like reply ===== */
@media (max-width: 991px){
  html{
    -webkit-text-size-adjust:100% !important;
  }
  .chat-input-area .editable-input,
  .chat-input,
  #chatInput{
    font-size:16px !important;
    -webkit-text-size-adjust:100% !important;
  }

  .stream-main-column,
  .stream-layout-container,
  .video-section,
  .content,
  .main-wrapper{
    padding-bottom:calc(var(--mobile-chat-toggle-h, 50px) + 18px + env(safe-area-inset-bottom)) !important;
  }
  body.mobile-chat-is-open .stream-main-column,
  body.mobile-chat-is-open .stream-layout-container,
  body.mobile-chat-is-open .video-section,
  body.mobile-chat-is-open .content,
  body.mobile-chat-is-open .main-wrapper{
    padding-bottom:calc(var(--mobile-chat-toggle-h, 50px) + var(--mobile-chat-panel-actual-h, 320px) + 24px + env(safe-area-inset-bottom)) !important;
  }

  .chat-msg-reply-box{
    background:rgba(255,255,255,.05) !important;
    border-right:3px solid rgba(83,252,24,.8) !important;
    padding:5px 10px !important;
    border-radius:4px !important;
    margin-bottom:6px !important;
    font-size:13px !important;
    color:#adadb8 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    cursor:pointer !important;
  }
  .reply-box-user{
    color:#53fc18 !important;
    font-weight:700 !important;
    font-size:12px !important;
  }
  .reply-box-text{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:13px !important;
    color:#efeff1 !important;
    opacity:.8 !important;
  }
  .reply-preview-container{
    display:none;
    align-items:center !important;
    justify-content:space-between !important;
    padding:10px 15px !important;
    background:#12141c !important;
    border-bottom:1px solid #26262c !important;
    direction:rtl !important;
  }
  .reply-preview-text{
    color:#adadb8 !important;
    font-size:13px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:85% !important;
    text-align:right !important;
    direction:rtl !important;
  }
  .reply-close-btn{
    background:none !important;
    border:none !important;
    color:#fff !important;
    padding:0 !important;
    opacity:.7 !important;
  }

  .chat-msg-row,
  .chat-msg > .chat-msg-row,
  .chat-msg > div{
    min-height:24px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    width:100% !important;
  }
  .chat-msg-content,
  .chat-message-content{
    display:flex !important;
    align-items:center !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:4px !important;
    line-height:1.42 !important;
    overflow:visible !important;
  }
  .chat-msg-tools{
    width:20px !important;
    min-width:20px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-right:auto !important;
  }
  .reply-icon-btn{
    position:static !important;
    opacity:1 !important;
    margin:0 !important;
    padding:0 !important;
    width:20px !important;
    height:20px !important;
    background:transparent !important;
  }
}


/* ===== stage 17: mobile reply parity + zoom lock + scroll unlock ===== */
@media (max-width: 991px){
  html,
  body{
    touch-action:pan-y manipulation !important;
    -webkit-text-size-adjust:100% !important;
  }

  body.mobile-chat-is-open,
  html.mobile-chat-is-open,
  body.mobile-chat-is-open .main-wrapper,
  body.mobile-chat-is-open .content,
  body.mobile-chat-is-open .stream-layout-container,
  body.mobile-chat-is-open .stream-main-column,
  body.mobile-chat-is-open .video-section{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    height:auto !important;
    min-height:0 !important;
    position:static !important;
  }

  .chat-input-area .editable-input,
  .chat-input,
  #chatInput,
  #chatInput.modern-editable-input{
    font-size:16px !important;
    line-height:1.45 !important;
    -webkit-text-size-adjust:100% !important;
    touch-action:manipulation !important;
  }

  .chat-msg-reply-box{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    align-self:stretch !important;
    text-align:right !important;
    direction:rtl !important;
    margin:0 0 6px 0 !important;
    padding:6px 10px !important;
    border-radius:4px !important;
    background:rgba(255,255,255,.05) !important;
    border-right:3px solid rgba(83,252,24,.8) !important;
  }
  .reply-box-user,
  .reply-box-text{
    display:block !important;
    width:100% !important;
    text-align:right !important;
  }

  .chat-msg-row,
  .chat-msg > .chat-msg-row,
  .chat-msg > div{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:start !important;
    justify-content:initial !important;
    gap:6px !important;
    width:100% !important;
    min-height:26px !important;
  }

  .chat-msg-content,
  .chat-message-content{
    display:flex !important;
    align-items:flex-start !important;
    align-content:flex-start !important;
    flex-wrap:wrap !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:4px !important;
    line-height:1.5 !important;
    overflow:visible !important;
  }

  .chat-msg-tools{
    width:22px !important;
    min-width:22px !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    align-self:flex-start !important;
    margin-right:auto !important;
    padding-top:1px !important;
  }

  .reply-icon-btn{
    position:static !important;
    opacity:1 !important;
    margin:0 !important;
    padding:2px !important;
    width:20px !important;
    height:20px !important;
    align-self:flex-start !important;
    background:transparent !important;
    transform:none !important;
  }
}


/* ===== stage 18: desktop reply parity + mobile body scroll unlock ===== */
@media (min-width: 992px){
  .chat-msg-reply-box{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    align-self:stretch !important;
    text-align:right !important;
    direction:rtl !important;
    margin:0 0 6px 0 !important;
    padding:6px 10px !important;
    border-radius:4px !important;
    background:rgba(255,255,255,.05) !important;
    border-right:3px solid rgba(83,252,24,.88) !important;
  }
  .reply-box-user,
  .reply-box-text{
    display:block !important;
    width:100% !important;
    text-align:right !important;
    direction:rtl !important;
  }
  .reply-preview-container{
    position:relative !important;
    display:none;
    align-items:center !important;
    justify-content:space-between !important;
    padding:10px 14px 10px 16px !important;
    background:#12141c !important;
    border-bottom:1px solid #26262c !important;
    direction:rtl !important;
  }
  .reply-preview-container::before{
    content:'';
    position:absolute;
    right:0;
    top:8px;
    bottom:8px;
    width:3px;
    border-radius:999px;
    background:#53fc18;
  }
  .reply-preview-text{
    max-width:none !important;
    flex:1 1 auto !important;
    padding-right:8px !important;
    text-align:right !important;
    direction:rtl !important;
  }
  .reply-close-btn{
    margin-right:10px !important;
    margin-left:0 !important;
  }

  .desktop-support-btn{
    background:#353941 !important;
    color:#fff !important;
  }
  .desktop-support-btn.is-disabled{
    opacity:.55 !important;
    cursor:not-allowed !important;
  }
}

@media (max-width: 991px){
  html,
  body,
  .main-wrapper,
  .content,
  .stream-layout-container,
  .stream-main-column,
  .video-section{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
  }

  html,
  body{
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .stream-layout-container{
    min-height:calc(100dvh - 65px) !important;
    overflow:visible !important;
  }

  .video-section,
  .stream-main-column{
    overflow:visible !important;
  }
}

@media (max-width: 849px){
  html,
  body{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    touch-action:pan-y !important;
  }

  .stream-layout-container,
  .video-section,
  .stream-main-column{
    overflow:visible !important;
    height:auto !important;
  }
}

/* stage19 mobile chat scroll + reply alignment */
@media (max-width: 1023px) {
  html,
  body,
  body.mobile-chat-is-open,
  body.mobile-chat-is-open .stream-page,
  body.mobile-chat-is-open .stream-page-main,
  body.mobile-chat-is-open .stream-page-content,
  body.mobile-chat-is-open .stream-page-chat,
  body.mobile-chat-is-open .live-chat-shell,
  body.mobile-chat-is-open .live-chat {
    height: auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    position: static !important;
  }

  .stream-page-chat,
  .live-chat-shell,
  .live-chat,
  #chatBox,
  .chat-messages {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #chatBox,
  .chat-messages {
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
  }

  .chat-message,
  .chat-msg,
  .chat-msg-main,
  .chat-msg-content {
    width: 100% !important;
    min-width: 0 !important;
  }

  .chat-msg-content {
    display: block !important;
  }

  .chat-msg-reply-box {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    align-self: stretch !important;
    text-align: right !important;
  }

  .chat-msg-row {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  .chat-msg-meta,
  .chat-msg-body,
  .chat-msg-text {
    text-align: right !important;
  }
}

/* ===== stage 20: sticky stream header like site shell ===== */
body.is-stream-page > header,
body.is-stream-page .site-header,
body.is-stream-page .main-header,
body.is-stream-page .top-nav,
body.stream-page > header,
body.stream-page .site-header,
body.stream-page .main-header,
body.stream-page .top-nav{
  position:sticky !important;
  top:0 !important;
  z-index:1400 !important;
  background:#0b0b0c !important;
}

body.is-stream-page .main-wrapper,
body.stream-page .main-wrapper{
  align-items:flex-start !important;
}



@media (min-width:1024px){
  body.is-stream-page .sidebar,
  body.stream-page .sidebar{
    top:60px !important;
    height:calc(100vh - 60px) !important;
  }

  body.is-stream-page .chat-section.custom-chat,
  body.stream-page .chat-section.custom-chat{
    top:60px !important;
    height:calc(100vh - 60px) !important;
    min-height:calc(100vh - 60px) !important;
    max-height:calc(100vh - 60px) !important;
  }
}


/* ===== mobile sticky player under pinned header ===== */
@media (max-width: 991px){
  body.is-stream-page .video-section,
  body.stream-page .video-section{
    position: relative;
    overflow: visible !important;
    padding-top: var(--stream-mobile-player-height, 0px) !important;
  }

  .stream-mobile-player-lock-spacer{
    display: none !important;
    width: 100%;
    height: 0 !important;
  }

  body.is-stream-page .video-section .stream-mobile-player-lock,
  body.stream-page .video-section .stream-mobile-player-lock{
    position: relative !important;
    top: auto !important;
    z-index: 90 !important;
    align-self: flex-start !important;
    margin-top: 0 !important;
  }

  body.is-stream-page .video-section .stream-mobile-player-lock.is-locked-under-header,
  body.stream-page .video-section .stream-mobile-player-lock.is-locked-under-header{
    position: fixed !important;
    top: var(--stream-mobile-header-height, calc(60px + env(safe-area-inset-top, 0px))) !important;
    z-index: 2400 !important;
    margin-top: 0 !important;
  }

  body.is-stream-page #desktop-stream-info,
  body.is-stream-page #mobile-collapsible-info,
  body.stream-page #desktop-stream-info,
  body.stream-page #mobile-collapsible-info{
    position: relative;
    z-index: 1;
  }
}

/* Mobile stream actions parity with desktop action row */
.mobile-stream-action-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.mobile-stream-action-row .desktop-notify-btn{
    display:inline-flex !important;
}
.mobile-stream-action-row .desktop-icon-btn,
.mobile-stream-action-row .desktop-pill-btn{
    height:36px;
    border-radius:4px;
    border:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:background .18s ease, color .18s ease, filter .18s ease, transform .18s ease, width .22s ease, padding .22s ease;
    position:relative;
}
.mobile-stream-action-row .desktop-icon-btn:hover,
.mobile-stream-action-row .desktop-pill-btn:hover{
    filter:brightness(1.05);
}
.mobile-stream-action-row .desktop-icon-btn:active,
.mobile-stream-action-row .desktop-pill-btn:active{
    transform:translateY(1px);
}
.mobile-stream-action-row .desktop-icon-btn{
    width:36px;
    min-width:36px;
    padding:0;
    background:#353941 !important;
    color:#fff !important;
}
.mobile-stream-action-row .desktop-pill-btn{
    padding:0 14px;
}
.mobile-stream-action-row .desktop-follow-main{
    min-width:95px;
    background:#53fc18 !important;
    color:#050607 !important;
}
.mobile-stream-action-row .desktop-follow-mini,
.mobile-stream-action-row .desktop-notify-btn{
    background:#353941 !important;
    color:#fff !important;
}
.mobile-stream-action-row .desktop-notify-btn.is-active::after{
    content:'';
    position:absolute;
    inset:6px 17px 6px auto;
    width:0;
    opacity:0;
    border-left:2px solid currentColor;
    transform:rotate(-34deg);
    transform-origin:center;
    transition:opacity .18s ease;
    pointer-events:none;
}
.mobile-stream-action-row .desktop-notify-btn.is-active:hover::after{
    opacity:.95;
}
.mobile-stream-action-row .desktop-support-btn{
    width:36px;
    min-width:36px;
    padding:0;
    justify-content:center;
    background:#353941 !important;
    color:#fff !important;
    overflow:hidden;
}
.mobile-stream-action-row .desktop-support-btn.is-expanded{
    width:auto;
    min-width:84px;
    max-width:130px;
    padding:0 10px;
    justify-content:center;
}
.mobile-stream-action-row .desktop-support-btn.is-expanded .desktop-icon-slot{
    display:none;
}
.mobile-stream-action-row .desktop-support-btn.is-disabled{
    display:inline-flex !important;
    opacity:.48;
    cursor:not-allowed;
}
.mobile-stream-action-row .desktop-support-btn .desktop-support-text-wrap{
    display:none;
    min-width:0;
    max-width:82px;
    overflow:hidden;
    white-space:nowrap;
    direction:rtl;
}
.mobile-stream-action-row .desktop-support-btn.is-expanded .desktop-support-text-wrap{
    display:block;
}
.mobile-stream-action-row .desktop-support-text,
.mobile-stream-action-row .desktop-support-sep{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
}
.mobile-stream-action-row .desktop-support-text-wrap.is-marquee{
    mask-image:none;
    -webkit-mask-image:none;
}
.mobile-stream-action-row .desktop-support-track{
    display:inline-flex;
    align-items:center;
    gap:12px;
    width:max-content;
    will-change:transform;
    animation:desktopSupportTicker var(--support-marquee-duration, 8s) linear infinite;
}
.mobile-stream-action-row .desktop-gift-btn{
    width:36px;
    min-width:36px;
    padding:0;
    justify-content:center;
    background:#353941 !important;
    color:#fff !important;
}
.mobile-stream-action-row #mobileGiftSubsText{
    display:none;
}
.mobile-stream-action-row.is-subscribed .desktop-gift-btn{
    width:auto;
    min-width:114px;
    padding:0 14px;
    background:#53fc18 !important;
    color:#050607 !important;
}
.mobile-stream-action-row.is-subscribed #mobileGiftSubsText{
    display:inline;
}
.mobile-stream-action-row .desktop-subscribe-pill{
    background:#53fc18 !important;
    color:#050607 !important;
}
.mobile-stream-action-row .desktop-subscribed-badge{
    background:rgba(83,252,24,.16) !important;
    color:#fff !important;
}
.mobile-stream-action-row .desktop-icon-slot{
    line-height:0;
    flex:0 0 auto;
}
.mobile-stream-action-row svg{
    width:16px;
    height:16px;
    fill:currentColor;
}


.mobile-stream-meta-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-top:8px;
}
.mobile-stream-meta-btn{
    width:36px;
    height:36px;
    min-width:36px;
    border:none;
    border-radius:4px;
    background:#353941;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    transition:filter .18s ease, transform .18s ease;
}
.mobile-stream-meta-btn:hover{
    filter:brightness(1.05);
}
.mobile-stream-meta-btn:active{
    transform:translateY(1px);
}
.mobile-stream-meta-btn svg{
    width:16px !important;
    height:16px !important;
    fill:currentColor;
    flex:0 0 auto;
}

/* Mobile stream actions visibility fix */
.st-actions-legacy-desktop {
    display: none !important;
}

.mobile-stream-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.desktop-icon-btn.is-hidden,
.desktop-pill-btn.is-hidden,
.desktop-action-row .desktop-icon-btn.is-hidden,
.desktop-action-row .desktop-pill-btn.is-hidden,
.desktop-action-row .desktop-notify-btn.is-hidden,
.desktop-action-row .desktop-follow-mini.is-hidden,
.desktop-action-row .desktop-subscribed-badge.is-hidden,
.mobile-stream-action-row .desktop-icon-btn.is-hidden,
.mobile-stream-action-row .desktop-pill-btn.is-hidden,
.mobile-stream-action-row .desktop-notify-btn.is-hidden,
.mobile-stream-action-row .desktop-follow-mini.is-hidden,
.mobile-stream-action-row .desktop-subscribed-badge.is-hidden {
    display: none !important;
}

@media (min-width: 1024px) {
    .mobile-stream-actions {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    #mobile-collapsible-info,
    .info-inner-wrapper,
    .st-title-bar,
    .streamer-info-card,
    .st-main-info,
    .st-text,
    .st-right-section,
    .st-stats-container,
    .st-uptime,
    .mobile-stream-actions,
    .mobile-stream-action-row,
    .mobile-stream-meta-row{
        background:#000 !important;
        box-shadow:none !important;
    }

    .streamer-info-card,
    .st-title-bar{
        border-color:rgba(255,255,255,.06) !important;
    }

@media (max-width: 1023px) {
    .st-actions-legacy-desktop {
        display: none !important;
    }

    .mobile-stream-actions {
        display: flex !important;
    }
}


.desktop-action-row,
.mobile-stream-actions,
.mobile-stream-action-row,
.st-actions,
.st-actions-legacy-desktop {
    position: relative;
    z-index: 40;
    pointer-events: auto;
}

.desktop-action-row button,
.mobile-stream-action-row button,
.st-actions button,
.st-actions-legacy-desktop button {
    position: relative;
    z-index: 41;
    pointer-events: auto;
    touch-action: manipulation;
}

.desktop-chat-top-supporters {
    display: none;
}

@media (min-width: 1025px) {
    .desktop-chat-top-supporters {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px 12px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        background: #000;
    }

    .desktop-chat-top-supporter-item {
        min-width: 0;
        flex: 1 1 0;
    }

    .desktop-chat-top-supporter-item .top-supporter-card {
        width: 100%;
        min-width: 0;
        background: transparent;
        border: 0;
        padding: 0;
        box-shadow: none;
    }

    .desktop-chat-top-supporter-item .top-supporter-card-left {
        min-width: 0;
        gap: 8px;
    }

    .desktop-chat-top-supporter-item .top-supporter-name-wrap {
        min-width: 0;
    }

    .desktop-chat-top-supporter-item .top-supporter-name {
        max-width: 100%;
        font-size: 12px;
    }

    .desktop-chat-top-supporter-item .top-supporter-amount-row {
        gap: 4px;
        margin-inline-start: 8px;
    }

    .desktop-chat-top-supporter-item .top-supporter-amount-text {
        font-size: 11px;
    }

    .desktop-chat-top-supporter-item .top-supporter-gem-svg {
        width: 13px;
        height: 13px;
    }
}


/* ===== stage 21: desktop chat reply preview inline + right aligned ===== */
.chat-msg-reply-box{
  text-align:right !important;
  direction:rtl !important;
}
.chat-msg-reply-box .reply-box-inline{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
  text-align:right !important;
  direction:rtl !important;
}
.chat-msg-reply-box .reply-box-user{
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  width:auto !important;
  max-width:none !important;
  white-space:nowrap !important;
  text-align:right !important;
  direction:rtl !important;
}
.chat-msg-reply-box .reply-box-text{
  display:inline-flex !important;
  align-items:center !important;
  flex:0 1 auto !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-align:right !important;
  direction:rtl !important;
  unicode-bidi:plaintext !important;
}
.reply-preview-container{
  direction:rtl !important;
}
.reply-preview-text{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
  text-align:right !important;
  direction:rtl !important;
}
.reply-preview-label{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  flex:0 0 auto !important;
  width:auto !important;
  max-width:none !important;
  white-space:nowrap !important;
  text-align:right !important;
  direction:rtl !important;
}
.reply-preview-snippet{
  display:inline-flex !important;
  align-items:center !important;
  flex:0 1 auto !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-align:right !important;
  direction:rtl !important;
  unicode-bidi:plaintext !important;
}
@media (min-width: 992px){
  .chat-msg-reply-box{
    display:block !important;
    width:100% !important;
    text-align:right !important;
    direction:rtl !important;
  }
  .chat-msg-reply-box .reply-box-inline{
    justify-content:flex-start !important;
    align-items:center !important;
  }
  .chat-msg-reply-box .reply-box-text,
  .reply-preview-snippet{
    text-align:right !important;
  }
}


/* ===== stage 22: hard-fix inline reply preview layout ===== */
.chat-msg-reply-box,
.reply-preview-text{
  text-align:right !important;
  direction:rtl !important;
}
.chat-msg-reply-box .reply-box-singleline,
.reply-preview-singleline{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-align:right !important;
  direction:rtl !important;
}
.chat-msg-reply-box .reply-box-user,
.chat-msg-reply-box .reply-box-text,
.reply-preview-singleline #replyUsername,
.reply-preview-singleline .reply-preview-snippet{
  width:auto !important;
  max-width:none !important;
}
.chat-msg-reply-box .reply-box-user,
.reply-preview-singleline .reply-preview-prefix,
.reply-preview-singleline #replyUsername{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
.chat-msg-reply-box .reply-box-text,
.reply-preview-singleline .reply-preview-snippet{
  display:inline-flex !important;
  align-items:center !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  unicode-bidi:plaintext !important;
}
@media (min-width: 992px){
  .chat-msg-reply-box .reply-box-singleline,
  .reply-preview-singleline{
    justify-content:flex-start !important;
  }
}


/* ===== stage 23: desktop legacy reply DOM fix ===== */
@media (min-width: 992px){
  .chat-msg-reply-box{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    text-align:right !important;
    direction:rtl !important;
  }
  .chat-msg-reply-box > .reply-box-user{
    display:inline-flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    white-space:nowrap !important;
    text-align:right !important;
    direction:rtl !important;
  }
  .chat-msg-reply-box > .reply-box-text{
    display:inline-flex !important;
    align-items:center !important;
    flex:0 1 auto !important;
    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    text-align:right !important;
    direction:rtl !important;
    unicode-bidi:plaintext !important;
  }
}

/* ===== v6: support-title fixed text, no inner scrolling/marquee ===== */
.donate-btn{
  width:auto !important;
  min-width:140px !important;
  max-width:178px !important;
}
.donate-btn .donate-text-wrap{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  max-width:126px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  direction:rtl !important;
  text-align:center !important;
  unicode-bidi:plaintext !important;
}
.donate-btn .donate-text,
.donate-btn .donate-track,
.donate-btn .donate-text-seg{
  animation:none !important;
  transform:none !important;
  padding-inline-start:0 !important;
  padding-inline-end:0 !important;
  will-change:auto !important;
}
.donate-btn .donate-text{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.desktop-action-row .desktop-support-btn.is-expanded{
  max-width:178px !important;
}
.desktop-action-row .desktop-support-btn.is-expanded .desktop-support-text-wrap{
  max-width:128px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.mobile-stream-action-row .desktop-support-btn.is-expanded{
  max-width:164px !important;
}
.mobile-stream-action-row .desktop-support-btn.is-expanded .desktop-support-text-wrap{
  max-width:124px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.desktop-support-track,
.desktop-support-text-wrap.is-marquee .desktop-support-track{
  animation:none !important;
  transform:none !important;
}
.desktop-support-text,
.desktop-support-copy,
.desktop-support-sep{
  animation:none !important;
  transform:none !important;
}


/* ===== v7: force donation/support titles to stay fixed, no scrolling/marquee ===== */
.desktop-support-text-wrap,
.desktop-support-text,
.donate-text-wrap,
.donate-text{
  scrollbar-width:none !important;
}
.desktop-support-text-wrap::-webkit-scrollbar,
.donate-text-wrap::-webkit-scrollbar{display:none !important;}
.desktop-support-text-wrap,
.donate-text-wrap{
  overflow:hidden !important;
  overflow-x:hidden !important;
  overflow-y:hidden !important;
}
.desktop-support-text,
.donate-text{
  animation:none !important;
  transform:none !important;
  position:static !important;
}

/* v29: hard lock page scrolling behind the mobile stream chat drawer, especially on iOS */
@media (max-width: 991px) {
  html.mobile-chat-is-open,
  body.mobile-chat-is-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }
  body.mobile-chat-is-open #mobile-bottom-area,
  body.mobile-chat-is-open #mobile-bottom-area > .chat-section.custom-chat,
  body.mobile-chat-is-open #mobile-bottom-area .chat-input-wrapper,
  body.mobile-chat-is-open #mobile-bottom-area .chat-messages {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.mobile-chat-is-open #mobile-bottom-area > .chat-section.custom-chat,
  body.mobile-chat-is-open #mobile-bottom-area .chat-input-wrapper,
  body.mobile-chat-is-open #mobile-bottom-area .chat-messages,
  body.mobile-chat-is-open #mobile-bottom-area .chat-messages * {
    touch-action: pan-y !important;
  }
  body.mobile-chat-is-open .main-wrapper,
  body.mobile-chat-is-open .content,
  body.mobile-chat-is-open .stream-layout-container,
  body.mobile-chat-is-open .stream-main-column,
  body.mobile-chat-is-open .video-section {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
}


/* ===== v30: restore inner GIF/emoji scrolling + remove unused chat icons ===== */
.quick-emotes-holder{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  overscroll-behavior-y:none !important;
  touch-action:pan-x !important;
  scrollbar-width:none !important;
}
.quick-emotes-holder::-webkit-scrollbar{display:none !important; width:0 !important; height:0 !important;}
.quick-emotes-list{
  width:max-content !important;
  min-width:max-content !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
}
#emojiPicker.emoji-picker-container,
.chat-input-wrapper .emoji-picker-container{
  max-height:min(320px, 48vh) !important;
  overflow:hidden !important;
  touch-action:pan-y !important;
}
#emojiGrid.emoji-grid{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
  max-height:min(260px, 38vh) !important;
  padding-bottom:8px !important;
}
.chat-modern-settings-btn,
#chatMetaPill,
.chat-modern-presence-pill{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.chat-modern-tools{
  display:none !important;
}
.chat-modern-footer{
  justify-content:flex-end !important;
}
.chat-modern-actions{
  margin-inline-start:auto !important;
}
#streamAboutSection.stream-about-section,
.stream-about-section#streamAboutSection{
  margin-top:2px !important;
}
@media (max-width:991px){
  body.mobile-chat-is-open #mobile-bottom-area .quick-emotes-holder,
  body.mobile-chat-is-open #mobile-bottom-area .quick-emotes-list{
    touch-action:pan-x !important;
  }
  body.mobile-chat-is-open #mobile-bottom-area #emojiPicker,
  body.mobile-chat-is-open #mobile-bottom-area #emojiGrid{
    touch-action:pan-y !important;
  }
  #emojiPicker.emoji-picker-container,
  .chat-input-wrapper .emoji-picker-container{
    max-height:min(300px, 52vh) !important;
  }
  #emojiGrid.emoji-grid{
    max-height:min(230px, 42vh) !important;
  }
  #streamAboutSection.stream-about-section,
  .stream-about-section#streamAboutSection{
    margin-top:0 !important;
  }
}


/* ===== v31 stream page global font override ===== */
body.stream-page, body.is-stream-page,
body.stream-page *, body.is-stream-page *,
body.stream-page button, body.stream-page input, body.stream-page textarea, body.stream-page select,
body.is-stream-page button, body.is-stream-page input, body.is-stream-page textarea, body.is-stream-page select {
  font-family: 'KalamehWeb','PeydaWeb','IRANSansX',Tahoma,sans-serif !important;
}


/* v58: readable name clamp. JS shortens from the end; CSS must not show ...antb for English names. */
.chat-user,
.reply-box-user {
  max-width: 18ch !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  display: inline-block !important;
  vertical-align: bottom !important;
  unicode-bidi: isolate !important;
}
.chat-user[dir="ltr"],
.reply-box-user[dir="ltr"] {
  direction: ltr !important;
  text-align: left !important;
}
.chat-user[dir="rtl"],
.reply-box-user[dir="rtl"] {
  direction: rtl !important;
  text-align: right !important;
}
.top-supporter-name,
.mobile-chat-toggle-top3-name,
#st-username,
#st-username-desktop {
  max-width: 16ch !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-block !important;
  vertical-align: bottom !important;
}
.chat-msg-content { min-width: 0 !important; }
.chat-text { min-width: 0 !important; }
@media (max-width: 991px) {
  html.mobile-chat-is-open,
  body.mobile-chat-is-open {
    touch-action: auto !important;
  }
  body.mobile-chat-is-open #mobile-bottom-area,
  body.mobile-chat-is-open #mobile-bottom-area > .chat-section.custom-chat,
  body.mobile-chat-is-open #mobile-bottom-area .chat-input-wrapper,
  body.mobile-chat-is-open #mobile-bottom-area .chat-messages {
    touch-action: pan-y !important;
  }
}

/* ===== v53: real desktop/ultrawide player fit =====
   JS adds .ki-ultrawide-player-fit only when the natural 16:9 player height
   is taller than the visible space above the stream info section. This keeps
   normal monitors unchanged, and fixes 34-inch/ultrawide low-height screens. */
@media (min-width: 1024px) {
  body.ki-ultrawide-player-fit .stream-layout-container {
    overflow: hidden !important;
    background: #000 !important;
  }

  body.ki-ultrawide-player-fit .video-section {
    overflow: hidden !important;
    background: #000 !important;
  }

  body.ki-ultrawide-player-fit .simple-player-shell.stream-mobile-player-lock,
  body.ki-ultrawide-player-fit .simple-player-shell.iframe-wrapper,
  body.ki-ultrawide-player-fit .iframe-wrapper.simple-player-shell {
    width: 100% !important;
    height: var(--ki-ultrawide-player-h, 72vh) !important;
    min-height: 320px !important;
    max-height: var(--ki-ultrawide-player-h, 72vh) !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #000 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.ki-ultrawide-player-fit .simple-video-wrap {
    height: 100% !important;
    width: min(100%, calc(var(--ki-ultrawide-player-h, 72vh) * 1.7777778)) !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 auto !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  body.ki-ultrawide-player-fit #stream-player,
  body.ki-ultrawide-player-fit .simple-loading-cover,
  body.ki-ultrawide-player-fit .stream-freeze-frame {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  body.ki-ultrawide-player-fit #desktop-stream-info {
    margin-top: 0 !important;
  }
}

/* ===== v54: height-driven 16:9 desktop player for ultrawide/low-height screens =====
   The player shell keeps full page width with a black background. The actual
   video surface is calculated from available height: width = height * 16/9. */
@media (min-width:1024px){
  body.ki-height-based-169-player .video-section{
    background:#000 !important;
    overflow:hidden !important;
  }

  body.ki-height-based-169-player .simple-player-shell.stream-mobile-player-lock,
  body.ki-height-based-169-player .simple-player-shell.iframe-wrapper,
  body.ki-height-based-169-player .iframe-wrapper.simple-player-shell{
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#000 !important;
    overflow:hidden !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body.ki-height-based-169-player .simple-video-wrap#videoWrap,
  body.ki-height-based-169-player .simple-video-wrap{
    flex:0 0 auto !important;
    max-width:100% !important;
    height:100% !important;
    aspect-ratio:16 / 9 !important;
    margin:0 auto !important;
    background:#000 !important;
    overflow:hidden !important;
  }

  body.ki-height-based-169-player #stream-player,
  body.ki-height-based-169-player .simple-loading-cover,
  body.ki-height-based-169-player .stream-freeze-frame{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    background:#000 !important;
  }

  body.ki-height-based-169-player #desktop-stream-info{
    margin-top:0 !important;
  }
}


/* ===== v58 chat stability + readable usernames ===== */
.chat-user,
.chat-msg-reply-box .reply-box-user,
.reply-preview-singleline #replyUsername{
  max-width:18ch !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  unicode-bidi:isolate !important;
}
.chat-user[dir="ltr"],
.chat-msg-reply-box .reply-box-user[dir="ltr"]{direction:ltr !important;text-align:left !important;}
.chat-user[dir="rtl"],
.chat-msg-reply-box .reply-box-user[dir="rtl"]{direction:rtl !important;text-align:right !important;}


/* ===== v60: reply highlight only for the user being replied to ===== */
.chat-msg-reply-box{
  background:rgba(148,163,184,.07) !important;
  border-right-color:rgba(148,163,184,.55) !important;
  box-shadow:none !important;
}
.chat-msg-reply-box .reply-box-user{
  color:#aeb4bf !important;
}
.chat-msg-reply-box .reply-box-text{
  color:#d7dbe3 !important;
  opacity:.82 !important;
}
.chat-msg-reply-box.chat-msg-reply-box--for-me{
  background:rgba(83,252,24,.10) !important;
  border-right-color:#53fc18 !important;
  box-shadow:inset 0 0 0 1px rgba(83,252,24,.15) !important;
}
.chat-msg-reply-box.chat-msg-reply-box--for-me .reply-box-user{
  color:#53fc18 !important;
}
.chat-msg-reply-box.chat-msg-reply-box--for-me .reply-box-text{
  color:#f1fff0 !important;
  opacity:.95 !important;
}
.chat-msg-reply-box.chat-msg-reply-box--neutral{
  background:rgba(148,163,184,.06) !important;
  border-right-color:rgba(148,163,184,.45) !important;
}


/* ===== v61: private /pm chat for streamer and moderators ===== */
.chat-msg.private-pm-msg{
  background:rgba(83,252,24,.075) !important;
  border:1px solid rgba(83,252,24,.20) !important;
  border-right:3px solid #53fc18 !important;
  box-shadow:inset 0 0 0 1px rgba(83,252,24,.06) !important;
}
.chat-msg.private-pm-msg .chat-msg-row{
  background:transparent !important;
}
.chat-private-pm-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 0 0 6px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(83,252,24,.16);
  border:1px solid rgba(83,252,24,.30);
  color:#53fc18;
  font-size:10px;
  font-weight:900;
  line-height:1.4;
  vertical-align:middle;
  white-space:nowrap;
}
.chat-msg.private-pm-msg .chat-text{
  color:#f1fff0 !important;
}
.chat-msg.private-pm-msg .chat-msg-reply-box,
.chat-msg.private-pm-msg .chat-msg-reply-box.chat-msg-reply-box--neutral{
  background:rgba(83,252,24,.10) !important;
  border-right-color:#53fc18 !important;
}
.chat-msg.private-pm-msg .chat-msg-reply-box .reply-box-user{
  color:#53fc18 !important;
}