/* TeleLive /live — chat v2: popout window, pinned bar, users panel, mobile panels, appearance sheet */

.mob-info-title[hidden],
.mob-info-category[hidden] {
    display: none !important;
}

/* ── Pinned message ───────────────────────────────────────────── */
#chatPanel > #pinnedMsgBar.tl-pin:not(.is-open) {
    display: none !important;
}
#chatPanel > #pinnedMsgBar.tl-pin.is-open {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0 !important;
    margin: 8px 10px 4px;
    padding: 9px 8px 9px 10px !important;
    border-radius: 14px;
    border: 1px solid rgba(30, 86, 245, .34) !important;
    background: linear-gradient(135deg, rgba(30, 86, 245, .18) 0%, rgba(30, 86, 245, .06) 100%) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
    font-size: .82rem;
    cursor: default;
    position: relative;
    min-width: 0;
    box-sizing: border-box;
    animation: tlPinIn .22s ease-out;
}
@keyframes tlPinIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
.tl-pin__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 86, 245, .9);
    color: #fff;
    font-size: .75rem;
    box-shadow: 0 4px 12px rgba(30, 86, 245, .35);
}
.tl-pin__icon i {
    color: #fff !important;
    margin: 0 !important;
    transform: rotate(35deg);
}
.tl-pin__body {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    outline: none;
}
.tl-pin__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-bottom: 2px;
    line-height: 1.2;
}
.tl-pin__label {
    flex: 0 0 auto;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7ea2ff;
}
.tl-pin__by {
    min-width: 0;
    font-size: .76rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-pin__by:empty { display: none; }
#pinnedMsgBar.tl-pin .tl-pin__text {
    color: rgba(255, 255, 255, .9) !important;
    font-size: .84rem;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
}
#pinnedMsgBar.tl-pin.is-expanded .tl-pin__text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height: 38vh;
    overflow-y: auto;
}
#pinnedMsgBar.tl-pin.is-long:not(.is-expanded) .tl-pin__body::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    display: block;
    font-size: .6rem;
    color: rgba(255, 255, 255, .45);
    margin-top: 2px;
    text-align: center;
}
.tl-pin__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
}
#pinnedMsgBar.tl-pin .tl-pin__btn {
    position: static !important;
    transform: none !important;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 0;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    cursor: pointer;
    padding: 0;
    transition: background .15s, color .15s;
}
#pinnedMsgBar.tl-pin .tl-pin__btn i { color: inherit !important; margin: 0 !important; }
#pinnedMsgBar.tl-pin .tl-pin__btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
#pinnedMsgBar.tl-pin .tl-pin__btn--unpin:hover { background: rgba(244, 63, 94, .2); color: #fb7185; }

#chatPanel > #pinnedMsgBar.tl-pin.tl-pinned-admin-gold {
    border-color: rgba(245, 158, 11, .45) !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, .2) 0%, rgba(245, 158, 11, .06) 100%) !important;
}
#pinnedMsgBar.tl-pin.tl-pinned-admin-gold .tl-pin__icon { background: #f59e0b; box-shadow: 0 4px 12px rgba(245, 158, 11, .35); }
#pinnedMsgBar.tl-pin.tl-pinned-admin-gold .tl-pin__label { color: #fbbf24; }

[data-theme="light"] #chatPanel > #pinnedMsgBar.tl-pin.is-open {
    background: linear-gradient(135deg, rgba(30, 86, 245, .1) 0%, rgba(30, 86, 245, .03) 100%) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}
[data-theme="light"] #pinnedMsgBar.tl-pin .tl-pin__text { color: #1c1c1e !important; }
[data-theme="light"] .tl-pin__by { color: #1c1c1e; }
[data-theme="light"] #pinnedMsgBar.tl-pin .tl-pin__btn { background: rgba(0, 0, 0, .05); color: rgba(0, 0, 0, .55); }

/* ── Users in chat ────────────────────────────────────────────── */
#chatPanel > #chatUsersPanel.tl-cup:not(.is-open) {
    display: none !important;
}
#chatPanel > #chatUsersPanel.tl-cup.is-open {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    z-index: 45 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    background: var(--bg-elev-1, #141419) !important;
    box-shadow: none !important;
    animation: tlCupIn .18s ease-out;
}
@keyframes tlCupIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.tl-cup .cup-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
    background: transparent;
}
.tl-cup .cup-icon-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .85rem;
    transition: background .15s, border-color .15s;
}
.tl-cup .cup-icon-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); }
[dir="rtl"] .tl-cup .cup-icon-btn--back i { transform: scaleX(-1); }
.tl-cup .cup-icon-btn.is-spinning i { animation: tlCupSpin .8s linear infinite; }
@keyframes tlCupSpin { to { transform: rotate(360deg); } }
.tl-cup .cup-head-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.tl-cup .cup-head-title {
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
}
.tl-cup .cup-head-sub {
    font-size: .72rem;
    color: rgba(235, 235, 245, .55);
    margin-top: 2px;
}
.tl-cup .cup-head-sub:empty { display: none; }
.tl-cup .cup-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px 6px;
    padding: 0 12px;
    height: 38px;
    border-radius: 12px;
    background: rgba(120, 120, 128, .18);
    border: 1px solid transparent;
    flex-shrink: 0;
    cursor: text;
    transition: border-color .15s, background .15s;
}
.tl-cup .cup-search:focus-within { border-color: rgba(30, 86, 245, .55); background: rgba(120, 120, 128, .24); }
.tl-cup .cup-search i { color: rgba(235, 235, 245, .45); font-size: .8rem; }
#chatUsersPanel .cup-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0 !important;
    outline: none;
    box-shadow: none !important;
    background: transparent !important;
    color: #fff;
    font-size: .85rem;
    font-family: inherit;
}
.tl-cup .cup-search input::placeholder { color: rgba(235, 235, 245, .4); }
.tl-cup .cup-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.tl-cup .cup-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 12px 8px;
    flex-shrink: 0;
}
.tl-cup .cup-summary:empty { display: none; }
.tl-cup .cup-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
}
.tl-cup .cup-chip--live { color: #fca5a5; background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .3); }
.tl-cup .cup-chip--off { color: rgba(235, 235, 245, .65); }
.tl-cup .cup-panel-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 2px 8px 14px !important;
    max-height: none !important;
}
.tl-cup .cup-loading {
    padding: 36px 0;
    text-align: center;
    color: rgba(235, 235, 245, .5);
}
.tl-cup .cup-group { margin-top: 8px; }
.tl-cup .cup-group__hd {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 6px 6px 4px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(235, 235, 245, .5);
}
.tl-cup .cup-group__hd i { font-size: .7rem; }
.tl-cup .cup-group--streamer .cup-group__hd i { color: #f59e0b; }
.tl-cup .cup-group--mod .cup-group__hd i { color: #22c55e; }
.tl-cup .cup-group--vip .cup-group__hd i { color: #e879f9; }
.tl-cup .cup-group--watching .cup-group__hd i { color: #60a5fa; }
.tl-cup .cup-group__count {
    margin-inline-start: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: rgba(235, 235, 245, .7);
    font-size: .66rem;
    letter-spacing: 0;
}
.tl-cup .cup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px;
    border-radius: 11px;
    cursor: pointer;
    outline: none;
    transition: background .12s;
    min-width: 0;
}
.tl-cup .cup-row:hover,
.tl-cup .cup-row:focus-visible { background: rgba(255, 255, 255, .06); }
.tl-cup .cup-row__av {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
}
.tl-cup .cup-row__av img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
}
.tl-cup .cup-row--streamer .cup-row__av img { box-shadow: 0 0 0 2px #f59e0b; }
.tl-cup .cup-row--mod .cup-row__av img { box-shadow: 0 0 0 2px #22c55e; }
.tl-cup .cup-row--vip .cup-row__av img { box-shadow: 0 0 0 2px #e879f9; }
.tl-cup .cup-row__live {
    position: absolute;
    bottom: -1px;
    inset-inline-end: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--bg-elev-1, #141419);
}
.tl-cup .cup-row__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.tl-cup .cup-row__name {
    font-size: .86rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-cup .cup-row__you { font-weight: 500; color: rgba(235, 235, 245, .5); font-size: .75rem; }
.tl-cup .cup-row__handle {
    font-size: .72rem;
    color: rgba(235, 235, 245, .45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
}
.tl-cup .cup-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.tl-cup .cup-badge--streamer { background: rgba(245, 158, 11, .16); color: #fbbf24; }
.tl-cup .cup-badge--mod { background: rgba(34, 197, 94, .16); color: #4ade80; }
.tl-cup .cup-badge--vip { background: rgba(232, 121, 249, .16); color: #f0abfc; }
.tl-cup .cup-row__mention {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    border: 0;
    background: rgba(255, 255, 255, .06);
    color: rgba(235, 235, 245, .7);
    font-weight: 800;
    font-size: .8rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, background .12s;
}
.tl-cup .cup-row:hover .cup-row__mention,
.tl-cup .cup-row:focus-within .cup-row__mention { opacity: 1; }
.tl-cup .cup-row__mention:hover { background: rgba(30, 86, 245, .35); color: #fff; }
@media (hover: none) {
    .tl-cup .cup-row__mention { opacity: 1; }
}
.tl-cup .cup-empty {
    padding: 40px 20px;
    text-align: center;
    color: rgba(235, 235, 245, .5);
}
.tl-cup .cup-empty i { font-size: 1.6rem; opacity: .5; }
.tl-cup .cup-empty p { margin: 10px 0 0; font-size: .82rem; line-height: 1.6; }
#chatUsersBtn.is-active { background: rgba(30, 86, 245, .22) !important; border-color: rgba(30, 86, 245, .5) !important; color: #fff !important; }

[data-theme="light"] #chatPanel > #chatUsersPanel.tl-cup.is-open { background: var(--bg-elev-1, #fff) !important; }
[data-theme="light"] .tl-cup .cup-head-title,
[data-theme="light"] .tl-cup .cup-row__name,
[data-theme="light"] .tl-cup .cup-search input { color: #1c1c1e; }
[data-theme="light"] .tl-cup .cup-icon-btn { color: #1c1c1e; border-color: rgba(0, 0, 0, .1); background: rgba(0, 0, 0, .04); }
[data-theme="light"] .tl-cup .cup-row:hover { background: rgba(0, 0, 0, .04); }
[data-theme="light"] .tl-cup .cup-chip { color: #3a3a3c; background: rgba(0, 0, 0, .04); border-color: rgba(0, 0, 0, .08); }

/* ── Mobile /live ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    body.page-stream:not(.tl-mob-chat-drawer-open):not(.tl-popout-chat) #chatPanel > #pinnedMsgBar,
    body.page-stream:not(.tl-mob-chat-drawer-open):not(.tl-popout-chat) #chatPanel > #streamerWarnBar,
    body.page-stream:not(.tl-mob-chat-drawer-open):not(.tl-popout-chat) #chatPanel > #followOnlyBar,
    body.page-stream:not(.tl-mob-chat-drawer-open):not(.tl-popout-chat) #chatPanel > #chatUsersPanel {
        display: none !important;
    }
    #chatPanel > #pinnedMsgBar.tl-pin.is-open { margin: 6px 8px 2px; }

    body.page-stream .stream-left-col .panels-edit-bar {
        display: flex !important;
        padding: 10px 12px 0;
    }
    body.page-stream .stream-left-col #streamPanelsSection:not([style*="display:none"]) {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 12px 18px;
        box-sizing: border-box;
        width: 100%;
    }
    body.page-stream #streamPanelsSection .tl-panels-top-row {
        grid-template-columns: 1fr !important;
        gap: 12px;
        margin: 0;
    }
    body.page-stream #streamPanelsSection .tl-panels-about-card { padding: 14px 16px; }
    body.page-stream #streamPanelsSection .tl-panels-goals-col .tl-goal-duo {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 10px;
    }
    body.page-stream #streamPanelsSection .tl-goal-tile { padding: 12px 14px; width: 100%; }
    body.page-stream #streamPanelsSection .tl-goal-tile__nums {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px 8px;
    }
    body.page-stream #streamPanelsSection .tl-goal-tile__cur { font-size: 1.2rem; }
    body.page-stream #streamPanelsSection .stream-panels-grid:not([style*="display:none"]) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    body.page-stream #streamPanelsSection .stream-panel-item { grid-column: 1 / -1 !important; }
    body.page-stream #streamPanelsSection .panel-img { width: 100%; height: auto; display: block; }
}

/* ── Popout chat window (?popout_chat=1) ──────────────────────── */
/* :not(#tlPopX) must outrank the body.page-stream mobile drawer rules in style.css */
html:has(body.tl-popout-chat),
body.tl-popout-chat {
    height: 100%;
    overflow: hidden !important;
}
body.tl-popout-chat {
    margin: 0;
    padding: 0 !important;
    background: var(--bg-base, #0e0e10);
}
body.tl-popout-chat:not(#tlPopX) #pageLoader,
body.tl-popout-chat:not(#tlPopX) .tl-season-banner,
body.tl-popout-chat:not(#tlPopX) .stream-left-col,
body.tl-popout-chat:not(#tlPopX) #tlHbdOverlay,
body.tl-popout-chat:not(#tlPopX) #welcomePopupBackdrop,
body.tl-popout-chat:not(#tlPopX) #tlSiteAnnouncementBackdrop,
body.tl-popout-chat:not(#tlPopX) .mob-bottom-nav,
body.tl-popout-chat:not(#tlPopX) #tlMobChatDock > .tl-sk-layer,
body.tl-popout-chat:not(#tlPopX) #chatPanel > .chat-panel-toggle-hint,
body.tl-popout-chat:not(#tlPopX) .chat-drawer-header-chevron,
body.tl-popout-chat:not(#tlPopX) .chat-hdr-actions-slot--mob,
body.tl-popout-chat:not(#tlPopX) #chatPopoutBtn {
    display: none !important;
}
body.tl-popout-chat:not(#tlPopX) .main-content,
body.tl-popout-chat:not(#tlPopX) .tl-page-content,
body.tl-popout-chat:not(#tlPopX) .stream-page {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    display: block !important;
}
body.tl-popout-chat:not(#tlPopX) #tlMobChatDock {
    position: fixed !important;
    inset: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}
body.tl-popout-chat:not(#tlPopX) #tlMobChatDock > #chatPanel {
    position: relative !important;
    top: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: hidden !important;
}
body.tl-popout-chat:not(#tlPopX) #chatPanel > .chat-header {
    display: flex !important;
    flex-direction: column;
    flex-shrink: 0 !important;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
body.tl-popout-chat:not(#tlPopX) #chatPanel .chat-header-top {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
body.tl-popout-chat:not(#tlPopX) #chatPanel .chat-header-top h3 {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.tl-popout-chat:not(#tlPopX) #chatPanel .chat-hdr-actions-slot--desktop {
    display: block !important;
    margin-inline-start: auto;
    flex: 0 0 auto;
}
body.tl-popout-chat:not(#tlPopX) #chatPanel .chat-header-actions {
    display: flex !important;
    align-items: center;
    gap: 6px;
}
body.tl-popout-chat:not(#tlPopX) #chatPanel > .chat-events-panel { display: block !important; flex-shrink: 0 !important; }
body.tl-popout-chat:not(#tlPopX) #chatPanel > .chat-messages {
    display: block !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
body.tl-popout-chat:not(#tlPopX) #chatPanel > .chat-input-area,
body.tl-popout-chat:not(#tlPopX) #chatPanel > .chat-login-prompt {
    display: block !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    align-self: stretch !important;
}
body.tl-popout-chat:not(#tlPopX) #chatPanel > .chat-login-prompt { text-align: center; }
body.tl-popout-chat:not(#tlPopX) #chatPanel > #followOnlyBar:not(.is-open),
body.tl-popout-chat:not(#tlPopX) #chatPanel > #streamerWarnBar:not(.is-open),
body.tl-popout-chat:not(#tlPopX) #chatPanel > #modViewPanel:not(.mod-view-open) {
    display: none !important;
}
body.tl-popout-chat:not(#tlPopX) #chatPanel > #modViewPanel.mod-view-open { display: block !important; flex-shrink: 0; }

.tl-pop-vc {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(239, 68, 68, .14);
    border: 1px solid rgba(239, 68, 68, .35);
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tl-pop-vc i { font-size: .7rem; opacity: .85; }
.tl-pop-vc__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    animation: tlPopPulse 1.8s ease-out infinite;
}
@keyframes tlPopPulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ── Chat appearance sheet ────────────────────────────────────── */
.tl-cs-appearance { margin: 2px 0 14px; }
.tl-cs-appearance .tl-quick-tools__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    color: var(--text, #e8e8e8);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    text-align: start;
    font-family: inherit;
}
.tl-cs-appearance .tl-quick-tools__toggle-label { display: flex; align-items: center; gap: 10px; }
.tl-cs-appearance .tl-quick-tools__toggle-label > i { color: #a78bfa; width: 18px; text-align: center; }
.tl-cs-appearance .tl-quick-tools__chev { font-size: .72rem; opacity: .75; transition: transform .2s ease; }
.tl-cs-appearance .tl-quick-tools__toggle:hover { background: rgba(255, 255, 255, .09); border-color: rgba(167, 139, 250, .4); }
.tl-cs-appearance .tl-quick-tools__toggle.is-open { border-color: rgba(167, 139, 250, .5); background: rgba(167, 139, 250, .12); }
.tl-cs-appearance .tl-quick-tools__toggle.is-open .tl-quick-tools__chev { transform: rotate(180deg); }
.tl-cs-appearance .tl-quick-tools__panel { padding: 14px 2px 4px; }
.tl-cs-appearance .tl-quick-tools__panel[hidden] { display: none !important; }
.tl-cs-acc-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.tl-cs-acc-text small { font-size: .7rem; font-weight: 500; opacity: .6; margin-top: 2px; }

.tl-cs-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: 12px;
    background: rgba(120, 120, 128, .2);
}
.tl-cs-seg__btn {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    padding: 7px 4px;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .15s, color .15s;
}
.tl-cs-seg__btn:hover { color: #fff; }
.tl-cs-seg__btn.is-active {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.tl-cs-preview__line { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tl-cs-preview__line .tl-cs-preview__mods { margin-inline-start: auto; }
.tl-cs-preview__line .tl-cs-preview__time { display: inline; margin: 0; }
.tl-cs-preview__line .tl-cs-preview__time[hidden] { display: none; }
#tlChatPreview[data-tl-chat-density="compact"] { padding-top: 8px; padding-bottom: 8px; }
#tlChatPreview[data-tl-chat-density="roomy"] { padding-top: 16px; padding-bottom: 16px; }
.tl-cs-reset {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: transparent;
    color: rgba(235, 235, 245, .65);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.tl-cs-reset:hover { color: #fff; background: rgba(255, 255, 255, .06); }
[data-theme="light"] .tl-cs-seg__btn { color: rgba(0, 0, 0, .6); }
[data-theme="light"] .tl-cs-seg__btn.is-active { background: #fff; color: #000; }

/* ── Named social platforms (when goals fill the right column) ─ */
.tl-panels-about-socials--named {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
}
.tl-panels-about-card .tl-panels-about-socials a.tl-social-link--named,
.tl-panels-about-socials--named a.tl-social-link--icon {
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 40px;
    padding: 8px 12px !important;
    justify-content: flex-start !important;
    gap: 10px;
    border-radius: 12px;
}
.tl-panels-about-card .tl-panels-about-socials a.tl-social-link--named img,
.tl-panels-about-socials--named a.tl-social-link--icon img {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex: 0 0 18px !important;
    object-fit: contain;
    display: block;
}
.tl-social-link__name {
    font-size: .84rem;
    font-weight: 650;
    color: var(--text, #f3f3ff);
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-panels-about-card .tl-social-link--named:hover .tl-social-link__name {
    color: #fff;
}

/* ── Chat header redesign ───────────────────────────────────── */
body.page-stream #chatPanel > .chat-header {
    padding: 11px 14px 10px;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .01) 100%);
}
body.page-stream #chatPanel .chat-header-top {
    min-height: 38px;
    gap: 8px;
    align-items: center;
}
body.page-stream #chatPanel .chat-header-top h3 {
    font-size: .94rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    gap: 9px;
}
body.page-stream #chatPanel .chat-header-top h3 i {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .74rem;
    background: rgba(30, 86, 245, .2);
    color: #9cbcff;
    border: 1px solid rgba(91, 140, 255, .32);
}
body.page-stream #chatPanel .chat-hdr-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
    color: rgba(235, 235, 245, .8);
    font-size: .8rem;
    transition: background .15s, border-color .15s, color .15s;
}
body.page-stream #chatPanel .chat-hdr-btn:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
    transform: none;
}
body.page-stream #chatPanel .chat-hdr-btn.is-active,
body.page-stream #chatPanel .chat-hdr-btn[aria-expanded="true"] {
    background: rgba(30, 86, 245, .22);
    border-color: rgba(91, 140, 255, .5);
    color: #b4c9ff;
}
body.page-stream #chatPanel .chat-hdr-total-views {
    gap: 8px;
    padding: 2px 0 0;
    justify-content: flex-start;
}
body.page-stream #chatPanel .chat-hdr-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: .74rem;
    color: rgba(235, 235, 245, .72);
    font-weight: 650;
}
body.page-stream #chatPanel .chat-hdr-stat .fa-heart { color: #f43f5e; }
body.page-stream #chatPanel .chat-hdr-stat .fa-eye { color: #94a3b8; }

/* ── Mini profile redesign ──────────────────────────────────── */
.chat-user-popup.tl-cup-card {
    width: min(320px, calc(100vw - 24px));
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(165deg, #1a1a22 0%, #121218 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.chat-user-popup.tl-cup-card .cup-header {
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 14px 10px;
    background: linear-gradient(180deg, rgba(30, 86, 245, .12) 0%, transparent 100%);
}
.chat-user-popup.tl-cup-card .cup-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, .14);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.chat-user-popup.tl-cup-card .cup-name {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}
.chat-user-popup.tl-cup-card .cup-username {
    font-size: .78rem;
    margin-top: 2px;
    opacity: .75;
}
.chat-user-popup.tl-cup-card .cup-badges {
    margin: 6px 0 0;
    gap: 4px;
}
.chat-user-popup.tl-cup-card .cup-badge {
    padding: 2px 7px;
    font-size: .68rem;
    border-radius: 6px;
}
.chat-user-popup.tl-cup-card .cup-close {
    position: static;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(235, 235, 245, .7);
    font-size: .72rem;
}
.chat-user-popup.tl-cup-card .cup-close:hover {
    background: rgba(239, 68, 68, .25);
    border-color: rgba(239, 68, 68, .45);
    color: #fff;
}
.chat-user-popup.tl-cup-card .cup-stats {
    margin: 0;
    padding: 0 14px 12px;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.chat-user-popup.tl-cup-card .cup-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
}
.chat-user-popup.tl-cup-card .cup-stat i { color: #f43f5e; }
.chat-user-popup.tl-cup-card .cup-stat em {
    font-style: normal;
    font-weight: 550;
    color: rgba(235, 235, 245, .55);
    font-size: .72rem;
}
.chat-user-popup.tl-cup-card .cup-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(244, 63, 94, .45);
    background: rgba(244, 63, 94, .16);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
}
.chat-user-popup.tl-cup-card .cup-follow-btn:hover {
    background: rgba(244, 63, 94, .28);
    border-color: rgba(244, 63, 94, .7);
    transform: translateY(-1px);
}
.chat-user-popup.tl-cup-card .cup-follow-btn.is-following {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: rgba(235, 235, 245, .85);
}
.chat-user-popup.tl-cup-card .cup-follow-btn:disabled { opacity: .55; cursor: wait; }
.chat-user-popup.tl-cup-card .cup-follow-btn i { color: #f43f5e; }
.chat-user-popup.tl-cup-card .cup-follow-btn.is-following i { color: #fb7185; }
.chat-user-popup.tl-cup-card .cup-actions {
    margin: 0 12px 10px;
    padding: 0;
}
.chat-user-popup.tl-cup-card .cup-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px 12px;
}
.chat-user-popup.tl-cup-card .cup-footer .cup-btn,
.chat-user-popup.tl-cup-card .cup-footer .cup-profile-link {
    margin: 0;
    border-radius: 10px;
    justify-content: center;
    text-align: center;
}
[data-theme="light"] .chat-user-popup.tl-cup-card {
    background: linear-gradient(165deg, #fff 0%, #f4f4f8 100%);
    border-color: rgba(0, 0, 0, .1);
}
[data-theme="light"] .chat-user-popup.tl-cup-card .cup-name,
[data-theme="light"] .chat-user-popup.tl-cup-card .cup-stat,
[data-theme="light"] .tl-social-link__name { color: #111; }
[data-theme="light"] .chat-user-popup.tl-cup-card .cup-follow-btn {
    color: #fff;
}

/* ── Chat surface polish (match /live info-bar language) ── */
body.page-stream #chatPanel .chat-messages {
    padding: 8px 6px 10px;
}
body.page-stream #chatPanel .chat-message {
    grid-template-columns: 28px 1fr;
    gap: 8px;
    padding: 7px 10px;
    margin: 2px 4px;
    border-radius: 12px;
    background: transparent;
}
body.page-stream #chatPanel .chat-message:nth-child(odd),
body.page-stream #chatPanel .chat-message:nth-child(even) {
    background: transparent;
}
body.page-stream #chatPanel .chat-message:hover {
    background: rgba(255, 255, 255, 0.035);
}
body.page-stream #chatPanel .chat-input-area {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 12px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%);
}
body.page-stream #chatPanel .chat-input-wrap {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    min-height: 40px;
}
body.page-stream #chatPanel .chat-input {
    background: transparent !important;
}
body.page-stream #chatPanel .chat-reply-preview,
body.page-stream #chatPanel #chatReplyPreview {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-inline-start-width: 3px;
}
body.page-stream #chatPanel .chat-users-panel,
body.page-stream #chatPanel #chatUsersPanel {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(18, 18, 24, 0.96);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
body.page-stream #chatPanel .cup-btn,
body.page-stream #chatPanel .chat-users-panel button {
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}
body.page-stream #chatPanel > #pinnedMsgBar.tl-pin.is-open {
    border-radius: 12px;
    margin: 8px 10px 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(30, 86, 245, 0.1);
}