/*tTed-Bot Social — layout, feed, mobile */

:root {
    color-scheme: dark;
    --bg: #000000;
    --bg-elevated: #000000;
    --text: #e7e9ea;
    --text-muted: #71767b;
    --social-border: #2f3336;
    --social-hover: rgba(231, 233, 234, 0.04);
    --social-blue: #1d9bf0;
    --social-blue-hover: #1a8cd8;
    --social-like: #e7e9ea;
    --social-like-active: #f91880;
    --social-reply: #1d9bf0;
    --social-share: #00ba7c;
    --social-repost: #00ba7c;
    --social-bookmark: #ffd400;
    --social-muted: #71767b;
    --input-bg: #202327;
    --input-bg-focus: #000000;
    --bg-glass: rgba(0, 0, 0, 0.85);
    --bg-glass-soft: rgba(0, 0, 0, 0.65);
    --bg-glass-strong: rgba(0, 0, 0, 0.92);
    --surface-faint: rgba(255, 255, 255, 0.02);
    --surface-subtle: rgba(255, 255, 255, 0.04);
    --surface-raised: rgba(255, 255, 255, 0.08);
    --surface-inset: rgba(0, 0, 0, 0.2);
    --surface-inset-strong: rgba(0, 0, 0, 0.25);
    --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.65);
    --card-bg: #16181c;
    --card-bg-deep: #0a0a0a;
    --card-bg-alt: #0e141e;
    --card-bg-muted: #0c1014;
    --card-bg-panel: #0f1114;
    --card-bg-inset: #1a1f26;
    --panel-inset: #152033;
    --chip-bg: #333333;
    --border-strong: #000000;
    --btn-primary-bg: #e7e9ea;
    --btn-primary-text: #0f1419;
    --btn-primary-hover: #d7dbdc;
    --trend-row-hover: rgba(231, 233, 234, 0.04);
    --gradient-card: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    --gradient-trust: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    --gradient-connect: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
    --border-hover: rgba(255, 255, 255, 0.22);
    --drag-handle: rgba(231, 233, 234, 0.28);
    --feed-width: 600px;
    --rail-width: 275px;
    --aside-width: 350px;
    --shell-width: calc(var(--rail-width) + var(--feed-width) + var(--aside-width));
    --shell-gutter: 0px;
    --content-offset: calc(var(--shell-gutter) + var(--rail-width));
    --content-width: calc(var(--shell-width) - var(--rail-width));
    --dm-list-width: 350px;
    --header-mobile: 53px;
    --nav-mobile: 58px;
    --app-font: 'Chirp', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --text: #000000;
    --text-muted: #536471;
    --social-border: #cfd9de;
    --social-hover: rgba(0, 0, 0, 0.04);
    --social-like: #0f1419;
    --social-like-active: #f91880;
    --input-bg: #eff3f4;
    --input-bg-focus: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.92);
    --bg-glass-soft: rgba(255, 255, 255, 0.88);
    --bg-glass-strong: rgba(255, 255, 255, 0.95);
    --surface-faint: rgba(0, 0, 0, 0.02);
    --surface-subtle: rgba(0, 0, 0, 0.04);
    --surface-raised: rgba(0, 0, 0, 0.06);
    --surface-inset: rgba(0, 0, 0, 0.04);
    --surface-inset-strong: rgba(0, 0, 0, 0.06);
    --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.12);
    --card-bg: #f7f9f9;
    --card-bg-deep: #ffffff;
    --card-bg-alt: #eff3f4;
    --card-bg-muted: #eff3f4;
    --card-bg-panel: #f7f9f9;
    --card-bg-inset: #eff3f4;
    --panel-inset: #e1e8ed;
    --chip-bg: #cfd9de;
    --border-strong: #cfd9de;
    --btn-primary-bg: #0f1419;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #272c30;
    --trend-row-hover: rgba(0, 0, 0, 0.04);
    --gradient-card: linear-gradient(165deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.005) 100%);
    --gradient-trust: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
    --gradient-connect: linear-gradient(165deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
    --border-hover: rgba(0, 0, 0, 0.14);
    --drag-handle: rgba(0, 0, 0, 0.18);
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--app-font);
    min-height: 100%;
    max-width: 100%;
    -webkit-font-smoothing: antialiased;
}

html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.social-page {
    overflow-x: clip;
}

img,
video,
iframe,
embed,
object,
svg,
pre,
table {
    max-width: 100%;
}

img,
video {
    height: auto;
}

a {
    color: inherit;
}

.page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.layout-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--feed-width)) minmax(0, var(--aside-width));
    gap: 0;
    justify-content: start;
    align-items: start;
    min-height: 100vh;
    width: var(--content-width);
    max-width: calc(100% - var(--content-offset));
    margin-left: var(--content-offset);
    min-width: 0;
    box-sizing: border-box;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
    box-sizing: border-box;
    font-family: var(--app-font);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    width: 52px;
    height: 52px;
    margin: 2px 0 4px 2px;
    padding: 12px;
    border-radius: 999px;
    transition: background 0.15s;
}

.sidebar-brand:hover {
    background: var(--social-hover);
}

.sidebar-brand .brand-icon {
    width: 28px;
    height: 28px;
    display: block;
}

.sidebar-brand .brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.sidebar-item:hover {
    background: var(--social-hover);
    transform: none;
}

.sidebar-item.active {
    font-weight: 700;
    color: var(--text);
    background: rgba(29, 155, 240, 0.08);
}

.sidebar-item.disabled {
    color: var(--text-muted);
    opacity: 0.72;
    pointer-events: none;
    cursor: default;
}

.sidebar-soon-tag {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
}

.sidebar-item .icon {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.sidebar-item .icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
}

.sidebar-item .icon svg.reels-icon,
.mobile-nav-icon.reels-icon,
.sidebar-item .icon svg.portal-icon,
.mobile-nav-icon.portal-icon {
    width: 26px;
    height: 26px;
    display: block;
    flex-shrink: 0;
}

.sidebar-item .icon svg.nav-icon-stroke,
.mobile-nav-icon.nav-icon-stroke {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}

.sidebar-item .icon svg.reels-icon rect,
.mobile-nav-icon.reels-icon rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

.sidebar-item .icon svg.reels-icon path,
.mobile-nav-icon.reels-icon path,
.sidebar-item .icon svg.portal-icon path,
.mobile-nav-icon.portal-icon path {
    fill: currentColor;
    stroke: none;
}

.sidebar-item .icon svg.nav-icon-stroke path,
.sidebar-item .icon svg.nav-icon-stroke circle,
.sidebar-item .icon svg.nav-icon-stroke rect,
.mobile-nav-icon.nav-icon-stroke path,
.mobile-nav-icon.nav-icon-stroke circle,
.mobile-nav-icon.nav-icon-stroke rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

/* casino uses dual-path groups; no legacy circle rules */

.sidebar-item.active .icon svg.reels-icon rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

.sidebar-item.active .icon svg.reels-icon path,
.sidebar-item.active .icon svg.portal-icon path {
    fill: currentColor;
    stroke: none;
}

.sidebar-item.active .icon svg.nav-icon-stroke path,
.sidebar-item.active .icon svg.nav-icon-stroke circle,
.sidebar-item.active .icon svg.nav-icon-stroke rect,
.sidebar-item.active .icon svg.admin-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

/* casino active via .casino-icon-fill */

/* X-style Messages icon: outline default, filled when selected */
.sidebar-item .icon svg.messages-icon,
.sidebar-item .icon svg.nav-icon-messages,
.mobile-nav-icon.messages-icon,
.mobile-nav-icon.nav-icon-messages {
    fill: currentColor !important;
    stroke: none !important;
    stroke-width: 0 !important;
}
.sidebar-item .icon svg.messages-icon .msg-icon-outline,
.mobile-nav-icon.messages-icon .msg-icon-outline,
svg.messages-icon .msg-icon-outline {
    display: block;
    fill: currentColor;
}
.sidebar-item .icon svg.messages-icon .msg-icon-fill,
.mobile-nav-icon.messages-icon .msg-icon-fill,
svg.messages-icon .msg-icon-fill {
    display: none;
    fill: currentColor;
}
.sidebar-item.active .icon svg.messages-icon .msg-icon-outline,
.mobile-nav-item.active .mobile-nav-icon.messages-icon .msg-icon-outline,
a.active svg.messages-icon .msg-icon-outline {
    display: none;
}
.sidebar-item.active .icon svg.messages-icon .msg-icon-fill,
.mobile-nav-item.active .mobile-nav-icon.messages-icon .msg-icon-fill,
a.active svg.messages-icon .msg-icon-fill {
    display: block;
    fill: currentColor;
}
/* Override global active stroke rule that would hollow-out the fill path */
.sidebar-item.active .icon svg.messages-icon path,
.sidebar-item.active .icon svg.nav-icon-messages path {
    fill: currentColor !important;
    stroke: none !important;
}


.btn-post {
    display: flex;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 4px 0 0;
    padding: 12px 16px;
    border-radius: 999px;
    background: var(--social-blue);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    text-decoration: none;
    border: none;
    box-shadow: none;
    transition: background 0.15s;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.btn-post .icon {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.btn-post .icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
}

.btn-post:hover {
    background: var(--social-blue-hover);
}

.sidebar-bottom {
    margin-top: auto;
    padding: 12px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.sidebar-account {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    margin: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
    box-sizing: border-box;
}

.sidebar-account:hover {
    background: var(--social-hover);
}

.sidebar-account-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-size: 0.8rem;
}

.sidebar-account-avatar-guest {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #1d9bf0, #0b69d8);
    color: #fff;
    font-weight: 800;
    border: 2px solid rgba(255, 255, 255, 0.12);
}

.sidebar-account-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.sidebar-account-name {
    font-weight: 700;
    color: var(--text);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-account-handle {
    font-size: 15px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-account-more {
    flex-shrink: 0;
    color: var(--text-muted);
    display: grid;
    place-items: center;
}

.sidebar-account-menu {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc(100% + 4px);
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    z-index: 30;
}

.sidebar-account-menu button,
.sidebar-account-menu-item {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.sidebar-account-menu button:hover,
.sidebar-account-menu-item:hover {
    background: var(--social-hover);
}

.sidebar-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 8px;
}

.sidebar-auth-btn {
    display: block;
    padding: 12px 16px;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    border: 1px solid var(--social-border);
    color: var(--text);
    background: transparent;
}

.sidebar-auth-btn-primary {
    background: var(--social-blue);
    border-color: var(--social-blue);
    color: #fff;
}

.sidebar-auth-btn-primary:hover {
    background: var(--social-blue-hover);
}

.profile-actions summary {
    list-style: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.2rem;
}

.profile-actions-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 8px;
    padding: 4px 0;
    min-width: 160px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}

.main-content {
    border-left: 1px solid var(--social-border);
    border-right: 1px solid var(--social-border);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: var(--feed-width);
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
}

.panel {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.right-panel {
    padding: 12px 24px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 0;
    pointer-events: auto;
}

/* Tabs */
.top-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-glass-soft);
    backdrop-filter: blur(12px);
    margin: 0;
    padding: 0;
}

.tag-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--social-border);
}

.tag-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.tag-header a {
    color: var(--social-blue);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
}

.tabs {
    display: flex;
    border-bottom: 1px solid var(--social-border);
    width: 100%;
}

.tabs.tabs-three .tab {
    width: calc(100% / 3);
    min-width: 0;
    flex-shrink: 1;
}

.tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    padding: 12px 4px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    border-radius: 0;
    background: transparent;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.2;
}

.tab:hover {
    background: var(--social-hover);
    color: var(--text);
}

.tab.active {
    color: var(--text);
    font-weight: 700;
}

.tab.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 32px;
    height: 4px;
    background: var(--social-blue);
    border-radius: 2px;
}
.tabs .tab,
.tab-bar .tab {
    font-size: 11px !important;
}
.tab.active::after {
    width: 32px !important;
}

/* Composer */
.feed-composer {
    display: flex;
    gap: 12px;
    padding: 4px 16px 12px;
    border-bottom: 1px solid var(--social-border);
    transition: background 0.12s;
}

.feed-composer:focus-within {
    background: var(--surface-faint);
}

.feed-composer-guest {
    display: block;
    padding: 14px 16px;
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.4;
}

.feed-composer-guest a {
    color: var(--social-blue);
    text-decoration: none;
}

.feed-composer-guest a:hover {
    text-decoration: underline;
}

.feed-composer.news-readonly {
    background: rgba(29, 155, 240, 0.06);
}

.news-post-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--social-border);
    background: rgba(29, 155, 240, 0.05);
}

.news-post-bar-avatar,
.news-composer-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    line-height: 0;
}

.news-brand-avatar,
.post-card-news .post-avatar-link .news-brand-avatar,
.post-card-news .post-avatar-link img.news-brand-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    object-fit: contain;
    object-position: center center;
    display: block;
    background: var(--bg);
    border: none;
    box-sizing: border-box;
    padding: 0;
}

.news-post-bar-copy {
    flex: 1;
    min-width: 0;
}

.news-post-bar-copy strong {
    display: block;
    font-size: 15px;
    color: var(--text);
}

.news-post-bar-copy p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.35;
}

.news-post-bar-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    background: var(--social-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
}

.news-post-bar-btn:hover,
.news-post-bar-btn:focus-visible {
    background: #1a8cd8;
}

.news-post-bar-btn:active {
    transform: scale(0.98);
}

.news-composer-modal.open {
    display: flex;
}

.news-composer-body {
    align-items: flex-start;
}

.news-composer-editor {
    display: grid;
    gap: 10px;
    width: 100%;
}

.news-composer-field {
    display: grid;
    gap: 6px;
}

.news-composer-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.news-composer-name-input {
    width: 100%;
    border: 1px solid var(--social-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 12px;
    box-sizing: border-box;
}

.news-composer-name-input:focus {
    outline: 2px solid rgba(29, 155, 240, 0.45);
    outline-offset: 1px;
    border-color: rgba(29, 155, 240, 0.55);
}

.post-news-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(29, 155, 240, 0.14);
    color: #6bc9ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.post-card-news .post-handle {
    color: #6bc9ff;
}

.news-composer-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}

.feed-autoplay-video {
    background: var(--bg);
    cursor: pointer;
}

.feed .post-media-video .feed-autoplay-video {
    width: 100%;
    height: auto;
    max-height: 420px;
    display: block;
    border-radius: inherit;
}

@media (max-width: 640px) {
    .news-post-bar {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .news-post-bar-btn {
        width: 100%;
    }
}

.composer-file-input {
    display: none;
}

/* Compact audience picker (X-style, top of composer) */
.composer-audience-picker {
    position: relative;
    margin: 0 0 4px;
    padding: 0;
}

.composer-audience-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--social-blue);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}

.composer-audience-trigger:hover,
.composer-audience-picker.is-open .composer-audience-trigger {
    background: rgba(29, 155, 240, 0.1);
}

.composer-audience-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.composer-audience-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.85;
}

.composer-audience-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 240px;
    padding: 4px 0;
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(255, 255, 255, 0.12);
}

.composer-audience-menu[hidden] {
    display: none !important;
}

.composer-audience-option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    box-sizing: border-box;
    transition: background 0.12s;
}

.composer-audience-picker .composer-audience-option:hover {
    background: var(--social-hover);
}

.composer-audience-picker .composer-audience-option.is-selected {
    color: var(--social-blue);
}

.composer-audience-option-title {
    font-size: 15px;
    font-weight: 700;
}

.composer-audience-option-hint {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

/* Collapsed / expanded composer (X-style) */
.feed-composer.is-collapsed .composer-audience-picker,
.feed-composer.is-collapsed .composer-expand-hint,
.feed-composer.is-collapsed .composer-media-slot {
    display: none;
}

.feed-composer.is-collapsed .composer-textarea {
    min-height: 20px;
}

.feed-composer.is-collapsed .feed-composer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
}

.feed-composer.is-expanded .feed-composer-foot {
    border-top: 1px solid var(--social-border);
    margin-top: 8px;
}

.composer-expand-hint {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 10px 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--social-blue);
    cursor: default;
}

.composer-expand-hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.composer-expand-hint-icon svg {
    width: 16px;
    height: 16px;
}

.feed-composer.is-expanded .composer-expand-hint {
    display: flex;
}

.composer-foot-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

.feed-composer .composer-avatar-wrap .author-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.8rem;
}

.feed-composer-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.composer-highlight-wrap {
    position: relative;
    width: 100%;
}

.composer-highlight-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    color: var(--text);
}

.composer-highlight-input {
    position: relative;
    z-index: 1;
    background: transparent !important;
    color: transparent !important;
    caret-color: var(--text);
}

.composer-hl-tag,
.composer-hl-mention {
    color: var(--social-blue);
}

.composer-hl-md {
    color: var(--social-blue);
    font-weight: 600;
}

.composer-hl-link-delim {
    color: var(--text-muted);
}

.composer-hl-link-label {
    color: inherit;
}

.composer-hl-link-url {
    color: var(--social-blue);
}

.composer-chat-preview {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(128, 128, 128, 0.12);
    border: 1px dashed rgba(128, 128, 128, 0.28);
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-muted);
    word-break: break-word;
    box-sizing: border-box;
}

.composer-chat-preview[hidden] {
    display: none !important;
}

.composer-chat-preview::before {
    content: 'Preview';
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dm-compose-editor .composer-chat-preview {
    margin-top: 4px;
    border-radius: 16px;
    font-size: 13px;
}

.dm-convo-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--input-bg);
    color: var(--social-blue);
    border-radius: 50%;
}

.dm-thread-head-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dm-group-leave-btn {
    border: 1px solid var(--social-border);
    background: transparent;
    color: var(--text-muted);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}

.dm-group-leave-btn:hover {
    color: #f4212e;
    border-color: rgba(244, 33, 46, 0.45);
}

.new-message-create-group {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 32px);
    margin: 0 16px 8px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--social-blue);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.new-message-create-group:hover {
    background: rgba(29, 155, 240, 0.08);
    border-radius: 12px;
}

.new-message-group-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px 16px;
}

.new-message-group-panel[hidden] {
    display: none !important;
}

.new-message-back {
    align-self: flex-start;
    border: none;
    background: transparent;
    color: var(--social-blue);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 0;
}

.new-message-field span {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.new-message-group-name,
.new-message-group-search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--social-border);
    background: var(--bg);
    color: var(--text);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 15px;
}

.new-message-group-hint {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.35;
}

.new-message-group-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.new-message-group-chip {
    border: 1px solid var(--social-border);
    background: var(--input-bg);
    color: var(--text);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
}

.new-message-group-results {
    max-height: 220px;
    overflow-y: auto;
}

.new-message-group-empty {
    margin: 8px 0;
    font-size: 13px;
    color: var(--text-muted);
}

.new-message-group-create {
    width: 100%;
}

.feed-composer textarea,
.composer-textarea,
.comment-textarea,
.reply-modal-textarea,
body.social-page .composer-modal .composer-textarea {
    width: 100%;
    min-height: 56px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 20px;
    line-height: 1.35;
    outline: none;
    resize: none;
    padding: 8px 0 0;
    font-family: var(--app-font), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
    box-sizing: border-box;
    box-shadow: none;
    border-radius: 0;
}

.feed-composer textarea::placeholder,
.composer-textarea::placeholder {
    color: var(--text-muted);
}

.feed-composer-foot,
.composer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
}

.feed-composer-tools,
.composer-toolbar,
.comment-toolbar {
    display: flex;
    gap: 0;
    align-items: center;
}

.composer-control {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--social-blue);
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}

.composer-control:hover {
    background: rgba(29, 155, 240, 0.1);
}

.composer-control svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: none;
}

.composer-control svg path[fill='none'] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.composer-control-camera .composer-icon-camera {
    width: 22px;
    height: 22px;
    display: block;
}

.composer-control-emoji .composer-icon-emoji {
    width: 22px;
    height: 22px;
    display: block;
}

.composer-control-gif .gif-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.composer-post-btn {
    background: var(--social-blue);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    min-height: 36px;
    opacity: 0.5;
    pointer-events: none;
}

.composer-post-btn.ready,
.composer-post-btn:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
}

.composer-post-btn:hover:not(:disabled),
.composer-post-btn.ready:hover {
    background: var(--social-blue-hover);
}

.comment-submit {
    background: var(--social-blue);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    min-height: 36px;
    opacity: 1;
    pointer-events: auto;
}

.comment-submit:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.comment-submit:hover:not(:disabled) {
    background: var(--social-blue-hover);
}

.char-counter {
    font-size: 13px;
    color: var(--text-muted);
}

.char-counter.warn {
    color: #ffd400;
}

.char-counter.over {
    color: #f4212e;
}

/* Feed & posts */
.feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.post-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 12px;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--social-border);
    border-radius: 0;
    transition: background 0.1s;
    cursor: default;
}

/* Real hover only — mobile taps must not light the whole post */
@media (hover: hover) and (pointer: fine) {
    .post-card:hover {
        background: var(--social-hover);
        transform: none;
    }
}
.post-card {
    -webkit-tap-highlight-color: transparent;
}
.post-card:active {
    background: transparent;
}
/* While ⋯ menu is open, never highlight the post — only the trigger looks active */
.post-card.is-menu-active,
.post-card.is-menu-active:hover,
.post-card.is-menu-active:active,
.reply-card.is-menu-active,
.reply-card.is-menu-active:hover,
.reply-card.is-menu-active:active,
body.post-menu-open .post-card.is-menu-active {
    background: transparent !important;
}

/* X-style compact timeline posts (home / feed) */
body.social-home .post-card,
.feed .post-card:not(.post-card-expanded):not(.post-card-embedded) {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0 12px;
    padding: 10px 16px 8px;
}

body.social-home .post-body,
.feed .post-card:not(.post-card-expanded):not(.post-card-embedded) .post-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

body.social-home .post-meta-row,
.feed .post-card:not(.post-card-expanded):not(.post-card-embedded) .post-meta-row {
    margin: 0;
    line-height: 18px;
}

body.social-home .post-meta-names,
.feed .post-card:not(.post-card-expanded):not(.post-card-embedded) .post-meta-names {
    line-height: 18px;
    gap: 0;
}

body.social-home .post-text,
.feed .post-card:not(.post-card-expanded):not(.post-card-embedded) .post-text {
    margin: 2px 0 0;
    line-height: 20px;
}

body.social-home .post-text-block,
.feed .post-card:not(.post-card-expanded):not(.post-card-embedded) .post-text-block {
    margin: 2px 0 0;
}

body.social-home .post-text-block .post-text,
.feed .post-card:not(.post-card-expanded):not(.post-card-embedded) .post-text-block .post-text {
    margin-bottom: 0;
}

body.social-home .post-actions,
.feed .post-card:not(.post-card-expanded):not(.post-card-embedded) .post-actions {
    margin: 4px -8px 0;
}

body.social-home .post-actions-btn,
.feed .post-card:not(.post-card-expanded):not(.post-card-embedded) .post-actions-btn {
    padding: 6px;
}

.post-avatar-link .author-avatar,
.author-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.8rem;
    border-radius: 50%;
    background: var(--chip-bg);
    border: none;
    object-fit: cover;
    object-position: center center;
}

.author-avatar.is-default-avatar {
    object-fit: cover;
    background: transparent;
}

/* Default avatars now use nice colored initial letters (different per user) instead of the old
   generic light-gray silhouette that looked broken/empty on dark theme. */
.author-avatar.author-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    user-select: none;
    background: #334155; /* fallback if no inline style */
    line-height: 1;
}

.post-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.post-meta-names {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-width: 0;
    font-size: 15px;
}

.post-author {
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.post-handle,
.post-time {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 15px;
}

.post-dot {
    color: var(--text-muted);
}

.post-text {
    color: var(--text);
    font-size: 15px;
    line-height: 20px;
    margin: 0 0 12px;
    word-wrap: break-word;
    text-decoration: none;
    font-family: var(--app-font), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
}

.post-text a {
    text-decoration: none;
    color: var(--social-blue);
}

.post-text a:hover {
    text-decoration: underline;
}

.post-text-muted {
    color: var(--text-muted);
}

.post-text-block {
    margin: 0 0 12px;
}

.post-text-block .post-text {
    margin-bottom: 4px;
}

.post-text-collapsible.is-collapsed {
    max-height: 6.5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.post-text-collapsible.is-expanded {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.post-read-more {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--social-blue);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    font-family: inherit;
}

.post-read-more:hover {
    text-decoration: underline;
}

.post-edited {
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 400;
}

.post-hashtag,
.post-mention {
    color: var(--social-blue);
    text-decoration: none;
}

.post-hashtag:hover,
.post-mention:hover {
    text-decoration: underline;
}

.post-media-wrap {
    margin: 0 0 12px;
}

.post-media {
    margin: 4px 0 8px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--social-border);
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: min(70vh, 640px);
}

.post-media img,
.post-media video {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(70vh, 640px);
    display: block;
    object-fit: contain;
    object-position: center;
    background: transparent;
    cursor: zoom-in;
    pointer-events: auto;
}

.post-media-gif img {
    object-fit: contain;
    background: var(--bg);
    cursor: zoom-in;
}


/* ===== Social image lightbox (full-screen, fit, zoom, close) ===== */
.social-media-lightbox {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483000 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(0, 0, 0, 0.96) !important;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    overscroll-behavior: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.social-media-lightbox.is-open {
    display: flex !important;
}
.social-media-lightbox-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-out;
}
.social-media-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    transform-origin: center center;
    will-change: transform;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.social-media-lightbox-close {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    z-index: 2147483001 !important;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: rgba(20, 24, 28, 0.92);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
}
.social-media-lightbox-close:hover,
.social-media-lightbox-close:focus-visible {
    background: #1d9bf0;
    outline: none;
}
.social-media-lightbox-hint {
    position: fixed;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 2147483001;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
}
body.social-media-lightbox-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none;
}
@media (max-width: 640px) {
    .social-media-lightbox-close {
        width: 52px;
        height: 52px;
        font-size: 32px;
    }
    .social-media-lightbox-hint {
        font-size: 11px;
        bottom: max(10px, env(safe-area-inset-bottom, 0px));
    }
}

/* X-style post action row */
.post-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    width: 100%;
    margin: 0 -8px;
}

.post-actions-item {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-start;
    min-width: 0;
}

/* X-style action bar: reply / repost / like / views grouped on the left,
   bookmark pushed to the far right. */
.post-actions-reply,
.post-actions-repost,
.post-actions-like,
.post-actions-views {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
}

.post-actions-views {
    order: 4;
}

.post-actions-bookmark {
    order: 5;
    margin-left: auto;
    flex: 0 0 auto;
}

.post-actions-item form {
    margin: 0;
    display: flex;
    justify-content: center;
}

.post-actions-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    border-radius: 999px;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.post-actions-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    transition: color 0.15s ease;
}

.post-actions-icon svg {
    width: 18.75px;
    height: 18.75px;
    fill: currentColor;
    display: block;
}

.post-actions-count {
    min-width: 0;
    margin-left: 2px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: inherit;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1;
}

.post-actions-count:empty {
    display: none;
}

.post-actions-reply .post-actions-btn:hover,
.post-actions-reply .post-actions-btn:focus-visible {
    color: var(--social-reply);
}

.post-actions-like .post-actions-btn:hover,
.post-actions-like .post-actions-btn:focus-visible {
    color: var(--social-like-active);
}

.post-actions-like .like-button.is-liked {
    color: var(--social-like-active);
}

.post-actions-like .like-button.is-liked .post-actions-icon,
.post-actions-like .like-button.is-liked .post-actions-icon svg {
    color: var(--social-like-active);
}

.post-actions-share .post-actions-btn:hover,
.post-actions-share .post-actions-btn:focus-visible {
    color: var(--social-share);
}

.post-actions-repost .post-actions-btn:hover,
.post-actions-repost .post-actions-btn:focus-visible {
    color: var(--social-repost);
}

.post-actions-repost.post-repost-wrap {
    position: relative;
}

.post-actions-repost .repost-trigger.is-reposted,
.post-actions-repost .repost-btn.is-reposted {
    color: var(--social-repost);
}

.repost-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 45;
    min-width: 180px;
    padding: 4px 0;
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(255, 255, 255, 0.12);
}

.repost-menu-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.repost-menu-item:hover {
    background: var(--social-hover);
}

.post-actions-bookmark .post-actions-btn:hover,
.post-actions-bookmark .post-actions-btn:focus-visible {
    color: var(--social-bookmark);
}



.post-actions-bookmark .bookmark-btn.is-bookmarked {
    color: var(--social-bookmark);
}

.post-actions-views .post-actions-btn:hover,
.post-actions-views .post-actions-btn:focus-visible {
    color: var(--text);
}



.post-actions-views .post-views-link {
    text-decoration: none;
    cursor: pointer;
}

.post-actions-views .post-views-count:empty {
    display: none;
}

@media (max-width: 640px) {
    .post-actions {
        margin: 0 -4px;
        gap: 0;
    }

    .post-actions-reply,
    .post-actions-repost,
    .post-actions-like,
    .post-actions-views {
        max-width: none;
    }

    .post-actions-item {
        justify-content: center;
    }

    .post-actions-bookmark {
        justify-content: flex-end;
    }

    .post-actions-btn {
        gap: 4px;
        padding: 8px 6px;
    }

    .post-actions-icon svg {
        width: 18px;
        height: 18px;
    }

    .post-actions-count,
    .post-actions-views .post-views-count {
        font-size: 12px;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }
}

.post-view-thread {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    min-height: 36px;
}

.post-view-thread:hover,
.reply-show-replies-btn:hover {
    text-decoration: underline;
    color: var(--text-muted);
}

.post-card:not(.post-card-expanded):not(.post-card-embedded) .post-body {
    cursor: pointer;
}

.post-card-open-zone {
    cursor: pointer;
    border-radius: 4px;
}

.post-card-open-zone:focus-visible {
    outline: 2px solid rgba(29, 155, 240, 0.65);
    outline-offset: 2px;
}

.post-card:not(.post-card-expanded):has(+ .post-thread-feed:not([hidden])),
.post-card.post-thread-open:not(.post-card-expanded) {
    border-bottom: none;
}

.post-thread-feed {
    border-top: 1px solid var(--social-border);
    border-bottom: 1px solid var(--social-border);
    background: var(--bg);
}

.post-card.post-thread-open + .post-thread-feed:not([hidden]) {
    border-top: none;
    margin-top: -1px;
}

.post-thread-feed .post-thread-main {
    border-top: none;
    border-bottom: none;
}

.post-thread-main .post-thread-replies {
    border-bottom: 1px solid var(--social-border);
}

.post-thread-feed .post-thread-main .post-thread-replies {
    border-bottom: none;
}

.post-thread-feed .reply-thread-node {
    border-bottom-color: rgba(47, 51, 54, 0.85);
}

.post-thread-feed .reply-card-root {
    padding-top: 10px;
    padding-bottom: 2px;
}

.post-thread-feed .reply-show-replies-btn {
    min-height: 36px;
    padding: 8px 0;
}

@media (max-width: 600px) {
    .post-view-thread {
        font-size: 15px;
        min-height: 44px;
        padding: 10px 0;
    }

    .post-thread-feed .reply-show-replies-btn {
        min-height: 44px;
        padding: 10px 0;
        font-size: 14px;
    }

    .post-thread-feed .reply-card-root,
    .post-detail-thread .reply-card-root,
    .post-thread-main .reply-card-root {
        padding-left: var(--thread-pad-x);
        padding-right: var(--thread-pad-x);
    }
}

.post-menu {
    position: relative;
    flex-shrink: 0;
}

.post-menu-trigger {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: color 0.12s, background 0.12s;
}

.post-menu-trigger svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.post-menu-trigger:hover,
.post-menu.open .post-menu-trigger {
    color: var(--social-blue);
    background: rgba(29, 155, 240, 0.1);
}

.post-menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 40;
    min-width: 260px;
    margin-top: 4px;
    padding: 4px 0;
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(255, 255, 255, 0.12);
}

.post-menu-heading {
    margin: 8px 16px 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.post-menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    box-sizing: border-box;
}

.post-menu-item:hover {
    background: var(--social-hover);
}

.post-menu-item.is-active {
    color: var(--social-blue);
}

.post-menu-item-hint {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

.post-menu-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--social-border);
}

.post-menu-danger {
    color: #f4212e;
}

.post-menu-danger:hover {
    background: rgba(244, 33, 46, 0.1);
}

.profile-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    padding-bottom: 2px;
}

.profile-admin-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--social-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.profile-admin-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.profile-admin-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-profile-admin {
    min-height: 34px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
}

.btn-profile-admin-danger {
    color: var(--social-like);
    border-color: rgba(249, 24, 128, 0.35);
}

.profile-admin-note,
.profile-admin-status,
.profile-admin-feedback {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-muted);
}

.profile-admin-feedback.is-error {
    color: var(--social-like);
}

.dm-compose-muted-notice {
    margin: 0;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-muted);
    border-top: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.03);
}

.dm-compose-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.dm-compose-disabled .dm-compose-tools,
.dm-compose-disabled textarea,
.dm-compose-disabled .dm-send-btn {
    pointer-events: none;
}

.profile-follow-form {
    margin: 0;
}

.btn-profile-message {
    min-height: 36px;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Report modal */
.report-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top, 0));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
    pointer-events: none;
}

.report-modal.open {
    display: flex;
    pointer-events: auto;
}

.report-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.report-modal-card {
    position: relative;
    z-index: 10000000 !important;
    width: min(440px, 100%);
    max-height: min(90vh, 640px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.report-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.report-modal-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.report-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: var(--social-hover);
    color: var(--text);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.report-modal-sub {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.4;
}

.report-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.report-field span {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.report-field em {
    font-weight: 400;
    color: var(--text-muted);
    font-style: normal;
}

.report-field select,
.report-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--social-border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    padding: 12px 14px;
}

.report-field select:focus,
.report-field textarea:focus {
    outline: none;
    border-color: var(--social-blue);
}

.report-field textarea {
    resize: vertical;
    min-height: 96px;
}

.report-modal-note {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
}

.report-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--social-border);
}

.btn-secondary:hover {
    background: var(--social-hover);
}

.post-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999 !important;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 16px 16px;
    pointer-events: none;
}

.post-edit-modal.open {
    display: flex;
    pointer-events: auto;
}

.post-edit-card {
    z-index: 10000000 !important;
    width: min(600px, 100%);
}

.post-edit-body {
    padding: 0 16px 8px;
}

.post-edit-note {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.post-edit-form .composer-foot {
    padding: 12px 16px;
}

.media-preview {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.03);
    position: relative;
    max-width: 100%;
}

.media-preview img,
.media-preview video {
    max-width: 100%;
    width: auto;
    max-height: 200px;
    border-radius: 12px;
    object-fit: contain;
    display: block;
}

.media-preview-remove {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}

.composer-media-slot {
    min-height: 0;
}

.gif-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: min(360px, calc(70vh - 64px));
    -webkit-overflow-scrolling: touch;
}

.gif-grid-status {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.gif-card {
    aspect-ratio: 1;
    max-height: none;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: var(--card-bg);
}

.gif-card:hover {
    outline: 2px solid var(--social-blue);
    outline-offset: -2px;
}

.gif-card .gif-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gif-picker-header {
    padding: 12px;
    border-bottom: 1px solid var(--social-border);
}

.gif-search {
    width: 100%;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    outline: none;
}

.gif-search:focus {
    border-color: var(--social-blue);
}

/* Post thread — main post large, replies smaller */
.post-detail-thread {
    display: flex;
    flex-direction: column;
}

.post-detail-thread .post-card-main {
    border-bottom: 1px solid var(--social-border);
    cursor: default;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 14px 16px;
}

.post-detail-thread .post-card-main:hover {
    background: transparent;
}

.post-detail-thread .post-card-main .post-avatar-link .author-avatar,
.post-detail-thread .post-card-main .author-avatar {
    width: 48px;
    height: 48px;
    font-size: 0.95rem;
}

.post-detail-thread .post-card-main .post-meta-names {
    font-size: 15px;
}

.post-detail-thread .post-card-main .post-author {
    font-size: 16px;
}

.post-detail-thread .post-card-main .post-text {
    font-size: 23px;
    line-height: 28px;
    margin-bottom: 14px;
}

.post-detail-thread .post-card-main .post-actions {
    margin-top: 4px;
}

.post-card-main {
    border-bottom: 1px solid var(--social-border);
    cursor: default;
}

.post-card-main:hover {
    background: transparent;
}

.post-thread {
    display: flex;
    flex-direction: column;
}

.post-thread-replies {
    display: flex;
    flex-direction: column;
}

.post-thread-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 15px;
}

.post-thread-empty p {
    margin: 0;
}

.post-thread-login {
    padding: 16px;
    font-size: 15px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--social-border);
}

.post-thread-login a {
    color: var(--social-blue);
    text-decoration: none;
}

.post-thread-login a:hover {
    text-decoration: underline;
}

.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 0 10px;
    padding: 10px 16px 10px 12px;
    border-bottom: 1px solid var(--social-border);
    transition: background 0.1s;
}

.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-avatar-link .author-avatar,
.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .author-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.68rem;
}

.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-meta-names {
    font-size: 13px;
    line-height: 1.25;
}

.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-author {
    font-size: 14px;
    font-weight: 700;
}

.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-handle,
.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-time {
    font-size: 13px;
}

.reply-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--social-border);
    transition: background 0.1s;
}

.reply-card:hover {
    background: var(--social-hover);
}

.reply-card-root:hover,
.reply-card-nested:hover {
    background: transparent;
}

.reply-card.social-target-flash,
.post-card-main.social-target-flash,
.post-card-repost-entry.post-card-main.social-target-flash {
    animation: socialTargetFlash 2s ease-out forwards;
    border-radius: 12px;
    position: relative;
    z-index: 1;
}

@keyframes socialTargetFlash {
    0%, 18% {
        box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.95), 0 0 18px rgba(29, 155, 240, 0.38);
    }
    100% {
        box-shadow: none;
    }
}

/* X-style conversation thread: one subtle spine, no stacked lines */
.post-thread-main,
.post-thread-feed,
.post-detail-thread {
    --thread-pad-x: 16px;
    --thread-avatar-col: 48px;
    --thread-avatar-size: 40px;
    --thread-spine-x: calc(var(--thread-pad-x) + var(--thread-avatar-col) / 2);
    --thread-branch-x: calc(var(--thread-pad-x) + var(--thread-avatar-col) + 12px - 33px);
    --thread-branch-elbow-x: -33px;
    --thread-line: var(--social-border);
}

.post-detail-thread {
    --thread-main-avatar-size: 48px;
}

.post-detail-thread .post-thread-main {
    --thread-avatar-size: 40px;
}

.post-detail-thread:has(.post-thread-replies > .reply-thread-node) .post-card-main {
    position: relative;
    border-bottom: none;
}

.post-detail-thread:has(.post-thread-replies > .reply-thread-node) .post-card-main::after,
.post-card.post-thread-open:not(.post-card-expanded):has(+ .post-thread-feed:not([hidden]))::after {
    content: '';
    position: absolute;
    left: var(--thread-spine-x);
    width: 1px;
    transform: translateX(-50%);
    background: var(--thread-line);
    pointer-events: none;
    z-index: 0;
}

.post-detail-thread:has(.post-thread-replies > .reply-thread-node) .post-card-main::after {
    top: calc(14px + var(--thread-main-avatar-size, 48px));
    bottom: 0;
}

.post-card.post-thread-open:not(.post-card-expanded):has(+ .post-thread-feed:not([hidden])) {
    position: relative;
    overflow: visible;
}

.post-card.post-thread-open:not(.post-card-expanded):has(+ .post-thread-feed:not([hidden]))::after {
    top: calc(12px + var(--thread-avatar-size));
    bottom: 0;
}

.post-detail-thread:has(.post-thread-replies > .reply-thread-node) .post-card-main + .post-thread-main,
.post-card.post-thread-open:not(.post-card-expanded) + .post-thread-feed:not([hidden]) .post-thread-main {
    position: relative;
}

.post-detail-thread:has(.post-thread-replies > .reply-thread-node) .post-card-main + .post-thread-main::before,
.post-card.post-thread-open:not(.post-card-expanded) + .post-thread-feed:not([hidden]) .post-thread-main::before {
    content: '';
    position: absolute;
    left: var(--thread-spine-x);
    top: 0;
    width: 1px;
    height: 8px;
    transform: translateX(-50%);
    background: var(--thread-line);
    pointer-events: none;
    z-index: 0;
}

.post-thread-feed .reply-card-root,
.post-detail-thread .reply-card-root,
.post-thread-main .reply-card-root {
    grid-template-columns: var(--thread-avatar-col) minmax(0, 1fr);
    padding: 12px var(--thread-pad-x) 4px;
}

.post-thread-feed .reply-card-root .reply-rail,
.post-detail-thread .reply-card-root .reply-rail,
.post-thread-main .reply-card-root .reply-rail {
    justify-content: center;
}

.post-thread-replies {
    position: relative;
}

.post-thread-replies > .reply-thread-node {
    position: relative;
    z-index: 1;
}

/* Main spine: only between top-level replies, starts below avatar row */
.post-thread-replies > .reply-thread-node:not(:last-child)::after {
    content: '';
    position: absolute;
    left: var(--thread-spine-x);
    top: calc(12px + var(--thread-avatar-size));
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background: var(--thread-line);
    pointer-events: none;
    z-index: 0;
}

.post-thread-replies > .reply-thread-node .reply-card-root .reply-rail {
    position: relative;
    z-index: 1;
}

.post-thread-replies > .reply-thread-node .reply-card-root .post-avatar-link,
.post-thread-replies > .reply-thread-node .reply-card-root .author-avatar {
    position: relative;
    z-index: 2;
}

/* Connect first reply up to main post */
.post-thread-replies > .reply-thread-node:first-child .reply-card-root .reply-rail::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    width: 1px;
    height: 8px;
    transform: translateX(-50%);
    background: var(--thread-line);
    pointer-events: none;
}

/* Last top-level reply: line stops at avatar, never runs below */
.post-thread-replies > .reply-thread-node:last-child .reply-card-root .reply-rail::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: var(--thread-avatar-size);
    transform: translateX(-50%);
    background: var(--thread-line);
    pointer-events: none;
    z-index: 0;
}

.reply-thread-node {
    display: flex;
    flex-direction: column;
    border-bottom: none;
}

/* Conversation block: one continuous thread under the main post */
.post-detail-thread .post-thread-main,
.post-thread-feed .post-thread-main {
    border-top: none;
}

.post-thread-replies > .reply-thread-node + .reply-thread-node > .reply-thread-row > .reply-card-root {
    padding-top: 2px;
}

.post-thread-replies .reply-card-root .reply-body {
    min-width: 0;
}

.post-thread-replies .reply-card-root .post-meta-row {
    margin-bottom: 0;
}

.post-thread-replies .reply-card-root .post-author {
    font-size: 14px;
    font-weight: 700;
}

.post-thread-replies .reply-card-root .post-handle,
.post-thread-replies .reply-card-root .post-time {
    font-size: 13px;
}

.post-thread-replies .reply-card-root .post-text,
.post-thread-replies .reply-card-root .reply-text {
    font-size: 14px;
    line-height: 18px;
    margin: 2px 0 4px;
}

.post-thread-replies .reply-card-root .post-media-wrap {
    margin: 2px 0 4px;
}

.post-thread-replies .reply-card-root .post-media {
    border: none;
    border-radius: 12px;
    margin: 0;
    overflow: hidden;
    max-width: 100%;
    background: var(--card-bg-deep);
}

.post-thread-replies .reply-card-root .post-media img,
.post-thread-replies .reply-card-root .post-media video {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 150px;
    object-fit: cover;
}

.post-thread-replies .reply-card-root .post-media-gif img {
    object-fit: contain;
    max-height: 150px;
}

.post-thread-replies .reply-actions-thread {
    max-width: 280px;
    margin-top: 0;
}

.post-thread-replies .reply-thread-meta {
    padding-top: 0;
    padding-bottom: 2px;
    margin-top: -2px;
}

.post-thread-replies .reply-show-replies-btn {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    min-height: 24px;
    padding: 0;
    line-height: 1.3;
}

.post-thread-replies .reply-thread-branch {
    padding-top: 0;
    padding-bottom: 4px;
    margin-top: -2px;
}

.post-thread-replies .reply-thread-branch:not([hidden]) {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    margin-right: var(--thread-pad-x);
}

.post-thread-replies .reply-card-nested {
    padding: 6px 0;
}

.post-thread-replies .reply-card-nested .post-author {
    font-size: 13px;
}

.post-thread-replies .reply-card-nested .post-handle,
.post-thread-replies .reply-card-nested .post-time {
    font-size: 12px;
}

.post-thread-replies .reply-card-nested .post-text,
.post-thread-replies .reply-card-nested .reply-text {
    font-size: 13px;
    line-height: 17px;
}

.post-thread-replies .reply-card-nested .post-media img,
.post-thread-replies .reply-card-nested .post-media video {
    max-height: 120px;
}

.post-thread-replies .reply-to-line {
    font-size: 12px;
    margin: 0 0 2px;
}

@media (min-width: 701px) {
    .post-thread-replies .reply-card-root .post-media img,
    .post-thread-replies .reply-card-root .post-media video {
        max-height: 200px;
        max-width: min(100%, 340px);
    }

    .post-thread-replies .reply-card-nested .post-media img,
    .post-thread-replies .reply-card-nested .post-media video {
        max-height: 160px;
        max-width: min(100%, 300px);
    }
}

.reply-thread-row {
    display: block;
}

.post-thread-main > .post-thread-replies > .reply-thread-node > .reply-thread-row > .reply-card {
    border-bottom: none;
}

.reply-card-root {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0 12px;
    padding: 12px 16px 4px;
    border: none;
    background: transparent;
}

.reply-card-root:hover {
    background: transparent;
}

.reply-rail {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 40px;
}

.reply-thread-node--has-branch:has(.reply-thread-branch:not([hidden])):not(:last-child) .reply-card-root .reply-rail::after {
    content: '';
    position: absolute;
    left: 50%;
    top: var(--thread-avatar-size);
    width: 1px;
    height: 8px;
    transform: translateX(-50%);
    background: var(--thread-line, #2f3336);
    pointer-events: none;
}

.post-thread-replies > .reply-thread-node--has-branch:has(.reply-thread-branch:not([hidden])):last-child .reply-card-root .reply-rail::after {
    top: 0;
    height: var(--thread-avatar-size);
    bottom: auto;
}

.reply-thread-node--has-branch:has(.reply-thread-branch:not([hidden])) .reply-thread-meta {
    position: relative;
}

.reply-thread-branch:not([hidden])::before {
    content: '';
    position: absolute;
    left: var(--thread-branch-x, 35px);
    top: 0;
    width: 1px;
    height: 10px;
    transform: translateX(-50%);
    background: var(--thread-line, #2f3336);
    pointer-events: none;
}

.reply-card-root .post-avatar-link .author-avatar,
.reply-card-root .author-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.78rem;
}

.reply-card-root .post-meta-names {
    font-size: 14px;
    line-height: 1.25;
}

.reply-card-root .post-author {
    font-size: 15px;
}

.reply-card-root .post-handle,
.reply-card-root .post-time {
    font-size: 14px;
}

.reply-card-root .post-text,
.reply-card-root .reply-text {
    font-size: 15px;
    line-height: 20px;
    margin: 2px 0 8px;
}

.reply-actions-thread {
    max-width: 320px;
    margin: 0 -6px;
}

.reply-actions-thread .post-actions-icon {
    width: 30px;
    height: 30px;
}

.reply-thread-meta {
    padding: 2px var(--thread-pad-x, 16px) 10px calc(var(--thread-pad-x, 16px) + var(--thread-avatar-col, 48px) + 12px);
}

.reply-show-replies-btn {
    display: inline-block;
    margin: 0;
    padding: 6px 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    min-height: 36px;
}

.reply-thread-branch {
    display: block;
    margin: 0;
    padding: 0 var(--thread-pad-x, 16px) 12px calc(var(--thread-pad-x, 16px) + var(--thread-avatar-col, 48px) + 12px);
    border: none;
    background: none;
    position: relative;
}

.reply-thread-branch[hidden] {
    display: none !important;
}

.reply-thread-nested {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.reply-card-nested:not(:last-child)::after {
    content: '';
    position: absolute;
    left: var(--thread-branch-elbow-x, -33px);
    top: 22px;
    width: 1px;
    bottom: 0;
    background: var(--thread-line, #2f3336);
    pointer-events: none;
}

.reply-card-nested {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 0 8px;
    padding: 10px 0;
    border: none;
    background: transparent;
    position: relative;
}

.reply-card-nested::before {
    content: '';
    position: absolute;
    left: var(--thread-branch-elbow-x, -33px);
    top: 15px;
    width: 14px;
    height: 9px;
    border-left: 1px solid var(--thread-line, #2f3336);
    border-bottom: 1px solid var(--thread-line, #2f3336);
    border-bottom-left-radius: 6px;
    pointer-events: none;
}

.reply-card-nested:hover {
    background: transparent;
}

.reply-card-nested .post-avatar-link .author-avatar,
.reply-card-nested .author-avatar {
    width: 20px;
    height: 20px;
    font-size: 0.5rem;
}

.reply-card-nested .post-meta-names {
    font-size: 13px;
    line-height: 1.2;
}

.reply-card-nested .post-author {
    font-size: 14px;
}

.reply-card-nested .post-handle,
.reply-card-nested .post-time {
    font-size: 13px;
}

.reply-card-nested .post-text,
.reply-card-nested .reply-text {
    font-size: 14px;
    line-height: 18px;
    margin: 2px 0 6px;
}

.reply-actions-nested {
    max-width: 300px;
    margin: 0 -4px;
}

.reply-actions-nested .post-actions-icon {
    width: 26px;
    height: 26px;
}

.reply-card-root .post-media-wrap,
.reply-card-nested .post-media-wrap {
    margin: 0 0 8px;
}

.reply-card-root .post-media img,
.reply-card-root .post-media video {
    max-height: 260px;
}

.reply-card-nested .post-media img,
.reply-card-nested .post-media video {
    max-height: 200px;
    border-radius: 10px;
}

.post-thread-replies .reply-card-nested .post-media {
    border: none;
    margin: 0;
}

.post-detail-thread .reply-card-root .post-avatar-link .author-avatar,
.post-detail-thread .reply-card-root .author-avatar {
    width: 40px;
    height: 40px;
}

@media (max-width: 600px) {
    .reply-card-root {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 10px 12px 4px;
    }

    .post-thread-feed .reply-card-root,
    .post-detail-thread .reply-card-root,
    .post-thread-main .reply-card-root {
        grid-template-columns: var(--thread-avatar-col) minmax(0, 1fr);
        padding: 12px var(--thread-pad-x) 4px;
    }

    .reply-card-root .post-avatar-link .author-avatar,
    .reply-card-root .author-avatar {
        width: 36px;
        height: 36px;
    }

    .post-thread-feed .reply-card-root .author-avatar,
    .post-detail-thread .reply-card-root .author-avatar,
    .post-thread-main .reply-card-root .author-avatar {
        width: 40px;
        height: 40px;
    }

    .post-thread-main,
    .post-thread-feed {
        --thread-avatar-col: 40px;
        --thread-avatar-size: 40px;
    }

    .post-detail-thread {
        --thread-avatar-col: 48px;
        --thread-main-avatar-size: 48px;
    }

    .post-detail-thread:has(.post-thread-replies > .reply-thread-node) .post-card-main::after {
        top: calc(14px + var(--thread-main-avatar-size));
    }

    .reply-card-nested:not(:last-child)::after {
        left: -29px;
    }

    .reply-card-nested::before {
        left: -29px;
        width: 12px;
    }
}

@media (max-width: 699px) {
    .post-thread-main,
    .post-thread-feed {
        --thread-avatar-col: 40px;
        --thread-avatar-size: 40px;
    }
}

.reply-card .reply-body {
    min-width: 0;
}

.reply-to-line {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 4px;
    line-height: 1.3;
}

.reply-to-line a {
    color: var(--social-blue);
    text-decoration: none;
}

.reply-to-line a:hover {
    text-decoration: underline;
}

.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-text,
.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .reply-text {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 18px;
}

.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-media-wrap {
    margin: 0 0 8px;
}

.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-media {
    border-radius: 12px;
}

.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-media img,
.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-media video {
    max-height: 280px;
}

.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-actions {
    max-width: 360px;
    margin: 0 -6px;
}

.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-actions-icon {
    width: 30px;
    height: 30px;
}

.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) .post-actions-btn {
    font-size: 12px;
}

.reply-card .post-text,
.reply-card .reply-text {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 20px;
}

.reply-card .post-media-wrap {
    margin: 0 0 12px;
}

.reply-card .post-actions {
    max-width: 425px;
    margin: 0 -8px;
}

/* No inline reply fields on thread — only in popup */
body.social-post .post-comment-form,
body.social-post .reply-composer-slot {
    display: none !important;
}

/* Reply popup */
.reply-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top, 0));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
    pointer-events: none;
}

.reply-modal.open {
    display: flex;
    pointer-events: auto;
}

body.reply-modal-open {
    overflow: hidden;
}

.reply-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.reply-modal-card {
    position: relative;
    z-index: 10000000 !important;
    width: min(520px, 100%);
    max-height: min(85vh, 560px);
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reply-modal-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--social-border);
    flex-shrink: 0;
}

.reply-modal-title {
    margin: 0;
    flex: 1;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.reply-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
}

.reply-modal-close:hover {
    background: var(--social-hover);
}

.reply-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.reply-modal.open .reply-modal-form {
    display: flex !important;
    flex-direction: column;
    margin: 0;
    height: 100%;
}

.reply-modal-form-inner {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.reply-composer-context,
.reply-modal-context {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.3;
}

.reply-composer-context[hidden],
.reply-modal-context[hidden] {
    display: none !important;
}

.reply-composer-context-user {
    color: var(--social-blue);
    text-decoration: none;
    font-weight: 500;
}

.reply-modal-editor {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.reply-modal-avatar .author-avatar,
.reply-modal-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.reply-modal-textarea,
.reply-modal-form .comment-textarea {
    flex: 1;
    min-width: 0;
    width: 100%;
    min-height: 100px;
    max-height: 220px;
    padding: 10px 12px;
    margin: 0;
    border: 1px solid var(--social-border) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text);
    font-size: 17px;
    line-height: 1.4;
    font-family: inherit;
    outline: none;
    resize: none;
    box-sizing: border-box;
}

.reply-modal-textarea::placeholder {
    color: var(--text-muted);
}

.reply-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--social-border);
    margin-top: auto;
}

.reply-modal-foot .comment-toolbar {
    flex: 1;
    min-width: 0;
}

.post-flash {
    margin: 0 16px 12px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.4;
}

.post-flash-error {
    background: rgba(244, 33, 46, 0.12);
    color: #f4212e;
    border: 1px solid rgba(244, 33, 46, 0.35);
}

.post-flash-ok {
    background: rgba(29, 155, 240, 0.12);
    color: var(--social-blue);
    border: 1px solid rgba(29, 155, 240, 0.35);
}

.comment-login-prompt {
    color: var(--text-muted);
    font-size: 15px;
    margin-top: 12px;
}

.comment-login-prompt a {
    color: var(--social-blue);
}

.post-page-main .post-flash {
    margin: 0;
    border-bottom: 1px solid var(--social-border);
}

/* Sidebar widgets */
.suggestions-panel .panel-title {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 12px;
    color: var(--text);
}

/* Desktop discover rail (X-style) */
.trending-panel {
    padding: 8px 0 24px 16px;
    z-index: 0;
}

.trends-card,
.trends-search-wrap,
.trends-footer {
    position: relative;
    z-index: auto;
}

.trends-search-wrap {
    margin-bottom: 16px;
    padding-right: 16px;
}

.trends-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.trends-search-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 0 16px;
    background: var(--input-bg);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-muted);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    box-sizing: border-box;
}

.trends-search-link:hover {
    background: var(--bg);
    border-color: var(--social-border);
    color: var(--text);
}

.trends-search-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

.trends-search-link-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.trends-search-link-hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.trends-card {
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    margin-right: 16px;
}

.trends-card-heading {
    margin: 0;
    padding: 12px 16px;
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
    color: var(--text);
}

.trend-row {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}

.trend-row:hover {
    background: var(--trend-row-hover);
}

.trend-row-meta {
    display: block;
    font-size: 13px;
    line-height: 16px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.trend-row-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trend-row-tag .trend-row-hashtag {
    color: var(--social-blue);
}

.trend-row-tag .trend-row-meta {
    margin-bottom: 0;
    margin-top: 2px;
}

.trend-row-tag:hover .trend-row-hashtag {
    color: var(--social-blue-hover);
    text-decoration: underline;
}

.trends-empty {
    margin: 0;
    padding: 12px 16px 16px;
    font-size: 15px;
    color: var(--text-muted);
}

.trends-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 8px 16px 0 0;
    font-size: 13px;
}

.trends-footer a {
    color: var(--text-muted);
    text-decoration: none;
}

.trends-footer a:hover {
    text-decoration: underline;
    color: var(--text);
}

/* Discovery header (composer + mobile trending + suggestions) */
.discovery-feed-head {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 1px solid var(--social-border);
}

.discovery-feed-head .feed-composer {
    border-bottom: 1px solid var(--social-border);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.discovery-feed-head .feed-composer-guest {
    border-bottom: 1px solid var(--social-border);
}

.discovery-suggestions-mobile {
    display: none;
}

/* Mobile discover strip */
.trending-mobile {
    display: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 0 0;
}

.trending-mobile-label {
    margin: 0 0 8px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.trending-mobile-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 16px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.trending-mobile-scroll::-webkit-scrollbar {
    display: none;
}

.trending-tag-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 16px;
    border: 1px solid var(--social-border);
    background: var(--card-bg);
    text-decoration: none;
    white-space: nowrap;
}

.trending-tag-pill:hover {
    background: var(--social-hover);
}

.trending-tag-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: var(--social-blue);
}

.trending-tag-pill:hover .trending-tag-name {
    color: var(--social-blue-hover);
    text-decoration: underline;
}

.trending-tag-count {
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    color: var(--text-muted);
}

/* More compact trending tags on small mobile (prevents "zoomed out" feel in discovery) */
@media (max-width: 480px) {
    .trending-mobile-label {
        font-size: 12px;
        padding: 0 12px 0 12px;
    }
    .trending-mobile-scroll {
        padding: 0 12px 6px;
        gap: 6px;
    }
    .trending-tag-pill {
        padding: 6px 10px;
        border-radius: 14px;
    }
    .trending-tag-name {
        font-size: 13px;
        line-height: 16px;
    }
    .trending-tag-count {
        font-size: 11px;
        line-height: 13px;
    }
}

.trending-mobile-posts {
    padding: 4px 16px 12px;
}

.trending-mobile-post {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-top: 1px solid var(--social-border);
    text-decoration: none;
    color: inherit;
}

.trending-mobile-post:first-of-type {
    border-top: none;
    padding-top: 0;
}

.trending-mobile-post-text {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trending-mobile-post-meta {
    font-size: 13px;
    color: var(--text-muted);
}

.activity-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 2px;
}

.activity-meta {
    font-size: 13px;
    color: var(--text-muted);
}

.email-verify-banner {
    margin: 12px 16px 0;
    padding: 16px 18px;
    border: 1px solid rgba(29, 155, 240, 0.35);
    background: rgba(29, 155, 240, 0.08);
    border-radius: 16px;
}

.email-verify-banner-title {
    margin: 0 0 6px;
    font-weight: 800;
    font-size: 0.98rem;
}

.email-verify-banner-text {
    margin: 0;
    color: #9bb0ce;
    font-size: 0.92rem;
    line-height: 1.5;
}

.email-verify-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
}

.email-verify-banner .btn {
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.9rem;
}

.suggestion-row-trends {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--social-border);
}

.suggestion-row-trends:last-child {
    border-bottom: none;
}

.suggestion-row-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

/* hover underline handled in ted-suggest-stable */

.suggestion-row-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    overflow: hidden;
    border-radius: 50%;
}
.suggestion-row-avatar .author-avatar,
.suggestion-row-avatar img {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.suggestion-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.suggestion-row-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.suggestion-row-meta {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.suggestion-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.suggestion-dismiss-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    padding: 0;
}

.suggestion-dismiss-btn:hover,
.suggestion-dismiss-btn:focus-visible {
    background: var(--social-hover);
    color: var(--text);
    outline: none;
}

.suggestions-trends-card .btn-sm {
    min-height: 34px;
    padding: 0 14px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.mention-autocomplete {
    position: fixed;
    z-index: 10000001 !important;
    max-height: 260px;
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid rgba(29, 155, 240, 0.45);
    background: var(--card-bg-alt);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.mention-autocomplete-loading,
.mention-autocomplete-empty,
.mention-autocomplete-error {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-muted);
}

.mention-autocomplete-error {
    color: #ffb4b8;
}

.mention-autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.mention-autocomplete-item:hover,
.mention-autocomplete-item.is-active {
    background: var(--social-hover);
}

.mention-autocomplete-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.mention-autocomplete-label strong {
    font-size: 14px;
    font-weight: 700;
}

.mention-autocomplete-handle {
    font-size: 13px;
    color: var(--text-muted);
}

.mention-autocomplete-source {
    font-size: 11px;
    font-weight: 600;
    color: var(--social-blue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.feed-composer-main,
.composer-editor,
.reply-modal-form-inner,
.new-message-card,
.dm-search {
    position: relative;
}

.suggestions-panel {
    border-bottom: 1px solid var(--social-border);
    padding: 12px 16px;
}

.suggestion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--social-border);
}

.suggestion-row:last-child {
    border-bottom: none;
}

.btn,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
}

/* Follow toggle: Follow → Following → Unfollow on hover */
.btn-follow-toggle {
    min-width: 0;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.btn-follow-toggle .follow-toggle-label {
    display: none;
}

.btn-follow-toggle.is-follow {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: 1px solid var(--btn-primary-bg);
}

.btn-follow-toggle.is-follow .follow-toggle-label--follow {
    display: inline;
}

.btn-follow-toggle.is-follow:hover {
    background: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
}

.btn-follow-toggle.is-requested {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--social-border);
}

.btn-follow-toggle.is-requested .follow-toggle-label--requested {
    display: inline;
}

@media (hover: hover) {
    .btn-follow-toggle.is-requested:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text);
        border-color: var(--text-muted);
    }
}

.btn-follow-toggle.is-following {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--social-border);
}

.btn-follow-toggle.is-following .follow-toggle-label--following {
    display: inline;
}

@media (hover: hover) {
    .btn-follow-toggle.is-following:hover {
        background: rgba(244, 33, 46, 0.12);
        border-color: #f4212e;
        color: #f4212e;
    }

    .btn-follow-toggle.is-following:hover .follow-toggle-label--following {
        display: none;
    }

    .btn-follow-toggle.is-following:hover .follow-toggle-label--unfollow {
        display: inline;
    }
}

/* Mobile / touch: tap Following submits unfollow (no hover required) */
@media (hover: none) {
    .btn-follow-toggle.is-following:active {
        background: rgba(244, 33, 46, 0.12);
        border-color: #f4212e;
        color: #f4212e;
    }

    .btn-follow-toggle.is-following:active .follow-toggle-label--following {
        display: none;
    }

    .btn-follow-toggle.is-following:active .follow-toggle-label--unfollow {
        display: inline;
    }
}

.feed-empty {
    padding: 40px 32px;
    text-align: center;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
}

.feed-empty strong {
    display: block;
    color: var(--text);
    font-size: 31px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.load-more-wrap {
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid var(--social-border);
}

.load-more-btn {
    border: 1px solid var(--social-border);
    background: transparent;
    color: var(--text);
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
}

.load-more-btn:hover {
    background: var(--social-hover);
}

/* X-style unread count on bell / envelope icon */
.sidebar-icon-wrap {
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: visible;
}

.sidebar-item-label {
    flex: 1;
    min-width: 0;
}

.nav-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #f4212e;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid var(--border-strong);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 0 0 1px #000;
    /* scale (not transform) so positioning transforms stay intact */
    animation: nav-badge-pop 0.28s ease;
    transform-origin: center center;
}

.nav-badge.is-empty {
    display: none !important;
    animation: none;
}

@keyframes nav-badge-pop {
    0% {
        scale: 0.5;
        opacity: 0.4;
    }
    70% {
        scale: 1.12;
    }
    100% {
        scale: 1;
        opacity: 1;
    }
}

/* Mobile header */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    height: var(--header-mobile);
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--social-border);
    box-sizing: border-box;
}

.mobile-header-avatar {
    width: 32px;
    height: 32px;
    border: none;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    cursor: pointer;
}

.mobile-header-avatar .author-avatar,
.mobile-header-avatar img,
.mobile-header-avatar span,
.mobile-header-avatar .avatar-live-link,
.mobile-header-avatar .avatar-live-ring {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    border-radius: 50%;
}

.mobile-header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mobile-header-logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.mobile-header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: 17px;
    color: var(--text);
    pointer-events: none;
}

.mobile-header-back {
    display: grid;
    place-items: center;
    color: var(--text);
    text-decoration: none;
}

.layout-grid.layout-post {
    grid-template-columns: minmax(0, var(--feed-width));
    width: var(--feed-width);
    max-width: calc(100% - var(--content-offset));
}

.post-page-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 16px;
    height: 53px;
    border-bottom: 1px solid var(--social-border);
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
}

.post-page-bar a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
}

.post-page-bar a:hover {
    background: var(--social-hover);
}

.post-page-bar h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .post-page-bar {
        display: none;
    }

    .layout-post .main-content {
        padding-top: 0;
    }
}

.post-detail-wrap {
    border-bottom: 1px solid var(--social-border);
}

.confirm-modal.open {
    display: flex;
}

.confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(91, 112, 131, 0.4);
}

.confirm-card {
    position: relative;
    background: var(--bg);
    border-radius: 16px;
    padding: 24px;
    width: min(320px, 90vw);
    text-align: center;
}

.confirm-card h2 {
    margin: 0 0 8px;
    font-size: 20px;
}

.confirm-card p {
    margin: 0 0 20px;
    color: var(--text-muted);
}

.confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-cancel,
.confirm-ok {
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid var(--social-border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
}

.confirm-ok {
    background: #f4212e;
    border-color: #f4212e;
    color: #fff;
}

.mobile-header-action {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: none;
    padding: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
}

.mobile-compose-link {
    display: grid;
    place-items: center;
    color: var(--text);
    text-decoration: none;
}

.mobile-compose-link svg {
    display: block;
}

/* Mobile drawer — full-screen X-style menu */
.mobile-sidebar-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 250;
    background: var(--bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-sidebar-panel.open {
    display: block;
}

.mobile-sidebar-close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top, 12px));
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: var(--social-hover);
    color: var(--text);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.mobile-sidebar-content {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    padding: max(56px, calc(env(safe-area-inset-top, 0px) + 48px)) 20px 24px;
    box-sizing: border-box;
}

.mobile-sidebar-panel .sidebar {
    display: flex;
    flex-direction: column;
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: calc(100dvh - 120px);
    padding: 0;
    gap: 2px;
}

.mobile-sidebar-panel .sidebar-brand {
    width: 52px;
    height: 52px;
    margin: 0 0 8px;
}

.mobile-sidebar-panel .sidebar-item {
    font-size: 26px;
    padding: 14px 16px;
    gap: 28px;
}

.mobile-sidebar-panel .sidebar-item .icon svg {
    width: 28px;
    height: 28px;
}

.mobile-sidebar-panel .btn-post {
    width: 100%;
    max-width: 100%;
    margin: 8px 0 0;
    padding: 14px 16px;
    gap: 28px;
    font-size: 26px;
}

.mobile-sidebar-panel .btn-post .icon svg {
    width: 28px;
    height: 28px;
}

.mobile-sidebar-panel .sidebar-bottom {
    margin-top: auto;
    padding-top: 24px;
}

.mobile-sidebar-panel .sidebar-account-name,
.mobile-sidebar-panel .sidebar-account-handle {
    font-size: 17px;
}

/* Mobile bottom nav */
.mobile-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Always above feed chrome / post ⋯ menus so Portal etc. always receive taps */
    z-index: 20000 !important;
    width: 100%;
    max-width: 100%;
    background: #000000;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.98));
    border-top: 1px solid rgba(71, 217, 255, 0.12);
    padding: 8px max(0px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom, 8px)) max(0px, env(safe-area-inset-right));
    box-sizing: border-box;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.4);
    pointer-events: auto !important;
    touch-action: manipulation;
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.mobile-nav-items {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    max-width: 100%;
    gap: 4px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    height: 48px;
    color: #7a8a9a;
    text-decoration: none;
    position: relative;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 8px;
    padding: 6px;
}

.mobile-nav-item::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 6px;
    background: rgba(71, 217, 255, 0.06);
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
    z-index: 0;
}

.mobile-nav-item:hover {
    color: #a0b8cc;
}

.mobile-nav-item.active {
    color: #47d9ff;
}

.mobile-nav-item.active::before {
    opacity: 1;
}

.mobile-nav-item.active:has(.mobile-nav-profile)::before {
    opacity: 0;
}

.mobile-nav-item:focus-visible {
    outline: 2px solid #47d9ff;
    outline-offset: -2px;
    border-radius: 8px;
}

.mobile-nav-label {
    display: none;
}

.mobile-nav-icon {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.1s ease;
}

.mobile-nav-icon.nav-icon-stroke {
    width: 24px;
    height: 24px;
}

.mobile-nav-item .mobile-nav-icon.nav-icon-stroke path,
.mobile-nav-item .mobile-nav-icon.nav-icon-stroke circle,
.mobile-nav-item .mobile-nav-icon.nav-icon-stroke rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

.mobile-nav-item .mobile-nav-icon.casino-icon rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

.mobile-nav-item .mobile-nav-icon.casino-icon circle {
    fill: currentColor;
    stroke: none;
}

.mobile-nav-item.active .mobile-nav-icon.nav-icon-stroke path,
.mobile-nav-item.active .mobile-nav-icon.nav-icon-stroke circle,
.mobile-nav-item.active .mobile-nav-icon.nav-icon-stroke rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

.mobile-nav-item .mobile-nav-icon.reels-icon {
    width: 26px;
    height: 26px;
}

.mobile-nav-item .mobile-nav-icon.reels-icon rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

.mobile-nav-item .mobile-nav-icon.reels-icon path {
    fill: currentColor;
    stroke: none;
}

.mobile-nav-item.active .mobile-nav-icon.reels-icon rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

.mobile-nav-item.active .mobile-nav-icon.reels-icon path {
    fill: currentColor;
    stroke: none;
}

.mobile-nav-item .mobile-nav-icon.portal-icon path {
    fill: currentColor;
    stroke: none;
}

.mobile-nav-item.mobile-nav-portal .mobile-nav-icon {
    width: 26px;
    height: 26px;
    transition: transform 0.14s ease, filter 0.18s ease;
    filter: drop-shadow(0 0 5px rgba(71, 217, 255, 0.12));
}

.mobile-nav-item.mobile-nav-portal.active .mobile-nav-icon {
    filter: drop-shadow(0 0 10px rgba(71, 217, 255, 0.42));
}

.mobile-nav-item.mobile-nav-portal.active::before {
    background: radial-gradient(circle at 50% 65%, rgba(71, 217, 255, 0.16), rgba(71, 217, 255, 0.04) 72%);
    opacity: 1;
}

.mobile-nav-item.mobile-nav-reels .mobile-nav-icon {
    transition: transform 0.14s ease, filter 0.18s ease;
    filter: drop-shadow(0 0 4px rgba(71, 217, 255, 0.08));
}

.mobile-nav-item.mobile-nav-reels.active .mobile-nav-icon {
    filter: drop-shadow(0 0 8px rgba(71, 217, 255, 0.32));
}

.mobile-nav-item:has([data-badge="messages"]:not(.is-empty)) .mobile-nav-icon.messages-icon,
.mobile-nav-item:has([data-badge="notifications"]:not(.is-empty)) .mobile-nav-icon.notifications-icon {
    filter: drop-shadow(0 0 6px rgba(71, 217, 255, 0.22));
}



.mobile-nav-item:active .mobile-nav-icon,
.mobile-nav-item:active .mobile-nav-profile {
    transform: scale(0.92);
}

.mobile-nav-item.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.mobile-nav-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}

.mobile-nav-profile .mobile-nav-avatar,
.mobile-nav-profile .author-avatar,
.mobile-nav-profile img {
    display: block;
    width: 26px;
    height: 26px;
    font-size: 0.65rem;
    border-radius: 50%;
    object-fit: cover;
}

.mobile-nav-item.active .mobile-nav-profile {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent, #1d9bf0);
}

/* Sit on the top-right of the 24px icon; never inherit desktop right:-10px */
.mobile-nav-item .nav-badge {
    position: absolute;
    top: 2px;
    left: 50%;
    right: auto;
    transform: translate(6px, 0);
    margin: 0;
    min-width: 16px;
    max-width: calc(100% - 6px);
    height: 16px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 0 4px;
    border: 2px solid var(--bg);
    box-shadow: none;
    background: #f4212e;
    z-index: 2;
    overflow: hidden;
    white-space: nowrap;
}

.mobile-nav,
.mobile-nav-items,
.mobile-nav-item {
    overflow: visible;
}

/* Composer modal + shared popups */
.composer-modal,
.confirm-modal,
.new-message-modal,
.repost-quote-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999 !important;
    box-sizing: border-box;
    pointer-events: none;
}

.composer-modal,
.confirm-modal,
.new-message-modal,
.repost-quote-modal {
    display: none;
}

.composer-modal.open,
.confirm-modal.open,
.new-message-modal.open,
.repost-quote-modal.open {
    display: flex;
    pointer-events: auto;
}

.composer-modal {
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top, 0)) 16px max(16px, env(safe-area-inset-bottom, 0));
}

.composer-modal.open {
    align-items: center;
    justify-content: center;
}

.composer-backdrop,
.confirm-backdrop,
.new-message-backdrop,
.repost-quote-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(91, 112, 131, 0.45);
    z-index: 0 !important;
}

.composer-card {
    position: relative;
    z-index: 10000000 !important;
    background: var(--bg);
    border-radius: 16px;
    width: min(600px, 100%);
    max-height: min(90vh, 720px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--social-border);
    box-shadow: var(--shadow-elevated);
}

.composer-card .composer-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.composer-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px 0 4px;
    min-height: 53px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--social-border);
}

.composer-head-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
    flex: 1;
}

.composer-close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    border-radius: 999px;
    flex-shrink: 0;
}

.composer-close:hover {
    background: var(--social-hover);
}

.composer-body {
    padding: 12px 16px;
    display: flex;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.composer-editor {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.composer-avatar {
    flex-shrink: 0;
}

.composer-avatar .author-avatar {
    width: 40px;
    height: 40px;
}

.composer-modal .composer-textarea {
    min-height: 120px;
    font-size: 20px;
}

.composer-modal .composer-foot {
    flex-shrink: 0;
    border-top: 1px solid var(--social-border);
    background: var(--bg);
}

.confirm-modal,
.new-message-modal {
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top, 0));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0));
}

.confirm-modal .confirm-card,
.new-message-modal .new-message-card {
    position: relative;
    z-index: 10000000 !important;
}

.gif-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.55);
}

.gif-picker {
    position: fixed;
    z-index: 510;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100% - 32px));
    max-height: 70vh;
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.emoji-picker {
    position: fixed;
    z-index: 520;
    width: min(320px, calc(100% - 24px));
    max-height: min(360px, 60vh);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid var(--social-border);
    background: var(--bg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
    -webkit-overflow-scrolling: touch;
}

.emoji-picker-section + .emoji-picker-section {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--social-border);
}

.emoji-picker-heading {
    padding: 6px 8px 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}

.emoji-picker-btn {
    width: 100%;
    aspect-ratio: 1;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.emoji-picker-btn:hover {
    background: var(--social-hover);
}

.toast-share {
    position: fixed;
    bottom: calc(var(--nav-mobile) + 16px + env(safe-area-inset-bottom, 0));
    left: 50%;
    transform: translateX(-50%);
    background: var(--social-blue);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 300;
}



/* Desktop breakpoint */
@media (min-width: 1101px) {
    :root {
        --shell-gutter: max(0px, (100vw - var(--shell-width)) / 2);
    }

    .sidebar {
        position: fixed;
        left: var(--shell-gutter);
        top: 0;
        width: var(--rail-width);
        height: 100vh;
        z-index: 25;
        padding-top: 4px;
        padding-bottom: 12px;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .sidebar .btn-post {
        width: 100%;
        max-width: 100%;
        margin-top: 4px;
        padding: 12px 16px;
    }

    .sidebar-item-label {
        white-space: nowrap;
    }

    .mobile-nav,
    .mobile-header {
        display: none !important;
    }
}

/* Keep the full desktop rail visible on shorter viewport heights without adding sidebar scroll. */
@media (min-width: 1101px) and (max-height: 900px) {
    .sidebar {
        padding-top: 0;
        padding-bottom: 8px;
    }

    .sidebar-brand {
        width: 48px;
        height: 48px;
        margin: 0 0 2px 2px;
        padding: 10px;
    }

    .sidebar-nav {
        gap: 1px;
    }

    .sidebar-item,
    .btn-post {
        gap: 16px;
        padding: 10px 14px;
        font-size: 18px;
    }

    .sidebar-item .icon,
    .btn-post .icon,
    .sidebar-item .icon svg,
    .btn-post .icon svg {
        width: 24px;
        height: 24px;
    }

    .sidebar-below-nav {
        margin-top: 2px;
    }

    .sidebar-bottom {
        padding: 8px 0 10px;
    }

    .sidebar-account {
        padding: 10px;
        gap: 10px;
    }

    .sidebar-account-avatar {
        width: 36px;
        height: 36px;
    }

    .sidebar-account-name,
    .sidebar-account-handle {
        font-size: 14px;
    }
}

@media (min-width: 1101px) and (max-height: 820px) {
    .sidebar-item,
    .btn-post {
        padding: 9px 12px;
        font-size: 17px;
    }

    .sidebar-bottom {
        padding: 6px 0 8px;
    }

    .sidebar-account {
        padding: 8px;
    }
}

/* Tablet / mobile */
@media (max-width: 1100px) {
    :root {
        --content-offset: 0px;
        --content-width: 100%;
    }

    html.pwa-installed .layout-grid,
    html.pwa-installed .page {
        max-width: 100%;
        overflow-x: clip;
    }

    .layout-grid,
    .layout-grid.layout-post,
    .layout-grid.layout-messages,
    .layout-grid.layout-portal {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Hide desktop rail only — keep drawer sidebar visible when open */
    .page > .sidebar,
    .layout-grid .sidebar {
        display: none !important;
    }

    .mobile-sidebar-panel .sidebar {
        display: flex !important;
    }

    .right-panel,
    .trending-panel {
        display: none !important;
    }

    body.social-home[data-active-tab="discovery"] .discovery-feed-head .trending-mobile {
        display: block;
    }

    body.social-home[data-active-tab="discovery"] .discovery-suggestions-mobile {
        display: block;
    }

    body.social-home[data-active-tab="discovery"] .discovery-suggestions-mobile:empty {
        display: none !important;
        border: none;
    }

    body.social-home[data-active-tab="for-you"] .trending-mobile-home {
        display: block;
    }

    body.social-home:not([data-active-tab="discovery"]) .trending-mobile:not(.trending-mobile-home),
    body.social-home:not([data-active-tab="discovery"]) .discovery-suggestions-mobile {
        display: none !important;
    }

    .discovery-feed-head .feed-composer + .trending-mobile,
    .discovery-feed-head .feed-composer-guest + .trending-mobile,
    .discovery-feed-head .feed-composer + .discovery-suggestions-mobile,
    .discovery-feed-head .feed-composer-guest + .discovery-suggestions-mobile {
        margin-top: 0;
        border-top: none;
    }

    .discovery-feed-head .feed-composer,
    .discovery-feed-head .feed-composer-guest {
        border-bottom: none;
        padding-left: 12px;
        padding-right: 12px;
    }

    .discovery-feed-head .feed-composer-main {
        min-width: 0;
        overflow: hidden;
    }

    .discovery-feed-head .feed-composer-foot {
        flex-wrap: nowrap;
        gap: 8px;
        min-width: 0;
    }

    .discovery-feed-head .feed-composer-tools {
        flex: 0 0 auto;
        min-width: 0;
    }

    .discovery-feed-head .composer-foot-actions {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-end;
        gap: 8px;
    }

    .discovery-feed-head .char-counter {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 12px;
    }

    .discovery-feed-head .composer-post-btn {
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 14px;
    }

    .discovery-feed-head .composer-audience-menu {
        max-width: min(280px, calc(100% - 48px));
    }

    .discovery-feed-head .trending-mobile {
        border-bottom: none;
        padding-bottom: 0;
    }

    .discovery-feed-head .trending-mobile-tags + .trending-mobile-posts {
        padding-top: 0;
    }

    .discovery-feed-head .trending-mobile-posts {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 8px;
    }

    .discovery-suggestions-mobile {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .discovery-suggestions-mobile .suggestions-mobile-discover {
        margin: 0;
        margin-right: 0;
        margin-bottom: 0;
        border-radius: 0;
        background: transparent;
        border-top: 1px solid var(--social-border);
    }

    .discovery-suggestions-mobile .suggestions-mobile-discover .trends-card-heading {
        padding: 12px 16px 4px;
        font-size: 13px;
        font-weight: 700;
        line-height: 16px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--text-muted);
    }

    .discovery-suggestions-mobile .suggestion-row-trends {
        padding: 10px 16px;
        gap: 8px;
        align-items: center;
    }

    .discovery-suggestions-mobile .suggestion-row-profile {
        gap: 12px;
        min-width: 0;
    }

    .discovery-suggestions-mobile .suggestion-row-text {
        flex: 1;
        min-width: 0;
    }

    .discovery-suggestions-mobile .suggestion-row-name,
    .discovery-suggestions-mobile .suggestion-row-meta {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .discovery-suggestions-mobile .suggestion-row-name {
        font-size: 15px;
        line-height: 20px;
    }

    .discovery-suggestions-mobile .suggestions-trends-card .btn-sm {
        min-height: 36px;
        min-width: 68px;
        padding: 0 14px;
        font-size: 14px;
    }

    .discovery-feed-head > .feed-composer:last-child,
    .discovery-feed-head > .feed-composer-guest:last-child {
        border-bottom: 1px solid var(--social-border);
    }

    .discovery-feed-head > .trending-mobile:last-child {
        border-bottom: 1px solid var(--social-border);
        padding-bottom: 8px;
    }

    .discovery-feed-head > .discovery-suggestions-mobile:last-child .suggestions-mobile-discover {
        border-bottom: 1px solid var(--social-border);
    }

    .discovery-feed-head > .trending-mobile + .discovery-suggestions-mobile .suggestions-mobile-discover,
    .discovery-feed-head > .feed-composer + .discovery-suggestions-mobile .suggestions-mobile-discover,
    .discovery-feed-head > .feed-composer-guest + .discovery-suggestions-mobile .suggestions-mobile-discover {
        border-top: 1px solid var(--social-border);
    }

    .main-content {
        border-left: none;
        border-right: none;
        max-width: 100%;
        width: 100%;
    }

    .mobile-header {
        display: flex;
    }

    .mobile-nav {
        display: block;
    }

    .page {
        padding-bottom: calc(var(--nav-mobile) + env(safe-area-inset-bottom, 0px) + 10px);
    }
    body.social-page,
    body.social-portal-page {
        padding-bottom: calc(var(--nav-mobile) + env(safe-area-inset-bottom, 0px) + 10px);
    }

    body.social-page {
        padding-top: var(--header-mobile);
    }

    .top-tabs,
    .page-heading {
        top: 0;
    }
}

@media (max-width: 699px) {
    :root {
        --feed-width: 100%;
    }

    .feed-composer textarea {
        font-size: 18px;
    }

    .discovery-feed-head .feed-composer {
        padding-left: 16px;
        padding-right: 16px;
        gap: 10px;
    }

    .discovery-feed-head .feed-composer .composer-avatar-wrap .author-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }

    .discovery-feed-head .feed-composer .composer-avatar-wrap .avatar-live-link,
    .discovery-feed-head .feed-composer .composer-avatar-wrap .avatar-live-ring {
        width: 36px;
        height: 36px;
        max-width: 36px;
        max-height: 36px;
    }

    .discovery-suggestions-mobile .suggestion-row-avatar .avatar-live-link,
    .discovery-suggestions-mobile .suggestion-row-avatar .avatar-live-ring {
        width: 44px;
        height: 44px;
        max-width: 44px;
        max-height: 44px;
    }

    .discovery-feed-head .composer-post-btn {
        min-height: 40px;
        padding: 8px 16px;
    }

    .discovery-feed-head .composer-control {
        width: 40px;
        height: 40px;
    }

    .discovery-suggestions-mobile .suggestion-row-avatar .author-avatar {
        width: 44px;
        height: 44px;
    }

    .discovery-suggestions-mobile .suggestions-trends-card .btn-sm {
        min-height: 40px;
        min-width: 72px;
    }

    .trending-mobile-scroll {
        padding-left: 16px;
        padding-right: 16px;
        scroll-padding-left: 16px;
        scroll-padding-right: 16px;
    }

    .trending-tag-pill {
        max-width: calc(100% - 48px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .post-actions {
        max-width: 100%;
    }

    .feed-empty strong {
        font-size: 24px;
    }

    .post-card {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 0 10px;
        padding: 12px 16px;
    }
}

/* Profile page */
.profile-topbar {
    display: none;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--social-border);
}

@media (min-width: 1101px) {
    .profile-topbar {
        display: grid;
    }
}

.profile-topbar-back {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
}

.profile-topbar-back:hover {
    background: var(--social-hover);
}

.profile-topbar-title span {
    font-size: 20px;
    font-weight: 800;
}

.profile-topbar-title small {
    font-size: 13px;
    color: var(--text-muted);
}

.profile-topbar-search {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 260px;
}

.profile-topbar-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    outline: none;
}

.profile-topbar-search input:focus {
    border-color: var(--social-blue);
}

.profile-search-button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--social-blue);
    cursor: pointer;
}

.profile-search-button:hover {
    background: rgba(29, 155, 240, 0.1);
}

.profile-card {
    border-bottom: 1px solid var(--social-border);
}

.profile-banner {
    /* Match default cover 1983×793 (5:2) so custom/default covers fit with no crop */
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1983 / 793;
    background: var(--chip-bg);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.profile-main {
    padding: 0 16px;
}

.profile-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.profile-avatar-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    margin-bottom: 2px;
}

.profile-page .profile-avatar {
    width: 134px;
    height: 134px;
    font-size: 2rem;
    border: 4px solid var(--bg);
    margin-top: -80px;
    background: var(--chip-bg);
    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.profile-details {
    width: 100%;
    padding: 2px 0 12px;
}

.profile-title {
    margin: 0 0 2px;
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.profile-meta-handle {
    display: block;
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.2;
}

.profile-joined {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.2;
}

.profile-joined-icon {
    flex-shrink: 0;
    opacity: 0.72;
}

.profile-post-count {
    margin-top: 1px;
    line-height: 1.2;
}

.profile-meta,
.profile-post-count {
    color: var(--text-muted);
    font-size: 15px;
}

.profile-bio {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.35;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 0;
}

.profile-stat-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 15px;
    text-decoration: none;
    transition: color 0.15s;
}

.profile-stat-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.profile-stat-link strong {
    color: var(--text);
    font-weight: 700;
}

.profile-grow-stat-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 15px;
}

.profile-grow-stat-inline strong {
    color: var(--text);
    font-weight: 700;
}

.profile-page .btn-profile-action,
.profile-page .profile-header-actions .btn-profile-message {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #536471;
    background: transparent;
    color: var(--text);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}

.profile-page .btn-profile-action:hover,
.profile-page .profile-header-actions .btn-profile-message:hover {
    background: rgba(239, 243, 244, 0.08);
}

.profile-page .profile-header-actions .btn-follow-toggle {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
}

.profile-page .profile-header-actions .btn-follow-toggle.is-follow {
    border: 1px solid #eff3f4;
    background: var(--text);
    color: var(--bg);
}

.profile-page .profile-header-actions .btn-follow-toggle.is-follow:hover {
    background: #d7dbdc;
    border-color: #d7dbdc;
}

.profile-tab-bar {
    margin: 0 -16px;
}

.profile-tab-bar .tab {
    flex: 1;
    min-width: 0;
    padding: 16px 8px;
    font-size: 15px;
    font-weight: 500;
}

.profile-tab-bar .tab.active {
    font-weight: 700;
    border-bottom: 3px solid var(--social-blue);
}

.profile-stats .pill {
    background: transparent;
    padding: 0;
    color: var(--text);
    font-size: 15px;
}

.profile-stats .pill strong {
    color: var(--text);
}

/* Followers / following list (X-style) */
.follow-list-main {
    min-height: 100vh;
}

.follow-list-topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 16px;
    min-height: 53px;
    border-bottom: 1px solid var(--social-border);
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
}

.follow-list-back {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: -8px;
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
}

.follow-list-back:hover {
    background: var(--social-hover);
}

.follow-list-heading {
    min-width: 0;
}

.follow-list-heading h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.follow-list-heading p {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}

.follow-list {
    display: flex;
    flex-direction: column;
}

.follow-list-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--social-border);
}

.follow-list-row:hover {
    background: var(--social-hover);
}

.follow-list-profile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.follow-list-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.follow-list-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.follow-list-name-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.follow-list-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.follow-list-follows-you {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: #8b98a5;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.follow-list-handle,
.follow-list-bio {
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.follow-list-action {
    margin: 0;
    flex-shrink: 0;
    padding-top: 4px;
}

.follow-list-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
}

.follow-list-empty strong {
    display: block;
    color: var(--text);
    font-size: 17px;
    margin-bottom: 8px;
}

.layout-follow-list .right-panel {
    display: none;
}

@media (min-width: 1101px) {
    .layout-follow-list {
        grid-template-columns: minmax(0, var(--feed-width));
    }
}

/* Follow list + profile connections — mobile (X-style) */
@media (max-width: 1100px) {
    .profile-follow-list-page .follow-list-topbar {
        display: none;
    }

    .profile-follow-list-page .follow-list-main {
        min-height: 0;
    }

    .follow-list-row {
        align-items: center;
        padding: 14px 16px;
        min-height: 56px;
    }

    .follow-list-action .btn-follow-toggle,
    .follow-list-action .btn-primary.btn-sm {
        min-height: 36px;
        min-width: 0;
        padding: 8px 14px;
        font-size: 14px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .profile-stat-link {
        padding: 10px 2px;
        margin: -6px 0;
        min-height: 44px;
        align-items: center;
    }

    .profile-header .btn-follow-toggle {
        min-height: 34px;
        min-width: 0;
        max-width: 100%;
        padding: 0 12px;
        font-size: 13px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .emoji-picker {
        left: 12px !important;
        right: 12px;
        width: auto !important;
        max-width: none;
    }

    .mention-autocomplete {
        max-width: calc(100% - 24px);
    }
}

.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--social-border);
}

.tab-bar .tab {
    flex: 1;
    text-align: center;
    padding: 16px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
}

.tab-bar .tab.active {
    color: var(--text);
    font-weight: 700;
    background: transparent;
    border-bottom: 4px solid var(--social-blue);
    margin-bottom: -1px;
}

.tab-bar .tab.active::after {
    display: none;
}

.profile-page .btn-edit {
    margin-top: 0;
    min-height: 36px;
    cursor: pointer;
    font: inherit;
}

@media (max-width: 1100px) {
    .profile-banner {
        height: auto;
        aspect-ratio: 1983 / 793;
        background-size: 100% 100%;
    }

    .profile-page .profile-avatar {
        width: 80px;
        height: 80px;
        margin-top: -44px;
        font-size: 1.2rem;
        border-width: 3px;
    }

    .profile-avatar-row .avatar-live-link {
        width: 80px;
        height: 80px;
        max-width: 80px;
        max-height: 80px;
        margin-top: -44px;
    }

    .profile-page .avatar-live-ring > .profile-avatar {
        border-width: 3px !important;
    }

    .profile-avatar-row {
        min-height: 36px;
    }

    .profile-main {
        padding: 0 12px;
    }

    .profile-tab-bar {
        margin: 0 -12px;
    }

    .profile-page .profile-header-actions .btn-follow-toggle,
    .profile-page .btn-profile-action {
        min-height: 34px;
        padding: 0 14px;
        font-size: 14px;
    }
}

/* —— Notifications (X-style) —— */
.page-heading {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    min-height: 53px;
    padding: 0 16px;
    border-bottom: 1px solid var(--social-border);
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
}

.page-heading h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
    letter-spacing: -0.02em;
}

.notifications-feed {
    display: flex;
    flex-direction: column;
}

.notification-row {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--social-border);
    color: var(--text);
    transition: background 0.12s;
}

.notification-row-clickable {
    cursor: pointer;
}

.notification-row-hitarea {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
    color: inherit;
}

.notification-row-avatar,
.notification-row-body,
.notification-unread-dot {
    position: relative;
    z-index: 2;
}

.notification-row-clickable .notification-row-body,
.notification-row-clickable .notification-row-meta,
.notification-row-clickable .notification-row-text,
.notification-row-clickable .notification-row-preview,
.notification-row-clickable .notification-row-time,
.notification-row-clickable .notification-unread-dot {
    pointer-events: none;
}

.notification-row-clickable .notification-row-avatar,
.notification-row-clickable .notification-actor-link {
    pointer-events: auto;
    position: relative;
    z-index: 3;
}

.notification-actor-link {
    position: relative;
    z-index: 3;
}

.notification-row:hover,
.notification-row-clickable:has(.notification-row-hitarea:hover) {
    background: var(--social-hover);
}

.notification-row-avatar {
    flex-shrink: 0;
    text-decoration: none;
    border-radius: 50%;
}

.notification-row-avatar .author-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.notification-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.notification-row-text {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-muted);
}

.notification-actor-link,
.notification-actor-name {
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.notification-actor-link:hover {
    text-decoration: underline;
}

.notification-action-text {
    color: var(--text-muted);
}

.notification-row-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notification-row-target {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    margin: 0 -4px;
    padding: 2px 4px;
}

.notification-row-target:hover {
    background: rgba(255, 255, 255, 0.04);
}

.notification-row-preview {
    font-size: 15px;
    line-height: 20px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-row-time {
    font-size: 13px;
    line-height: 16px;
    color: var(--text-muted);
    margin-top: 2px;
}

.notification-row.is-unread {
    background: rgba(29, 155, 240, 0.04);
}

.notification-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--social-blue);
    flex-shrink: 0;
    align-self: center;
}

/* Follow back control on follow notifications (right of row) */
.notification-row-action {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    align-self: center;
    margin: 0;
    pointer-events: auto;
}

.notification-follow-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    min-width: 0;
    max-width: 100%;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--btn-primary-bg, #1d9bf0);
    color: var(--btn-primary-text, #fff);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-sizing: border-box;
}

.notification-follow-back-btn:hover {
    background: var(--btn-primary-hover, #1a8cd8);
}

.notification-follow-back-btn:active {
    transform: scale(0.97);
}

.notification-row-clickable .notification-row-action {
    pointer-events: auto;
    z-index: 4;
}

.notification-actor-link .identity-name-wrap,
.notification-actor-name .identity-name-wrap {
    max-width: 100%;
    min-width: 0;
}

.notification-actor-link .identity-name-text,
.notification-actor-name .identity-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(42vw, 180px);
}

.notification-actor-link .user-badges,
.notification-actor-name .user-badges {
    flex-shrink: 0;
    max-width: 4.5em;
    overflow: hidden;
}

@media (max-width: 1100px) {
    .notification-row {
        gap: 10px;
        padding: 12px 12px;
        align-items: center;
    }

    .notification-row-body {
        min-width: 0;
        flex: 1 1 auto;
    }

    .notification-row-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.35;
        font-size: 14px;
    }

    .notification-actor-link .identity-name-text,
    .notification-actor-name .identity-name-text {
        max-width: min(38vw, 140px);
        display: inline-block;
        vertical-align: bottom;
    }

    .notification-follow-back-btn {
        min-height: 34px;
        padding: 0 12px;
        font-size: 13px;
    }

    .notification-unread-dot {
        margin-left: 2px;
    }
}

@media (max-width: 380px) {
    .notification-follow-back-btn {
        padding: 0 10px;
        font-size: 12px;
        min-height: 32px;
    }

    .notification-row {
        padding: 12px 10px;
        gap: 8px;
    }
}

.page-heading-notifications {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-clear-notifications {
    min-height: 36px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
}

body.social-notifications .page-heading {
    /* top set in notifhead block */
}

/* —— Messages / DM (X-style) —— */
.layout-grid.layout-messages {
    grid-template-columns: var(--dm-list-width) minmax(0, 1fr);
    width: max(var(--content-width), calc(100% - var(--content-offset)));
    max-width: calc(100% - var(--content-offset));
    margin-left: var(--content-offset);
}

.dm-list-panel,
.dm-thread-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    min-height: 0;
}

.dm-list-panel {
    border-left: 1px solid var(--social-border);
    border-right: 1px solid var(--social-border);
    width: 100%;
    max-width: var(--dm-list-width);
}

.dm-thread-panel {
    position: relative;
    border-right: 1px solid var(--social-border);
    min-width: 0;
}

.dm-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 53px;
    padding: 0 16px;
    border-bottom: 1px solid var(--social-border);
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
}

.dm-list-head h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 28px;
    letter-spacing: -0.02em;
}

.dm-new-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.dm-new-btn:hover {
    background: var(--social-hover);
}

.dm-search {
    padding: 8px 16px 12px;
    border-bottom: 1px solid var(--social-border);
}

.dm-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    background: var(--input-bg);
    color: var(--text);
    font-size: 15px;
    line-height: 20px;
    font-family: inherit;
    outline: none;
}

.dm-search input:focus {
    border-color: var(--social-blue);
    background: var(--input-bg-focus);
}

.dm-conversations {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.dm-convo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid transparent;
    transition: background 0.12s;
}

/* Ted Support row is a <button> when no ticket exists — kill grey OS button chrome */
button.dm-convo-item,
button.dm-convo-support-ted,
button[data-open-ted-support] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    font: inherit;
    font-family: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.12s;
}

button.dm-convo-item:hover,
button.dm-convo-support-ted:hover,
button[data-open-ted-support]:hover,
button.dm-convo-item:focus,
button.dm-convo-support-ted:focus,
button[data-open-ted-support]:focus {
    background: var(--social-hover);
    outline: none;
    box-shadow: none;
}

button.dm-convo-item.active,
button.dm-convo-support-ted.active {
    background: var(--social-hover);
}

.dm-convo-item:hover {
    background: var(--social-hover);
}

.dm-convo-item.active {
    background: var(--social-hover);
}

.dm-convo-avatar {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}

.dm-convo-avatar .author-avatar {
    width: 48px;
    height: 48px;
    display: block;
}

.dm-chat-profile {
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.02);
}

.dm-chat-profile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.dm-chat-profile-link:hover .dm-chat-profile-name {
    text-decoration: underline;
}

.dm-chat-profile-avatar .author-avatar {
    width: 48px;
    height: 48px;
    display: block;
}

.dm-chat-profile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dm-chat-profile-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-chat-profile-handle {
    font-size: 13px;
    line-height: 16px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-convo-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.dm-convo-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-convo-preview {
    font-size: 15px;
    line-height: 20px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-convo-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--social-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.dm-empty-hint {
    padding: 24px 16px;
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-muted);
    text-align: center;
}

.dm-thread-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 53px;
    padding: 0 16px;
    border-bottom: 1px solid var(--social-border);
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
}

.dm-thread-user {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
    min-width: 0;
    flex: 1 1 auto;
}

.dm-thread-user .author-avatar {
    width: 40px;
    height: 40px;
}

.dm-thread-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}

.dm-thread-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dm-thread-handle {
    display: block;
    font-size: 13px;
    line-height: 16px;
    color: var(--text-muted);
}

.dm-thread-presence {
    display: block;
    font-size: 13px;
    line-height: 16px;
    color: var(--text-muted);
}

.dm-thread-presence.is-online {
    color: #00ba7c;
}

.dm-thread-presence.is-busy,
.dm-thread-presence.is-busy-away {
    color: #f59e0b;
}

.dm-thread-presence.is-active {
    color: var(--text-muted);
}

.dm-thread-presence.is-offline {
    color: var(--text-muted);
}

.dm-thread-handle[hidden],
.dm-thread-presence[hidden],
.dm-thread-typing[hidden] {
    display: none !important;
}

.dm-thread-typing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 400;
    color: var(--social-blue);
}

.dm-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 16px;
}

.dm-typing-dots span {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--social-blue);
    opacity: 0.35;
    animation: dm-typing-bounce 1.2s ease-in-out infinite;
}

.dm-typing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.dm-typing-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes dm-typing-bounce {
    0%, 60%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* In-flow chip between message list and compose — never overlays the textarea */
.dm-jump-present {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 6px;
    margin: 0 auto 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    background: var(--card-bg);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-elevated);
    flex: 0 0 auto;
    max-width: calc(100% - 24px);
    pointer-events: auto;
    opacity: 1;
}

.dm-jump-present[hidden] {
    display: none !important;
}

.dm-jump-present.is-visible:not([hidden]) {
    display: inline-flex !important;
}

.dm-jump-present:hover {
    background: var(--social-hover);
}

.dm-jump-present-icon {
    font-size: 14px;
    line-height: 1;
}

.dm-convo-community .dm-convo-community-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(29, 155, 240, 0.25), rgba(120, 86, 255, 0.2));
    color: var(--social-blue);
}

.dm-thread-community-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(29, 155, 240, 0.25), rgba(120, 86, 255, 0.2));
    color: var(--social-blue);
}

.dm-msg-author {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--text-muted);
    text-decoration: none;
    margin: 0 0 2px 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-msg-author:hover {
    text-decoration: underline;
    /* keep child role color; only decorate */
}
.dm-msg-author .identity-name-text,
.dm-msg-author-name {
    font-weight: 800;
}
.dm-msg-author:hover .dm-msg-author-handle {
    color: var(--social-blue);
}

.dm-msg-author-handle {
    font-weight: 500;
    color: var(--text-muted);
}

.dm-msg.incoming {
    max-width: min(78%, calc(100% - 24px));
}

.dm-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
}

.dm-day-divider {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 6px;
    margin: 4px 0 2px;
    pointer-events: none;
}

.dm-day-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--social-border);
    opacity: 0.45;
    z-index: 0;
    transform: translateZ(0);
}

.dm-day-divider-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    border: none;
    background: var(--bg-glass-strong);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    box-shadow: inset 0 0 0 1px var(--social-border);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.dm-day-float {
    position: sticky;
    top: 0;
    z-index: 7;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 6px;
    margin: 0 0 2px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.dm-day-float.is-visible {
    opacity: 1;
    visibility: visible;
}

.dm-messages:has(.dm-day-float.is-visible) .dm-day-divider-label {
    visibility: hidden;
}

.dm-day-float-label {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    border: none;
    background: var(--bg-glass-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    box-shadow: inset 0 0 0 1px var(--social-border);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.dm-msg {
    display: flex;
    flex-direction: column;
    max-width: min(65%, calc(100% - 48px));
    gap: 2px;
    position: relative;
}

.dm-msg.incoming {
    align-self: flex-start;
}

.dm-msg.outgoing {
    align-self: flex-end;
    align-items: flex-end;
}

.dm-msg.dm-msg-call-event {
    align-self: center;
    max-width: 100%;
    margin: 10px 0;
}

.dm-call-event-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.3;
}

.dm-call-event-icon {
    opacity: 0.9;
}

.dm-call-event-time {
    opacity: 0.65;
    font-size: 12px;
}

.dm-msg-row {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    position: relative;
    max-width: 100%;
}

.dm-msg.incoming .dm-msg-row {
    flex-direction: row;
}

.dm-msg.outgoing .dm-msg-row {
    flex-direction: row-reverse;
}

.dm-msg-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    align-items: flex-end;
}

.dm-msg.incoming .dm-msg-stack {
    align-items: flex-start;
}

.dm-msg.outgoing .dm-msg-stack {
    align-items: flex-end;
}

.dm-msg-row .dm-msg-stack {
    flex: 0 1 auto;
    min-width: 0;
}

.dm-msg-row .dm-bubble {
    flex: 0 0 auto;
}

.dm-msg-media-group {
    display: flex;
    flex-direction: column;
    max-width: min(280px, 100%);
    overflow: hidden;
    border-radius: 16px;
    border: none;
    box-shadow: inset 0 0 0 1px var(--social-border);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.dm-msg.outgoing .dm-msg-media-group {
    border-color: transparent;
}

.dm-msg-attach {
    display: block;
    max-width: min(280px, 100%);
    line-height: 0;
    flex-shrink: 0;
}

.dm-msg-attach-solo {
    align-self: flex-end;
}

.dm-msg.incoming .dm-msg-attach-solo {
    align-self: flex-start;
}

.dm-msg-media-group .dm-msg-attach {
    max-width: 100%;
}

.dm-msg-attach .dm-media {
    display: block;
}

.dm-msg-attach .dm-media img,
.dm-msg-attach .dm-media video {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 0;
    border: none;
}

.dm-media-video {
    width: min(280px, 100%);
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--social-border);
    line-height: 0;
}

.dm-media-video .dm-video-player {
    display: block;
    width: 100%;
    max-height: min(52vh, 320px);
    min-height: 160px;
    object-fit: contain;
    background: var(--bg);
    vertical-align: top;
}

.dm-msg + .dm-msg .dm-media-video,
.dm-msg + .dm-msg.incoming .dm-media-video,
.dm-msg + .dm-msg.outgoing .dm-media-video {
    margin-top: 6px;
}

.dm-typing-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 6px 12px 2px;
    font-size: 13px;
    line-height: 18px;
    color: var(--social-blue);
    flex-shrink: 0;
}

.dm-typing-inline[hidden] {
    display: none !important;
}

.dm-msg-attach-solo .dm-media img,
.dm-msg-attach-solo .dm-media video {
    border-radius: 16px;
    border: 1px solid var(--social-border);
}

.dm-msg-attach-solo .dm-media-video {
    border: none;
}

.dm-msg-attach-solo .dm-media-video .dm-video-player {
    border-radius: 16px;
}

.dm-media-audio {
    min-width: min(260px, 100%);
    max-width: 100%;
}

.dm-media-audio .dm-audio-player {
    display: block;
    width: min(280px, 100%);
    min-width: 200px;
    height: 40px;
}

.dm-voice-preview audio {
    width: 100%;
    max-width: 280px;
}

.dm-voice-status {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-muted);
    padding: 4px 0 0;
}

.composer-control-voice.is-recording {
    color: var(--social-like);
    background: rgba(249, 24, 128, 0.12);
}

.composer-control-voice .composer-icon-voice {
    width: 22px;
    height: 22px;
}

.dm-msg-media-group .dm-msg-attach .dm-media img,
.dm-msg-media-group .dm-msg-attach .dm-media video {
    width: 100%;
}

.dm-bubble-cap {
    padding: 6px 12px 8px;
    border-radius: 0;
    margin-top: 0;
}

.dm-msg.incoming .dm-bubble-cap {
    background: var(--input-bg);
}

.dm-msg.outgoing .dm-bubble-cap {
    background: var(--social-blue);
}

.dm-bubble-cap .dm-bubble-foot {
    margin-top: 0;
}

.dm-msg-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
    padding: 0 4px;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-muted);
}

.dm-msg.outgoing > .dm-msg-footer {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.dm-msg-footer-outgoing {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.dm-msg-footer-incoming {
    align-self: flex-start;
    max-width: min(78%, calc(100% - 24px));
}

.dm-msg-footer-sep {
    color: var(--text-muted);
    opacity: 0.7;
    user-select: none;
}

.dm-msg-footer .dm-msg-time,
.dm-read-receipt {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-muted);
    opacity: 1;
    font-weight: 400;
}

.dm-read-receipt {
    padding: 0;
    white-space: nowrap;
}

.dm-read-receipt-pending {
    color: var(--text-muted);
    opacity: 1;
}

.dm-bubble {
    width: max-content;
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 24px;
    font-size: 15px;
    line-height: 20px;
    word-break: break-word;
    box-sizing: border-box;
    border: none;
    background-clip: padding-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.dm-msg.incoming .dm-bubble {
    background: var(--input-bg);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--social-border);
}

.dm-msg.outgoing .dm-bubble {
    background: var(--social-blue);
    color: #fff;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.dm-bubble-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 4px;
    padding-top: 2px;
}

.dm-bubble-cap .dm-bubble-foot {
    margin-top: 0;
    padding-top: 0;
}

.dm-msg-time {
    font-size: 11px;
    line-height: 14px;
    font-weight: 400;
    opacity: 0.8;
    white-space: nowrap;
}

.dm-msg.incoming .dm-msg-time {
    color: var(--text-muted);
}

.dm-msg.outgoing .dm-msg-time {
    color: rgba(255, 255, 255, 0.88);
}

.dm-edited-label {
    font-size: 11px;
    line-height: 14px;
    opacity: 0.75;
    white-space: nowrap;
}

.dm-msg.incoming .dm-edited-label {
    color: var(--text-muted);
}

.dm-msg.outgoing .dm-edited-label {
    color: rgba(255, 255, 255, 0.85);
}

.dm-msg-time-deleted {
    display: block;
    margin-top: 2px;
    text-align: center;
    font-size: 11px;
    line-height: 14px;
    color: var(--text-muted);
    opacity: 0.7;
}

.dm-msg-deleted {
    max-width: 100%;
    align-self: center;
}

.dm-deleted-text {
    margin: 0;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

.dm-msg-menu-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.dm-msg:hover .dm-msg-menu-btn,
.dm-msg.is-menu-open .dm-msg-menu-btn,
.dm-msg:focus-within .dm-msg-menu-btn {
    opacity: 1;
}

@media (hover: none), (pointer: coarse) {
    .dm-msg .dm-msg-menu-btn {
        display: none !important;
    }
}

.dm-msg-menu-btn:hover {
    background: var(--social-hover);
    color: var(--text);
}

.dm-msg-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    min-width: 140px;
    padding: 4px 0;
    border-radius: 12px;
    border: 1px solid var(--social-border);
    background: var(--bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 20;
}

.dm-msg-menu[hidden] {
    display: none !important;
}

.dm-msg-menu-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.dm-msg-menu-item:hover {
    background: var(--social-hover);
}

.dm-msg-menu-danger {
    color: var(--social-like);
}

.dm-msg.outgoing .dm-msg-menu {
    right: auto;
    left: 0;
}

.dm-msg.incoming .dm-msg-menu {
    left: 0;
    right: auto;
}

.dm-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}

.dm-edit-modal.open {
    display: flex;
    pointer-events: auto;
}

.dm-edit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.dm-edit-card {
    position: relative;
    z-index: 10000000 !important;
    width: min(480px, 100%);
    background: var(--bg);
    border-radius: 16px;
    border: 1px solid var(--social-border);
    overflow: hidden;
}

.dm-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 53px;
    border-bottom: 1px solid var(--social-border);
}

.dm-edit-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.dm-edit-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
}

.dm-edit-textarea {
    width: 100%;
    min-height: 120px;
    padding: 16px;
    border: none;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 20px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.dm-edit-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--social-border);
}

/* DM reactions (Discord-style) */
.dm-react-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    background: var(--card-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 6;
}

.dm-msg-row.is-react-hover .dm-react-bar:not(.is-floating) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Long-press uses a floating bar only — never also show the inline hover bar */
.dm-msg.is-react-open .dm-react-bar:not(.is-floating) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.dm-react-bar.is-floating {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dm-messages[data-channel="community"] .dm-msg-row.is-react-hover .dm-react-bar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dm-react-bar.is-floating {
    position: fixed;
    /* left/top set in JS relative to the hovered message */
    left: 0;
    top: 0;
    transform: none;
    z-index: 600;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    touch-action: manipulation;
    max-width: calc(100vw - 24px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.dm-react-quick,
.dm-react-more {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    transition: background 0.12s, transform 0.12s;
}

.dm-react-quick:hover,
.dm-react-more:hover {
    background: var(--social-hover);
    transform: scale(1.08);
}

.dm-react-more-icon {
    width: 20px;
    height: 20px;
    color: var(--social-blue);
}

.dm-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
    max-width: 100%;
}

.dm-msg.incoming .dm-reactions {
    justify-content: flex-start;
    padding-left: 2px;
}

.dm-msg.outgoing .dm-reactions {
    justify-content: flex-end;
    padding-right: 2px;
}

.dm-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    min-height: 28px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s;
}

.dm-reaction-chip:hover {
    background: rgba(29, 155, 240, 0.12);
    border-color: rgba(29, 155, 240, 0.35);
}

.dm-reaction-chip.is-mine {
    border-color: rgba(29, 155, 240, 0.55);
    background: rgba(29, 155, 240, 0.18);
}

.dm-reaction-emoji {
    font-size: 16px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.dm-reaction-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--social-blue);
}

.dm-emoji-picker {
    z-index: 650;
}

@media (hover: none), (pointer: coarse) {
    .dm-msg .dm-react-bar:not(.is-floating) {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .dm-msg.is-react-open .dm-react-bar.is-floating,
    .dm-react-bar.is-floating {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 8px 12px;
        max-width: calc(100% - 16px);
    }

    .dm-react-bar.is-floating .dm-react-quick,
    .dm-react-bar.is-floating .dm-react-more {
        width: 48px;
        height: 48px;
        font-size: 30px;
        line-height: 1;
    }

    .dm-react-bar.is-floating .dm-react-more-icon {
        width: 26px;
        height: 26px;
    }

    .dm-emoji-picker.dm-emoji-picker-mobile-strip {
        max-width: calc(100% - 16px);
        padding: 10px 12px;
        border-radius: 999px;
    }

    .dm-emoji-picker .emoji-picker-grid-strip {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        max-width: calc(100% - 40px);
        -webkit-overflow-scrolling: touch;
    }

    .dm-emoji-picker.dm-emoji-picker-mobile-strip .emoji-picker-btn {
        width: 48px;
        height: 48px;
        font-size: 30px;
        flex: 0 0 auto;
    }
}

.dm-msg.incoming .dm-react-bar:not(.is-floating) {
    position: absolute;
    left: calc(100% + 6px);
    bottom: 0;
    margin-left: 0;
}

/* Media-only incoming rows: show react bar above attachment (avoids overflow-x clip) */
.dm-msg.incoming .dm-msg-row:has(.dm-msg-media-group) .dm-react-bar:not(.is-floating) {
    left: auto;
    right: 0;
    bottom: 100%;
    margin-bottom: 4px;
}

.dm-messages[data-channel="group"] .dm-msg.incoming .dm-react-bar:not(.is-floating) {
    position: absolute;
    left: calc(100% + 6px);
    bottom: 0;
    margin-left: 0;
}

.dm-messages[data-channel="group"] .dm-msg.incoming .dm-msg-row:has(.dm-msg-media-group) .dm-react-bar:not(.is-floating) {
    left: auto;
    right: 0;
    bottom: 100%;
    margin-bottom: 4px;
}

.dm-messages[data-channel="community"] .dm-msg.outgoing .dm-react-bar:not(.is-floating) {
    position: absolute;
    right: calc(100% + 6px);
    left: auto;
    bottom: 0;
}

.dm-media-zoomable {
    cursor: zoom-in;
}

.dm-media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999995;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.9);
    color-scheme: normal;
}

.dm-media-lightbox.open {
    display: flex;
    cursor: zoom-out;
}

html.dm-lightbox-open {
    overflow: hidden;
}

.dm-media-lightbox-stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(96vw, 1200px);
    max-height: min(92vh, 92dvh);
    overflow: visible;
    touch-action: none;
    pointer-events: auto;
}

.dm-media-lightbox-stage img,
.dm-media-lightbox img,
#dmMediaLightboxImg {
    display: block;
    position: relative;
    z-index: 2;
    width: auto;
    height: auto;
    max-width: min(96vw, 1200px);
    max-height: min(92vh, 92dvh);
    object-fit: contain;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    pointer-events: auto;
    cursor: default;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    background: transparent;
    box-shadow: none;
    image-rendering: auto;
}

.dm-media-lightbox-close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top, 12px));
    right: max(12px, env(safe-area-inset-right, 12px));
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.dm-media-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Chat + modal mobile polish (PWA / app) */
@media (max-width: 700px) {
    .dm-msg.is-menu-open .dm-msg-menu {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        top: auto;
        z-index: 550;
        min-width: 0;
        max-height: min(42vh, 280px);
        overflow-y: auto;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
    }

    .dm-edit-modal {
        align-items: flex-end;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .dm-edit-card {
        width: 100%;
        max-height: min(88vh, 520px);
        border-radius: 16px 16px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .dm-media-lightbox-close {
        top: max(12px, env(safe-area-inset-top, 12px));
        right: max(12px, env(safe-area-inset-right, 12px));
    }

    .dm-media-lightbox-stage img,
    .dm-media-lightbox img,
    #dmMediaLightboxImg {
        max-width: min(100%, 96vw);
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
    }

    .new-message-modal {
        align-items: flex-end;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .new-message-modal .new-message-card {
        width: 100%;
        max-height: min(92vh, 640px);
        border-radius: 16px 16px 0 0;
    }
}

@media (max-width: 640px) {
    .report-modal-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .report-modal-actions .btn {
        width: 100%;
        min-height: 44px;
    }
}

@media (max-width: 700px) {
    .dm-msg {
        max-width: 82%;
    }

    .dm-react-quick,
    .dm-react-more {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .dm-reaction-chip {
        min-height: 32px;
        padding: 4px 10px;
    }
}

.dm-compose-error {
    margin: 0 16px 4px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(249, 24, 128, 0.12);
    color: var(--social-like);
    font-size: 14px;
    line-height: 18px;
}

.dm-compose-error[hidden] {
    display: none !important;
}

.dm-compose {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--social-border);
    background: var(--bg);
}

.dm-compose-inner {
    display: grid;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "editor editor"
        "tools send";
    gap: 8px;
    align-items: center;
}

.dm-compose-tools {
    grid-area: tools;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
    justify-self: start;
}

.dm-compose-tools .composer-control {
    width: 40px;
    height: 40px;
}

.dm-compose-editor {
    grid-area: editor;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dm-media-slot .media-preview {
    margin: 0;
}

.dm-media-slot .media-preview img,
.dm-media-slot .media-preview video {
    max-height: 120px;
    border-radius: 12px;
}

.dm-compose textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    max-height: 120px;
    overflow-y: auto;
    resize: none;
    padding: 12px 16px;
    border-radius: 24px;
    border: none;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 20px;
    font-family: inherit;
    outline: none;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--social-border);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.dm-compose textarea:focus {
    box-shadow: inset 0 0 0 1.5px var(--social-blue);
}

.dm-send-btn {
    grid-area: send;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: none;
    border-radius: 999px;
    background: var(--social-blue);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    justify-self: end;
}

.dm-send-btn:hover {
    background: var(--social-blue-hover);
}

.dm-thread-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    text-align: center;
    gap: 8px;
}

.dm-thread-empty h2 {
    margin: 0;
    font-size: 31px;
    font-weight: 800;
    line-height: 36px;
    letter-spacing: -0.02em;
}

.dm-thread-empty p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-muted);
    max-width: 320px;
}

.dm-error {
    margin: 8px 16px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(249, 24, 128, 0.12);
    color: var(--social-like);
    font-size: 15px;
}



.new-message-card {
    position: relative;
    z-index: 10000000 !important;
    width: min(600px, 100%);
    max-height: 80vh;
    background: var(--bg);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
}

.new-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 53px;
    border-bottom: 1px solid var(--social-border);
}

.new-message-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.new-message-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
}

.new-message-close:hover {
    background: var(--social-hover);
}

.new-message-search {
    margin: 12px 16px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    background: var(--input-bg);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
}

.new-message-list {
    overflow-y: auto;
    flex: 1;
}

.new-message-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text);
}

.new-message-item:hover {
    background: var(--social-hover);
}

.new-message-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

.new-message-username {
    display: block;
    font-size: 15px;
    color: var(--text-muted);
}

/* Desktop post polish — override legacy chirp feed styles */
@media (min-width: 1101px) {
    .post-card {
        padding: 12px 16px;
    }

    .post-actions {
        max-width: 100%;
    }
}

body.social-page .post-text,
body.social-page .post-text *:not(a) {
    text-decoration: none;
}

body.social-page .post-actions .like-button {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    padding: 8px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent;
    font-weight: inherit !important;
    /* do NOT set color: inherit ? it beats hover (higher specificity) and kills pink glow */
    cursor: pointer;
    font-family: inherit;
    border-radius: 999px;
    transition: color 0.15s ease, background 0.15s ease;
}
body.social-page .post-actions-like .like-button:hover,
body.social-page .post-actions-like .like-button:focus-visible {
    color: var(--social-like-active) !important;
    background: rgba(249, 24, 128, 0.1) !important;
}
body.social-page .post-actions-like .like-button:hover .post-actions-icon,
body.social-page .post-actions-like .like-button:hover .post-actions-icon svg,
body.social-page .post-actions-like .like-button:focus-visible .post-actions-icon,
body.social-page .post-actions-like .like-button:focus-visible .post-actions-icon svg {
    color: var(--social-like-active) !important;
    fill: currentColor !important;
}
body.social-page .post-actions-like .like-button.is-liked {
    color: var(--social-like-active) !important;
}
body.social-page .post-actions-like .like-button.is-liked .post-actions-icon,
body.social-page .post-actions-like .like-button.is-liked .post-actions-icon svg {
    color: var(--social-like-active) !important;
    fill: currentColor !important;
}

/* Messages — mobile (X-style inbox + full-screen thread) */
@media (max-width: 1100px) {
    body.social-messages {
        padding-bottom: 0;
    }

    body.social-messages:not(.msg-has-thread) .page {
        padding-bottom: calc(var(--nav-mobile) + env(safe-area-inset-bottom, 0));
    }

    body.social-messages.msg-has-thread .page {
        padding-bottom: 0;
    }

    body.social-messages .layout-grid.layout-messages {
        min-height: calc(100dvh - var(--header-mobile));
    }

    body.social-messages .dm-list-head {
        position: static;
        background: var(--bg);
        backdrop-filter: none;
        border-bottom: none;
        padding-top: 4px;
    }

    body.social-messages .dm-list-head .dm-new-btn {
        display: none;
    }

    body.social-messages .dm-list-panel {
        max-width: 100%;
        border-left: none;
        border-right: none;
        min-height: calc(100dvh - var(--header-mobile) - var(--nav-mobile) - env(safe-area-inset-bottom, 0));
    }

    body.social-messages:not(.msg-has-thread) .dm-thread-panel {
        display: none !important;
    }

    body.social-messages.msg-has-thread .dm-list-panel {
        display: none !important;
    }

    body.social-messages.msg-has-thread .mobile-nav {
        display: none !important;
    }

    body.social-messages.msg-has-thread .dm-thread-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        top: var(--header-mobile);
        bottom: 0;
        z-index: 15;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow: hidden;
        border-right: none;
    }

    body.social-messages.msg-has-thread .dm-messages {
        flex: 1;
        min-height: 0;
    }

    body.social-messages.msg-has-thread .dm-thread-head {
        display: none;
    }

    .mobile-header-center-dm {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 0;
        flex: 1;
        gap: 2px;
        padding: 0 8px;
    }

    .mobile-header-center-dm .mobile-header-title {
        max-width: 100%;
    }

    a.mobile-header-dm-profile {
        text-decoration: none;
        color: inherit;
    }

    .mobile-header-dm-profile {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        justify-content: flex-start;
        max-width: calc(100% - 96px);
    }

    .mobile-header-dm-avatar .author-avatar {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    .mobile-header-dm-titles {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: 0;
        gap: 0;
    }

    .mobile-header-dm-handle,
    .mobile-header-dm-presence {
        font-size: 13px;
        line-height: 16px;
        color: var(--text-muted);
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-header-dm-presence.is-online {
        color: #00ba7c;
    }

    .mobile-header-dm-presence.is-busy,
    .mobile-header-dm-presence.is-busy-away {
        color: #f59e0b;
    }

    .mobile-header-dm-handle[hidden],
    .mobile-header-dm-presence[hidden] {
        display: none !important;
    }

    .mobile-header-typing {
        font-size: 13px;
        font-weight: 400;
        line-height: 16px;
        color: var(--social-blue);
    }

    .mobile-header-typing[hidden],
    .mobile-header-center-dm .mobile-header-title[hidden] {
        display: none !important;
    }

    .mobile-header-typing .dm-typing-label {
        margin-right: 4px;
    }

    body.social-messages.msg-has-thread .dm-compose {
        position: sticky;
        bottom: 0;
        z-index: 6;
        width: 100%;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0));
        border-top: 1px solid var(--social-border);
        background: var(--bg);
    }

    body.social-messages.msg-has-thread .dm-messages {
        padding-bottom: 8px;
    }

    .dm-msg .dm-msg-menu-btn {
        display: none !important;
    }

    .dm-msg {
        max-width: min(82%, calc(100% - 24px));
    }

    .dm-compose textarea {
        min-height: 48px;
        font-size: 16px;
        line-height: 22px;
        padding: 12px 16px;
        border-radius: 22px;
    }

    .dm-compose-tools {
        gap: 0;
    }

    .dm-compose-tools .composer-control {
        width: 40px;
        height: 40px;
    }

    /* Centered mobile GIF sheet (do NOT leave left:8px + translate(-50%) — that flies off-screen) */
    .gif-picker,
    .gif-picker-dm {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(420px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        top: auto !important;
        max-height: min(50vh, 440px) !important;
        margin: 0 !important;
    }

    .emoji-picker.emoji-picker-dm,
    .composer-emoji-picker {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(340px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }

    body.social-messages .mobile-header-title {
        max-width: 55vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 1101px) {
    body.social-messages,
    body.social-messages .page {
        height: 100vh;
        overflow: hidden;
    }

    body.social-messages .mobile-header {
        display: none !important;
    }

    body.social-messages .layout-grid.layout-messages {
        width: calc(100% - var(--content-offset));
        max-width: calc(100% - var(--content-offset));
        height: 100vh;
        overflow: hidden;
        align-items: stretch;
    }

    body.social-messages .dm-list-panel,
    body.social-messages .dm-thread-panel {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
    }

    body.social-messages .dm-thread-head {
        flex-shrink: 0;
    }

    body.social-messages .dm-search {
        flex-shrink: 0;
    }

    body.social-messages .dm-list-head {
        flex-shrink: 0;
    }

    body.social-notifications .page-heading { /* top set in notifhead block */ }
}

/* Feed typography tightening */
.post-card .post-body,
.post-text {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
}

.post-meta,
.post-time,
.activity-meta {
    font-size: 13px;
    line-height: 16px;
}

.post-author-name {
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
}

.mobile-nav-items-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mobile-nav-items-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sidebar-item.sidebar-item-admin .sidebar-item-label {
    font-weight: 600;
}


/* —— Admin (mobile-first, minimal) —— */
body.social-admin .layout-grid.layout-admin {
    display: block;
    width: 100%;
    max-width: 100%;
}

body.social-admin .adm-members-rail {
    display: none;
}

body.social-admin .main-content.social-admin-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 16px calc(var(--nav-mobile, 56px) + 20px + env(safe-area-inset-bottom, 0));
    border: none;
    min-height: auto;
    box-sizing: border-box;
}

@media (min-width: 1101px) {
    body.social-admin .layout-grid.layout-admin {
        display: grid;
        grid-template-columns: minmax(0, var(--feed-width)) minmax(0, var(--aside-width));
        gap: 0;
        align-items: start;
    }

    body.social-admin .main-content.social-admin-page {
        padding: 20px 16px 32px;
        max-width: var(--feed-width);
        border-left: 1px solid var(--social-border);
        border-right: 1px solid var(--social-border);
    }

    body.social-admin .adm-members-rail {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        padding: 16px 16px 24px;
        border-right: none;
    }
}

.adm-members-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--social-border);
    flex-shrink: 0;
}

.adm-members-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.adm-members-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.adm-members-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.adm-members-group {
    margin-bottom: 16px;
}

.adm-members-group-title {
    margin: 0 0 6px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.adm-member-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.adm-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}

.adm-member-row:hover {
    background: var(--social-hover);
}

.adm-member-avatar {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.adm-member-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.adm-member-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    box-sizing: border-box;
}

.adm-member-dot.online {
    background: #23a559;
}

.adm-member-dot.offline {
    background: #4f545c;
}

.adm-member-meta {
    min-width: 0;
    flex: 1;
}

.adm-member-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-member-handle {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-member-tags {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
}

.adm-member-tag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid var(--social-border);
    color: var(--text-muted);
}

.adm-member-tag.admin {
    color: #1d9bf0;
    border-color: rgba(29, 155, 240, 0.35);
}

.adm-member-tag.owner {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.4);
    background: rgba(167, 139, 250, 0.1);
}

.adm-member-tag.muted {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}

.adm-member-tag.banned {
    color: #f4212e;
    border-color: rgba(244, 33, 46, 0.35);
}

.adm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.adm-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.adm-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.adm-role {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--social-border);
    color: var(--text-muted);
}

.adm-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

@media (max-width: 420px) {
    .adm-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

.adm-stat {
    padding: 12px 10px;
    border-radius: 12px;
    background: var(--card-bg-deep);
    border: 1px solid var(--social-border);
    text-align: center;
}

.adm-stat-highlight {
    border-color: rgba(29, 155, 240, 0.35);
    background: var(--card-bg-muted);
}

.adm-stat-num {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--text);
}

.adm-stat-lbl {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.adm-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--card-bg-deep);
    border: 1px solid var(--social-border);
    position: sticky;
    top: calc(var(--header-mobile, 52px) + 4px);
    z-index: 5;
}

@media (min-width: 1101px) {
    .adm-seg {
        top: 8px;
    }
}

.adm-seg-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.adm-seg-btn.active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.adm-panel {
    display: none;
}

.adm-panel.active {
    display: block;
}

.adm-panel[hidden] {
    display: none !important;
}

.adm-panel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.adm-panel-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
}

.adm-note {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
}

.adm-muted,
.adm-empty {
    margin: 16px 0;
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
}

.adm-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adm-report {
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--card-bg-deep);
    border: 1px solid var(--social-border);
    transition: opacity 0.2s, transform 0.2s;
}

.adm-report-out {
    opacity: 0;
    transform: scale(0.98);
}

.adm-report-head {
    display: grid;
    grid-template-columns: 1fr auto 32px;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.adm-report-head time {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.adm-pill {
    display: inline-block;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    background: var(--card-bg-inset);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-pill-reason {
    background: rgba(29, 155, 240, 0.12);
    color: #7cc4f8;
}

.adm-dismiss {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.adm-dismiss:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.adm-report-who {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text);
}

.adm-report-who span {
    color: var(--social-blue);
}

.adm-report-note {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-muted);
}

.adm-log-entry {
    padding: 12px 0;
    border-bottom: 1px solid var(--social-border);
}

.adm-log-entry:last-child {
    border-bottom: none;
}

.adm-log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.adm-log-head time {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.adm-pill-action {
    background: var(--card-bg);
    color: var(--text);
    border-color: var(--social-border);
}

.adm-log-who {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.adm-log-actor {
    font-weight: 600;
}

.adm-log-target {
    color: var(--social-blue);
}

.adm-log-detail {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.35;
    word-break: break-word;
}

.adm-log-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.adm-log-list .adm-empty,
.adm-log-list .adm-muted {
    padding: 8px 0;
}

.adm-report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.adm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    background: var(--card-bg);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.adm-btn-sm {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

.adm-btn-ghost {
    background: transparent;
}

.adm-btn-primary {
    background: var(--social-blue);
    border-color: var(--social-blue);
    color: #fff;
}

.adm-btn-danger {
    border-color: rgba(244, 33, 46, 0.5);
    color: #f87171;
    background: rgba(244, 33, 46, 0.08);
}

.adm-btn-dismiss-text {
    margin-left: auto;
}

.adm-field-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

@media (min-width: 480px) {
    .adm-field-row {
        flex-direction: row;
        align-items: stretch;
    }

    .adm-field-row .adm-input {
        flex: 1;
    }

    .adm-field-row .adm-btn {
        flex-shrink: 0;
    }
}

.adm-input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--social-border);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    box-sizing: border-box;
}

.adm-input:focus {
    outline: none;
    border-color: var(--social-blue);
}

.adm-alert {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    background: rgba(244, 33, 46, 0.1);
    color: #fca5a5;
    border: 1px solid rgba(244, 33, 46, 0.25);
}

.adm-alert[hidden] {
    display: none !important;
}

.adm-mod-card {
    margin-top: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--social-border);
    background: var(--card-bg-deep);
}

.adm-mod-head strong {
    display: block;
    font-size: 16px;
}

.adm-mod-handle {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
}

.adm-mod-meta {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    border-top: 1px solid var(--social-border);
}

.adm-mod-meta li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--social-border);
    font-size: 13px;
}

.adm-mod-meta li span:first-child {
    color: var(--text-muted);
}

.adm-mod-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adm-mod-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.adm-mod-block-full {
    width: 100%;
}

.adm-mod-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.adm-mod-btns {
    display: flex;
    gap: 8px;
}

.adm-mod-btns .adm-btn {
    flex: 1;
}

.adm-team-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.adm-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--social-border);
}

.adm-team-email {
    font-size: 14px;
    word-break: break-all;
    min-width: 0;
}

.adm-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nav-mobile, 56px) + 12px + env(safe-area-inset-bottom, 0));
    transform: translateX(-50%);
    z-index: 100;
    max-width: calc(100% - 32px);
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-elevated);
    pointer-events: none;
}

.adm-toast[hidden] {
    display: none !important;
}

@media (min-width: 1101px) {
    .adm-toast {
        bottom: 24px;
    }
}

/* Grow */
body.social-grow .main-content {
    padding-bottom: 24px;
}

.grow-page-heading {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    min-height: auto;
    padding-top: 10px;
    padding-bottom: 12px;
}

.grow-heading-main {
    flex: 1 1 200px;
    min-width: 0;
}

.grow-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.grow-lock-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #8ec8f0;
    background: rgba(29, 155, 240, 0.14);
    border: 1px solid rgba(29, 155, 240, 0.35);
}

.grow-tagline {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-muted);
}

.grow-trust-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid var(--social-border);
    background: var(--gradient-trust);
    min-width: 80px;
}

.grow-trust-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.grow-trust-value {
    font-size: 22px;
    line-height: 1.1;
}

.grow-trust-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.grow-brand-logo {
    display: block;
    flex-shrink: 0;
}

.grow-brand-logo--sm {
    width: 20px;
    height: 20px;
}

.grow-brand-logo--md {
    width: 28px;
    height: 28px;
}

.grow-brand-logo--lg {
    width: 40px;
    height: 40px;
}

.grow-brand-logo--tiktok {
    color: var(--text);
}

.grow-section-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.grow-section-lead {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
}

.grow-connect {
    margin: 0 16px 14px;
    padding: 18px 16px;
    border-radius: 18px;
    border: 1px solid var(--social-border);
    background: var(--gradient-connect);
}

.grow-connect-head {
    margin-bottom: 14px;
}

.grow-connect-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.grow-connect-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    border-radius: 16px;
    border: 2px solid var(--social-border);
    background: var(--surface-inset);
    text-align: center;
    cursor: default;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

button.grow-connect-card {
    width: 100%;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

button.grow-connect-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.grow-connect-card--youtube {
    border-color: rgba(255, 0, 0, 0.35);
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.grow-connect-card--youtube.is-linked {
    border-color: rgba(0, 186, 124, 0.45);
    background: linear-gradient(180deg, rgba(0, 186, 124, 0.1) 0%, rgba(0, 0, 0, 0.12) 100%);
}

.grow-connect-card--tiktok {
    border-color: rgba(254, 44, 85, 0.35);
    background: linear-gradient(180deg, rgba(37, 244, 238, 0.06) 0%, rgba(254, 44, 85, 0.06) 100%);
}

.grow-connect-card.is-info {
    opacity: 0.95;
}

.grow-connect-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.grow-connect-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.grow-connect-name {
    font-size: 15px;
    font-weight: 800;
}

.grow-connect-desc {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
}

.grow-connect-status {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.grow-connect-status.is-off {
    color: var(--text-muted);
    background: rgba(255, 0, 0, 0.12);
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.grow-connect-status.is-on {
    color: #5ee9b5;
    background: rgba(0, 186, 124, 0.12);
    border: 1px solid rgba(0, 186, 124, 0.35);
}

.grow-connect-status.is-ready {
    color: #7ee8ff;
    background: rgba(37, 244, 238, 0.1);
    border: 1px solid rgba(37, 244, 238, 0.28);
}

.grow-connect-panel {
    margin-top: 14px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease;
}

.grow-connect-panel.is-open {
    max-height: 520px;
    opacity: 1;
}

.grow-connect-panel-inner {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--social-border);
    background: var(--surface-inset-strong);
}

.grow-connect-panel-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
}

.grow-connect-steps {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.grow-connect-steps code {
    font-size: 12px;
    color: #c8e4ff;
}

.grow-connect-linked {
    margin: 0 0 12px;
    font-size: 13px;
}

.grow-connect-linked a {
    color: var(--accent, #1d9bf0);
    font-weight: 600;
}

.grow-youtube-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.grow-field--url {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--social-border);
    background: var(--surface-inset);
}

.grow-field--url:focus-within {
    border-color: rgba(255, 0, 0, 0.5);
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.12);
}

.grow-url-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: rgba(255, 0, 0, 0.08);
    border-right: 1px solid var(--social-border);
}

.grow-field--url input {
    flex: 1;
    border: none;
    background: transparent;
    min-width: 0;
}

.grow-field--url input:focus {
    outline: none;
    box-shadow: none;
}

.grow-save-channel-btn {
    width: 100%;
}

.grow-connect-footnote {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}

.grow-guide {
    margin: 0 16px 16px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.02);
}

.grow-guide-title {
    margin-bottom: 12px;
}

.grow-guide-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.grow-guide-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.grow-guide-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    color: #eef3fb;
    background: rgba(29, 155, 240, 0.2);
}

.grow-guide-item strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.grow-guide-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
}

.grow-task-link {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    margin: 0 0 10px;
    font-size: 13px;
}

.grow-task-link a {
    color: var(--accent, #1d9bf0);
    word-break: break-all;
}

.grow-task-metrics {
    list-style: none;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.grow-task-metrics li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.grow-metric-label {
    color: var(--text-muted);
}

.grow-metric-value {
    font-weight: 600;
    text-align: right;
}



.grow-review-channel {
    margin: 0 0 8px;
    font-size: 13px;
    word-break: break-all;
}

.grow-review-channel a {
    color: var(--accent, #1d9bf0);
}

.grow-tabs {
    display: flex;
    gap: 0;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--social-border);
}

.grow-tab {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.grow-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--accent, #1d9bf0);
}

.grow-platform-option-badge,
.grow-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--accent, #1d9bf0);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.grow-feed,
.grow-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 16px;
}

.grow-feed {
    gap: 0;
}

.grow-feed .grow-task-card {
    margin-bottom: 12px;
}

.grow-reviews-list .grow-review-card {
    margin-bottom: 12px;
}

.grow-empty {
    padding: 32px 20px;
    text-align: center;
}

.grow-empty-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 0 0 16px;
}

.grow-empty-cta {
    margin-top: 14px;
}

.grow-task-card,
.grow-review-card {
    margin: 0 16px 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--social-border);
    background: var(--gradient-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.grow-task-card--youtube {
    border-color: rgba(255, 0, 0, 0.2);
}

.grow-task-card--tiktok {
    border-color: rgba(254, 44, 85, 0.2);
}

.grow-task-card:hover,
.grow-review-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-elevated);
}

.grow-create-form {
    margin: 0 16px 16px;
    padding: 18px 16px;
    border: 1px solid var(--social-border);
    border-radius: 18px;
    background: var(--gradient-card);
}

.grow-create-form .grow-section-lead {
    margin-bottom: 18px;
}

.grow-picker {
    margin: 0 0 18px;
    padding: 0;
    border: none;
}

.grow-picker-label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.grow-picker-row {
    display: grid;
    gap: 10px;
}

.grow-picker-row--platform {
    grid-template-columns: 1fr 1fr;
}

.grow-picker-row--action {
    grid-template-columns: repeat(3, 1fr);
}

.grow-pick {
    cursor: pointer;
}

.grow-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.grow-pick-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 72px;
    padding: 14px 10px;
    border-radius: 14px;
    border: 2px solid var(--social-border);
    background: var(--surface-inset);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.grow-pick--youtube .grow-pick-inner:hover {
    border-color: rgba(255, 0, 0, 0.45);
}

.grow-pick--tiktok .grow-pick-inner:hover {
    border-color: rgba(254, 44, 85, 0.45);
}

.grow-pick input:checked + .grow-pick-inner {
    transform: translateY(-1px);
}

.grow-pick--youtube input:checked + .grow-pick-inner {
    border-color: #ff0000;
    background: rgba(255, 0, 0, 0.1);
    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.25);
}

.grow-pick--tiktok input:checked + .grow-pick-inner {
    border-color: #fe2c55;
    background: rgba(254, 44, 85, 0.08);
    box-shadow: 0 0 0 1px rgba(37, 244, 238, 0.2);
}

.grow-pick--action input:checked + .grow-pick-inner {
    border-color: var(--accent, #1d9bf0);
    background: rgba(29, 155, 240, 0.12);
}

.grow-pick-name {
    font-size: 14px;
    font-weight: 800;
}

.grow-pick-hint {
    font-size: 11px;
    color: var(--text-muted);
}

.grow-submit-btn {
    width: 100%;
}

.grow-task-strip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.grow-task-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--surface-inset-strong);
}

.grow-task-card--youtube .grow-task-logo {
    background: rgba(255, 0, 0, 0.12);
}

.grow-task-card--tiktok .grow-task-logo {
    background: rgba(254, 44, 85, 0.1);
}

.grow-task-strip-main {
    flex: 1;
    min-width: 0;
}

.grow-task-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.grow-chip {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.grow-chip--action {
    color: #eef3fb;
    background: rgba(255, 255, 255, 0.1);
}

.grow-chip--verify {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--social-border);
}

.grow-chip--youtube.grow-chip--verify {
    color: #ffb4b4;
    border-color: rgba(255, 0, 0, 0.25);
}

.grow-chip--tiktok.grow-chip--verify {
    color: #9ef0f0;
    border-color: rgba(37, 244, 238, 0.25);
}

.grow-task-trust-pill {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--social-border);
    background: var(--surface-inset);
    min-width: 44px;
}

.grow-task-trust-num {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.grow-task-trust-lbl {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.grow-task-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.grow-task-target {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #1d9bf0);
    text-decoration: none;
    word-break: break-all;
}

.grow-task-target:hover {
    text-decoration: underline;
}

.grow-task-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--social-border);
}

.grow-task-desc {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.45;
}

.grow-task-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.grow-task-dot {
    opacity: 0.6;
}

.grow-task-meta a {
    color: var(--accent, #1d9bf0);
    text-decoration: none;
}

.grow-task-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.grow-open-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    background: var(--surface-inset-strong);
    color: #eef3fb;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.grow-open-link-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

.grow-complete-btn {
    flex: 1 1 auto;
    min-width: 120px;
}

.grow-link-btn {
    font-size: 13px;
}

.grow-status {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.grow-status-pending {
    color: #f5c542;
}

.grow-status-approved {
    color: #00ba7c;
}

.grow-status-rejected {
    color: #f4212e;
}

.grow-status-own {
    color: var(--text-muted);
}

.grow-status-link {
    font-size: 13px;
    color: var(--accent, #1d9bf0);
}

.grow-report-btn {
    margin-left: auto;
    font-size: 12px;
    padding: 6px 10px;
}

.grow-create-form .grow-form-title {
    margin: 0 0 14px;
    font-size: 18px;
}

.grow-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.grow-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.grow-field span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.grow-field input,
.grow-field select,
.grow-field textarea {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--social-border);
    background: var(--bg);
    color: #eef3fb;
    font-size: 15px;
    font-family: inherit;
}

.grow-field input:focus,
.grow-field select:focus,
.grow-field textarea:focus {
    outline: none;
    border-color: rgba(29, 155, 240, 0.5);
}

.grow-hint {
    font-size: 12px;
    color: #6e7a86;
}

.grow-form-error {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 10px;
}

.grow-form-error.grow-alert-success {
    color: #5ee0a8;
}

.grow-alert {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    margin: 0 16px 12px;
    border: 1px solid var(--social-border);
}

.grow-alert-error {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border-color: rgba(255, 255, 255, 0.1);
}

.grow-alert-success {
    background: rgba(0, 186, 124, 0.08);
    color: #5ee0a8;
    border-color: rgba(0, 186, 124, 0.2);
}

.grow-panel-note {
    padding: 0 16px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0 0 14px;
}

.grow-review-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.grow-review-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.grow-review-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--surface-inset-strong);
}

.grow-review-metric {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--social-border);
    font-size: 14px;
}

.grow-review-metric.is-positive {
    border-color: rgba(0, 186, 124, 0.35);
    background: rgba(0, 186, 124, 0.08);
}

.grow-review-user {
    font-weight: 700;
    color: #eef3fb;
    text-decoration: none;
}

.grow-review-meta,
.grow-review-time {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.grow-review-task {
    margin: 0 0 12px;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.grow-review-task-title {
    flex: 1 1 100%;
    font-weight: 600;
    color: #eef3fb;
}

.grow-review-subs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--social-border);
    font-size: 14px;
}

.grow-review-subs.is-positive {
    border-color: rgba(0, 186, 124, 0.35);
    background: rgba(0, 186, 124, 0.08);
}

.grow-review-subs.is-unavailable {
    opacity: 0.75;
}

.grow-review-subs-label {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.grow-review-subs-value {
    font-weight: 600;
    color: #eef3fb;
}

.grow-review-subs-delta {
    font-weight: 700;
    color: #00ba7c;
}

.grow-review-subs.is-unavailable .grow-review-subs-value {
    color: var(--text-muted);
    font-weight: 500;
}

.grow-review-who {
    min-width: 0;
}

.grow-review-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.grow-review-actions .btn {
    flex: 1;
}

.profile-grow-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}

.profile-grow-stat {
    font-size: 13px;
    color: var(--text-muted);
}

.profile-grow-stat strong {
    color: #eef3fb;
    margin-right: 4px;
}

.grow-admin-trust-card {
    padding: 12px;
    border: 1px solid var(--social-border);
    border-radius: 12px;
    margin-top: 10px;
    font-size: 14px;
}

.adm-panel-subtitle {
    font-size: 14px;
    font-weight: 700;
    margin: 20px 0 8px;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .grow-connect,
    .grow-guide {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

@media (max-width: 520px) {
    .grow-connect-grid {
        grid-template-columns: 1fr;
    }
    .grow-picker-row--action {
        grid-template-columns: 1fr;
    }
    .grow-create-form,
    .grow-task-card,
    .grow-review-card {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .grow-task-actions .btn:not(.grow-report-btn),
    .grow-open-link-btn,
    .grow-complete-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    .grow-page-heading {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ============================================
   PREMIUM GROW POLISH — Best of the best
   Strong brand colors, delightful interactions,
   excellent mobile experience, clear linking gates
   ============================================ */

/* Link prompt banner (contextual, beautiful, actionable) */
.grow-link-prompt {
    margin: 0 16px 16px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 0, 0, 0.35);
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.3) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.grow-link-prompt-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.grow-link-prompt-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 0, 0, 0.15);
}
.grow-link-prompt-body {
    flex: 1 1 220px;
    min-width: 0;
}
.grow-link-prompt-body strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
}
.grow-link-prompt-body p {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.35;
}
.grow-link-prompt-btn {
    white-space: nowrap;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
}
@media (max-width: 520px) {
    .grow-link-prompt {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .grow-link-prompt-inner {
        gap: 10px;
    }
}

/* Create tab YouTube gate (prominent but not scary) */
.grow-yt-gate {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 0, 0, 0.07);
    border: 1px solid rgba(255, 0, 0, 0.25);
}
.grow-yt-gate-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 0, 0, 0.15);
}
.grow-yt-gate > div {
    flex: 1;
    min-width: 0;
}
.grow-yt-gate strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #ff9a9a;
}
.grow-yt-gate p {
    margin: 1px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.3;
}
.grow-yt-gate-btn {
    font-size: 13px;
    padding: 8px 14px;
    white-space: nowrap;
}

/* Elevated connect section */
.grow-connect {
    margin: 0 16px 18px;
    padding: 20px 18px;
    border-radius: 20px;
    border: 1px solid var(--social-border);
    background: linear-gradient(165deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.02) 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.grow-connect-grid {
    gap: 12px;
}
.grow-connect-card {
    padding: 18px 14px;
    border-radius: 18px;
    border-width: 2.5px;
    min-height: 118px;
    justify-content: space-between;
}
.grow-connect-card--youtube {
    border-color: rgba(255, 0, 0, 0.45);
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.18) 100%);
}
.grow-connect-card--youtube.is-linked {
    border-color: rgba(0, 186, 124, 0.55);
    background: linear-gradient(180deg, rgba(0, 186, 124, 0.12) 0%, rgba(0, 0, 0, 0.15) 100%);
}
.grow-connect-card--tiktok {
    border-color: rgba(254, 44, 85, 0.45);
    background: linear-gradient(180deg, rgba(37, 244, 238, 0.08) 0%, rgba(254, 44, 85, 0.07) 100%);
}
.grow-connect-logo svg {
    width: 42px;
    height: 42px;
}
.grow-connect-name {
    font-size: 16px;
}
.grow-connect-desc {
    font-size: 13px;
}
.grow-connect-status {
    font-size: 11.5px;
    padding: 5px 13px;
    letter-spacing: 0.03em;
}

/* Premium picker — big beautiful logos (YouTube red / TikTok vibrant) */
.grow-picker-row--platform {
    gap: 12px;
}
.grow-picker-row--action {
    gap: 10px;
}
.grow-pick-inner {
    min-height: 86px;
    padding: 16px 12px;
    border-radius: 16px;
    border-width: 2.5px;
}
.grow-pick-inner:hover {
    transform: translateY(-1px);
}
.grow-pick--youtube input:checked + .grow-pick-inner {
    border-color: #ff0000;
    background: rgba(255, 0, 0, 0.13);
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.18);
}
.grow-pick--tiktok input:checked + .grow-pick-inner {
    border-color: #fe2c55;
    background: rgba(254, 44, 85, 0.10);
    box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.18);
}
.grow-pick--action input:checked + .grow-pick-inner {
    border-color: #1d9bf0;
    background: rgba(29, 155, 240, 0.14);
    box-shadow: 0 0 0 2.5px rgba(29, 155, 240, 0.2);
}

/* Task cards — more premium */
.grow-task-card,
.grow-review-card {
    margin: 0 16px 14px;
    padding: 18px 18px 16px;
    border-radius: 20px;
    border-width: 1.5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.grow-task-card:hover,
.grow-review-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.grow-task-logo {
    width: 52px;
    height: 52px;
    border-radius: 15px;
}
.grow-task-card--youtube .grow-task-logo {
    background: rgba(255, 0, 0, 0.16);
}
.grow-task-card--tiktok .grow-task-logo {
    background: rgba(254, 44, 85, 0.13);
}
.grow-task-chips {
    margin-bottom: 8px;
}
.grow-chip {
    font-size: 11.5px;
    padding: 4px 11px;
}
.grow-task-title {
    font-size: 18px;
    line-height: 1.25;
}
.grow-task-target {
    font-size: 13.5px;
}
.grow-task-meta {
    font-size: 13px;
}
.grow-task-actions {
    gap: 10px;
    margin-top: 12px;
}
.grow-open-link-btn {
    padding: 11px 16px;
    font-size: 13.5px;
    gap: 7px;
}
.grow-complete-btn {
    font-weight: 700;
    padding-left: 18px;
    padding-right: 18px;
}

/* Reviews — clean & trustworthy */
.grow-review-logo {
    width: 44px;
    height: 44px;
    border-radius: 13px;
}
.grow-review-metric {
    padding: 11px 13px;
    font-size: 14.5px;
}

/* Trust pill — more visual & premium */
.grow-trust-pill {
    padding: 11px 18px;
    border-radius: 16px;
    min-width: 92px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.grow-trust-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

/* Form fields — crisp */
.grow-create-form {
    padding: 20px 18px;
    border-radius: 20px;
}
.grow-field input,
.grow-field textarea {
    padding: 13px 15px;
    font-size: 15.5px;
    border-radius: 13px;
}
.grow-submit-btn {
    font-weight: 700;
    padding: 13px 20px;
    font-size: 15px;
}

/* Better empty states */
.grow-empty {
    padding: 38px 22px;
    background: rgba(255,255,255,0.015);
    border: 1px dashed var(--social-border);
    border-radius: 18px;
}
.grow-empty-logos svg {
    width: 46px;
    height: 46px;
    opacity: 0.9;
}

/* Micro interactions & polish */
.grow-connect-card,
.grow-pick-inner,
.grow-task-card,
.grow-review-card,
.grow-open-link-btn {
    transition: transform .12s cubic-bezier(0.2,0,0,1), box-shadow .12s ease, border-color .12s ease;
}
.grow-connect-card:active,
.grow-pick-inner:active {
    transform: scale(0.985);
}
.grow-complete-btn,
.grow-submit-btn,
.grow-save-channel-btn {
    position: relative;
    overflow: hidden;
}
.grow-complete-btn:disabled {
    opacity: .6;
    filter: grayscale(0.1);
}

/* Pulse animation for "go link now" moments */
@keyframes grow-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.45); }
    70% { box-shadow: 0 0 0 12px rgba(255, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}
.grow-connect-card--youtube:not(.is-linked).grow-needs-link {
    animation: grow-pulse 1.6s cubic-bezier(0.4, 0, 0.2, 1) 2;
    border-color: var(--accent, #1d9bf0);
}

/* Mobile — just as good or better */
@media (max-width: 520px) {
    .grow-connect,
    .grow-create-form,
    .grow-guide {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .grow-connect-grid {
        gap: 10px;
    }
    .grow-connect-card {
        min-height: 102px;
        padding: 14px 12px;
    }
    .grow-connect-logo svg {
        width: 36px;
        height: 36px;
    }
    .grow-pick-inner {
        min-height: 78px;
        padding: 12px 10px;
    }
    .grow-task-card,
    .grow-review-card {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 16px 14px;
    }
    .grow-task-logo {
        width: 44px;
        height: 44px;
    }
    .grow-task-title {
        font-size: 16.5px;
    }
    .grow-link-prompt-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .grow-link-prompt-btn {
        width: 100%;
        justify-content: center;
    }
    .grow-yt-gate {
        flex-wrap: wrap;
    }
    .grow-yt-gate-btn {
        width: 100%;
        margin-top: 4px;
    }
}

/* Slightly larger on bigger screens for presence */
@media (min-width: 900px) {
    .grow-connect-card {
        min-height: 126px;
    }
    .grow-task-card,
    .grow-review-card {
        padding: 20px 22px 18px;
    }
}

/* clean up old big connect rules that no longer apply */
.grow-connect-grid,
.grow-connect-card {
  display: none !important;
}

/* === Small, subtle link things for connect (user request) === */
.grow-connect-small {
  margin: 0 16px 12px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--social-border);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  font-size: 13px;
}
.grow-connect-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.grow-mini-label {
  color: var(--text-muted);
  font-size: 12px;
  margin-right: 4px;
}
.grow-mini-link,
.grow-mini-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--social-border);
  background: var(--surface-subtle);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.grow-mini-link:hover {
  border-color: rgba(255,255,255,0.3);
}
.grow-mini-link--youtube {
  border-color: rgba(255,0,0,0.4);
}
.grow-mini-link--tiktok {
  border-color: rgba(254,44,85,0.4);
  cursor: default;
}
.grow-mini-status--youtube {
  border-color: rgba(0,186,124,0.5);
  background: rgba(0,186,124,0.08);
}
.grow-mini-link small,
.grow-mini-status small {
  opacity: 0.7;
  font-size: 10px;
}
.grow-mini-link--manage {
  font-size: 11px;
  padding: 1px 6px;
  margin-left: 4px;
  border-style: dashed;
}

/* pulse when we need to draw attention to the small link */
.grow-mini-link.grow-needs-link {
  animation: grow-pulse 1.6s cubic-bezier(0.4, 0, 0.2, 1) 2;
  border-color: var(--accent, #1d9bf0) !important;
}

/* smaller gate on create */
.grow-yt-gate-small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  padding: 4px 8px;
  background: rgba(255,0,0,0.06);
  border: 1px solid rgba(255,0,0,0.2);
  border-radius: 8px;
  margin: 6px 0 10px;
  color: #ff9a9a;
}
.grow-yt-gate-small span {
  color: inherit;
}

/* compact the link panel when using small trigger */
.grow-connect-small .grow-connect-panel-inner {
  padding: 10px 12px;
  font-size: 13px;
}
.grow-connect-small .grow-connect-steps {
  margin-bottom: 8px;
  padding-left: 16px;
}
.grow-connect-small .grow-form-actions {
  display: flex;
  gap: 8px;
}
.grow-connect-small .grow-panel-close {
  font-size: 12px;
}

/* mobile for small connect */
@media (max-width: 520px) {
  .grow-connect-small {
    margin-left: 0;
    margin-right: 0;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .grow-connect-mini {
    gap: 6px;
  }
}

.grow-review-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0 8px;
  padding: 4px 8px;
  background: var(--surface-faint);
  border-radius: 4px;
}

/* Platform chooser and bar for cleaner split YT/TT */
.grow-platform-chooser {
  display: flex;
  gap: 12px;
  margin: 0 16px 16px;
}
.grow-platform-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border: 1px solid var(--social-border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.015);
  font-size: 14px;
}
.grow-platform-option:hover {
  border-color: var(--accent);
}
.grow-option-youtube { border-color: var(--social-border); }
.grow-option-tiktok { border-color: var(--social-border); }
.grow-platform-option strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
}
.grow-platform-option span {
  font-size: 12px;
  color: var(--text-muted);
}

.grow-platform-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--social-border);
  margin-bottom: 0;
}
.grow-back-btn {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
}
.grow-platform-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  text-align: center;
}
.grow-settings {
  position: relative;
  flex-shrink: 0;
}
.grow-settings-toggle {
  background: none;
  border: 1px solid var(--social-border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
.grow-settings-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--card-bg-deep);
  border: 1px solid var(--social-border);
  border-radius: 8px;
  padding: 6px;
  min-width: 160px;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.grow-settings-menu a,
.grow-relink-btn {
  display: block;
  padding: 6px 10px;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}
.grow-relink-btn {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.grow-settings-menu a:hover,
.grow-relink-btn:hover {
  background: rgba(255,255,255,0.05);
}

.grow-link-first {
  margin: 0 16px 12px;
  padding: 12px;
  background: rgba(255,0,0,0.05);
  border: 1px solid rgba(255,0,0,0.2);
  border-radius: 8px;
  font-size: 14px;
}

/* === Grow: responsive across phone, tablet, iPad, desktop === */
body.social-grow .main-content {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
}

.grow-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.grow-platform-bar {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding-left: max(16px, env(safe-area-inset-left, 0));
    padding-right: max(16px, env(safe-area-inset-right, 0));
}

.grow-platform-chooser,
.grow-platform-bar,
.grow-tabs,
.grow-feed,
.grow-reviews-list {
    max-width: 100%;
}

.grow-mini-link,
.grow-mini-link--manage,
.grow-settings-toggle {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
}

.grow-mini-link,
.grow-mini-status {
    padding: 8px 12px;
}

.grow-settings-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
}

.grow-back-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.grow-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
}

/* Tablet: iPad portrait, small laptops */
@media (max-width: 900px) {
    .grow-picker-row--action {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grow-pick-inner {
        min-height: 72px;
    }

    .grow-pick-hint {
        font-size: 11px;
    }

    .grow-task-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grow-open-link-btn {
        grid-column: 1 / -1;
    }

    .grow-review-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grow-review-actions .grow-open-link-btn {
        grid-column: 1 / -1;
    }
}

/* Phone: stack layouts, full-bleed cards, prevent iOS input zoom */
@media (max-width: 600px) {
    .grow-platform-chooser {
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        gap: 0;
    }

    body.social-grow .grow-platform-option {
        width: 100%;
        min-height: 80px;
        padding: 20px max(16px, env(safe-area-inset-left, 0)) 20px max(16px, env(safe-area-inset-right, 0));
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    body.social-grow .grow-platform-option-logo {
        width: 48px;
        height: 48px;
    }

    body.social-grow .grow-platform-option-text strong {
        font-size: 18px;
    }

    body.social-grow .grow-intro {
        padding-left: max(16px, env(safe-area-inset-left, 0));
        padding-right: max(16px, env(safe-area-inset-right, 0));
        font-size: 15px;
    }

    .grow-platform-bar {
        gap: 8px;
        margin-bottom: 0;
    }

    .grow-platform-title {
        font-size: 15px;
    }

    .grow-page-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px max(12px, env(safe-area-inset-left, 0)) 12px max(12px, env(safe-area-inset-right, 0));
    }

    .grow-trust-pill {
        align-self: flex-start;
        flex-direction: row;
        gap: 8px;
        padding: 8px 14px;
        min-width: 0;
    }

    .grow-trust-label {
        margin: 0;
    }

    .grow-trust-value {
        font-size: 20px;
    }

    .grow-tagline {
        font-size: 13px;
    }

    .grow-tabs {
        margin-bottom: 0;
    }

    .grow-tab {
        font-size: 13px;
        padding: 10px 6px;
        line-height: 1.2;
    }

    .grow-picker-row--platform,
    .grow-picker-row--action {
        grid-template-columns: 1fr;
    }

    .grow-pick-inner {
        min-height: 64px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }

    .grow-pick--action .grow-pick-inner {
        align-items: flex-start;
    }

    .grow-task-strip {
        flex-wrap: wrap;
    }

    .grow-task-trust-pill {
        margin-left: auto;
    }

    .grow-task-actions {
        grid-template-columns: 1fr;
    }

    .grow-task-actions .btn,
    .grow-open-link-btn,
    .grow-complete-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .grow-review-actions {
        grid-template-columns: 1fr;
    }

    .grow-review-actions .btn {
        width: 100%;
        min-height: 44px;
    }

    .grow-review-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .grow-review-time {
        align-self: flex-start;
    }

    .grow-field input,
    .grow-field textarea,
    .grow-field--url input {
        font-size: 16px;
    }

    .grow-submit-btn,
    .grow-save-channel-btn {
        min-height: 48px;
    }

    .grow-connect-small .grow-form-actions {
        flex-direction: column;
    }

    .grow-connect-small .grow-form-actions .btn {
        width: 100%;
        min-height: 44px;
    }

    .grow-empty {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .grow-yt-gate-small {
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;
    }

    .grow-yt-gate-small .grow-yt-gate-btn {
        margin-left: auto;
    }
}

/* Very narrow phones */
@media (max-width: 380px) {
    .grow-tab {
        font-size: 12px;
        padding: 10px 4px;
    }

    .grow-tab-badge {
        min-width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .grow-connect-mini {
        gap: 4px;
    }

    .grow-mini-label {
        width: 100%;
        margin-bottom: 2px;
    }
}

/* Settings dropdown: keep on-screen on small viewports */
@media (max-width: 600px) {
    .grow-settings-menu {
        position: fixed;
        right: max(12px, env(safe-area-inset-right, 12px));
        left: max(12px, env(safe-area-inset-left, 12px));
        top: auto;
        bottom: calc(var(--nav-mobile, 52px) + 12px + env(safe-area-inset-bottom, 0));
        min-width: 0;
        width: auto;
    }
}

/* Desktop / large tablet landscape: comfortable max width */
@media (min-width: 1101px) {
    body.social-grow .grow-page {
        max-width: var(--feed-width);
    }

    .grow-platform-chooser {
        max-width: 560px;
    }
}

/* === TikTok linking + connect polish === */
.grow-connect--tiktok {
    border-color: rgba(254, 44, 85, 0.28);
    background: linear-gradient(165deg, rgba(37, 244, 238, 0.05) 0%, rgba(254, 44, 85, 0.04) 100%);
}

.grow-connect--youtube {
    border-color: rgba(255, 0, 0, 0.22);
}

.grow-field--tiktok:focus-within {
    border-color: rgba(254, 44, 85, 0.5);
    box-shadow: 0 0 0 2px rgba(37, 244, 238, 0.15);
}

.grow-field--tiktok .grow-url-prefix {
    background: rgba(254, 44, 85, 0.1);
}

.grow-connect-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 2px;
}

.grow-mini-status.is-on {
    border-color: rgba(0, 186, 124, 0.55);
    background: rgba(0, 186, 124, 0.1);
}

.grow-mini-status--tiktok.is-on {
    border-color: rgba(37, 244, 238, 0.45);
    background: rgba(37, 244, 238, 0.08);
}

.grow-link-gate--tiktok {
    background: rgba(254, 44, 85, 0.08);
    border-color: rgba(254, 44, 85, 0.28);
    color: #ffb4d0;
}

.grow-review-profile-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.03);
    margin: 8px 0;
}

.grow-review-profile-link--tiktok {
    border-color: rgba(254, 44, 85, 0.25);
    background: linear-gradient(135deg, rgba(37, 244, 238, 0.06) 0%, rgba(254, 44, 85, 0.05) 100%);
}

.grow-review-profile-link a {
    font-weight: 700;
    color: var(--accent, #1d9bf0);
    text-decoration: none;
}

.grow-review-profile-link a:hover {
    text-decoration: underline;
}

.grow-review-profile-tip {
    font-size: 11px;
    color: var(--text-muted);
    width: 100%;
}

.grow-platform-option {
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.grow-platform-option:active {
    transform: scale(0.985);
}

.grow-option-youtube:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

.grow-option-tiktok:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

/* Prominent link-first connect (always visible, especially TikTok) */
.grow-connect-prominent {
    margin: 0 16px 16px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.grow-connect-required {
    padding: 16px;
    border-radius: 16px;
    border: 2px solid rgba(29, 155, 240, 0.35);
    background: linear-gradient(165deg, rgba(29, 155, 240, 0.08) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.grow-connect--tiktok .grow-connect-required {
    border-color: rgba(254, 44, 85, 0.4);
    background: linear-gradient(165deg, rgba(37, 244, 238, 0.07) 0%, rgba(254, 44, 85, 0.05) 100%);
}

.grow-connect-required-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.grow-connect-required-head strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}

.grow-connect-required-head p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.grow-connect-required .grow-field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.grow-save-channel-btn--big {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
    font-weight: 700;
    margin-top: 10px;
}

.grow-connect-hint--ok {
    color: #5ee9b5;
    font-size: 12px;
}

.grow-locked-note {
    margin: 0 16px 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--social-border);
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
}

#growPlatformContent.grow-locked {
    display: none;
}

.grow-field--link-only {
    margin-bottom: 12px;
}

.grow-field--link-only > span:first-child {
    font-weight: 600;
}

.grow-field--link-only input {
    font-size: 16px;
    padding: 14px 16px;
}

@media (max-width: 600px) {
    .grow-connect-prominent,
    .grow-connect-required,
    .grow-locked-note {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

.grow-auto-note {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    background: rgba(0, 186, 124, 0.08);
    border-bottom: 1px solid rgba(0, 186, 124, 0.2);
}

.grow-subsection-title {
    margin: 20px 16px 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.grow-posts-form {
    margin-bottom: 8px;
    border-bottom: 1px solid var(--social-border);
}

.grow-chip--auto {
    color: #5ee9b5;
    background: rgba(0, 186, 124, 0.12);
    border: 1px solid rgba(0, 186, 124, 0.3);
}

.grow-empty-compact {
    padding: 24px 16px;
    margin: 0 16px 16px;
}

@media (max-width: 600px) {
    .grow-subsection-title {
        margin-left: 12px;
        margin-right: 12px;
    }
    .grow-empty-compact {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }
}

/* === Grow: X-style clean refresh === */
body.social-grow .grow-page {
    font-family: var(--app-font);
    -webkit-font-smoothing: antialiased;
}

body.social-grow .grow-page-heading {
    padding: 18px max(16px, env(safe-area-inset-left, 0)) 16px max(16px, env(safe-area-inset-right, 0));
    background: radial-gradient(ellipse 130% 90% at 50% -30%, rgba(29, 155, 240, 0.1) 0%, transparent 58%);
    border-bottom: 1px solid var(--social-border);
}

body.social-grow .grow-page h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

body.social-grow .grow-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8ec8f0;
    background: rgba(29, 155, 240, 0.12);
    border: 1px solid rgba(29, 155, 240, 0.28);
}

body.social-grow .grow-tagline {
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-muted);
    margin-top: 6px;
    max-width: 28em;
}

body.social-grow .grow-trust-pill {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 10px 16px;
    min-width: 84px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

body.social-grow .grow-trust-pill.is-score-md {
    min-width: 88px;
}

body.social-grow .grow-trust-pill.is-score-lg {
    min-width: 92px;
}

body.social-grow .grow-trust-pill.is-score-xl {
    min-width: 96px;
}

body.social-grow .grow-trust-pill::before {
    content: none;
}

body.social-grow .grow-trust-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}

body.social-grow .grow-trust-value {
    display: block;
    width: 100%;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    text-align: center;
    white-space: nowrap;
}

body.social-grow .grow-trust-pill.is-score-md .grow-trust-value {
    font-size: 28px;
}

body.social-grow .grow-trust-pill.is-score-lg .grow-trust-value {
    font-size: 26px;
    letter-spacing: -0.04em;
}

body.social-grow .grow-trust-pill.is-score-xl .grow-trust-value {
    font-size: 24px;
    letter-spacing: -0.045em;
}

body.social-grow .grow-heading-main {
    flex: 1;
    min-width: 0;
}

body.social-grow .grow-platform-chooser {
    margin: 0;
    gap: 0;
    border-top: 1px solid var(--social-border);
}

body.social-grow .grow-platform-option {
    display: flex;
    align-items: center;
    gap: 14px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--social-border);
    background: transparent;
    padding: 18px 16px;
    min-height: 76px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

body.social-grow .grow-platform-option:last-child {
    border-bottom: 1px solid var(--social-border);
}

body.social-grow .grow-platform-option:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.social-grow .grow-platform-option:active {
    background: rgba(255, 255, 255, 0.07);
}

body.social-grow .grow-platform-option-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

body.social-grow .grow-platform-option-logo .grow-brand-logo--lg {
    width: 36px;
    height: 36px;
}

body.social-grow .grow-platform-option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.social-grow .grow-platform-option-text strong {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

body.social-grow .grow-platform-status,
body.social-grow .grow-connect-status {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #7dd3a8;
    letter-spacing: 0;
    text-transform: none;
}

body.social-grow .grow-platform-option-chevron {
    flex-shrink: 0;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.85;
    padding-left: 4px;
}

body.social-grow .grow-intro {
    margin: 0;
    padding: 14px 16px 18px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-muted);
    border-bottom: 1px solid var(--social-border);
}

body.social-grow .grow-intro--alert {
    color: var(--text);
}

body.social-grow .grow-hint-block {
    margin: 0;
    padding: 12px 16px 14px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-muted);
    border-bottom: 1px solid var(--social-border);
}

body.social-grow .grow-platform-option-badge {
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 8px;
}

body.social-grow .grow-panel-note--review {
    font-size: 14px;
    color: var(--text-muted);
}

body.social-grow .grow-page[data-platform]:not([data-platform=""]) .grow-page-heading {
    display: none;
}

body.social-grow .grow-platform-bar {
    display: grid;
    grid-template-columns: minmax(64px, auto) 1fr minmax(72px, auto);
    align-items: center;
    gap: 8px;
    padding: 0 max(16px, env(safe-area-inset-right, 0)) 0 max(16px, env(safe-area-inset-left, 0));
    min-height: 48px;
    margin: 0;
    border-bottom: 1px solid var(--social-border);
}

body.social-grow .grow-back-btn {
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: none;
    justify-self: start;
}

body.social-grow .grow-platform-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    text-align: center;
    justify-self: center;
    min-width: 0;
}

body.social-grow .grow-platform-bar-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    min-width: 0;
}

body.social-grow .grow-trust-pill--inline {
    flex-shrink: 0;
    gap: 1px;
    padding: 6px 12px;
    min-width: 0;
    box-shadow: none;
}

body.social-grow .grow-trust-pill--inline .grow-trust-label {
    font-size: 9px;
}

body.social-grow .grow-trust-pill--inline .grow-trust-value {
    font-size: 18px;
}

body.social-grow .grow-trust-pill--inline.is-score-md .grow-trust-value {
    font-size: 17px;
}

body.social-grow .grow-trust-pill--inline.is-score-lg .grow-trust-value,
body.social-grow .grow-trust-pill--inline.is-score-xl .grow-trust-value {
    font-size: 16px;
}

body.social-grow .grow-connect-linked-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.social-grow .grow-connect {
    margin: 0;
    padding: 16px;
    border: none;
    border-bottom: 1px solid var(--social-border);
    background: transparent;
    border-radius: 0;
}

body.social-grow .grow-connect-setup-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}

body.social-grow .grow-connect-setup-lead {
    margin: 0;
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.4;
}

body.social-grow .grow-connect-linked-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

body.social-grow .grow-connect-linked-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

body.social-grow .grow-connect-change {
    margin-left: 0;
    border: none;
    background: transparent;
    color: var(--accent, #1d9bf0);
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 0;
}

body.social-grow .grow-connect-change:hover {
    text-decoration: underline;
}

body.social-grow .grow-field--plain {
    display: block;
    margin-bottom: 12px;
}

body.social-grow .grow-field--plain .grow-field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}

body.social-grow .grow-field--plain input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 17px;
    padding: 12px 14px;
    border-radius: 4px;
    border: 1px solid var(--social-border);
    background: transparent;
    color: inherit;
}

body.social-grow .grow-field--plain input:focus {
    outline: none;
    border-color: var(--accent, #1d9bf0);
    box-shadow: 0 0 0 1px var(--accent, #1d9bf0);
}

body.social-grow .grow-save-channel-btn {
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    min-height: 44px;
}

body.social-grow .grow-guide {
    margin: 0;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid var(--social-border);
    background: transparent;
    border-radius: 0;
}

body.social-grow .grow-guide-line {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-muted);
}

body.social-grow .grow-guide-line:last-child {
    margin-bottom: 0;
}

body.social-grow .grow-guide-line strong {
    color: var(--text);
    font-weight: 700;
}

body.social-grow .grow-tabs {
    margin: 0;
    border-bottom: 1px solid var(--social-border);
}

body.social-grow .grow-tab {
    font-size: 15px;
    font-weight: 500;
    padding: 16px 12px;
}

body.social-grow .grow-tab.is-active {
    font-weight: 700;
}

body.social-grow .grow-panel-note {
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--social-border);
    background: transparent;
}

body.social-grow .grow-create-form {
    margin: 0;
    padding: 12px 16px 16px;
    border: none;
    border-bottom: 1px solid var(--social-border);
    border-radius: 0;
    background: transparent;
}

body.social-grow .grow-field--compose {
    display: block;
    margin-bottom: 8px;
}

body.social-grow .grow-compose-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}

body.social-grow .grow-field--compose input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 17px;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid var(--social-border);
    border-radius: 0;
    background: transparent;
    color: inherit;
}

body.social-grow .grow-field--compose input:focus {
    outline: none;
    border-bottom-color: var(--accent, #1d9bf0);
}

body.social-grow .grow-compose-hint {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--text-muted);
}

body.social-grow .grow-submit-btn {
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    min-height: 44px;
    padding: 0 20px;
    width: auto;
}

body.social-grow .grow-feed,
body.social-grow .grow-reviews-list {
    padding-bottom: 0;
}

body.social-grow .grow-task-card,
body.social-grow .grow-review-card {
    margin: 0;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--social-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.social-grow .grow-task-card:hover,
body.social-grow .grow-review-card:hover {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    border-color: var(--social-border);
}

body.social-grow .grow-task-main {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

body.social-grow .grow-task-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.social-grow .grow-task-body {
    flex: 1;
    min-width: 0;
}

body.social-grow .grow-task-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-bottom: 2px;
    font-size: 14px;
    color: var(--text-muted);
}

body.social-grow .grow-task-type {
    font-weight: 700;
    color: var(--text);
}

body.social-grow .grow-task-badge {
    font-size: 12px;
    color: var(--text-muted);
}

body.social-grow .grow-task-score {
    color: var(--text-muted);
}

body.social-grow .grow-task-delete {
    margin-left: auto;
    border: none;
    background: transparent;
    color: #f4212e;
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}

body.social-grow .grow-task-delete:hover {
    text-decoration: underline;
}

body.social-grow .grow-task-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text);
}

body.social-grow .grow-task-link {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 15px;
    color: var(--accent, #1d9bf0);
    text-decoration: none;
    word-break: break-all;
}

body.social-grow .grow-task-link:hover {
    text-decoration: underline;
}

body.social-grow .grow-task-desc {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--text-muted);
}

body.social-grow .grow-task-meta {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

body.social-grow .grow-task-meta a {
    color: var(--text-muted);
    text-decoration: none;
}

body.social-grow .grow-task-meta a:hover {
    text-decoration: underline;
}

body.social-grow .grow-task-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0;
}

body.social-grow .grow-action-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
}

body.social-grow .grow-action-link:hover {
    color: var(--accent, #1d9bf0);
}

body.social-grow .grow-action-primary {
    border: 1px solid var(--social-border);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 16px;
    cursor: pointer;
    min-height: 36px;
}

body.social-grow .grow-action-primary:hover:not(:disabled) {
    background: rgba(29, 155, 240, 0.1);
    border-color: var(--accent, #1d9bf0);
    color: var(--accent, #1d9bf0);
}

body.social-grow .grow-action-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.social-grow .grow-action-muted {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}

body.social-grow .grow-action-muted:hover {
    text-decoration: underline;
}

/* Grow task cards — author header, open CTA, your-task badge */
body.social-grow .grow-task-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

body.social-grow .grow-task-author-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

body.social-grow .grow-task-author-link:hover .grow-task-author-name {
    text-decoration: underline;
}

body.social-grow .grow-task-author-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.social-grow .grow-task-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.social-grow .grow-task-author-avatar-fallback {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}

body.social-grow .grow-task-author-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

body.social-grow .grow-task-author-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.social-grow .grow-task-author-meta {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.social-grow .grow-task-platform-mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

body.social-grow .grow-task-card--youtube .grow-task-platform-mark {
    background: rgba(255, 0, 0, 0.12);
}

body.social-grow .grow-task-card--tiktok .grow-task-platform-mark {
    background: rgba(254, 44, 85, 0.1);
}

body.social-grow .grow-task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

body.social-grow .grow-task-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

body.social-grow .grow-task-tag--action {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
}

body.social-grow .grow-task-tag--profile {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--social-border);
}

body.social-grow .grow-task-tag--score {
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--social-border);
}

body.social-grow .grow-task-target-preview {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent, #1d9bf0);
    text-decoration: none;
    word-break: break-all;
}

body.social-grow .grow-task-target-preview:hover {
    text-decoration: underline;
}

body.social-grow .grow-task-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--social-border);
}

body.social-grow .grow-task-footer-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-left: auto;
}

body.social-grow .grow-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    border: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    min-height: 40px;
}

body.social-grow .grow-open-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.social-grow .grow-open-btn--youtube {
    border-color: rgba(255, 0, 0, 0.35);
    background: rgba(255, 0, 0, 0.12);
    color: #ffb4b4;
}

body.social-grow .grow-open-btn--youtube:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.5);
    color: #ffd0d0;
}

body.social-grow .grow-open-btn--tiktok {
    border-color: rgba(37, 244, 238, 0.3);
    background: rgba(37, 244, 238, 0.08);
    color: #9ef0f0;
}

body.social-grow .grow-open-btn--tiktok:hover {
    background: rgba(37, 244, 238, 0.14);
    border-color: rgba(254, 44, 85, 0.4);
    color: #c8fafa;
}

body.social-grow .grow-own-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #00ba7c;
    background: rgba(0, 186, 124, 0.12);
    border: 1px solid rgba(0, 186, 124, 0.35);
}

body.social-grow .grow-own-badge svg {
    flex-shrink: 0;
}

body.social-grow .grow-task-card.is-own-task {
    background: linear-gradient(90deg, rgba(0, 186, 124, 0.06) 0%, transparent 48%);
    border-left: 3px solid rgba(0, 186, 124, 0.45);
    padding-left: 13px;
}

body.social-grow .grow-status {
    font-size: 14px;
}

body.social-grow .grow-empty {
    padding: 48px 16px;
    font-size: 15px;
    color: var(--text-muted);
}

body.social-grow .grow-empty strong {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

@media (max-width: 600px) {
    body.social-grow .grow-platform-chooser,
    body.social-grow .grow-platform-option,
    body.social-grow .grow-connect,
    body.social-grow .grow-guide,
    body.social-grow .grow-task-card,
    body.social-grow .grow-create-form {
        padding-left: max(16px, env(safe-area-inset-left, 0));
        padding-right: max(16px, env(safe-area-inset-right, 0));
    }
}

/* Grow premium polish v2 */
body.social-grow .grow-guide-blocks {
    display: grid;
    gap: 0;
}

body.social-grow .grow-guide-block {
    padding: 14px 16px;
    border-bottom: 1px solid var(--social-border);
}

body.social-grow .grow-guide-block--solo {
    border-bottom: none;
}

body.social-grow .grow-guide-block-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
}

body.social-grow .grow-guide-steps {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-muted);
}

body.social-grow .grow-guide-steps li {
    margin-bottom: 6px;
}

body.social-grow .grow-guide-steps li:last-child {
    margin-bottom: 0;
}

body.social-grow .grow-guide-steps em,
body.social-grow .grow-guide-steps strong {
    color: var(--text);
    font-style: normal;
    font-weight: 700;
}

body.social-grow .grow-guide-block--youtube,
body.social-grow .grow-guide-block--tiktok {
    border-left: 2px solid rgba(231, 233, 234, 0.2);
}

body.social-grow .grow-connect-setup {
    padding: 0;
}

body.social-grow .grow-connect-setup-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

body.social-grow .grow-connect-setup-title {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

body.social-grow .grow-connect-setup-lead {
    margin: 0;
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.35;
}

body.social-grow .grow-connect-linked-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

body.social-grow .grow-connect-linked-user {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

body.social-grow .grow-connect-example {
    margin: 6px 0 12px;
    font-size: 13px;
    color: var(--text-muted);
}

body.social-grow .grow-connect-example code {
    font-size: 13px;
    color: var(--accent, #1d9bf0);
    background: transparent;
}

body.social-grow .grow-form-error {
    display: block;
    margin: 8px 0 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 2px solid rgba(231, 233, 234, 0.35);
}

body.social-grow .grow-form-error[hidden] {
    display: none !important;
}

body.social-grow .grow-form-error.grow-alert-success {
    color: #5ee0a8;
    background: rgba(0, 186, 124, 0.08);
    border-color: rgba(0, 186, 124, 0.2);
    border-left-color: rgba(0, 186, 124, 0.55);
}

body.social-grow .grow-connect--youtube .grow-save-channel-btn,
body.social-grow .grow-connect--tiktok .grow-save-channel-btn {
    background: var(--accent, #1d9bf0);
    border-color: var(--accent, #1d9bf0);
    color: #fff;
}

body.social-grow .grow-connect--youtube .grow-save-channel-btn:hover,
body.social-grow .grow-connect--tiktok .grow-save-channel-btn:hover {
    background: #1a8cd8;
    border-color: #1a8cd8;
}

body.social-grow .grow-panel-note--youtube,
body.social-grow .grow-panel-note--tiktok {
    border-left: 2px solid rgba(231, 233, 234, 0.25);
}

body.social-grow .grow-option-youtube .grow-platform-option-text strong,
body.social-grow .grow-option-tiktok .grow-platform-option-text strong {
    color: var(--text);
}

/* === Multi-creator livestream feed === */
.live-feed-wrap {
    border-top: 1px solid var(--social-border);
}

.live-feed-heading {
    padding: 16px max(16px, env(safe-area-inset-left, 0)) 10px max(16px, env(safe-area-inset-right, 0));
}

.live-feed-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.live-feed-sub {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-muted);
}

.live-feed-empty {
    padding: 20px max(16px, env(safe-area-inset-left, 0)) 24px max(16px, env(safe-area-inset-right, 0));
}

.live-feed-empty-text {
    margin: 0;
    padding: 18px 16px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-muted);
    text-align: center;
}

.live-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 max(16px, env(safe-area-inset-left, 0)) 20px max(16px, env(safe-area-inset-right, 0));
}

.live-feed--idle {
    display: none;
}

.live-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    border-radius: 18px;
    border: 1px solid var(--social-border);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.live-card-glow {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 1;
    z-index: 0;
}

.live-card--youtube .live-card-glow {
    background: radial-gradient(ellipse at top, rgba(255, 0, 0, 0.16) 0%, rgba(255, 0, 0, 0) 58%);
    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.14), 0 10px 32px rgba(255, 0, 0, 0.1);
}

.live-card--tiktok .live-card-glow {
    background: radial-gradient(ellipse at top, rgba(37, 244, 238, 0.14) 0%, rgba(254, 44, 85, 0.1) 42%, rgba(254, 44, 85, 0) 62%);
    box-shadow: 0 0 0 1px rgba(37, 244, 238, 0.12), 0 10px 32px rgba(254, 44, 85, 0.08);
}

.live-card.is-live {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.live-card.is-live.live-card--youtube {
    border-color: rgba(255, 0, 0, 0.3);
}

.live-card.is-live.live-card--tiktok {
    border-color: rgba(37, 244, 238, 0.24);
}

.live-card.is-active {
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
}

.live-card.is-active.live-card--youtube {
    border-color: rgba(255, 0, 0, 0.42);
}

.live-card.is-active.live-card--tiktok {
    border-color: rgba(37, 244, 238, 0.34);
}

.live-card-embed-idle {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.2) 100%);
    pointer-events: none;
}

.live-card.is-active .live-card-embed-idle {
    display: none;
}

.live-card--enter {
    animation: liveCardFadeIn 0.55s ease forwards;
}

@keyframes liveCardFadeIn {
    from {
        opacity: 0.4;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.live-card-head,
.live-card-body {
    position: relative;
    z-index: 1;
}

.live-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
}

.live-card-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.live-card-platform-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.live-card-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-card-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.live-card-badge--live {
    color: #fff;
    background: #f4212e;
    box-shadow: 0 0 14px rgba(244, 33, 46, 0.45);
}

.live-card-open {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.live-card-open:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

.live-card-body {
    padding: 0 12px 14px;
}

.live-card-embed {
    position: relative;
    position: relative;
    width: 100%;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg);
}

.live-card-embed--youtube {
    aspect-ratio: 16 / 9;
    min-height: 200px;
    max-height: min(56vw, 420px);
}

.live-card-embed--tiktok {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 9 / 16;
    min-height: 360px;
    max-height: min(72vh, 640px);
}

.live-card-iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    border: 0;
}

.live-card-embed .tiktok-embed {
    margin: 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.live-card-embed iframe {
    width: 100% !important;
}

@media (min-width: 600px) {
    .live-card-body {
        padding: 0 14px 16px;
    }

    .live-card-embed--youtube {
        min-height: 280px;
        max-height: min(50vw, 480px);
    }

    .live-card-embed--tiktok {
        max-width: 400px;
        min-height: 420px;
        max-height: min(68vh, 680px);
    }
}

@media (min-width: 900px) {
    .live-feed {
        gap: 18px;
    }

    .live-card-embed--youtube {
        min-height: 320px;
        max-height: 520px;
    }

    .live-card-embed--tiktok {
        max-width: 420px;
        min-height: 480px;
        max-height: 720px;
    }
}

@media (max-width: 680px) {
    .live-feed {
        gap: 12px;
        padding-left: max(16px, env(safe-area-inset-left, 0));
        padding-right: max(16px, env(safe-area-inset-right, 0));
    }

    .live-card-head {
        padding: 12px 14px 10px;
        flex-wrap: wrap;
    }

    .live-card-name {
        font-size: 15px;
    }

    .live-card-open {
        margin-left: auto;
    }

    .live-card-embed--youtube {
        min-height: 190px;
    }

    .live-card-embed--tiktok {
        max-width: 100%;
        min-height: 320px;
        max-height: min(70vh, 560px);
    }
}

@media (max-width: 1100px) {
    body.social-grow .grow-platform-bar {
        display: none;
    }

    body.social-grow .grow-tabs {
        top: var(--header-mobile);
    }
}

@media (min-width: 1101px) {
    body.social-grow .grow-page[data-platform]:not([data-platform=""]) .grow-tabs {
        top: 48px;
    }
}

/* === Grow mobile (phone) === */
@media (max-width: 699px) {
    body.social-grow .grow-page {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.social-grow .grow-page-heading {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 0;
        padding: 8px max(16px, env(safe-area-inset-left, 0)) 10px max(16px, env(safe-area-inset-right, 0));
        background: transparent;
        border-bottom: 1px solid var(--social-border);
    }

    body.social-grow .grow-page-heading .grow-title-row {
        display: none;
    }

    body.social-grow .grow-heading-main {
        flex: 1;
        min-width: 0;
    }

    body.social-grow .grow-tagline {
        margin: 0;
        font-size: 14px;
        line-height: 1.35;
        max-width: none;
    }

    body.social-grow .grow-trust-pill {
        flex-shrink: 0;
        gap: 2px;
        padding: 8px 12px;
        min-width: 76px;
        align-self: center;
        box-shadow: none;
    }

    body.social-grow .grow-trust-pill.is-score-md {
        min-width: 80px;
    }

    body.social-grow .grow-trust-pill.is-score-lg {
        min-width: 84px;
    }

    body.social-grow .grow-trust-pill.is-score-xl {
        min-width: 88px;
    }

    body.social-grow .grow-trust-label {
        font-size: 9px;
    }

    body.social-grow .grow-trust-value {
        font-size: 22px;
    }

    body.social-grow .grow-trust-pill.is-score-md .grow-trust-value {
        font-size: 20px;
    }

    body.social-grow .grow-trust-pill.is-score-lg .grow-trust-value {
        font-size: 18px;
    }

    body.social-grow .grow-trust-pill.is-score-xl .grow-trust-value {
        font-size: 16px;
    }

    body.social-grow .grow-tabs {
        position: sticky;
        z-index: 12;
    }

    body.social-grow .grow-platform-option {
        min-height: 72px;
        padding: 16px max(16px, env(safe-area-inset-left, 0)) 16px max(16px, env(safe-area-inset-right, 0));
        gap: 14px;
    }

    body.social-grow .grow-platform-option-logo {
        width: 44px;
        height: 44px;
    }

    body.social-grow .grow-platform-option-logo .grow-brand-logo--lg {
        width: 34px;
        height: 34px;
    }

    body.social-grow .grow-platform-option-text strong {
        font-size: 18px;
    }

    body.social-grow .grow-platform-status {
        font-size: 13px;
    }

    body.social-grow .grow-platform-option-chevron {
        font-size: 22px;
        margin-left: 2px;
    }

    body.social-grow .grow-platform-option-badge {
        margin-right: 6px;
    }

    body.social-grow .grow-connect {
        padding: 16px max(16px, env(safe-area-inset-left, 0)) 16px max(16px, env(safe-area-inset-right, 0));
    }

    body.social-grow .grow-connect-linked-row {
        gap: 10px;
    }

    body.social-grow .grow-connect-linked-main {
        gap: 12px;
    }

    body.social-grow .grow-connect-linked-user {
        font-size: 17px;
    }

    body.social-grow .grow-connect-linked-actions {
        gap: 8px;
    }

    body.social-grow .grow-connect-status {
        font-size: 13px;
    }

    body.social-grow .grow-connect-change {
        min-height: 44px;
        padding: 8px 2px;
        font-size: 15px;
        white-space: nowrap;
    }

    body.social-grow .grow-tab {
        flex: 1;
        padding: 12px 6px;
        font-size: 14px;
        min-height: 48px;
        text-align: center;
    }

    body.social-grow .grow-tab-badge {
        margin-left: 4px;
    }

    body.social-grow .grow-task-card,
    body.social-grow .grow-review-card,
    body.social-grow .grow-create-form,
    body.social-grow .grow-hint-line,
    body.social-grow .grow-hint-block,
    body.social-grow .grow-panel-note,
    body.social-grow .grow-intro,
    body.social-grow .grow-compose-hint {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    body.social-grow .grow-task-actions,
    body.social-grow .grow-task-footer,
    body.social-grow .grow-review-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    body.social-grow .grow-task-footer-end {
        margin-left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    body.social-grow .grow-task-actions .btn,
    body.social-grow .grow-review-actions .btn,
    body.social-grow .grow-open-link-btn,
    body.social-grow .grow-open-btn,
    body.social-grow .grow-complete-btn,
    body.social-grow .grow-action-primary {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        flex: none;
    }

    body.social-grow .grow-own-badge {
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    body.social-grow .grow-submit-btn {
        width: 100%;
    }

    body.social-grow .grow-empty {
        padding: 32px 16px;
    }

    body.social-grow .live-feed-wrap,
    body.social-grow .live-feed,
    body.social-grow .live-feed-heading,
    body.social-grow .live-feed-empty {
        max-width: 100%;
        box-sizing: border-box;
    }

    body.social-grow .live-card-head {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 12px 14px 8px;
    }

    body.social-grow .live-card-name {
        font-size: 14px;
    }

    body.social-grow .live-card-open {
        padding: 5px 10px;
        font-size: 12px;
        margin-left: 0;
        flex-shrink: 0;
    }

    body.social-grow .live-card-badge {
        flex-shrink: 0;
    }

    body.social-grow .live-card-body {
        padding: 0 10px 12px;
    }

    body.social-grow .live-card-embed--youtube {
        min-height: 200px;
        max-height: none;
        aspect-ratio: 16 / 9;
    }

    body.social-grow .live-card-embed--tiktok {
        width: 100%;
        max-width: 100%;
        min-height: 280px;
        max-height: min(62vh, 460px);
        margin: 0 auto;
    }

    body.social-grow .grow-alert {
        margin-left: max(16px, env(safe-area-inset-left, 0));
        margin-right: max(16px, env(safe-area-inset-right, 0));
    }
}

/* —— Settings (messages-style split panel) —— */
.layout-grid.layout-settings {
    grid-template-columns: var(--dm-list-width) minmax(0, 1fr);
    width: max(var(--content-width), calc(100% - var(--content-offset)));
    max-width: calc(100% - var(--content-offset));
    margin-left: var(--content-offset);
}

.settings-nav-panel,
.settings-detail-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    min-height: 0;
    z-index: 1;
}

.settings-nav-panel {
    z-index: 10;
}

.settings-detail-panel {
    z-index: 20;
}

.settings-nav-panel {
    border-left: 1px solid var(--social-border);
    border-right: 1px solid var(--social-border);
    width: 100%;
    max-width: var(--dm-list-width);
}

.settings-detail-panel {
    position: relative;
    border-right: 1px solid var(--social-border);
    min-width: 0;
}

.settings-nav-head,
.settings-detail-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 53px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--social-border);
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
}

.settings-nav-head h1,
.settings-detail-head h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 28px;
    letter-spacing: -0.02em;
}

.settings-detail-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.4;
}

.settings-nav-list {
    display: flex;
    flex-direction: column;
}

.settings-nav-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-bottom: 1px solid var(--social-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.settings-nav-item:hover {
    background: var(--social-hover);
}

.settings-nav-item.is-active {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 3px 0 0 var(--social-blue);
}

.settings-nav-label {
    font-size: 16px;
    font-weight: 700;
}

.settings-nav-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.35;
}

.settings-detail-body {
    padding: 8px 0 24px;
}

.settings-option {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--social-border);
}

.settings-option-copy {
    min-width: 0;
    flex: 1;
}

.settings-option-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
}

.settings-option-desc {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
}

.settings-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}

.settings-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle-track {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid var(--social-border);
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.settings-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}

.settings-toggle-input:checked + .settings-toggle-track {
    background: var(--social-blue);
    border-color: var(--social-blue);
}

.settings-toggle-input:checked + .settings-toggle-track .settings-toggle-thumb {
    transform: translateX(20px);
}

.settings-toggle-input:focus-visible + .settings-toggle-track {
    outline: 2px solid var(--social-blue);
    outline-offset: 2px;
}

.settings-toggle-input:disabled + .settings-toggle-track {
    opacity: 0.55;
}

.settings-field-select {
    flex-shrink: 0;
    min-width: 148px;
    max-width: 200px;
    padding: 10px 36px 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371767b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.settings-field-select:focus-visible {
    outline: 2px solid var(--social-blue);
    outline-offset: 2px;
}

.settings-field-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.settings-feedback {
    margin: 12px 16px 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 186, 124, 0.12);
    color: #00ba7c;
    font-size: 14px;
}

.settings-feedback.is-error {
    background: rgba(244, 33, 46, 0.12);
    color: #f4212e;
}

.settings-detail-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
}

.profile-private-badge {
    color: var(--text-muted);
    font-weight: 600;
}

.profile-locked-card {
    text-align: center;
    padding: 32px 20px;
}

.profile-locked-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
}

.profile-locked-card p {
    margin: 0;
    color: var(--text-muted);
}

.notification-follow-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.notification-follow-form {
    margin: 0;
}

.notification-follow-actions .notification-row-time {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 13px;
}

/* Profile platform badges (main profile only) */
.profile-platform-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.profile-platform-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 7px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.profile-platform-link:hover {
    background: var(--social-hover);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.16);
}

.profile-platform-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-platform-link-icon .grow-brand-logo {
    width: 14px;
    height: 14px;
}

.profile-platform-link--tiktok .profile-platform-link-icon {
    color: var(--text);
}

.profile-platform-link-label {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-connection-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 18px 16px;
    border: none;
    border-bottom: 1px solid var(--social-border);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.settings-connection-row:hover {
    background: var(--social-hover);
}

.settings-connection-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.settings-connection-title {
    font-size: 16px;
    font-weight: 700;
}

.settings-connection-status {
    font-size: 13px;
    color: var(--text-muted);
}

.settings-connection-status.is-linked {
    color: #7dd3a7;
}

.settings-connection-chevron {
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    flex-shrink: 0;
}

.connection-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top, 0));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
}

.connection-modal.open {
    display: flex;
}

html.connection-modal-open {
    overflow: hidden;
}

/* When a connection modal is open, force the left settings categories (nav panel)
   and the right detail panel below the popup no matter what stacking context
   the layout-grid / .settings-detail-panel (position:relative + z-index) creates. */
html.connection-modal-open .settings-nav-panel,
html.connection-modal-open .settings-detail-panel {
    z-index: 3 !important;
}

/* Also keep the main global sidebar below connection modals. */
html.connection-modal-open .sidebar {
    z-index: 2 !important;
}

/* Lower the overall grid/page containers so the fixed high-z modal wins. */
html.connection-modal-open .layout-grid,
html.connection-modal-open .page {
    z-index: 0 !important;
}

.connection-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.connection-modal-card {
    position: relative;
    z-index: 2147483647 !important;
    width: min(440px, 100%);
    max-height: min(90vh, 560px);
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.connection-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.connection-modal-head h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.connection-modal-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.connection-modal-lead {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
}

.connection-modal-note {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.connection-modal-label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.connection-modal-account {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    word-break: break-word;
}

.connection-modal-meta {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--accent, #1d9bf0);
}

.connection-modal-field {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.connection-modal-field span {
    font-size: 13px;
    color: var(--text-muted);
}

.connection-modal-input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    font-family: inherit;
    font-size: 15px;
    padding: 12px 14px;
}

.connection-modal-input:focus {
    outline: 2px solid rgba(29, 155, 240, 0.45);
    outline-offset: 1px;
}

.connection-modal-unlink {
    width: 100%;
}

.connection-modal-save,
.connection-modal-discord {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}

.settings-option--action {
    align-items: center;
}

.settings-blocked-open {
    flex-shrink: 0;
    min-height: 36px;
}

.blocked-users-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: none;
    isolation: isolate;
}

.blocked-users-modal.open {
    display: flex;
    pointer-events: auto;
}

.blocked-users-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}

.blocked-users-card {
    position: relative;
    z-index: 2147483646 !important;
    width: min(520px, 100%);
    max-height: min(78vh, 640px);
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.blocked-users-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--social-border);
}

.blocked-users-head h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.blocked-users-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.blocked-users-close:hover {
    background: var(--social-hover);
}

.blocked-users-body {
    overflow: auto;
    padding: 8px 0;
}

.blocked-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.blocked-user-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.blocked-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.blocked-user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blocked-user-avatar-fallback {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.blocked-user-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.blocked-user-name {
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blocked-user-handle {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blocked-user-unblock {
    flex-shrink: 0;
}

.blocked-users-empty,
.blocked-users-loading,
.blocked-users-error {
    padding: 28px 20px;
    text-align: center;
    color: var(--text-muted);
}

.blocked-users-empty strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.settings-detail-placeholder {
    padding: 48px 24px;
}

@media (min-width: 769px) {
    body.social-settings .settings-detail-panel {
        display: flex;
    }

    body.social-settings:not(.settings-has-panel) .settings-detail-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        min-height: 320px;
    }
}

/* === DM 1-to-1 voice/video calls (X-style) === */
.dm-thread-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.mobile-header-call-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    flex-shrink: 0;
    min-width: 84px;
}

.mobile-header-call-btn {
    width: 40px;
    height: 40px;
}

.dm-call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.dm-call-btn:hover {
    background: rgba(29, 155, 240, 0.12);
    color: var(--accent, #1d9bf0);
}

.dm-call-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

body.dm-call-open {
    overflow: hidden;
}

.dm-call-root {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
}

.dm-call-root:not([hidden]) {
    pointer-events: auto;
}

.dm-call-root [hidden],
.dm-call-screen[hidden] {
    display: none !important;
}

.dm-call-screen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-call-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.88);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    pointer-events: none;
}

/* Put the dark blur on the screen itself so the card (a child) ALWAYS paints on top. */
.dm-call-screen--messenger {
    background: rgba(0, 0, 0, 0.92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.dm-call-screen--messenger .dm-call-backdrop {
    display: none;
}

.dm-call-screen--messenger .dm-call-card,
.dm-call-card {
    position: relative;
    z-index: 5;
}

.dm-call-incoming .dm-call-card {
    width: min(100%, 420px);
    padding: 48px 28px 36px;
}

.dm-call-incoming--fullscreen .dm-call-backdrop {
    background: radial-gradient(circle at 50% 35%, rgba(29, 155, 240, 0.18) 0%, rgba(0, 0, 0, 0.94) 55%);
}

.dm-call-incoming--fullscreen .dm-call-card {
    width: min(100%, 480px);
    padding: 56px 32px 40px;
}

.dm-call-incoming--fullscreen .dm-call-avatar {
    width: 128px;
    height: 128px;
    margin-bottom: 24px;
    box-shadow: 0 0 0 4px rgba(29, 155, 240, 0.35), 0 12px 40px rgba(0, 0, 0, 0.45);
}

.dm-call-incoming--fullscreen .dm-call-peer-name {
    font-size: 28px;
}

.dm-call-incoming--fullscreen .dm-call-ring-pulse {
    top: 56px;
    width: 160px;
    height: 160px;
    margin-left: -80px;
    border-width: 3px;
}

.dm-call-incoming--fullscreen .dm-call-actions {
    margin-top: 48px;
    gap: 56px;
}

.dm-call-incoming--fullscreen .dm-call-action-icon {
    width: 72px;
    height: 72px;
}

.dm-call-card {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    padding: 32px 24px 28px;
    text-align: center;
}

.dm-call-card .dm-call-peer-name {
    color: #fff;
}

.dm-call-card .dm-call-peer-handle,
.dm-call-card .dm-call-status {
    color: rgba(255, 255, 255, 0.72);
}

.dm-call-card .dm-call-action-label {
    color: rgba(255, 255, 255, 0.85);
}

.dm-call-peer {
    position: relative;
    z-index: 1;
}

.dm-call-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
}

.dm-call-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-call-avatar--lg {
    width: 120px;
    height: 120px;
    font-size: 42px;
}

.dm-call-peer-name {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.dm-call-peer-handle,
.dm-call-mode-label,
.dm-call-status {
    margin: 0;
    font-size: 15px;
    color: var(--text-muted);
}

.dm-call-mode-label {
    margin-top: 8px;
    color: var(--accent, #1d9bf0);
    font-weight: 600;
}

.dm-call-ring-pulse {
    position: absolute;
    left: 50%;
    top: 44px;
    width: 120px;
    height: 120px;
    margin-left: -60px;
    border-radius: 50%;
    border: 2px solid rgba(29, 155, 240, 0.35);
    animation: dm-call-pulse 1.8s ease-out infinite;
    pointer-events: none;
}

@keyframes dm-call-pulse {
    0% { transform: scale(0.85); opacity: 0.9; }
    50% { transform: scale(1.15); opacity: 0.5; }
    100% { transform: scale(1.55); opacity: 0; }
}

.dm-call-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin-top: 36px;
}

.dm-call-actions--outgoing {
    gap: 0;
}

.dm-call-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
}

.dm-call-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    transition: transform 0.12s ease;
}

.dm-call-action:hover .dm-call-action-icon {
    transform: scale(1.05);
}

.dm-call-action-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.dm-call-decline .dm-call-action-icon,
.dm-call-end.dm-call-action .dm-call-action-icon {
    background: #f4212e;
    color: #fff;
}

.dm-call-accept .dm-call-action-icon {
    background: #00ba7c;
    color: #fff;
}

.dm-call-active {
    flex-direction: column;
    background: #0a0a0c;
}

.dm-call-video-stage {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 38%, rgba(29, 155, 240, 0.16) 0%, #0a0a0c 60%);
}

.dm-call-remote-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0a0a0c;
    z-index: 1;
}

.dm-call-remote-video.is-audio-only {
    position: absolute;
    width: 1px;
    height: 1px;
    inset: auto;
    left: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.dm-call-avatar--pulse {
    box-shadow: 0 0 0 0 rgba(29, 155, 240, 0.5);
    animation: dm-call-avatar-pulse 1.8s ease-out infinite;
}

@keyframes dm-call-avatar-pulse {
    0% { box-shadow: 0 0 0 0 rgba(29, 155, 240, 0.5); }
    70% { box-shadow: 0 0 0 22px rgba(29, 155, 240, 0); }
    100% { box-shadow: 0 0 0 0 rgba(29, 155, 240, 0); }
}

.dm-call-outgoing-preview {
    display: none;
}

.dm-call-outgoing-preview:not([hidden]) {
    display: block;
    width: min(78vw, 320px);
    aspect-ratio: 4 / 3;
    margin: 22px auto 2px;
    border-radius: 18px;
    object-fit: cover;
    transform: scaleX(-1);
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.5);
}

.dm-call-has-preview .dm-call-outgoing .dm-call-avatar {
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
}

.dm-call-has-preview .dm-call-outgoing .dm-call-ring-pulse {
    display: none;
}

.dm-call-local-video {
    position: absolute;
    right: 16px;
    bottom: 100px;
    width: 112px;
    height: 150px;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    background: var(--card-bg-deep);
    z-index: 2;
}

.dm-call-audio-stage {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: #fff;
}

.dm-call-audio-stage .dm-call-peer-name {
    color: #fff;
}

.dm-call-audio-stage .dm-call-status {
    color: rgba(255, 255, 255, 0.72);
}

.dm-call-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 24px calc(20px + env(safe-area-inset-bottom, 0));
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 100%);
    width: 100%;
    box-sizing: border-box;
}

.dm-call-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background 0.12s ease;
}

.dm-call-ctrl:hover {
    background: rgba(255, 255, 255, 0.2);
}

.dm-call-ctrl.is-muted {
    background: rgba(244, 33, 46, 0.85);
}

.dm-call-ctrl.is-active {
    background: rgba(29, 155, 240, 0.24);
    color: #8ed4ff;
}

.dm-call-ctrl--end {
    background: #f4212e;
}

.dm-call-ctrl--end:hover {
    background: #dc1c28;
}

@media (max-width: 768px) {
    .dm-thread-actions {
        gap: 2px;
    }

    .dm-call-btn {
        width: 40px;
        height: 40px;
    }

    .dm-call-local-video {
        width: 96px;
        height: 128px;
        right: 12px;
        bottom: 88px;
    }

    .dm-call-actions {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    body.social-settings .layout-grid.layout-settings {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    body.social-settings:not(.settings-has-panel) .settings-detail-panel {
        display: none !important;
    }

    body.social-settings:not(.settings-has-panel) .settings-nav-panel {
        min-height: calc(100dvh - var(--header-mobile));
        max-height: calc(100dvh - var(--header-mobile));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    body.social-settings.settings-has-panel .settings-nav-panel {
        display: none !important;
    }

    body.social-settings.settings-has-panel .settings-detail-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        top: var(--header-mobile);
        bottom: 0;
        z-index: 99999;
        overflow: hidden;
    }

    body.social-settings.settings-has-panel .settings-detail-head {
        flex: 0 0 auto;
    }

    body.social-settings.settings-has-panel .settings-detail-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: max(32px, env(safe-area-inset-bottom));
    }

    .settings-option {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .settings-option--action .btn,
    .settings-mobile-setup-btn,
    .settings-mobile-test-btn {
        width: 100%;
    }
}

.settings-mobile-hero {
    padding: 16px;
    margin: 8px 16px 12px;
    border-radius: 14px;
    background: rgba(255, 77, 109, 0.08);
    border: 1px solid rgba(255, 77, 109, 0.22);
}

.settings-mobile-hero-copy {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
}

.settings-mobile-setup-btn {
    margin-bottom: 8px;
}

.settings-mobile-web-note {
    padding: 18px 16px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.settings-perm-list {
    display: flex;
    flex-direction: column;
}

.settings-perm-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "copy status"
        "copy action";
    gap: 8px 12px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--social-border);
}

.settings-perm-copy {
    grid-area: copy;
    min-width: 0;
}

.settings-perm-copy strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

.settings-perm-copy span {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.settings-perm-status {
    grid-area: status;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

.settings-perm-status.is-ok {
    background: rgba(40, 199, 111, 0.15);
    color: #28c76f;
}

.settings-perm-status.is-bad {
    background: rgba(255, 77, 109, 0.15);
    color: #ff4d6d;
}

.settings-perm-fix {
    grid-area: action;
    justify-self: end;
}

@media (max-width: 768px) {
    .settings-perm-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "status"
            "action";
    }

    .settings-perm-fix {
        justify-self: stretch;
        width: 100%;
    }
}

/* PWA — fullscreen / home-screen app shell */
@media (display-mode: fullscreen), (display-mode: standalone), (display-mode: minimal-ui) {
    html,
    body.social-page {
        background: var(--bg);
        min-height: 100dvh;
        height: 100dvh;
        overscroll-behavior: none;
    }
}

/* === COMPREHENSIVE EVERYTHING POPUP/MODAL/SHEET STACKING (NO MORE BEHIND MENUS) ===
   All popups, modals, sheets, dialogs (including settings connection/Discord modal, replies, reels, reports, uploads, composers, confirms, etc.)
   must appear ABOVE sidebars, mobile navs, settings panels, sticky headers, and any other UI.
   Very high z-index + !important + broad selectors to defeat stacking contexts from parents (e.g. fixed settings-detail-panel).
   Backdrops just under cards.
   Settings nav and detail panels kept low so modals win.
*/
.connection-modal,
.reply-modal,
.reel-comments-sheet,
.report-modal,
.reel-upload-modal,
.post-edit-modal,
.profile-edit-modal,
.news-composer-modal,
.confirm-modal,
[class*="-modal"],
[class*="-sheet"],
[role="dialog"],
.modal,
.popup,
.dialog {
    z-index: 9999999 !important;
}

.connection-modal-card,
.reply-modal-card,
.reel-comments-panel,
.report-modal-card,
.reel-upload-card,
.composer-card,
.platform-picker-panel,
.profile-edit-sheet,
.pwa-launch-card,
.post-edit-card,
.dm-edit-card,
.blocked-users-card,
.confirm-modal .confirm-card,
.new-message-modal .new-message-card,
.repost-quote-modal .repost-quote-card,
.modal-card,
.popup-card {
    z-index: 10000000 !important;
}

/* Layout panels are NOT modal cards - never let broad selectors elevate them */
.right-panel,
.trending-panel,
.suggestions-panel,
.settings-nav-panel,
.settings-detail-panel,
.main-content,
.portal-main-content,
.dm-list-panel,
.dm-thread-panel,
.grow-panel,
.grow-connect-panel,
.bp-panel,
.bp-lightbox-panel,
.search-results-panel {
    z-index: auto !important;
}

.connection-modal-backdrop,
.reply-modal-backdrop,
.reel-comments-backdrop,
.report-modal-backdrop,
[class*="-backdrop"],
.modal-backdrop,
.popup-backdrop {
    z-index: 9999990 !important;
}

/* Keep settings categories (left nav) below popups. Detail panel can be higher in contexts like mobile. */
.settings-nav-panel {
    z-index: 5 !important;
}

/* Layout chrome stays under every overlay/toast/banner/modal */
.layout-grid,
.page {
    z-index: auto;
}

@media (min-width: 1101px) {
    .layout-grid {
        z-index: 0;
        isolation: isolate;
    }

    .right-panel,
    .trending-panel {
        z-index: 0 !important;
    }
}

/* Toasts, prompts, and opt-in banners always above the discover rail */
.pwa-push-banner,
.pwa-install-banner,
.flash-banner,
.social-toast,
.composer-toast {
    z-index: 10000040 !important;
}

/* Emoji pickers only ? do NOT match .composer-control-emoji / .composer-icon-emoji */
.emoji-picker,
.emoji-grid,
[data-emoji-picker],
.composer-emoji-picker,
.dm-emoji-picker,
.comment-toolbar .emoji-list,
[class*="emoji-picker"],
[class*="emoji-grid"] {
    z-index: 5000 !important;
}

/* Keep emoji toolbar buttons in normal stacking so they never cover menus/modals */
.composer-control-emoji,
.composer-control[data-action="emoji"],
.composer-icon-emoji,
.btn-emoji {
    z-index: auto !important;
    isolation: auto;
}


/* Strong mobile viewport-friendly rules for notifications + discovery to eliminate "zoomed in, pinch to zoom out" */
@media (max-width: 640px) {
    .notifications-feed,
    .search-results,
    .discovery-feed,
    .layout-grid.layout-with-trends .main-content,
    .trending-panel {
        max-width: 100%;
        width: 100%;
        padding-left: max(8px, env(safe-area-inset-left, 8px));
        padding-right: max(8px, env(safe-area-inset-right, 8px));
        box-sizing: border-box;
    }

    .notifications-feed,
    .search-results,
    .discovery-feed {
        font-size: 15px;
        line-height: 1.4;
    }

    .trending-mobile,
    .trending-mobile-scroll,
    .trending-mobile-posts {
        max-width: 100%;
    }

    /* Popups/sheets on small mobile: fuller bleed, comfortable */
    .reply-modal {
        padding: 6px !important;
    }

    .reply-modal-card,
    .reel-comments-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        border-radius: 14px 14px 0 0;
    }

    .reel-comments-panel {
        max-height: 82dvh;
    }
}

@media (max-width: 420px) {
    .notifications-feed,
    .search-results,
    .discovery-feed {
        font-size: 14.5px;
    }

    .reel-comments-panel,
    .reply-modal-card {
        border-radius: 12px 12px 0 0;
    }
}

html.pwa-installed,
html.pwa-installed body.social-page {
    background: var(--bg);
    min-height: 100dvh;
    height: 100dvh;
    overscroll-behavior: none;
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
}

html.pwa-installed body.social-page {
    padding-top: calc(var(--header-mobile) + env(safe-area-inset-top, 0));
}

html.pwa-installed .mobile-header {
    padding-top: env(safe-area-inset-top, 0);
    height: calc(var(--header-mobile) + env(safe-area-inset-top, 0));
    background: var(--bg);
}

html.pwa-installed .mobile-nav {
    background: var(--bg-glass, var(--bg));
    padding-bottom: env(safe-area-inset-bottom, 0);
}

html.pwa-installed .page {
    min-height: 100dvh;
    padding-bottom: calc(var(--nav-mobile) + env(safe-area-inset-bottom, 0));
}

html.pwa-installed body.social-messages.msg-has-thread .page {
    padding-bottom: 0;
}

html.pwa-installed body.social-messages.msg-has-thread .dm-thread-panel {
    bottom: 0;
    top: calc(var(--header-mobile) + env(safe-area-inset-top, 0));
}

html.pwa-installed body.social-messages.msg-has-thread .dm-compose textarea {
    font-size: 16px;
}

/* PWA install banner (Android / Samsung) */
.pwa-install-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--nav-mobile) + env(safe-area-inset-bottom, 0));
    z-index: 10000040 !important;
    padding: 0 12px 12px;
    pointer-events: none;
}

.pwa-install-banner:not([hidden]) {
    pointer-events: auto;
}

html.pwa-installed .pwa-install-banner {
    display: none !important;
}

.pwa-install-banner-inner {
    border-radius: 16px;
    border: 1px solid rgba(29, 155, 240, 0.35);
    background: var(--bg-glass-strong);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    padding: 14px;
}

.pwa-install-banner-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.pwa-install-banner-icon {
    border-radius: 10px;
    flex-shrink: 0;
}

.pwa-install-banner-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pwa-install-banner-copy strong {
    font-size: 15px;
    color: var(--text);
}

.pwa-install-banner-copy span {
    font-size: 13px;
    color: var(--text-muted);
}

.pwa-install-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pwa-install-btn {
    flex: 1 1 auto;
    min-height: 40px;
}

.pwa-install-help-btn,
.pwa-install-dismiss {
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 14px;
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
}

.pwa-install-dismiss {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
}

.pwa-install-help {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--social-border);
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
}

.pwa-install-help ol {
    margin: 8px 0;
    padding-left: 18px;
}

.pwa-install-help li {
    margin-bottom: 4px;
}

.pwa-install-help-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--accent, #1d9bf0);
}

@media (min-width: 1101px) {
    .pwa-install-banner {
        display: none !important;
    }
}

/* PWA launch announcement (one-time, mobile, logged-in) */
.pwa-launch-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-top: max(20px, env(safe-area-inset-top, 0));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
    pointer-events: none;
}

.pwa-launch-modal.open {
    display: flex;
    pointer-events: auto;
}

html.pwa-launch-open {
    overflow: hidden;
}

html.pwa-installed .pwa-launch-modal {
    display: none !important;
}

.pwa-launch-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
}

.pwa-launch-card {
    position: relative;
    z-index: 10000000 !important;
    width: min(380px, 100%);
    border-radius: 22px;
    border: 1px solid rgba(29, 155, 240, 0.45);
    background:
        radial-gradient(circle at top, rgba(29, 155, 240, 0.18), transparent 55%),
        #000;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
    padding: 22px 20px 18px;
    text-align: center;
    animation: pwaLaunchPop 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pwaLaunchPop {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pwa-launch-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.pwa-launch-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pwa-launch-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #1d9bf0, #7856ff);
    box-shadow: 0 0 24px rgba(29, 155, 240, 0.45);
    animation: pwaLaunchPulse 2.4s ease-in-out infinite;
}

@keyframes pwaLaunchPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(29, 155, 240, 0.35); }
    50% { box-shadow: 0 0 28px rgba(120, 86, 255, 0.55); }
}

.pwa-launch-icon {
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.pwa-launch-title {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--text);
}

.pwa-launch-lead {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-muted);
}

.pwa-launch-perks {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.pwa-launch-perks li {
    font-size: 12px;
    font-weight: 600;
    color: #d8ecff;
    background: rgba(29, 155, 240, 0.14);
    border: 1px solid rgba(29, 155, 240, 0.28);
    border-radius: 999px;
    padding: 6px 10px;
}

.pwa-launch-actions {
    display: grid;
    gap: 10px;
}

.pwa-launch-install {
    min-height: 44px;
    font-weight: 700;
}

.pwa-launch-later {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 14px;
    padding: 6px;
    cursor: pointer;
}

.pwa-launch-hint {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--accent, #1d9bf0);
}

@media (min-width: 1101px) {
    .pwa-launch-modal {
        display: none !important;
    }
}

/* Page transition splash (appimage.png — not home-screen icon) */
.pwa-page-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    pointer-events: auto;
}

.pwa-page-splash[hidden] {
    display: none !important;
}

.pwa-page-splash img {
    width: min(120px, 32vw);
    height: auto;
    object-fit: contain;
}

html.pwa-page-splash-active {
    overflow: hidden;
}

/* PWA push opt-in banner */
.pwa-push-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--nav-mobile) + 12px + env(safe-area-inset-bottom, 0));
    z-index: 10000040 !important;
    pointer-events: none;
}

.pwa-push-banner:not([hidden]) {
    pointer-events: auto;
}

.pwa-push-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--social-border);
    background: var(--bg-glass-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-elevated);
}

.pwa-push-banner-text {
    margin: 0;
    flex: 1 1 200px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-muted);
}

.pwa-push-banner-text strong {
    display: block;
    color: var(--text);
    font-size: 15px;
    margin-bottom: 2px;
}

.pwa-push-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.pwa-push-enable {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 14px;
}

.pwa-push-dismiss {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 10px;
}

.pwa-push-dismiss:hover {
    color: var(--text);
}

.pwa-push-banner-status {
    margin: 0 0 8px;
    width: 100%;
    font-size: 13px;
    line-height: 1.4;
    color: var(--social-blue);
}

.pwa-push-banner-status.is-error {
    color: #f4212e;
}

.settings-push-enable-btn {
    min-height: 40px;
    padding: 8px 16px;
    white-space: nowrap;
}

@media (min-width: 1101px) {
    .pwa-push-banner {
        left: calc(var(--content-offset) + 16px);
        right: auto;
        bottom: 24px;
        width: min(420px, calc(var(--feed-width) - 32px));
        max-width: min(420px, calc(var(--feed-width) - 32px));
    }
}

/* Profile edit modal */
.profile-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999 !important;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    pointer-events: none;
}

.profile-edit-modal.open {
    display: flex;
    pointer-events: auto;
}

html.profile-edit-open {
    overflow: hidden;
}

.profile-edit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
}

.profile-edit-sheet {
    position: relative;
    z-index: 10000000 !important;
    width: 100%;
    max-height: min(94vh, 900px);
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.profile-edit-grabber {
    display: none;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
}

.profile-edit-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top, 0));
    border-bottom: 1px solid var(--social-border);
    background: var(--bg-glass-strong);
    flex-shrink: 0;
}

.profile-edit-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.02em;
}

.profile-edit-head-btn {
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 999px;
    cursor: pointer;
    min-height: 40px;
}

.profile-edit-head-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.profile-edit-cancel {
    justify-self: start;
    color: var(--text-muted);
}

.profile-edit-save-top {
    justify-self: end;
    color: var(--social-blue);
    font-weight: 700;
}

.profile-edit-save-top:not(:disabled):hover,
.profile-edit-cancel:hover {
    background: var(--social-hover);
}

.profile-edit-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.profile-edit-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 8px;
}

.profile-edit-feedback {
    margin: 12px 16px 0;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
}

.profile-edit-feedback.is-error {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: #ffd5d5;
}

.profile-edit-feedback.is-success {
    background: rgba(29, 155, 240, 0.1);
    border: 1px solid rgba(29, 155, 240, 0.22);
    color: #c8e8ff;
}

.profile-edit-hero {
    position: relative;
    margin-bottom: 56px;
}

.profile-edit-banner-wrap {
    position: relative;
    height: 148px;
    background: linear-gradient(135deg, #1a2a3d 0%, #0d1520 100%);
}

.profile-edit-banner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.profile-edit-banner-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
}

.profile-edit-avatar-wrap {
    position: absolute;
    left: 16px;
    bottom: -44px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.profile-edit-avatar {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    border: 4px solid var(--border-strong);
    background: var(--panel-inset);
    overflow: hidden;
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.profile-edit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.profile-edit-media-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.profile-edit-media-btn:hover {
    background: rgba(0, 0, 0, 0.72);
}

.profile-edit-fields {
    padding: 0 16px 12px;
    display: grid;
    gap: 14px;
}

.profile-edit-field {
    display: grid;
    gap: 8px;
}

.profile-edit-field-row {
    display: grid;
    gap: 14px;
}

.profile-edit-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.profile-edit-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.profile-edit-counter {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.profile-edit-input,
.profile-edit-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--social-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    padding: 12px 14px;
}

.profile-edit-input:focus,
.profile-edit-textarea:focus {
    outline: none;
    border-color: var(--social-blue);
    box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.15);
}

.profile-edit-textarea {
    resize: vertical;
    min-height: 88px;
    line-height: 1.45;
}

.profile-edit-hint {
    margin: -6px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.profile-edit-readonly-value {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    font-size: 15px;
    word-break: break-word;
    user-select: none;
}

.profile-edit-email-note {
    margin-top: 6px;
    line-height: 1.45;
}

.profile-edit-media-specs {
    list-style: none;
    margin: 0 16px 16px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.03);
    display: grid;
    gap: 8px;
}

.profile-edit-media-specs li {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

.profile-edit-media-spec-label {
    font-weight: 700;
    color: var(--text);
}

.profile-edit-foot {
    display: none;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--social-border);
    background: var(--bg-glass-strong);
    flex-shrink: 0;
}

.profile-edit-foot .btn {
    flex: 1;
    min-height: 44px;
    font-weight: 700;
}

.profile-page .btn-edit {
    margin-top: 0;
    min-height: 36px;
    cursor: pointer;
    font: inherit;
}

@media (min-width: 641px) {
    .profile-edit-modal {
        align-items: center;
        padding: 20px;
        padding-top: max(20px, env(safe-area-inset-top, 0));
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0));
    }

    .profile-edit-sheet {
        width: min(560px, 100%);
        max-height: min(88vh, 820px);
        border-radius: 20px;
    }

    .profile-edit-head {
        padding: 12px 16px;
    }

    .profile-edit-field-row {
        grid-template-columns: 1fr 1fr;
    }

    .profile-edit-banner-wrap {
        height: 168px;
    }

    .profile-edit-foot {
        display: flex;
    }

    .profile-edit-save-top {
        display: none;
    }
}

@media (max-width: 640px) {
    .profile-edit-grabber {
        display: block;
    }

    .profile-edit-foot-cancel {
        display: none;
    }

    .profile-edit-foot-save {
        width: 100%;
    }
}

/* Profile photo crop (Facebook-style) */
.profile-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.profile-crop-modal.open {
    display: flex;
}

html.profile-crop-open {
    overflow: hidden;
}

.profile-crop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.profile-crop-sheet {
    position: relative;
    width: 100%;
    max-height: 92vh;
    background: var(--bg);
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.profile-crop-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-crop-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    text-align: center;
}

.profile-crop-head-btn {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 999px;
    cursor: pointer;
}

.profile-crop-head-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.profile-crop-cancel {
    justify-self: start;
    color: #9ca3af;
}

.profile-crop-done {
    justify-self: end;
    color: var(--social-blue);
}

.profile-crop-body {
    padding: 12px 16px 20px;
    overflow-y: auto;
}

.profile-crop-hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: #9ca3af;
    text-align: center;
}

.profile-crop-stage {
    position: relative;
    width: min(100%, 320px);
    aspect-ratio: 1;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    background: var(--card-bg-deep);
    touch-action: none;
    cursor: grab;
    user-select: none;
}

.profile-crop-stage.is-dragging {
    cursor: grabbing;
}

.profile-crop-stage img {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
    pointer-events: none;
}

.profile-crop-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: -2px;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.profile-crop-zoom {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 16px auto 0;
    width: min(100%, 320px);
}

.profile-crop-zoom-label {
    font-size: 13px;
    font-weight: 700;
    color: #d1d5db;
}

.profile-crop-zoom input[type="range"] {
    width: 100%;
    accent-color: var(--social-blue);
}

.profile-crop-previews {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-crop-previews-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: #d1d5db;
    text-align: center;
}

.profile-crop-preview-row {
    display: flex;
    justify-content: center;
    gap: 28px;
}

.profile-crop-preview-item {
    display: grid;
    gap: 8px;
    justify-items: center;
    font-size: 12px;
    color: #9ca3af;
}

.profile-crop-preview-circle {
    background-color: #152033;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: 2px solid rgba(255, 255, 255, 0.12);
}

.profile-crop-preview-profile {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    border-width: 4px;
    border-color: var(--border-strong);
}

.profile-crop-preview-chat {
    width: 40px;
    height: 40px;
    border-radius: 999px;
}

@media (min-width: 641px) {
    .profile-crop-modal {
        align-items: center;
        padding: 20px;
    }

    .profile-crop-sheet {
        width: min(440px, 100%);
        border-radius: 16px;
        max-height: min(90vh, 720px);
    }
}

/* Portal — standalone page: own left rail + center main scene (like Social home) */
.layout-grid.layout-portal {
    grid-template-columns: minmax(0, 1fr);
    width: var(--content-width);
    max-width: calc(100% - var(--content-offset));
    margin-left: var(--content-offset);
}

.portal-main-content {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--header-mobile) - var(--nav-mobile) - env(safe-area-inset-bottom, 0));
    padding: 0;
    overflow: hidden;
}

.portal-social-frame {
    display: block;
    width: 100%;
    flex: 1;
    min-height: calc(100dvh - var(--header-mobile) - var(--nav-mobile) - env(safe-area-inset-bottom, 0));
    border: 0;
    background: var(--bg);
}

html.portal-modal-open,
body.portal-modal-open,
html.portal-shop-modal-open,
body.portal-shop-modal-open,
html.portal-storage-modal-open,
body.portal-storage-modal-open {
    overflow: hidden !important;
}

#storage-sell-overlay,
#storage-delete-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    max-height: 100dvh;
    margin: 0;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147482900;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    overflow: hidden;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

/* Shop buy modal when mounted on portal shell (outside iframe) */
#shop-overlay,
#shop-image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    max-height: 100dvh;
    margin: 0;
    background: rgba(0, 0, 0, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2147483000;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    overflow: hidden;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

#shop-overlay[data-open="1"],
#shop-image-overlay[data-open="1"],
#shop-overlay.shop-overlay-open,
#shop-image-overlay.shop-overlay-open {
    display: flex !important;
}

#shop-overlay .shop-modal,
#shop-image-overlay .shop-modal {
    width: min(560px, 100%);
    max-height: min(88dvh, calc(100dvh - 24px));
    overflow: auto;
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 16px;
    box-shadow: var(--shadow-elevated);
    padding: 16px;
    color: var(--text);
    margin: auto;
    flex: 0 1 auto;
}

.sidebar-below-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.portal-sidebar-divider {
    height: 1px;
    margin: 10px 12px 8px;
    background: var(--social-border);
    flex-shrink: 0;
}

.sidebar-below-nav .btn-post {
    margin-top: 0;
}

.sidebar-below-nav .portal-sidebar-divider + .sidebar-item {
    margin-top: 0;
}

body.social-portal-page .portal-sidebar .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}

body.social-portal-page .portal-sidebar {
    min-height: 0;
}

body.social-portal-page.portal-standalone .page {
    padding-bottom: calc(var(--nav-mobile) + env(safe-area-inset-bottom, 0));
}

body.social-portal-page.portal-standalone .portal-mobile-nav {
    display: flex;
}

@media (min-width: 1101px) {
    .portal-main-content,
    .portal-social-frame {
        min-height: calc(100dvh - 12px);
    }

    body.social-portal-page.portal-standalone .page {
        padding-bottom: 0;
    }
}

@media (max-width: 1100px) {
    body.social-portal-page.portal-standalone .layout-grid.layout-portal {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    body.social-portal-page.portal-standalone .portal-main-content {
        min-height: calc(100dvh - var(--header-mobile) - var(--nav-mobile) - env(safe-area-inset-bottom, 0));
    }
}

/* Repost cards — first-class feed entries */
.post-card-repost-entry:not(.post-card-expanded) {
    cursor: pointer;
}

.post-card-repost-entry.post-card-expanded,
.post-card-repost-entry.post-card-main {
    cursor: default;
}

.post-card-repost-entry .post-body {
    min-width: 0;
}

.post-repost-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.2;
}

.post-repost-badge-icon {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: var(--social-repost);
    flex-shrink: 0;
}

.post-repost-badge-icon svg {
    width: 14px;
    height: 14px;
}

.post-card-simple-repost .post-repost-badge {
    margin-bottom: 10px;
}

.post-card-quote-repost .repost-quote-text {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 20px;
}

.post-repost-embed {
    margin: 0 0 4px;
    min-width: 0;
}

.post-repost-inner {
    border: 1px solid var(--social-border);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.post-repost-inner:hover {
    border-color: #3d4144;
    background: rgba(255, 255, 255, 0.02);
}

.post-card-embedded {
    border: none;
    border-bottom: none;
    padding: 12px 12px 10px;
    margin: 0;
    cursor: pointer;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 0 10px;
}

.post-card-embedded:hover {
    background: transparent;
}

.post-card-embedded .post-avatar-link .author-avatar,
.post-card-embedded .author-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.72rem;
}

.post-card-embedded .post-meta-names {
    font-size: 14px;
}

.post-card-embedded .post-text {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 8px;
}

.post-card-embedded .post-media-wrap {
    margin-bottom: 0;
}

.post-card-embedded .post-media {
    border-radius: 12px;
    max-height: 240px;
    overflow: hidden;
}

.post-card-embedded .post-media img,
.post-card-embedded .post-media video {
    max-height: 240px;
    object-fit: cover;
}

.post-repost-embed .post-card-embedded .post-actions,
.post-repost-embed .reply-card-embedded .post-actions {
    display: none !important;
}

.post-repost-embed .post-repost-inner {
    cursor: pointer;
}

.post-repost-embed .post-card-embedded .post-menu,
.post-repost-embed .reply-card-embedded .post-menu {
    display: none !important;
}

.post-repost-embed .reply-card-embedded {
    border: none;
    border-bottom: none;
    padding: 10px 10px 6px;
    margin: 0;
    grid-template-columns: 32px minmax(0, 1fr);
}

.post-actions-repost-own {
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px solid rgba(47, 51, 54, 0.55);
}

/* Keep simple repost action rows aligned like normal post action rows on all viewports. */
.post-card-simple-repost .post-actions-repost-own {
    margin: 4px -8px 0;
    padding-top: 0;
    border-top: none;
    gap: 0;
    align-items: center;
}

.post-card-simple-repost .post-actions-repost-own .post-actions-reply,
.post-card-simple-repost .post-actions-repost-own .post-actions-repost,
.post-card-simple-repost .post-actions-repost-own .post-actions-like,
.post-card-simple-repost .post-actions-repost-own .post-actions-views,
.post-card-simple-repost .post-actions-repost-own .post-actions-bookmark {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    margin-left: 0;
}

.post-card-simple-repost .post-actions-repost-own .post-actions-bookmark {
    justify-content: flex-end;
}

.post-card-repost-entry .post-actions-repost-own {
    margin-top: 6px;
}

.post-detail-thread .post-card-repost-entry.post-card-main {
    border-bottom: 1px solid var(--social-border);
    padding: 14px 16px;
}

.post-detail-thread .post-card-repost-entry.post-card-main .post-avatar-link .author-avatar,
.post-detail-thread .post-card-repost-entry.post-card-main .author-avatar {
    width: 48px;
    height: 48px;
}

.post-detail-thread .post-card-repost-entry.post-card-main .repost-quote-text {
    font-size: 23px;
    line-height: 28px;
    margin-bottom: 14px;
}

.post-detail-thread .post-card-repost-entry.post-card-main .post-repost-embed {
    margin-bottom: 8px;
}

.post-detail-thread .post-card-repost-entry.post-card-main .post-card-embedded .post-text {
    font-size: 15px;
    line-height: 20px;
}

@media (max-width: 600px) {
    .post-card-repost-entry {
        padding: 12px 14px;
    }

    .post-repost-badge {
        font-size: 12px;
    }

    .post-card-quote-repost .repost-quote-text {
        font-size: 15px;
        line-height: 20px;
    }

    .post-repost-inner {
        border-radius: 14px;
    }

    .post-card-embedded {
        padding: 10px 10px 8px;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 0 8px;
    }

    .post-card-embedded .post-avatar-link .author-avatar,
    .post-card-embedded .author-avatar {
        width: 28px;
        height: 28px;
    }

    .post-card-embedded .post-meta-names {
        font-size: 13px;
    }

    .post-card-embedded .post-text {
        font-size: 13px;
        line-height: 17px;
    }

    .post-card-embedded .post-media {
        max-height: 200px;
    }

    .post-card-embedded .post-media img,
    .post-card-embedded .post-media video {
        max-height: 200px;
    }

    .post-detail-thread .post-card-repost-entry.post-card-main .repost-quote-text {
        font-size: 20px;
        line-height: 26px;
    }
}

.repost-quote-modal {
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.repost-quote-card {
    position: relative;
    z-index: 1;
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 16px;
    width: min(520px, 100%);
    max-height: min(90vh, 560px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
}

.repost-quote-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--social-border);
}

.repost-quote-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.repost-quote-close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
}

.repost-quote-close:hover {
    background: var(--social-hover);
}

.repost-quote-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.repost-quote-textarea {
    min-height: 120px;
    font-size: 20px;
}

.repost-quote-hint {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.repost-quote-feedback {
    margin: 0;
    font-size: 14px;
    color: #f4212e;
}

.repost-quote-foot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--social-border);
}

/* Global search */
.search-main {
    min-height: 100%;
}

.search-hero {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-glass-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--social-border);
    padding: 12px 16px 0;
}

.search-form-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--input-bg);
    border: 1px solid var(--social-border);
    border-radius: 999px;
    padding: 0 14px;
}

.search-form-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

.search-form-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    padding: 12px 0;
    min-width: 0;
}

.search-form-input:focus {
    outline: none;
}

.search-type-tabs {
    display: flex;
    gap: 0;
    margin-top: 8px;
}

.search-type-tab {
    flex: 1;
    text-align: center;
    padding: 14px 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.search-type-tab:hover {
    background: var(--social-hover);
    color: var(--text);
}

.search-type-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--social-blue);
}

.search-results .post-card,
.search-results .search-people-row,
.search-results .search-tag-row {
    border-bottom: 1px solid var(--social-border);
}

.search-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
}

.search-empty strong {
    display: block;
    color: var(--text);
    font-size: 20px;
    margin-bottom: 8px;
}

.search-people-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.search-people-row:hover {
    background: var(--social-hover);
}

.search-people-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-people-name {
    font-size: 15px;
}

.search-people-handle {
    color: var(--text-muted);
    font-size: 14px;
}

.search-people-bio {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.35;
}

.search-people-private {
    margin-left: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.search-tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.search-tag-row:hover {
    background: var(--social-hover);
}

.search-tag-name {
    font-size: 17px;
    font-weight: 700;
}

.search-tag-meta {
    color: var(--text-muted);
    font-size: 14px;
}

.search-tag-results-head {
    padding: 14px 16px 6px;
    border-bottom: 1px solid var(--social-border);
}

.search-tag-results-head h2 {
    margin: 0;
    font-size: 20px;
}

.mobile-global-search {
    display: none;
    padding: 8px 16px 0;
    border-bottom: 1px solid var(--social-border);
}

.mobile-global-search-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 999px;
    background: var(--social-hover);
    border: 1px solid var(--social-border);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 15px;
}

.mobile-global-search-link svg {
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    .mobile-global-search {
        display: block;
    }

    .post-actions-icon {
        width: 32px;
        height: 32px;
    }

    .post-actions-icon svg {
        width: 17px;
        height: 17px;
    }

    .post-repost-header {
        padding-left: 16px;
    }

    .search-hero {
        top: var(--header-mobile);
    }
}

@media (min-width: 1101px) {
    .search-hero {
        border-radius: 0;
    }

    .post-actions {
        max-width: 100%;
    }
}

/* Midday features: badges, pin, invite, reels */
.identity-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.1em;
    max-width: 100%;
    line-height: inherit;
    vertical-align: baseline;
}

.user-badges {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
}

:root {
    --user-badge-emoji-size: 1em;
    --user-badge-emoji-size-profile: 1.125em;
    --user-badge-size-settings: 72px;
}

.user-badge-emoji,
.user-badge-icon {
    display: block;
    width: var(--user-badge-emoji-size);
    height: var(--user-badge-emoji-size);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    object-fit: contain;
    object-position: center center;
    flex: none;
}

.profile-title .user-badge-emoji,
.profile-title .user-badge-icon {
    width: var(--user-badge-emoji-size-profile);
    height: var(--user-badge-emoji-size-profile);
}

.profile-title .user-badge-tip-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--user-badge-emoji-size-profile);
    height: var(--user-badge-emoji-size-profile);
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    flex: none;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
}

.profile-title .user-badge-tip-btn .user-badge-emoji,
.profile-title .user-badge-tip-btn .user-badge-icon {
    width: 100%;
    height: 100%;
    margin: 0;
}

.profile-title .user-badge-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(18, 22, 28, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f3f6fa;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
    z-index: 4;
}

.profile-title .user-badge-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(18, 22, 28, 0.96);
}

.profile-title .user-badge-tip-btn:hover .user-badge-tip,
.profile-title .user-badge-tip-btn:focus-visible .user-badge-tip,
.profile-title .user-badge-tip-btn.is-tip-open .user-badge-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.post-author .user-badges,
.notification-actor-link .user-badges,
.dm-thread-name .user-badges,
.profile-title .user-badges {
    margin-left: 0;
}

.settings-option--badge {
    align-items: center;
}

.settings-option--badge .settings-invite-progress-bar {
    margin-top: 10px;
    max-width: 100%;
}

.settings-badge-thumb {
    flex-shrink: 0;
    width: var(--user-badge-size-settings);
    height: var(--user-badge-size-settings);
    object-fit: contain;
    object-position: center;
    align-self: center;
    border: 0;
    background: transparent;
}

.settings-option--goal {
    align-items: center;
}

.settings-option--goal .settings-option-copy {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-goal-check {
    flex: 0 0 22px;
    text-align: center;
    font-weight: 700;
    color: var(--text-muted);
}

.settings-option--goal.is-done .settings-goal-check {
    color: #8fd3ff;
}

.settings-goal-link {
    color: inherit;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

a.settings-goal-link:hover {
    color: var(--social-blue);
}

.settings-goal-status {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.settings-option--goal.is-done .settings-goal-status {
    color: #8fd3ff;
}

.settings-option--field {
    align-items: flex-start;
}

.settings-option--field .settings-invite-input {
    margin-top: 10px;
}

.settings-option--field .settings-invite-copy {
    flex-shrink: 0;
    align-self: center;
    min-height: 36px;
}

.settings-option--note {
    align-items: flex-start;
}

.settings-option-list {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.settings-option-list li + li {
    margin-top: 6px;
}

.settings-invite-stat {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.settings-invite-earned {
    color: #c4b5fd;
    font-weight: 600;
}

.settings-invite-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.settings-invite-progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

.settings-invite-hint {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.profile-edit-badges-field {
    margin-top: 4px;
}

.profile-edit-badges-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.profile-edit-badge-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    cursor: pointer;
    font-size: 13px;
}

.profile-edit-badge-option.is-selected {
    border-color: rgba(33, 152, 255, 0.45);
    background: rgba(33, 152, 255, 0.12);
}

.profile-edit-badge-option img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border: 0;
    background: transparent;
}

.creator-badge-chip {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #8fd3ff;
    background: rgba(33, 152, 255, 0.14);
    border: 1px solid rgba(33, 152, 255, 0.35);
    vertical-align: middle;
}

.creator-badge-card {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.02);
}

.creator-badge-card.is-earned {
    border-color: rgba(33, 152, 255, 0.35);
    background: rgba(33, 152, 255, 0.08);
}

.creator-badge-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.creator-badge-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(33, 152, 255, 0.16);
    color: #8fd3ff;
    font-size: 16px;
}

.creator-badge-title {
    display: block;
    font-size: 14px;
}

.creator-badge-status {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}

.creator-badge-goals {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.creator-badge-goal-link {
    display: grid;
    gap: 4px;
    text-decoration: none;
    color: inherit;
}

.creator-badge-goal-label {
    font-size: 13px;
}

.creator-badge-goal-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.creator-badge-goal-bar {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.creator-badge-goal-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2198ff, #00bbff);
}

.creator-badge-goal.is-done .creator-badge-goal-label {
    color: #8fd3ff;
}

.post-pinned-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #f5d565;
    background: rgba(245, 213, 101, 0.12);
    border: 1px solid rgba(245, 213, 101, 0.28);
}

.post-card-pinned {
    border-color: rgba(245, 213, 101, 0.22);
}

.settings-invite-card {
    display: grid;
    gap: 12px;
}

.settings-invite-label {
    font-size: 13px;
    color: var(--text-muted);
}

.settings-invite-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-invite-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--social-border);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    font-size: 14px;
}

.settings-invite-row .btn {
    flex-shrink: 0;
    min-height: 40px;
}

.settings-invite-meta,
.settings-invite-code {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

body.reels-page {
    background: var(--bg);
    overflow: hidden;
}

body.reels-page .page {
    background: var(--bg);
}

body.reels-page .layout-reels {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    min-height: calc(100dvh - var(--header-mobile) - var(--nav-mobile));
    background: var(--bg);
}

.layout-reels .main-content {
    max-width: none;
    width: 100%;
    padding: 0;
    border-left: 0;
    border-right: 0;
    background: var(--bg);
}

.reels-main {
    position: relative;
    background: var(--bg);
    overflow: hidden;
}

.reels-desktop-upload {
    display: none;
}

.reel-upload-toggle {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    display: grid;
    place-items: center;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.reel-upload-toggle:hover,
.reel-upload-toggle:focus-visible {
    background: var(--social-hover);
    color: #fff;
}

.reel-upload-toggle svg {
    display: block;
}

.reels-empty-card {
    margin: 24px 16px;
    text-align: center;
}

.reels-empty-upload {
    margin-top: 12px;
}

.reels-viewer {
    height: calc(100dvh - var(--header-mobile) - var(--nav-mobile) - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reels-viewer::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.reel-mute-toggle {
    position: fixed;
    z-index: 24;
    top: calc(var(--header-mobile) + max(8px, env(safe-area-inset-top, 0px)));
    left: max(12px, env(safe-area-inset-left, 0px));
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: background 0.18s ease, transform 0.14s ease;
    -webkit-tap-highlight-color: transparent;
}

.reel-mute-toggle:active {
    transform: scale(0.94);
}

.reel-mute-toggle.is-unmuted {
    color: var(--social-blue);
    background: rgba(29, 155, 240, 0.18);
    border-color: rgba(29, 155, 240, 0.38);
}

.reel-mute-icon {
    display: none;
    width: 20px;
    height: 20px;
}

.reel-mute-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.reel-mute-toggle:not(.is-unmuted) .reel-mute-icon-muted,
.reel-mute-toggle.is-unmuted .reel-mute-icon-unmuted {
    display: block;
}

.reel-slide {
    position: relative;
    height: calc(100dvh - var(--header-mobile) - var(--nav-mobile) - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
    min-height: calc(100dvh - var(--header-mobile) - var(--nav-mobile) - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: var(--bg);
    overflow: hidden;
}

.reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background: var(--bg);
    cursor: pointer;
    pointer-events: auto;
}

.reel-chrome {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.reel-top-bar {
    position: absolute;
    top: max(10px, env(safe-area-inset-top, 0px));
    right: 10px;
    left: auto;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.reel-post-menu {
    pointer-events: auto;
}

.reel-post-menu .post-menu-trigger {
    width: 40px;
    height: 40px;
    color: #fff;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.reel-post-menu .post-menu-trigger:hover,
.reel-post-menu.open .post-menu-trigger {
    color: #fff;
    background: rgba(0, 0, 0, 0.62);
}

.reel-post-menu .post-menu-trigger svg {
    width: 20px;
    height: 20px;
}

.reel-post-menu .post-menu-panel {
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
}

.reel-side-rail {
    position: absolute;
    right: 8px;
    bottom: max(108px, calc(96px + env(safe-area-inset-bottom, 0px)));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    pointer-events: none;
}

.reel-side-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 52px;
    color: #fff;
    text-align: center;
    pointer-events: auto;
}

.reel-side-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    cursor: pointer;
    font: inherit;
    transition: color 0.18s ease, transform 0.14s ease;
    -webkit-tap-highlight-color: transparent;
}

.reel-side-btn:active {
    transform: scale(0.94);
}

.reel-side-chip {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.reel-side-chip .post-actions-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: color 0.18s ease, filter 0.18s ease;
}

.reel-side-chip .post-actions-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    display: block;
}

.reel-side-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    min-height: 14px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
    font-variant-numeric: tabular-nums;
}

.reel-side-label:empty {
    display: none;
}

.reel-side-like.post-actions-like .reel-side-btn:hover,
.reel-side-like.post-actions-like .reel-side-btn:focus-visible {
    color: var(--social-like-active);
}

.reel-side-like.post-actions-like .like-button.is-liked,
.reel-side-like.post-actions-like .like-button.is-liked .post-actions-icon,
.reel-side-like.post-actions-like .like-button.is-liked .post-actions-icon svg {
    color: var(--social-like-active);
}

.reel-side-like.post-actions-like .like-button.is-liked .reel-side-chip {
    background: rgba(249, 24, 128, 0.18);
    border-color: rgba(249, 24, 128, 0.45);
    box-shadow: 0 0 20px rgba(249, 24, 128, 0.28);
}

.reel-side-repost.post-actions-repost .reel-side-btn:hover,
.reel-side-repost.post-actions-repost .reel-side-btn:focus-visible,
.reel-side-repost.post-actions-repost .repost-trigger.is-reposted,
.reel-side-repost.post-actions-repost .repost-trigger.is-reposted .post-actions-icon,
.reel-side-repost.post-actions-repost .repost-trigger.is-reposted .post-actions-icon svg {
    color: var(--social-repost);
}

.reel-side-repost.post-actions-repost .repost-trigger.is-reposted .reel-side-chip {
    background: rgba(0, 186, 124, 0.16);
    border-color: rgba(0, 186, 124, 0.42);
    box-shadow: 0 0 20px rgba(0, 186, 124, 0.24);
}

.reel-side-bookmark.post-actions-bookmark .reel-side-btn:hover,
.reel-side-bookmark.post-actions-bookmark .reel-side-btn:focus-visible {
    color: var(--social-bookmark);
}

.reel-side-bookmark.post-actions-bookmark .bookmark-btn.is-bookmarked,
.reel-side-bookmark.post-actions-bookmark .bookmark-btn.is-bookmarked .post-actions-icon,
.reel-side-bookmark.post-actions-bookmark .bookmark-btn.is-bookmarked .post-actions-icon svg {
    color: var(--social-bookmark);
}

.reel-side-bookmark.post-actions-bookmark .bookmark-btn.is-bookmarked .reel-side-chip {
    background: rgba(255, 212, 0, 0.16);
    border-color: rgba(255, 212, 0, 0.42);
    box-shadow: 0 0 20px rgba(255, 212, 0, 0.22);
}

.reel-side-views.post-actions-views .reel-side-chip {
    color: #fff;
}

.reel-side-repost.post-repost-wrap {
    position: relative;
}

.reel-side-repost .repost-menu {
    bottom: calc(100% + 8px);
    left: auto;
    right: 0;
    transform: none;
    min-width: 168px;
}

.reel-overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 16px 72px 24px 16px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.reel-overlay a,
.reel-overlay button,
.reel-overlay form {
    pointer-events: auto;
}

.reel-author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

.reel-author .reel-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

.reel-caption {
    margin: 0;
    color: #f2f6fb;
    font-size: 14px;
    line-height: 1.4;
    max-height: 4.2em;
    overflow: hidden;
}

/* Reel comments sheet (TikTok-style overlay) */
.reel-comments-sheet {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    pointer-events: none;
}

.reel-comments-sheet.open {
    display: block;
    pointer-events: auto;
}

body.reels-comments-open {
    overflow: hidden;
    touch-action: none;
}

.reel-comments-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.reel-comments-panel {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0;
    width: min(420px, calc(100% - 16px));
    max-width: 420px;
    max-height: min(78dvh, 640px);
    display: flex;
    flex-direction: column;
    background: var(--card-bg-panel);
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--social-border);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, 100%);
    transition: transform 0.24s ease;
    box-sizing: border-box;
}

.reel-comments-sheet.open .reel-comments-panel {
    transform: translate(-50%, 0);
}

.reel-comments-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--social-border);
    flex-shrink: 0;
}

.reel-comments-handle {
    width: 40px;
    height: 4px;
    margin: 2px auto 10px;
    border-radius: 999px;
    background: var(--drag-handle);
    flex-shrink: 0;
}

.reel-comments-head-row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 44px;
}

.reel-comments-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.reel-comments-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.reel-comments-close:hover {
    background: var(--social-hover);
    color: var(--text);
}

.reel-comments-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.reel-comments-list {
    padding: 8px 12px 12px;
}

.reel-comments-list .post-thread-main {
    margin: 0;
}

.reel-comments-list .reply-card {
    border-bottom: 1px solid rgba(47, 51, 54, 0.55);
    padding: 10px 4px;
}

.reel-comments-loading,
.reel-comments-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.reel-comments-compose {
    flex-shrink: 0;
    border-top: 1px solid var(--social-border);
    background: var(--card-bg-panel);
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}

.reel-comments-form.reply-modal-form {
    margin: 0;
}

.reel-comments-form .reply-modal-form-inner {
    gap: 8px;
}

.reel-comments-form .reply-modal-editor {
    align-items: flex-end;
}

.reel-comments-form .comment-textarea {
    min-height: 44px;
    max-height: 120px;
    font-size: 16px;
}

.reel-comments-form .reply-modal-foot {
    padding-top: 4px;
}

.reel-comments-login {
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

.reel-comments-login a {
    color: var(--social-blue);
    font-weight: 600;
}

@media (max-width: 600px) {
    body.reels-page .reel-comments-panel {
        width: min(420px, calc(100% - 12px));
        max-height: min(72dvh, 520px);
        border-radius: 14px 14px 0 0;
    }

    body.reels-page .reel-comments-list {
        padding: 6px 10px 10px;
    }

    body.reels-page .reel-comments-list .reply-card {
        padding: 12px 2px;
    }

    body.reels-page .reel-comments-compose {
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 1101px) {
    body.reels-page .reel-comments-panel {
        left: calc(var(--content-offset) + (var(--feed-width) / 2));
        width: min(420px, 100%);
    }
}

/* Watch stats (admin / owner / post author) */
.reel-views-stats,
.post-views-stats-btn,
.profile-reel-views-stats {
    cursor: pointer;
}

.reel-views-stats:focus-visible,
.post-views-stats-btn:focus-visible,
.profile-reel-views-stats:focus-visible {
    outline: 2px solid var(--social-blue);
    outline-offset: 2px;
}

.view-stats-modal {
    position: fixed;
    inset: 0;
    z-index: 800;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top, 0));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0));
    padding-left: max(16px, env(safe-area-inset-left, 0));
    padding-right: max(16px, env(safe-area-inset-right, 0));
    box-sizing: border-box;
    pointer-events: none;
}

.view-stats-modal.open {
    display: flex;
    pointer-events: auto;
}

body.view-stats-open {
    overflow: hidden;
    touch-action: none;
}

body.view-stats-open .right-panel,
body.view-stats-open .trending-panel,
body.view-stats-open .reel-side-rail,
body.view-stats-open .reel-mute-toggle {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.view-stats-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.view-stats-card {
    position: relative;
    z-index: 1;
    width: min(480px, 100%);
    max-height: min(88dvh, 680px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--card-bg-panel);
    border: 1px solid var(--social-border);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.view-stats-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--social-border);
    position: sticky;
    top: 0;
    background: var(--card-bg-panel);
    z-index: 1;
}

.view-stats-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.view-stats-close {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.view-stats-close:hover {
    background: var(--social-hover);
    color: var(--text);
}

.view-stats-body {
    padding: 16px 18px 20px;
}

.view-stats-loading,
.view-stats-empty,
.view-stats-error {
    margin: 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.view-stats-error {
    color: #f4212e;
}

.view-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.view-stats-metric {
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(47, 51, 54, 0.65);
}

.view-stats-metric-val {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.view-stats-metric-label {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.view-stats-section {
    margin-top: 18px;
}

.view-stats-section h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.view-stats-dist-row + .view-stats-dist-row {
    margin-top: 10px;
}

.view-stats-dist-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.view-stats-dist-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.view-stats-dist-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1d9bf0, #6bc9ff);
}

@media (max-width: 480px) {
    .view-stats-grid {
        grid-template-columns: 1fr;
    }
}



.post-reel-badge,
.post-reel-embed-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

.post-reel-badge-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    opacity: 0.9;
}

.post-reel-badge-icon svg {
    width: 14px;
    height: 14px;
}

.post-reel-badge-icon svg.reels-icon {
    stroke-width: 2;
}

.post-card-reel .post-card-open-zone {
    cursor: pointer;
}

.post-reel-embed {
    display: grid;
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--card-bg-panel);
    text-decoration: none;
    color: inherit;
    max-width: 280px;
}

.post-reel-embed-media {
    position: relative;
    aspect-ratio: 9 / 16;
    background: var(--bg);
    overflow: hidden;
}

.post-reel-embed-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-reel-embed-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
}

.post-reel-embed-path {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-reels-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
}

.profile-reel-tile {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: var(--bg);
    display: block;
}

.profile-reel-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-reel-views {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.profile-reel-views-icon {
    flex-shrink: 0;
    opacity: 0.95;
}

.post-chooser-modal,
.reel-upload-modal {
    position: fixed;
    inset: 0;
    z-index: 420;
    display: none;
    box-sizing: border-box;
}

.post-chooser-modal.open,
.reel-upload-modal.open {
    display: flex;
}

.post-chooser-modal {
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top, 0));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0));
}

.post-chooser-backdrop,
.reel-upload-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(91, 112, 131, 0.45);
}

.post-chooser-card,
.reel-upload-card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: var(--bg);
    border: 1px solid var(--social-border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
    overflow: hidden;
}

.post-chooser-head,
.reel-upload-head {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    min-height: 53px;
    border-bottom: 1px solid var(--social-border);
}

.post-chooser-title,
.reel-upload-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    justify-self: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-chooser-close,
.reel-upload-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.post-chooser-options {
    display: grid;
    gap: 1px;
    background: var(--social-border);
}

.post-chooser-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    border: 0;
    background: var(--bg);
    color: var(--text);
    text-align: left;
    padding: 16px;
    cursor: pointer;
}

.post-chooser-option:hover {
    background: var(--social-hover);
}

.post-chooser-option-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(29, 155, 240, 0.15);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.post-chooser-option-icon svg {
    width: 22px;
    height: 22px;
}

.post-chooser-option-icon-reel {
    background: rgba(255, 107, 138, 0.15);
    color: #ff6b8a;
}

.post-chooser-option-text {
    display: grid;
    gap: 2px;
}

.post-chooser-option-text strong {
    font-size: 16px;
}

.post-chooser-option-text span {
    font-size: 13px;
    color: var(--text-muted);
}

.reel-upload-modal {
    align-items: flex-start;
    justify-content: center;
    padding: max(16px, 4vh) 16px;
}

.reel-upload-card {
    width: min(520px, 100%);
    max-height: min(92vh, 860px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.reel-upload-handle {
    display: none;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: rgba(231, 233, 234, 0.28);
    flex-shrink: 0;
}

.reel-upload-submit {
    border: 0;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    min-height: 36px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.reel-upload-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.reel-upload-form {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    touch-action: pan-y;
}

.reel-upload-stage-wrap {
    padding: 16px;
}

.reel-upload-dropzone {
    border: 2px dashed var(--social-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    min-height: 220px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 20px;
}

.reel-upload-dropzone.is-dragover {
    border-color: var(--accent);
    background: rgba(29, 155, 240, 0.08);
}

.reel-upload-dropzone-inner {
    display: grid;
    gap: 8px;
    color: var(--text-muted);
}

.reel-upload-drop-icon svg {
    width: 40px;
    height: 40px;
    color: var(--accent);
}

.reel-upload-browse {
    border: 0;
    background: none;
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
    padding: 4px 2px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.reel-upload-hint {
    margin: 0;
    font-size: 12px;
}

.reel-upload-preview-frame {
    position: relative;
    width: min(280px, 100%);
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg);
    touch-action: none;
    cursor: grab;
}

.reel-upload-preview-frame:active {
    cursor: grabbing;
}

.reel-upload-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background: var(--bg);
}

.reel-upload-preview-hint,
.reel-upload-preview {
    text-align: center;
}

.reel-upload-preview-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.reel-upload-change {
    margin-top: 10px;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
    padding: 8px 12px;
    -webkit-tap-highlight-color: transparent;
}

.reel-upload-fields {
    display: grid;
    gap: 12px;
    padding: 0 16px 16px;
}

.reel-upload-field {
    display: grid;
    gap: 6px;
}

.reel-upload-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.reel-upload-label-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.reel-upload-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.reel-upload-dropzone {
    cursor: pointer;
}

.reel-upload-field input,
.reel-upload-field textarea {
    width: 100%;
    border: 1px solid var(--social-border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.35;
    resize: vertical;
    box-sizing: border-box;
}

.reel-upload-field input {
    min-height: 44px;
}

.reel-upload-field textarea {
    min-height: 88px;
}

@media (min-width: 1101px) {
    body.reels-page {
        overflow: hidden;
        background: var(--bg);
    }

    body.reels-page .layout-reels {
        display: grid;
        grid-template-columns: minmax(0, var(--feed-width));
        width: var(--feed-width);
        max-width: calc(100% - var(--content-offset));
        margin-left: var(--content-offset);
        min-height: 100vh;
        background: transparent;
    }

    body.reels-page .layout-reels .main-content {
        width: 100%;
        max-width: var(--feed-width);
        border-left: 1px solid var(--social-border);
        border-right: 1px solid var(--social-border);
        background: var(--bg);
    }

    body.reels-page .reels-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    body.reels-page .reels-desktop-upload {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: min(420px, 100%);
        max-width: 420px;
        margin: 0 auto;
        padding: 10px 10px 0;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    body.reels-page .reels-viewer {
        width: min(420px, 100%);
        max-width: 420px;
        margin: 0 auto;
        height: calc(100vh - 52px);
        border-left: 1px solid var(--social-border);
        border-right: 1px solid var(--social-border);
        box-sizing: border-box;
    }

    body.reels-page .reel-slide {
        height: calc(100vh - 52px);
        min-height: calc(100vh - 52px);
    }

    body.reels-page .reel-video {
        object-fit: cover;
    }

    body.reels-page .reel-mute-toggle {
        position: absolute;
        top: 16px;
        left: max(12px, calc(50% - 210px + 12px));
    }
}

body.post-chooser-open,
body.reel-upload-open,
body.composer-open {
    overflow: hidden;
    touch-action: none;
}

.post-chooser-option-icon .reels-icon {
    width: 22px;
    height: 22px;
    display: block;
}

.mobile-header-action .reels-icon {
    width: 22px;
    height: 22px;
    display: block;
}

@media (max-width: 1100px) {
    body.reels-page .reels-page-head {
        display: none;
    }

    body.reels-page .page {
        padding-bottom: 0;
    }

    body.reels-page .layout-reels,
    body.reels-page .reels-main {
        min-height: calc(100dvh - var(--header-mobile) - var(--nav-mobile));
    }

    body.reels-page .reels-viewer,
    body.reels-page .reel-slide {
        height: calc(100dvh - var(--header-mobile) - var(--nav-mobile));
        min-height: calc(100dvh - var(--header-mobile) - var(--nav-mobile));
    }

    body.reels-page .reel-overlay {
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
        padding-right: 68px;
    }

    body.reels-page .reel-side-rail {
        bottom: max(88px, calc(80px + env(safe-area-inset-bottom, 0px)));
    }

    .reel-mute-toggle {
        top: calc(var(--header-mobile) + max(6px, env(safe-area-inset-top, 0px)));
        left: max(10px, env(safe-area-inset-left, 0px));
    }

    .post-chooser-modal,
    .reel-upload-modal,
    .composer-modal {
        align-items: flex-end;
        justify-content: center;
        padding: 0;
    }

    .post-chooser-modal {
        padding-top: env(safe-area-inset-top, 0);
    }

    .reel-upload-modal,
    .composer-modal {
        padding-top: 0;
        padding-left: 6px;
        padding-right: 6px;
        padding-bottom: 0;
    }

    .post-chooser-card,
    .composer-card {
        width: min(520px, calc(100% - 12px));
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        margin: 0 auto;
    }

    .reel-upload-card {
        width: min(520px, calc(100% - 12px));
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        margin: 0 auto;
        max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 4px));
    }

    .reel-upload-handle {
        display: block;
    }

    .reel-upload-head {
        min-height: 48px;
        padding: 2px 8px 8px;
        grid-template-columns: 44px 1fr auto;
    }

    .reel-upload-close {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .reel-upload-title {
        font-size: 17px;
    }

    .reel-upload-submit {
        min-height: 40px;
        padding: 10px 18px;
        font-size: 15px;
    }

    .reel-upload-stage-wrap {
        padding: 12px;
    }

    .reel-upload-dropzone {
        min-height: 168px;
        padding: 16px 12px;
    }

    .reel-upload-preview-frame {
        width: min(240px, 72vw);
    }

    .reel-upload-fields {
        padding: 0 12px calc(14px + env(safe-area-inset-bottom, 0px));
        gap: 14px;
    }

    .composer-card {
        max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px)));
    }

    .post-chooser-card {
        max-height: min(80dvh, calc(100dvh - env(safe-area-inset-top, 0px)));
    }

    .composer-modal {
        padding-bottom: 0;
    }

    .reply-modal,
    .report-modal {
        padding-left: 6px;
        padding-right: 6px;
        padding-bottom: 0;
        align-items: flex-end;
        justify-content: center;
    }

    .view-stats-modal {
        padding: 12px;
        padding-top: max(12px, env(safe-area-inset-top, 0));
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0));
        align-items: center;
        justify-content: center;
    }

    .reply-modal-card,
    .report-modal-card {
        width: min(520px, calc(100% - 12px));
        max-width: 100%;
        margin: 0 auto;
        border-radius: 16px 16px 0 0;
        max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px)));
    }

    .view-stats-card {
        width: min(480px, calc(100% - 24px));
        max-width: 100%;
        margin: 0;
        border-radius: 16px;
        max-height: min(88dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px));
    }

    .confirm-modal,
    .new-message-modal,
    .repost-quote-modal {
        align-items: flex-end;
        justify-content: center;
        padding: 0 6px;
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: 0;
    }

    .confirm-modal .confirm-card,
    .new-message-modal .new-message-card,
    .repost-quote-modal .repost-quote-card {
        width: min(520px, calc(100% - 12px));
        max-width: 100%;
        margin: 0 auto;
        border-radius: 16px 16px 0 0;
        max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px)));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .reply-modal-close,
    .report-modal-close,
    .composer-close,
    .post-chooser-close,
    .view-stats-close,
    .repost-quote-close {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .report-field select,
    .report-field textarea,
    .reply-modal-textarea,
    .reply-modal-form .comment-textarea,
    .composer-modal .composer-textarea {
        font-size: 16px;
    }

    .report-modal-card {
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    .reply-modal-card {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mobile-nav-items-6 .mobile-nav-icon {
        width: 24px;
        height: 24px;
    }

    .mobile-nav-items-6 .mobile-nav-icon.portal-icon,
    .mobile-nav-items-6 .mobile-nav-icon.reels-icon,
    .mobile-nav-items-6 .mobile-nav-portal .mobile-nav-icon {
        width: 26px;
        height: 26px;
    }

    .mobile-nav-items-6 .mobile-nav-profile,
    .mobile-nav-items-6 .mobile-nav-profile img,
    .mobile-nav-items-6 .mobile-nav-profile .author-avatar {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 600px) {
    .reel-upload-modal {
        align-items: flex-end;
    }

    .reel-upload-card {
        width: min(520px, calc(100% - 8px));
        max-height: min(88dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
        border-radius: 14px 14px 0 0;
    }

    .reel-upload-dropzone {
        min-height: 148px;
    }

    .reel-upload-dropzone-inner strong {
        font-size: 15px;
    }

    .reel-upload-hint,
    .reel-upload-preview-hint {
        font-size: 11px;
        line-height: 1.4;
    }
}

/* Light theme polish: inputs, shells, and remaining surfaces */
html[data-theme="light"] .page,
html[data-theme="light"] .layout-grid,
html[data-theme="light"] .main-content,
html[data-theme="light"] .search-main,
html[data-theme="light"] .right-panel,
html[data-theme="light"] .trending-panel,
html[data-theme="light"] .suggestions-panel,
html[data-theme="light"] .post-card,
html[data-theme="light"] .dm-list-panel,
html[data-theme="light"] .dm-thread-panel,
html[data-theme="light"] .dm-thread-empty,
html[data-theme="light"] .settings-nav-panel,
html[data-theme="light"] .settings-detail-panel,
html[data-theme="light"] .layout-portal .portal-main,
html[data-theme="light"] .search-results-panel,
html[data-theme="light"] .notifications-list {
    color: var(--text);
}

html[data-theme="light"] .trends-card,
html[data-theme="light"] .trending-tag-pill,
html[data-theme="light"] .suggestions-mobile-discover,
html[data-theme="light"] .mention-autocomplete,
html[data-theme="light"] .dm-react-bar,
html[data-theme="light"] .adm-role,
html[data-theme="light"] .adm-stat,
html[data-theme="light"] .adm-stat-highlight,
html[data-theme="light"] .adm-seg,
html[data-theme="light"] .reel-comments-panel,
html[data-theme="light"] .reel-comments-compose,
html[data-theme="light"] .grow-connect-panel-inner,
html[data-theme="light"] .grow-guide,
html[data-theme="light"] .grow-field--url,
html[data-theme="light"] .portal-kit-card,
html[data-theme="light"] .portal-scene-card {
    background: var(--card-bg);
    color: var(--text);
}

html[data-theme="light"] .feed-composer:focus-within,
html[data-theme="light"] .dm-chat-profile,
html[data-theme="light"] .dm-convo-item:hover,
html[data-theme="light"] .dm-convo-item.active,
html[data-theme="light"] .notification-row:hover,
html[data-theme="light"] .notification-row.unread,
html[data-theme="light"] .settings-nav-item:hover,
html[data-theme="light"] .settings-nav-item.is-active,
html[data-theme="light"] .trending-mobile-post:hover,
html[data-theme="light"] .suggestion-row-profile:hover,
html[data-theme="light"] .trend-row:hover,
html[data-theme="light"] .new-message-item:hover,
html[data-theme="light"] .dm-new-btn:hover,
html[data-theme="light"] .mention-autocomplete-item:hover {
    background: var(--surface-faint);
}

html[data-theme="light"] .composer-card,
html[data-theme="light"] .news-composer-hint,
html[data-theme="light"] .grow-settings-panel,
html[data-theme="light"] .blocked-users-card,
html[data-theme="light"] .connection-modal-card,
html[data-theme="light"] .confirm-card,
html[data-theme="light"] .new-message-card,
html[data-theme="light"] .repost-quote-card,
html[data-theme="light"] .reply-modal-card,
html[data-theme="light"] .report-modal-card,
html[data-theme="light"] .gif-picker,
html[data-theme="light"] .emoji-picker,
html[data-theme="light"] .view-stats-card,
html[data-theme="light"] .post-chooser-card,
html[data-theme="light"] .reel-upload-card,
html[data-theme="light"] .profile-edit-card,
html[data-theme="light"] .news-composer-modal .composer-card,
html[data-theme="light"] .sidebar-account-menu,
html[data-theme="light"] .profile-actions-menu,
html[data-theme="light"] .dm-edit-card {
    background: var(--bg);
    color: var(--text);
    box-shadow: var(--shadow-elevated);
}

html[data-theme="light"] .grow-connect,
html[data-theme="light"] .grow-task-card,
html[data-theme="light"] .grow-review-card,
html[data-theme="light"] .grow-create-form,
html[data-theme="light"] .grow-connect-card,
html[data-theme="light"] .grow-pick-inner,
html[data-theme="light"] .grow-trust-pill {
    color: var(--text);
}

html[data-theme="light"] .dm-new-btn,
html[data-theme="light"] .dm-new-btn svg,
html[data-theme="light"] .mobile-header-action,
html[data-theme="light"] .sidebar-item .icon {
    color: var(--text);
}

html[data-theme="light"] .mobile-nav-item {
    color: var(--text-muted);
}

html[data-theme="light"] .mobile-nav-item:hover {
    color: var(--text);
}

html[data-theme="light"] .mobile-nav-item.active {
    color: var(--accent, #1d9bf0);
}

html[data-theme="light"] .settings-toggle-track {
    background: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .settings-toggle-input:checked + .settings-toggle-track {
    background: var(--social-blue);
    border-color: var(--social-blue);
}

html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .settings-invite-copy.btn-secondary,
html[data-theme="light"] .dm-edit-foot .btn-secondary {
    background: var(--bg);
    color: var(--text);
    border-color: var(--social-border);
}

html[data-theme="light"] .btn-secondary:hover {
    background: var(--social-hover);
}

html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-follow-toggle.is-follow,
html[data-theme="light"] .dm-thread-empty .btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-follow-toggle.is-follow:hover {
    background: var(--btn-primary-hover);
}

html[data-theme="light"] .dm-msg.incoming .dm-bubble,
html[data-theme="light"] .support-chat-bubble.incoming {
    background: var(--surface-subtle);
    color: var(--text);
}

html[data-theme="light"] .dm-compose-wrap,
html[data-theme="light"] .dm-compose-bar,
html[data-theme="light"] .community-compose-bar,
html[data-theme="light"] .dm-list-head,
html[data-theme="light"] .dm-thread-head,
html[data-theme="light"] .settings-nav-head,
html[data-theme="light"] .settings-detail-head,
html[data-theme="light"] .mobile-header,
html[data-theme="light"] .top-tabs {
    background: var(--bg-glass);
    color: var(--text);
    border-color: var(--social-border);
}

html[data-theme="light"] .dm-compose-input,
html[data-theme="light"] .dm-compose textarea,
html[data-theme="light"] .feed-composer textarea,
html[data-theme="light"] .composer-textarea,
html[data-theme="light"] .comment-textarea,
html[data-theme="light"] .reply-modal-textarea,
html[data-theme="light"] .dm-edit-textarea,
html[data-theme="light"] .report-field textarea,
html[data-theme="light"] .report-field input,
html[data-theme="light"] .new-message-search,
html[data-theme="light"] .dm-search input,
html[data-theme="light"] .trends-search-link,
html[data-theme="light"] .grow-form input,
html[data-theme="light"] .grow-form textarea,
html[data-theme="light"] .grow-form select,
html[data-theme="light"] .settings-invite-input,
html[data-theme="light"] .settings-field-select,
html[data-theme="light"] .connection-modal-body input,
html[data-theme="light"] .news-composer-name-input,
html[data-theme="light"] .search-page-input,
html[data-theme="light"] .search-form-field,
html[data-theme="light"] .search-form-input,
html[data-theme="light"] .portal-search-input {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--social-border);
}

html[data-theme="light"] .dm-compose-input:focus,
html[data-theme="light"] .feed-composer textarea:focus,
html[data-theme="light"] .composer-textarea:focus,
html[data-theme="light"] .dm-search input:focus,
html[data-theme="light"] .new-message-search:focus,
html[data-theme="light"] .settings-field-select:focus,
html[data-theme="light"] .settings-invite-input:focus,
html[data-theme="light"] .trends-search-link:focus {
    background: var(--input-bg-focus);
}

html[data-theme="light"] .page-heading,
html[data-theme="light"] .tag-header,
html[data-theme="light"] .discovery-feed-head,
html[data-theme="light"] .profile-banner-wrap,
html[data-theme="light"] .profile-tabs,
html[data-theme="light"] .grow-page-heading,
html[data-theme="light"] .grow-platform-tabs,
html[data-theme="light"] .grow-platform-bar,
html[data-theme="light"] .grow-tabs,
html[data-theme="light"] .search-hero,
html[data-theme="light"] .profile-edit-head,
html[data-theme="light"] .admin-mobile-head {
    background: var(--bg-glass);
    color: var(--text);
}

html[data-theme="light"] .search-hero {
    background: var(--bg-glass-strong);
}

html[data-theme="light"] .search-form-field {
    background: var(--input-bg);
}

html[data-theme="light"] .search-type-tab:hover,
html[data-theme="light"] .search-people-row:hover,
html[data-theme="light"] .search-tag-row:hover {
    background: var(--social-hover);
}

html[data-theme="light"] .dm-day-divider-label,
html[data-theme="light"] .dm-day-float-label,
html[data-theme="light"] .dm-jump-present,
html[data-theme="light"] .pwa-push-banner-inner,
html[data-theme="light"] .pwa-install-banner-inner,
html[data-theme="light"] .profile-edit-foot {
    background: var(--card-bg);
    color: var(--text);
    border-color: var(--social-border);
}

html[data-theme="light"] .post-thread-feed {
    background: var(--bg);
}

html[data-theme="light"] .post-action-btn,
html[data-theme="light"] .post-actions-btn {
    color: var(--text-muted);
}

html[data-theme="light"] .post-action-btn:hover,
html[data-theme="light"] .post-actions-btn:hover {
    color: var(--text);
    background: var(--social-hover);
}

html[data-theme="light"] .mobile-sidebar-panel,
html[data-theme="light"].pwa-installed .mobile-header {
    background: var(--bg);
}

html[data-theme="light"] .mobile-nav,
html[data-theme="light"].pwa-installed .mobile-nav {
    background: var(--bg-glass, var(--bg));
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html[data-theme="light"] .mobile-nav,
    html[data-theme="light"].pwa-installed .mobile-nav {
        background: var(--bg);
    }
}

html[data-theme="light"] .pwa-page-splash,
html[data-theme="light"] .email-verify-banner,
html[data-theme="light"] .flash-banner {
    background: var(--bg);
    color: var(--text);
}

/* Social mobile/PWA — every page (signed-in, signed-out, home, profile, portal, etc.) fits viewport on load */
@media (max-width: 1100px) {
    html,
    body.social-page,
    body.social-portal-page {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body.social-page .page,
    body.social-page .layout-grid,
    body.social-page .layout-grid > *,
    body.social-page .main-content,
    body.social-page .right-panel,
    body.social-page .mobile-header,
    body.social-page .mobile-nav,
    body.social-portal-page .portal-main-content,
    body.social-portal-page .layout-grid.layout-portal {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    body.social-page .layout-grid.layout-post,
    body.social-page .layout-grid.layout-with-trends,
    body.social-page .layout-grid.layout-messages,
    body.social-page .layout-grid.layout-portal {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    body.social-page .post-card,
    body.social-page .post-text,
    body.social-page .post-text pre,
    body.social-page .post-text code,
    body.social-page .profile-main,
    body.social-page .profile-header,
    body.social-page .notifications-feed,
    body.social-page .search-results,
    body.social-page .discovery-feed,
    body.social-page .feed-composer,
    body.social-page .top-tabs,
    body.social-page .page-heading {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    body.social-page .post-media,
    body.social-page .post-media img,
    body.social-page .post-media video,
    body.social-page .profile-banner img {
        max-width: 100%;
    }

    body.social-page .mobile-sidebar-panel,
    body.social-page .mobile-sidebar-content {
        max-width: 100%;
        overflow-x: clip;
    }
}

html.pwa-installed body.social-page .page,
html.pwa-installed body.social-page .layout-grid,
html.pwa-installed body.social-page .main-content,
html.pwa-installed body.social-portal-page .page,
html.pwa-installed body.social-portal-page .layout-grid,
html.pwa-installed body.social-portal-page .portal-main-content {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* ── Live ring on streaming avatars (premium, matches Social) ── */
.avatar-live-link {
    display: inline-flex;
    flex-shrink: 0;
    text-decoration: none;
    border-radius: 50%;
    line-height: 0;
    position: relative;
    vertical-align: top;
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
    overflow: hidden;
}

.avatar-live-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
    padding: 1.5px;
    background: #f4212e;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    line-height: 0;
    overflow: hidden;
    animation: avatar-live-ring-glow 2.2s ease-in-out infinite;
}

.avatar-live-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(244, 33, 46, 0.55);
    animation: avatar-live-ring-pulse 2.2s ease-in-out infinite;
    pointer-events: none;
    box-sizing: border-box;
}

.avatar-live-ring > img,
.avatar-live-ring > .author-avatar,
.avatar-live-ring > .profile-avatar,
.avatar-live-ring > .sidebar-account-avatar,
.avatar-live-ring > .live-pulse-avatar-img,
.avatar-live-ring > .streams-watch-avatar-img,
.avatar-live-ring > .mobile-nav-avatar,
.avatar-live-ring > .follow-list-avatar {
    display: block;
    flex-shrink: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid #000 !important;
    box-sizing: border-box;
    object-fit: cover;
}

/* Feed / replies — fixed 40px slot */
.post-meta-row .avatar-live-link,
.post-card .avatar-live-link,
.reply-card .avatar-live-link,
.post-avatar-link.avatar-live-link {
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.post-meta-row .avatar-live-ring,
.post-card .avatar-live-ring,
.reply-card .avatar-live-ring,
.post-avatar-link.avatar-live-link .avatar-live-ring {
    width: 100%;
    height: 100%;
}

.post-meta-row .avatar-live-ring > *,
.post-card .avatar-live-ring > *,
.reply-card .avatar-live-ring > *,
.post-avatar-link.avatar-live-link .avatar-live-ring > * {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
}

/* Profile header */
.profile-avatar-row .avatar-live-link {
    flex-shrink: 0;
    margin-top: -80px;
    position: relative;
    z-index: 2;
    width: 134px;
    height: 134px;
    max-width: 134px;
    max-height: 134px;
}

.profile-page .avatar-live-ring > .profile-avatar {
    margin-top: 0 !important;
    border: 4px solid #000 !important;
}

/* Sidebar account */
.sidebar-account .avatar-live-link,
.sidebar-account .avatar-live-ring {
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.sidebar-account .avatar-live-ring > * {
    width: 40px !important;
    height: 40px !important;
}

/* Composer */
.composer-avatar-wrap .avatar-live-link,
.composer-avatar-wrap .avatar-live-ring,
.composer-avatar .avatar-live-link,
.composer-avatar .avatar-live-ring {
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.composer-avatar-wrap .avatar-live-ring > *,
.composer-avatar .avatar-live-ring > * {
    width: 40px !important;
    height: 40px !important;
}

/* Mobile header */
.mobile-header-avatar .avatar-live-link,
.mobile-header-avatar .avatar-live-ring {
    width: 32px;
    height: 32px;
    overflow: hidden;
}

.mobile-header-avatar .avatar-live-ring > * {
    width: 32px !important;
    height: 32px !important;
}

.mobile-header-dm-avatar .avatar-live-link,
.mobile-header-dm-avatar .avatar-live-ring {
    width: 32px;
    height: 32px;
    overflow: hidden;
}

.mobile-header-dm-avatar .avatar-live-ring > * {
    width: 32px !important;
    height: 32px !important;
}

/* Mobile nav profile tab */
.mobile-nav-profile .avatar-live-link,
.mobile-nav-profile .avatar-live-ring {
    width: 26px;
    height: 26px;
    overflow: hidden;
}

.mobile-nav-profile .avatar-live-ring > * {
    width: 26px !important;
    height: 26px !important;
}

/* Discovery live strip */
.live-pulse-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    overflow: hidden;
}

.live-pulse-avatar .avatar-live-link,
.live-pulse-avatar .avatar-live-ring {
    width: 56px;
    height: 56px;
    max-width: 56px;
    max-height: 56px;
    overflow: hidden;
}

/* Follow lists */
.follow-list-avatar-wrap .avatar-live-link,
.follow-list-row .avatar-live-link,
a.follow-list-row .avatar-live-link {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
}

/* DM thread avatars */
.dm-convo-avatar .avatar-live-link,
.dm-thread-user .avatar-live-link,
.dm-chat-profile-avatar .avatar-live-link {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
}

/* Suggestions */
.suggestion-row-avatar .avatar-live-link,
.suggestion-row-avatar .avatar-live-ring {
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.suggestion-row-avatar .avatar-live-ring > * {
    width: 40px !important;
    height: 40px !important;
}

/* Notifications */
.notification-row-avatar .avatar-live-link,
.notification-row-avatar .avatar-live-ring {
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.notification-row-avatar .avatar-live-ring > * {
    width: 40px !important;
    height: 40px !important;
}

@keyframes avatar-live-ring-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 33, 46, 0.35); }
    50% { box-shadow: 0 0 0 2px rgba(244, 33, 46, 0.1); }
}

@keyframes avatar-live-ring-pulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}

.live-pulse-strip {
    margin: 0 0 4px;
    padding: 14px 0 12px;
    border-bottom: 1px solid var(--social-border);
}

.live-pulse-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px 12px;
}

.live-pulse-head h2 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.live-pulse-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.live-pulse-open {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
}

.live-pulse-open:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.live-pulse-idle {
    margin: 0;
    padding: 0 16px 12px;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.live-pulse-idle a {
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.live-pulse-idle a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.live-pulse-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 16px 4px;
    scrollbar-width: none;
}

.live-pulse-track::-webkit-scrollbar { display: none; }

.live-pulse-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 78px;
    text-decoration: none;
    color: inherit;
}

.live-pulse-avatar {
    display: grid;
    place-items: center;
}

.live-pulse-avatar-img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
}

.live-pulse-name {
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: center;
    max-width: 78px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-pulse-viewers {
    font-size: 0.625rem;
    color: var(--text-muted);
}

/* emoji-toolbar-stacking-fix */
.composer-control-emoji,.composer-control[data-action="emoji"],.composer-icon-emoji,.btn-emoji,.feed-composer .composer-control-emoji,.feed-composer .composer-icon-emoji,.feed-composer [data-action="emoji"]{z-index:auto!important;isolation:auto;position:relative}
.emoji-picker,.emoji-grid,[data-emoji-picker],.composer-emoji-picker,.dm-emoji-picker,[class*="emoji-picker"],[class*="emoji-grid"]{z-index:5000!important}


/* Menus/popovers above feed composer toolbar (emoji must not cover these) */
.post-repost-wrap .repost-menu,
.repost-menu,
.post-menu,
.post-more-menu,
.composer-audience-menu {
    z-index: 6000 !important;
}


/* X-style media + GIF composer icons */
.composer-control-camera .composer-icon-camera,
.composer-control-media .composer-icon-media,
.composer-control-gif .composer-icon-gif {
    width: 22px;
    height: 22px;
    display: block;
}
.composer-control-gif .gif-label {
    display: none !important;
}

/* store-shop-cart-icon-fix */

/* Store/Shop cart: outline default, solid when active */
.store-icon-outline,
.shop-icon-outline {
    display: block;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.store-icon-fill,
.shop-icon-fill {
    display: none;
    fill: currentColor !important;
    stroke: none !important;
}
.sidebar-item.active .icon svg.store-icon .store-icon-outline,
.sidebar-item.active .icon svg.shop-icon .shop-icon-outline,
.sidebar-item.active .icon svg.store-icon .store-icon-outline path,
.sidebar-item.active .icon svg.shop-icon .shop-icon-outline path,
.mobile-nav-item.active .mobile-nav-icon.store-icon .store-icon-outline,
.mobile-nav-item.active .mobile-nav-icon.shop-icon .shop-icon-outline {
    display: none !important;
}
.sidebar-item.active .icon svg.store-icon .store-icon-fill,
.sidebar-item.active .icon svg.shop-icon .shop-icon-fill,
.mobile-nav-item.active .mobile-nav-icon.store-icon .store-icon-fill,
.mobile-nav-item.active .mobile-nav-icon.shop-icon .shop-icon-fill,
a.active svg.store-icon .store-icon-fill,
a.active svg.shop-icon .shop-icon-fill {
    display: block !important;
    fill: currentColor !important;
    stroke: none !important;
}
.sidebar-item.active .icon svg.store-icon .store-icon-fill,
.sidebar-item.active .icon svg.shop-icon .shop-icon-fill {
    fill: currentColor !important;
    stroke: none !important;
}


/* battlepass-bolt-icon-fix */
.battlepass-icon-outline { display: block; fill: currentColor; }
.battlepass-icon-fill { display: none; fill: currentColor; }
.sidebar-item.active .icon svg.battlepass-icon .battlepass-icon-outline,
.mobile-nav-item.active .mobile-nav-icon.battlepass-icon .battlepass-icon-outline,
a.active svg.battlepass-icon .battlepass-icon-outline { display: none; }
.sidebar-item.active .icon svg.battlepass-icon .battlepass-icon-fill,
.mobile-nav-item.active .mobile-nav-icon.battlepass-icon .battlepass-icon-fill,
a.active svg.battlepass-icon .battlepass-icon-fill { display: block; fill: currentColor; }
.sidebar-item .icon svg.battlepass-icon,
.mobile-nav-icon.battlepass-icon { fill: currentColor !important; stroke: none !important; }
.sidebar-item.active .icon svg.battlepass-icon path { stroke: none !important; }


/* x-style-btn-post-fix ? compact to match sidebar scale */
.btn-post {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    margin: 8px 0 0 !important;
    padding: 0 16px !important;
    gap: 0 !important;
    border-radius: 9999px !important;
    background: #eff3f4 !important;
    color: #0f1419 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background 0.15s ease !important;
    font-family: inherit !important;
    cursor: pointer !important;
    text-align: center !important;
    -webkit-tap-highlight-color: transparent;
}
.btn-post:hover {
    background: #e7e9ea !important;
    color: #0f1419 !important;
}
.btn-post:active {
    background: #d7dbdc !important;
}
.btn-post:focus-visible {
    outline: 2px solid var(--social-blue, #1d9bf0);
    outline-offset: 2px;
}
.btn-post .btn-post-label,
.btn-post .sidebar-item-label {
    display: inline-block;
    font: inherit;
    font-weight: 700;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}
.btn-post .sidebar-icon-wrap,
.btn-post .icon {
    display: none !important;
}
.mobile-sidebar-panel .btn-post {
    min-height: 42px !important;
    margin: 8px 0 0 !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    gap: 0 !important;
    justify-content: center !important;
}
.sidebar .btn-post {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    padding: 0 16px !important;
    justify-content: center !important;
}
.sidebar-below-nav .btn-post {
    margin-top: 4px !important;
}
/* Shorter viewports: even tighter */
@media (min-width: 1101px) and (max-height: 900px) {
    .btn-post {
        min-height: 38px !important;
        font-size: 14px !important;
        margin-top: 4px !important;
        padding: 0 14px !important;
    }
}
html[data-theme="light"] .btn-post {
    background: #0f1419 !important;
    color: #ffffff !important;
}
html[data-theme="light"] .btn-post:hover {
    background: #272c30 !important;
    color: #ffffff !important;
}


/* reels-icon-dual-fix ? outline default, solid when active */
.sidebar-item .icon svg.reels-icon,
.mobile-nav-icon.reels-icon,
svg.reels-icon {
    fill: currentColor !important;
    stroke: none !important;
}
.reels-icon-outline {
    display: block;
    fill: currentColor !important;
    stroke: none !important;
}
.reels-icon-fill {
    display: none;
    fill: currentColor !important;
    stroke: none !important;
}
.sidebar-item.active .icon svg.reels-icon .reels-icon-outline,
.mobile-nav-item.active .mobile-nav-icon.reels-icon .reels-icon-outline,
a.active svg.reels-icon .reels-icon-outline {
    display: none !important;
}
.sidebar-item.active .icon svg.reels-icon .reels-icon-fill,
.mobile-nav-item.active .mobile-nav-icon.reels-icon .reels-icon-fill,
a.active svg.reels-icon .reels-icon-fill {
    display: block !important;
    fill: currentColor !important;
    stroke: none !important;
}
/* Neutralize legacy reels rect/path stroke rules */
.sidebar-item .icon svg.reels-icon rect,
.mobile-nav-icon.reels-icon rect,
.sidebar-item.active .icon svg.reels-icon rect,
.mobile-nav-item.active .mobile-nav-icon.reels-icon rect {
    display: none !important;
}
.sidebar-item .icon svg.reels-icon path,
.mobile-nav-icon.reels-icon path {
    stroke: none !important;
}
.sidebar-item.active .icon svg.reels-icon path,
.mobile-nav-item.active .mobile-nav-icon.reels-icon path {
    stroke: none !important;
}

/* Override old stroke-active casino rules */
.sidebar-item.active .icon svg.casino-icon rect,
.sidebar-item.active .icon svg.casino-icon path,
.sidebar-item.active .icon svg.casino-icon circle {
    /* fill group handles active */
}
.sidebar-item .icon svg.casino-icon.nav-icon-stroke,
.sidebar-item.active .icon svg.casino-icon.nav-icon-stroke path,
.sidebar-item.active .icon svg.casino-icon.nav-icon-stroke rect,
.sidebar-item.active .icon svg.casino-icon.nav-icon-stroke circle {
    /* no longer stroke-only icon */
}


/* customkits + casino: dual-path icons, same 26px slot as siblings */
.sidebar-item .icon svg.customkits-icon,
.mobile-nav-icon.customkits-icon,
.sidebar-item .icon svg.casino-icon,
.mobile-nav-icon.casino-icon {
    width: 26px;
    height: 26px;
    display: block;
    flex-shrink: 0;
}
.mobile-sidebar-panel .sidebar-item .icon svg.customkits-icon,
.mobile-sidebar-panel .sidebar-item .icon svg.casino-icon {
    width: 28px;
    height: 28px;
}

/* Shirt outline = stroke of same path (clean), not a messy evenodd hole */
.sidebar-item .icon svg.customkits-icon,
.mobile-nav-icon.customkits-icon {
    fill: none !important;
    stroke: none !important; /* presentation on paths only */
}
.customkits-icon-outline {
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
}
.customkits-icon-fill {
    display: none !important;
    fill: currentColor !important;
    stroke: none !important;
}
.sidebar-item.active .icon svg.customkits-icon .customkits-icon-outline,
.mobile-nav-item.active .mobile-nav-icon.customkits-icon .customkits-icon-outline {
    display: none !important;
}
.sidebar-item.active .icon svg.customkits-icon .customkits-icon-fill,
.mobile-nav-item.active .mobile-nav-icon.customkits-icon .customkits-icon-fill {
    display: block !important;
    fill: currentColor !important;
    stroke: none !important;
}
.sidebar-item.active .icon svg.customkits-icon {
    fill: currentColor !important;
}

/* Casino dual-path (fill) */
.sidebar-item .icon svg.casino-icon,
.mobile-nav-icon.casino-icon {
    fill: currentColor !important;
    stroke: none !important;
}
.casino-icon-outline {
    display: block;
    fill: currentColor;
}
.casino-icon-fill {
    display: none;
    fill: currentColor;
}
.sidebar-item.active .icon svg.casino-icon .casino-icon-outline,
.mobile-nav-item.active .mobile-nav-icon.casino-icon .casino-icon-outline {
    display: none;
}
.sidebar-item.active .icon svg.casino-icon .casino-icon-fill,
.mobile-nav-item.active .mobile-nav-icon.casino-icon .casino-icon-fill {
    display: block;
    fill: currentColor;
}


/* casino-dice-icon-fix ? single version, centered like other nav icons */
.sidebar-item .icon svg.casino-icon,
.mobile-nav-icon.casino-icon {
    width: 26px;
    height: 26px;
    display: block;
    flex-shrink: 0;
    fill: currentColor !important;
    stroke: none !important;
}
.mobile-sidebar-panel .sidebar-item .icon svg.casino-icon {
    width: 28px;
    height: 28px;
}
.sidebar-item .icon svg.casino-icon path,
.mobile-nav-icon.casino-icon path,
.sidebar-item.active .icon svg.casino-icon path,
.mobile-nav-item.active .mobile-nav-icon.casino-icon path {
    fill: currentColor !important;
    stroke: none !important;
}
/* hide any leftover dual-path groups if cached HTML appears */
.casino-icon-outline,
.casino-icon-fill {
    /* no-op dual state; icon is single-path now */
}


/* social-blog-icon-fix ? filled document mark for Social nav */
.sidebar-item .icon svg.social-icon,
.mobile-nav-icon.social-icon {
    width: 26px;
    height: 26px;
    display: block;
    flex-shrink: 0;
    fill: currentColor !important;
    stroke: none !important;
}
.mobile-sidebar-panel .sidebar-item .icon svg.social-icon {
    width: 28px;
    height: 28px;
}
.sidebar-item .icon svg.social-icon path,
.mobile-nav-icon.social-icon path,
.sidebar-item.active .icon svg.social-icon path {
    fill: currentColor !important;
    stroke: none !important;
}

/* x-post-actions-spacing-fix */

/* x-post-actions-spacing-fix ? match X icon/count spacing from screenshot */
.post-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 0;
    box-sizing: border-box;
}

.post-actions-item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    max-width: none;
}

/* Left metrics share space evenly (reply / repost / like / views) */
.post-actions-reply,
.post-actions-repost,
.post-actions-like,
.post-actions-views {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    order: 0;
}

.post-actions-reply { order: 1; }
.post-actions-repost { order: 2; }
.post-actions-like { order: 3; }
.post-actions-views { order: 4; }

/* Bookmark (+ share) share the row evenly so all icons run full width with room for counts */
.post-actions-bookmark,
.post-actions-share {
    flex: 1 1 0;
    margin-left: 0;
    order: 10;
    justify-content: flex-end;
    max-width: none;
    min-width: 0;
}

.post-actions-bookmark {
    margin-left: 0;
}

.post-actions-item form {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
}

/* Button: icon + count tight like X */
.post-actions-btn,
body.social-page .post-actions .like-button,
body.social-page .post-actions .like-button.post-actions-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 4px !important; /* icon ? number distance (X ~4px) */
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    border-radius: 0;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Circular hit / hover target around the SVG only (X style) */
.post-actions-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34.75px;
    height: 34.75px;
    margin: 0;
    flex-shrink: 0;
    border-radius: 999px;
    transition: color 0.15s ease, background 0.15s ease;
}

.post-actions-icon svg {
    width: 18.75px !important;
    height: 18.75px !important;
    fill: currentColor;
    display: block;
    flex-shrink: 0;
}

/* Count sits immediately beside icon ? no extra left margin */
.post-actions-count,
.post-actions-views .post-views-count,
.post-actions-count.count-value {
    min-width: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: inherit;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.post-actions-count:empty,
.post-actions-views .post-views-count:empty {
    display: none !important;
}

/* Hover: color on whole control, soft glow only on icon circle */
.post-actions-reply .post-actions-btn:hover,
.post-actions-reply .post-actions-btn:focus-visible {
    color: var(--social-reply);
    background: transparent !important;
}
.post-actions-reply .post-actions-btn:hover .post-actions-icon,
.post-actions-reply .post-actions-btn:focus-visible .post-actions-icon {
    background: rgba(29, 155, 240, 0.1);
    color: var(--social-reply);
}

.post-actions-repost .post-actions-btn:hover,
.post-actions-repost .post-actions-btn:focus-visible {
    color: var(--social-repost);
    background: transparent !important;
}
.post-actions-repost .post-actions-btn:hover .post-actions-icon,
.post-actions-repost .post-actions-btn:focus-visible .post-actions-icon {
    background: rgba(0, 186, 124, 0.1);
    color: var(--social-repost);
}

.post-actions-like .post-actions-btn:hover,
.post-actions-like .post-actions-btn:focus-visible,
.post-actions-like .like-button:hover,
.post-actions-like .like-button:focus-visible,
body.social-page .post-actions-like .like-button:hover,
body.social-page .post-actions-like .like-button:focus-visible {
    color: var(--social-like-active) !important;
    background: transparent !important;
}
.post-actions-like .post-actions-btn:hover .post-actions-icon,
.post-actions-like .post-actions-btn:focus-visible .post-actions-icon,
.post-actions-like .like-button:hover .post-actions-icon,
.post-actions-like .like-button:focus-visible .post-actions-icon,
body.social-page .post-actions-like .like-button:hover .post-actions-icon,
body.social-page .post-actions-like .like-button:focus-visible .post-actions-icon {
    background: rgba(249, 24, 128, 0.1) !important;
    color: var(--social-like-active) !important;
}
.post-actions-like .post-actions-btn:hover .post-actions-icon svg,
.post-actions-like .like-button:hover .post-actions-icon svg,
body.social-page .post-actions-like .like-button:hover .post-actions-icon svg {
    color: var(--social-like-active) !important;
    fill: currentColor !important;
}

.post-actions-views .post-actions-btn:hover,
.post-actions-views .post-actions-btn:focus-visible {
    color: var(--text);
    background: transparent !important;
}
.post-actions-views .post-actions-btn:hover .post-actions-icon,
.post-actions-views .post-actions-btn:focus-visible .post-actions-icon {
    background: rgba(29, 155, 240, 0.1);
    color: var(--social-blue, #1d9bf0);
}

.post-actions-bookmark .post-actions-btn:hover,
.post-actions-bookmark .post-actions-btn:focus-visible {
    color: var(--social-bookmark);
    background: transparent !important;
}
.post-actions-bookmark .post-actions-btn:hover .post-actions-icon,
.post-actions-bookmark .post-actions-btn:focus-visible .post-actions-icon {
    background: rgba(255, 212, 0, 0.1);
    color: var(--social-bookmark);
}

.post-actions-share .post-actions-btn:hover,
.post-actions-share .post-actions-btn:focus-visible {
    color: var(--social-blue, #1d9bf0);
    background: transparent !important;
}
.post-actions-share .post-actions-btn:hover .post-actions-icon,
.post-actions-share .post-actions-btn:focus-visible .post-actions-icon {
    background: rgba(29, 155, 240, 0.1);
}

/* Active states keep color, no layout shift */
.post-actions-like .like-button.is-liked,
.post-actions-like .like-button.is-liked .post-actions-icon,
.post-actions-like .like-button.is-liked .post-actions-icon svg,
body.social-page .post-actions-like .like-button.is-liked,
body.social-page .post-actions-like .like-button.is-liked .post-actions-icon svg {
    color: var(--social-like-active) !important;
    fill: currentColor !important;
}
.post-actions-repost .repost-trigger.is-reposted,
.post-actions-repost .repost-btn.is-reposted {
    color: var(--social-repost);
}
.post-actions-bookmark .bookmark-btn.is-bookmarked {
    color: var(--social-bookmark);
}

/* Mobile: slightly tighter but same proportions */
@media (max-width: 640px) {
    .post-actions {
        margin: 10px 0 0;
        gap: 0;
    }
    .post-actions-reply,
    .post-actions-repost,
    .post-actions-like,
    .post-actions-views {
        max-width: none;
        flex: 1 1 0;
    }
    .post-actions-item {
        justify-content: flex-start;
    }
    .post-actions-bookmark {
        margin-left: auto;
        justify-content: flex-end;
    }
    .post-actions-btn,
    body.social-page .post-actions .like-button {
        gap: 3px !important;
    }
    .post-actions-icon {
        width: 32px;
        height: 32px;
    }
    .post-actions-icon svg {
        width: 18px !important;
        height: 18px !important;
    }
    .post-actions-count,
    .post-actions-views .post-views-count {
        font-size: 12px !important;
        line-height: 15px !important;
    }
}

/* Full-width action row on all sizes — room for growing counts */
@media (min-width: 641px) {
    .post-card .post-actions,
    .post-card-expanded .post-actions,
    .post-card-simple-repost .post-actions-repost-own {
        max-width: 100%;
        width: 100%;
    }
}

/* x-thread-polish-fix */
/* v3: continuous conversation spine — same column, no nested grey panel/elbows */
.post-thread-main,
.post-thread-feed,
.post-detail-thread {
    --thread-pad-x: 16px;
    --thread-avatar-col: 40px;
    --thread-avatar-size: 40px;
    --thread-gap: 12px;
    --thread-spine-x: calc(var(--thread-pad-x) + (var(--thread-avatar-col) / 2));
    --thread-content-indent: calc(var(--thread-pad-x) + var(--thread-avatar-col) + var(--thread-gap));
    --thread-line: #2f3336;
}

.post-detail-thread {
    --thread-main-avatar-size: 48px;
    --thread-avatar-col: 48px;
    --thread-avatar-size: 40px;
}

/* ---------- kill every nested panel / old elbow ---------- */
.post-thread-replies .reply-thread-branch,
.post-thread-replies .reply-thread-branch:not([hidden]),
.reply-thread-branch,
.reply-thread-nested,
.reply-thread-meta {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
}

.reply-card-nested::before,
.reply-card-nested::after,
.reply-card-nested:not(:last-child)::after,
.reply-thread-nested > .reply-card-nested:last-child::after,
.reply-thread-branch:not([hidden])::before,
.reply-thread-branch::before {
    content: none !important;
    display: none !important;
    border: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ---------- main post spine into replies ---------- */
.post-detail-thread:has(.post-thread-replies > .reply-thread-node) .post-card-main {
    position: relative !important;
    border-bottom: none !important;
    overflow: visible !important;
}
.post-detail-thread:has(.post-thread-replies > .reply-thread-node) .post-card-main::after,
.post-card.post-thread-open:not(.post-card-expanded):has(+ .post-thread-feed:not([hidden]))::after {
    content: '' !important;
    position: absolute !important;
    left: var(--thread-spine-x) !important;
    width: 2px !important;
    transform: translateX(-50%) !important;
    background: var(--thread-line) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.post-detail-thread:has(.post-thread-replies > .reply-thread-node) .post-card-main::after {
    top: calc(14px + var(--thread-main-avatar-size, 48px) + 4px) !important;
    bottom: 0 !important;
}
.post-card.post-thread-open:not(.post-card-expanded):has(+ .post-thread-feed:not([hidden])) {
    position: relative !important;
    overflow: visible !important;
    border-bottom: none !important;
}
.post-card.post-thread-open:not(.post-card-expanded):has(+ .post-thread-feed:not([hidden]))::after {
    top: calc(12px + var(--thread-avatar-size) + 4px) !important;
    bottom: 0 !important;
}

/* Keep main avatar above the spine */
.post-detail-thread .post-card-main > .post-avatar-link,
.post-detail-thread .post-card-main > .post-avatar-link .author-avatar {
    position: relative;
    z-index: 2;
}

/* ---------- flat reply cards (root + nested same column) ---------- */
.post-thread-feed .reply-card-root,
.post-detail-thread .reply-card-root,
.post-thread-main .reply-card-root,
.reply-card-root,
.post-thread-feed .reply-card-nested,
.post-detail-thread .reply-card-nested,
.post-thread-main .reply-card-nested,
.reply-card-nested {
    display: grid !important;
    grid-template-columns: var(--thread-avatar-col) minmax(0, 1fr) !important;
    column-gap: var(--thread-gap) !important;
    row-gap: 0 !important;
    padding: 12px var(--thread-pad-x) 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: relative !important;
}

.reply-card-root:hover,
.reply-card-nested:hover,
.post-detail-thread .reply-card:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

.reply-rail {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: var(--thread-avatar-col) !important;
    min-height: var(--thread-avatar-size) !important;
    z-index: 1;
}

.reply-card-root .post-avatar-link .author-avatar,
.reply-card-root .author-avatar,
.reply-card-nested .post-avatar-link .author-avatar,
.reply-card-nested .author-avatar,
.post-thread-replies .reply-card .author-avatar {
    width: var(--thread-avatar-size) !important;
    height: var(--thread-avatar-size) !important;
    position: relative !important;
    z-index: 2 !important;
    background-color: var(--bg, #000) !important;
}

.reply-body,
.reply-card-root .reply-body,
.reply-card-nested .reply-body {
    min-width: 0 !important;
    padding-bottom: 4px !important;
}

/* ---------- continuous spine through nodes ---------- */
.post-thread-replies {
    position: relative;
}
.post-thread-replies > .reply-thread-node {
    position: relative;
    z-index: 1;
    border: none !important;
}

/* Spine between top-level nodes, and through open branches */
.post-thread-replies > .reply-thread-node:not(:last-child)::after,
.post-thread-replies > .reply-thread-node--has-branch:has(.reply-thread-branch:not([hidden]))::after {
    content: '' !important;
    position: absolute !important;
    left: var(--thread-spine-x) !important;
    top: calc(12px + var(--thread-avatar-size) + 2px) !important;
    bottom: 0 !important;
    width: 2px !important;
    transform: translateX(-50%) !important;
    background: var(--thread-line) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Connect first reply up to main post */
.post-thread-replies > .reply-thread-node:first-child .reply-card-root .reply-rail::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: -12px !important;
    width: 2px !important;
    height: 12px !important;
    transform: translateX(-50%) !important;
    background: var(--thread-line) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Kill old rail stubs */
.post-thread-replies > .reply-thread-node .reply-card-root .reply-rail::after,
.reply-thread-node--has-branch .reply-card-root .reply-rail::after,
.reply-thread-node--has-branch:has(.reply-thread-branch:not([hidden])) .reply-card-root .reply-rail::after {
    content: none !important;
    display: none !important;
}

/* Last leaf: mask spine below last visible avatar so it ends cleanly */
.post-thread-replies > .reply-thread-node:last-child:not(:has(.reply-thread-branch:not([hidden]))) .reply-card-root .reply-rail::after {
    content: none !important;
}
.post-thread-replies > .reply-thread-node--has-branch:has(.reply-thread-branch:not([hidden])):last-child .reply-thread-nested > .reply-card-nested:last-child .reply-rail::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: calc(var(--thread-avatar-size) + 2px) !important;
    bottom: -200px !important;
    width: 6px !important;
    transform: translateX(-50%) !important;
    background: var(--bg, #000) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* ---------- Show / Hide — blue text under content column ---------- */
.reply-thread-meta {
    position: relative !important;
    z-index: 1 !important;
    padding: 0 var(--thread-pad-x) 2px var(--thread-content-indent) !important;
    margin: 0 !important;
    background: transparent !important;
}
.reply-show-replies-btn,
.post-thread-replies .reply-show-replies-btn,
.reply-show-replies-btn.post-view-thread {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 4px 0 8px !important;
    min-height: 0 !important;
    border: none !important;
    background: none !important;
    color: var(--social-blue, #1d9bf0) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    cursor: pointer !important;
    text-align: left !important;
    box-shadow: none !important;
}
.reply-show-replies-btn:hover {
    text-decoration: underline !important;
}

/* Nested branch: NO indent — same column as root (continuous thread) */
.reply-thread-branch {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.reply-thread-branch[hidden] {
    display: none !important;
}

.reply-thread-nested {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Nested slightly tighter top padding so chain feels continuous */
.reply-thread-nested > .reply-card-nested {
    padding-top: 4px !important;
}

/* ---------- typography ---------- */
.reply-card-root .post-author,
.post-thread-replies .reply-card-root .post-author,
.reply-card-nested .post-author {
    font-size: 15px !important;
    font-weight: 700 !important;
}
.reply-card-root .post-handle,
.reply-card-root .post-time,
.post-thread-replies .reply-card-root .post-handle,
.post-thread-replies .reply-card-root .post-time,
.reply-card-nested .post-handle,
.reply-card-nested .post-time {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
}
.reply-card-root .post-text,
.reply-card-root .reply-text,
.post-thread-replies .reply-card-root .post-text,
.post-thread-replies .reply-card-root .reply-text,
.reply-card-nested .post-text,
.reply-card-nested .reply-text {
    font-size: 15px !important;
    line-height: 20px !important;
    margin: 2px 0 4px !important;
}
.reply-card a.mention,
.reply-card .post-text a[href*="/@"],
.reply-card-nested a.mention,
.reply-card .post-mention {
    color: var(--social-blue, #1d9bf0) !important;
    text-decoration: none !important;
}
.reply-card a.mention:hover,
.reply-card .post-mention:hover {
    text-decoration: underline !important;
}

/* ---------- action bars ---------- */
.reply-actions-thread,
.post-thread-replies .reply-actions-thread,
.reply-actions-nested {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    margin-left: -8px !important;
}
.reply-actions-thread .post-actions,
.reply-actions-nested .post-actions,
.reply-card-root .post-actions,
.reply-card-nested .post-actions {
    max-width: 425px !important;
    margin-top: 4px !important;
}
.reply-actions-thread .post-actions-icon,
.reply-actions-nested .post-actions-icon,
.reply-card-root .post-actions-icon,
.reply-card-nested .post-actions-icon {
    width: 34.75px !important;
    height: 34.75px !important;
}
.reply-actions-thread .post-actions-icon svg,
.reply-actions-nested .post-actions-icon svg,
.reply-card-root .post-actions-icon svg,
.reply-card-nested .post-actions-icon svg {
    width: 18.75px !important;
    height: 18.75px !important;
}

/* strip leftover card chrome */
.reply-card,
.post-detail-thread .reply-card:not(.reply-card-root):not(.reply-card-nested) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.post-thread-replies > .reply-thread-node + .reply-thread-node > .reply-thread-row > .reply-card-root {
    padding-top: 4px !important;
}

/* feed-x border override */
@media (min-width: 701px) {
    .reply-card-root,
    .reply-card-nested {
        border-bottom: none !important;
        background: transparent !important;
    }
}

@media (max-width: 640px) {
    .post-thread-main,
    .post-thread-feed,
    .post-detail-thread {
        --thread-pad-x: 12px;
        --thread-avatar-col: 36px;
        --thread-avatar-size: 36px;
        --thread-gap: 10px;
    }
}
/* end x-thread-polish-fix */



/* Notification names: keep highest-role color on actor identity */
.notification-actor-link .identity-name-text[style*="color"],
.notification-actor-name .identity-name-text[style*="color"] {
    /* inline role color wins */
}
.notification-actor-link:hover .identity-name-text[style*="color"] {
    text-decoration: underline;
}
/* Role-colored identity names — never force theme text color over inline role color */
.identity-name-text {
    /* color comes from inline style (role) */
}
.dm-msg-author .identity-name-text,
.dm-convo-name .identity-name-text,
.dm-thread-name .identity-name-text,
.profile-title .identity-name-text,
.post-author .identity-name-text,
.notification-actor-name .identity-name-text {
    /* keep role color even when parent sets muted text */
}
.dm-msg-author:hover .identity-name-text {
    /* do not wipe role color on hover */
    text-decoration: underline;
}
.dm-msg-author-name[style*="color"] {
    /* live JS-rendered author colors */
}
body.social-portal-embed .support-chat-messages .dm-msg-author-name[style*="color"],
body.social-portal-embed .dm-msg-author .identity-name-text,
body.social-portal-embed .dm-msg-author-name {
    /* allow inline color; only default when no inline */
}
body.social-portal-embed .dm-msg-author .identity-name-text[style],
body.social-portal-embed .dm-msg-author-name[style] {
    /* inline style wins */
}


/* ROLE COLOR ENFORCE — message authors keep highest role color */
.dm-msg-author .identity-name-text,
.dm-msg-author-name,
.dm-convo-name .identity-name-text,
.dm-thread-name .identity-name-text,
.dm-convo-identity .identity-name-text {
    font-weight: 800 !important;
}
.dm-msg-author:hover {
    color: inherit;
}
.dm-msg-author:hover .identity-name-text,
.dm-msg-author:hover .dm-msg-author-name {
    text-decoration: underline;
}


/* DM conversation list role colours */
.dm-convo-name .identity-name-text[style*="color"],
.dm-thread-name .identity-name-text[style*="color"],
.dm-convo-identity .identity-name-text[style*="color"] {
    font-weight: 800 !important;
}

/* Stream emote reactions — compact (fix oversized picker/chips) */
.dm-react-quick.is-stream-emote,
.dm-reaction-chip.is-stream-emote {
    padding: 2px !important;
}
.dm-react-quick .dm-reaction-emote-img,
.dm-react-quick.is-stream-emote img,
.dm-reaction-emote-img,
.dm-reaction-emoji .dm-reaction-emote-img {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 3px !important;
}
.dm-react-quick {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
}
.dm-react-bar.is-floating .dm-react-quick {
    width: 40px !important;
    height: 40px !important;
}
.dm-react-bar.is-floating .dm-react-quick .dm-reaction-emote-img,
.dm-react-bar.is-floating .dm-react-quick.is-stream-emote img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
}
.dm-emoji-picker-emote-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    padding: 4px !important;
}
.dm-emoji-picker-emote-img,
.dm-emoji-picker-emote-btn img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
}
.dm-emoji-picker-emote-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
}
.dm-emoji-picker-emote-strip .dm-emoji-picker-emote-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
}
.dm-emoji-picker-global {
    max-width: min(320px, calc(100vw - 16px)) !important;
    max-height: min(48vh, 360px) !important;
}
.composer-emoji-picker .emoji-picker-grid-emotes .emoji-picker-emote-btn,
.emoji-picker-grid-emotes .emoji-picker-emote-btn,
.composer-emoji-picker .emoji-picker-emote-btn,
.emoji-picker .emoji-picker-emote-btn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.composer-emoji-picker .emoji-picker-grid-emotes img,
.emoji-picker-grid-emotes .emoji-picker-emote-btn img,
.composer-emoji-picker .emoji-picker-emote-btn img,
.emoji-picker .emoji-picker-emote-btn img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    display: block !important;
}
@media (hover: none), (pointer: coarse) {
    .dm-react-bar.is-floating .dm-react-quick,
    .dm-react-bar.is-floating .dm-react-more {
        width: 44px !important;
        height: 44px !important;
        font-size: 22px !important;
    }
    .dm-react-bar.is-floating .dm-react-quick .dm-reaction-emote-img,
    .dm-react-bar.is-floating .dm-react-quick.is-stream-emote img {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ted-suggest-stable */
.suggestion-row-name {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    /* reserve underline so hover does not reflow ellipsis text */
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: none;
}
.suggestion-row-profile:hover .suggestion-row-name,
.suggestion-row-profile:focus-visible .suggestion-row-name {
    text-decoration: underline;
    text-decoration-color: currentColor;
}
/* Keep role colour / badges stable on hover — do not repaint text */
.suggestion-row-name .identity-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    vertical-align: bottom;
}
.suggestion-row-name .identity-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.suggestion-row-name .user-badges,
.suggestion-row-name .user-badge-tip-btn,
.suggestion-row-name img.user-badge {
    flex-shrink: 0;
}
.suggestion-row-name img.user-badge {
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.suggestion-row-meta {
    line-height: 1.25;
}
/* Mention autocomplete: stable active row on mouse hover */
.mention-autocomplete-item.is-active,
.mention-autocomplete-item:hover {
    background: var(--social-hover, rgba(231, 233, 234, 0.08));
}
.mention-autocomplete-label strong {
    color: inherit;
}
/* end ted-suggest-stable */

/* —— Quick search (right rail) —— */
.tb-quick-search {
    position: relative;
    z-index: 40;
}
.tb-quick-search .tb-qs-trigger {
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.tb-quick-search.is-open .tb-qs-trigger {
    border-color: var(--social-blue, #1d9bf0);
    background: var(--bg);
    color: var(--text);
}
.tb-qs-panel {
    position: absolute;
    left: 0;
    right: 16px;
    top: calc(100% + 8px);
    background: var(--card-bg, #16181c);
    border: 1px solid var(--social-border, rgba(255,255,255,.12));
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,.45);
    padding: 12px;
    z-index: 50;
}
.tb-qs-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--input-bg, rgba(255,255,255,.06));
    border: 1px solid var(--social-border, transparent);
}
.tb-qs-field:focus-within {
    border-color: var(--social-blue, #1d9bf0);
}
.tb-qs-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}
.tb-qs-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    padding: 10px 0;
}
.tb-qs-go {
    border: 0;
    background: var(--social-blue, #1d9bf0);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
}
.tb-qs-recent {
    margin-top: 10px;
}
.tb-qs-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
}
.tb-qs-clear-all {
    border: 0;
    background: transparent;
    color: var(--social-blue, #1d9bf0);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.tb-qs-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}
.tb-qs-recent-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.tb-qs-recent-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    padding: 10px 8px;
    border-radius: 10px;
    cursor: pointer;
}
.tb-qs-recent-btn:hover {
    background: var(--social-hover, rgba(231,233,234,.08));
}
.tb-qs-recent-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tb-qs-recent-btn svg {
    flex-shrink: 0;
    opacity: .65;
}
.tb-qs-recent-remove {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.tb-qs-recent-remove:hover {
    background: var(--social-hover, rgba(231,233,234,.08));
    color: var(--text);
}
.tb-qs-empty {
    padding: 10px 8px 4px;
    color: var(--text-muted);
}
.tb-qs-empty strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    margin-bottom: 4px;
}
.tb-qs-empty p {
    margin: 0;
    font-size: 13px;
}
.tb-qs-full {
    display: block;
    margin-top: 8px;
    padding: 10px 8px 2px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--social-blue, #1d9bf0);
    text-decoration: none;
}
.tb-qs-full:hover {
    text-decoration: underline;
}
.search-empty .tb-qs-recent-page {
    margin-top: 18px;
    text-align: left;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}



/* PROFILE FOLLOW BUTTON MOBILE FIT */
.profile-avatar-row {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.profile-header-actions {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.profile-follow-form {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}
.profile-page .profile-header-actions .btn-follow-toggle {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .profile-avatar-row {
        gap: 8px;
        align-items: flex-end;
    }
    .profile-header-actions {
        flex: 1 1 auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
        max-width: calc(100% - 88px);
        overflow: visible;
    }
    .profile-page .profile-header-actions .btn-follow-toggle,
    .profile-header .btn-follow-toggle,
    .profile-page .btn-profile-action,
    .profile-page .profile-header-actions .btn-profile-message {
        min-height: 34px !important;
        min-width: 0 !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        flex: 0 1 auto;
        box-sizing: border-box;
    }
    .profile-follow-form {
        flex: 0 1 auto;
        min-width: 0;
    }
    .profile-header-actions .profile-more-wrap,
    .profile-header-actions .profile-more-btn {
        flex-shrink: 0;
    }
}

@media (max-width: 380px) {
    .profile-header-actions {
        max-width: calc(100% - 76px);
        gap: 4px;
    }
    .profile-page .profile-header-actions .btn-follow-toggle,
    .profile-header .btn-follow-toggle,
    .profile-page .btn-profile-action,
    .profile-page .profile-header-actions .btn-profile-message {
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}


/* simple-repost-inline-fix-20260722 */
/* Simple repost: banner only + original post full-width inline (no indent / no box). */
.post-card-simple-repost {
    grid-template-rows: auto auto;
}
.post-card-simple-repost > .post-repost-banner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}
.post-card-simple-repost > .post-avatar-link {
    display: none !important;
}
.post-card-simple-repost > .post-body {
    grid-column: 1 / -1 !important;
    min-width: 0;
    width: 100%;
}
.post-card-simple-repost > .post-body > .post-meta-row {
    display: none !important;
}
.post-card-simple-repost .post-repost-inner {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible;
}
.post-card-simple-repost .post-repost-embed {
    margin: 0;
}
.post-card-simple-repost .post-card-embedded {
    padding: 0 !important;
    margin: 0;
    width: 100%;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 0 10px;
}
.post-card-simple-repost .post-card-embedded .author-avatar,
.post-card-simple-repost .post-card-embedded .post-avatar-link .author-avatar {
    width: 40px !important;
    height: 40px !important;
}
.post-card-simple-repost .post-card-embedded .post-meta-names {
    font-size: 15px;
}
.post-card-simple-repost .post-card-embedded .post-text {
    font-size: 15px;
    line-height: 1.4;
}
/* Action icons: equal slots across full content width */
.post-actions,
.post-card-simple-repost .post-actions-repost-own {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
.post-actions > .post-actions-item,
.post-card-simple-repost .post-actions-repost-own > .post-actions-item {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}
.post-actions > .post-actions-bookmark,
.post-card-simple-repost .post-actions-repost-own > .post-actions-bookmark {
    justify-content: flex-end;
}
@media (max-width: 700px) {
    .post-card-simple-repost .post-card-embedded {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 0 9px;
    }
    .post-card-simple-repost .post-card-embedded .author-avatar,
    .post-card-simple-repost .post-card-embedded .post-avatar-link .author-avatar {
        width: 36px !important;
        height: 36px !important;
    }
}


/* profile-actions-x-icons-20260722 */
/* Profile header: ⋯ | message circle | blue Follow (X layout, Ted blue) */
.profile-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
}

.profile-header-actions .post-menu-profile {
    position: relative;
    flex-shrink: 0;
}

.profile-header-actions .post-menu-profile .post-menu-trigger,
.profile-page .btn-profile-message.btn-profile-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid #536471 !important;
    background: transparent !important;
    color: var(--text, #e7e9ea) !important;
    box-sizing: border-box;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
}

.profile-header-actions .post-menu-profile .post-menu-trigger:hover,
.profile-header-actions .post-menu-profile.open .post-menu-trigger,
.profile-page .btn-profile-message.btn-profile-icon:hover {
    background: rgba(239, 243, 244, 0.08) !important;
    color: var(--text, #e7e9ea) !important;
}

.profile-header-actions .post-menu-profile .post-menu-trigger svg,
.profile-page .btn-profile-message.btn-profile-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor;
    display: block;
    flex-shrink: 0;
}

/* Follow: Ted blue pill on the right of message */
.profile-page .profile-header-actions .btn-follow-toggle.is-follow {
    border: 1px solid var(--social-blue, #1d9bf0) !important;
    background: var(--social-blue, #1d9bf0) !important;
    color: #fff !important;
    min-height: 36px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.profile-page .profile-header-actions .btn-follow-toggle.is-follow:hover {
    background: var(--social-blue-hover, #1a8cd8) !important;
    border-color: var(--social-blue-hover, #1a8cd8) !important;
    color: #fff !important;
}

.profile-page .profile-header-actions .btn-follow-toggle.is-following,
.profile-page .profile-header-actions .btn-follow-toggle.is-requested {
    min-height: 36px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

@media (max-width: 1100px) {
    .profile-header-actions {
        gap: 6px;
    }
    .profile-header-actions .post-menu-profile .post-menu-trigger,
    .profile-page .btn-profile-message.btn-profile-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }
    .profile-page .profile-header-actions .btn-follow-toggle {
        min-height: 34px !important;
        padding: 0 14px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 380px) {
    .profile-header-actions {
        gap: 4px;
    }
    .profile-header-actions .post-menu-profile .post-menu-trigger,
    .profile-page .btn-profile-message.btn-profile-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
    }
    .profile-page .profile-header-actions .btn-follow-toggle {
        padding: 0 12px !important;
        font-size: 13px !important;
    }
}


/* post-menu-mobile-nav-top-20260722 */
/* Bottom nav is ALWAYS topmost for taps. Post ⋯ menus stay below it. */
.post-menu {
    position: relative;
    z-index: 2;
}
.post-menu.open {
    z-index: 5;
}
.post-menu-trigger {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
    z-index: 3;
}
.post-menu-trigger:active {
    color: var(--social-blue, #1d9bf0);
    background: rgba(29, 155, 240, 0.12);
}
/* Menus float above feed content but NEVER above .mobile-nav (20000) */
.post-menu-panel {
    z-index: 9000;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
body.post-menu-open .post-menu-panel {
    z-index: 9000 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Hard guarantee: bottom bar wins every pointer event over anything in the feed */
.mobile-nav,
.mobile-nav * {
    pointer-events: auto !important;
}
.mobile-nav-item {
    position: relative;
    z-index: 1;
}
@media (max-width: 1100px) {
    .mobile-nav {
        display: block;
        z-index: 20000 !important;
        pointer-events: auto !important;
    }
    .post-menu-panel {
        min-width: min(280px, calc(100vw - 16px));
        /* never paint into the nav strip */
        max-height: calc(100dvh - var(--nav-mobile) - env(safe-area-inset-bottom, 0px) - 24px);
    }
    .post-menu-item {
        min-height: 48px;
        padding: 14px 16px;
        justify-content: center;
    }
    /* Posts / menus scrolling under the bar cannot steal taps */
    .feed .post-menu,
    .feed .post-menu-trigger,
    .feed .post-menu-panel,
    .main-content .post-menu,
    .main-content .post-menu-trigger {
        /* stacking only — panel z-index is set in JS below nav */
    }
}


/* repost-actions-align-names-20260722 */
/* Reposts: display names only — no @handles (cleaner under the repost tag) */
.post-card-simple-repost .post-handle,
.post-card-quote-repost .post-handle,
.post-repost-embed .post-handle,
.post-card-embedded .post-handle {
    display: none !important;
}

/*
 * Simple repost action row must line up with normal post actions.
 * Normal posts: body is col 2 (after avatar + gap), then actions use margin: 4px -8px 0.
 * Simple repost body is full width → indent by avatar+gap, then same -8px side nudge.
 */
.post-card-simple-repost > .post-body > .post-actions,
.post-card-simple-repost > .post-body > .post-actions-simple-repost,
.post-card-simple-repost .post-actions-simple-repost {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    /* superseded by perfect-layout grid */
    margin-right: -8px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Quote repost: actions already sit in column-2 .post-body — match normal spacing */
.post-card-quote-repost > .post-body > .post-actions,
.post-card-quote-repost > .post-body > .post-actions-repost-own {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Same flex distribution as normal posts */
.post-card-simple-repost .post-actions > .post-actions-item,
.post-card-quote-repost .post-actions > .post-actions-item,
.post-card-simple-repost .post-actions-simple-repost > .post-actions-item,
.post-card-quote-repost .post-actions-repost-own > .post-actions-item {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}

.post-card-simple-repost .post-actions > .post-actions-bookmark,
.post-card-quote-repost .post-actions > .post-actions-bookmark {
    justify-content: flex-end;
}

/* Meta: name · time only (no handle) on embedded original inside repost */
.post-card-simple-repost .post-card-embedded .post-meta-names,
.post-card-quote-repost .post-card-embedded .post-meta-names {
    gap: 4px;
}

@media (max-width: 700px) {
    .post-card-simple-repost > .post-body > .post-actions,
    .post-card-simple-repost > .post-body > .post-actions-simple-repost,
    .post-card-simple-repost .post-actions-simple-repost {
        margin-top: 5px !important;
        /* superseded by perfect-layout grid */
        margin-right: -8px !important;
    }
}

@media (min-width: 701px) {
    body.social-home .post-card-simple-repost > .post-body > .post-actions,
    .feed .post-card-simple-repost > .post-body > .post-actions,
    body.social-home .post-card-simple-repost .post-actions-simple-repost,
    .feed .post-card-simple-repost .post-actions-simple-repost {
        margin-top: 4px !important;
        /* superseded by perfect-layout grid */
        margin-right: -8px !important;
    }
}


/* post-display-name-only-views-20260722 */
/* Feed posts: display names only (no @handles) for cleaner layout */
.post-card .post-handle,
.post-card-repost-entry .post-handle,
.post-card-embedded .post-handle,
.post-repost-embed .post-handle {
    display: none !important;
}
/* Never show more than one views control on a repost card */
.post-card-repost-entry .post-body > .post-actions .post-actions-views ~ .post-actions-views,
.post-card-repost-entry .post-actions-simple-repost .post-actions-views ~ .post-actions-views,
.post-card-repost-entry .post-actions-repost-own .post-actions-views ~ .post-actions-views {
    display: none !important;
}
/* Embedded original inside a repost never shows its own action/views bar */
.post-repost-embed .post-card-embedded .post-actions,
.post-repost-embed .post-actions,
.post-card-simple-repost .post-card-embedded .post-actions {
    display: none !important;
}


/* admin-hide-discovery-20260722 */
/* Admin-only indicator — never rendered for non-admins */
.post-hidden-discovery-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffd400;
    background: rgba(255, 212, 0, 0.12);
    border: 1px solid rgba(255, 212, 0, 0.28);
    white-space: nowrap;
}
/* No visual styling for non-admin viewers — class is admin-only in HTML */
.post-card-hidden-discovery {
}


/* default-cover-20260722 — fit 1983×793 cover perfectly */
.profile-banner {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1983 / 793;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #0a0a0a;
}
.profile-edit-banner-preview,
#profileEditBannerPreview {
    width: 100%;
    aspect-ratio: 1983 / 793;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* repost-actions-nudge-20260722 */
/* Final lock: simple-repost icons match normal feed action row */
body.social-home .post-card-simple-repost > .post-body > .post-actions,
body.social-home .post-card-simple-repost .post-actions-simple-repost,
.feed .post-card-simple-repost > .post-body > .post-actions,
.feed .post-card-simple-repost .post-actions-simple-repost,
.post-card-simple-repost > .post-body > .post-actions-simple-repost {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    /* superseded by perfect-layout grid */
    margin-right: -8px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
@media (max-width: 700px) {
    body.social-home .post-card-simple-repost > .post-body > .post-actions,
    body.social-home .post-card-simple-repost .post-actions-simple-repost,
    .feed .post-card-simple-repost > .post-body > .post-actions,
    .feed .post-card-simple-repost .post-actions-simple-repost,
    .post-card-simple-repost > .post-body > .post-actions-simple-repost {
        margin-top: 5px !important;
        /* superseded by perfect-layout grid */
        margin-right: -8px !important;
    }
    /* match embedded avatar grid on mobile */
    .post-card-simple-repost .post-card-embedded {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 0 9px !important;
    }
}

/* stablecnt3-20260723 — even spacing: comment — repost — heart — views — bookmark
   Heart is the true centre between comment and bookmark.
   Repost sits between comment & heart; views between heart & bookmark.
   Counts stay absolute so they never shift icons.
*/
.post-card .post-actions,
.reply-card .post-actions,
.post-card-simple-repost .post-actions,
.post-card-simple-repost .post-actions-simple-repost,
.post-card-quote-repost .post-actions,
.post-card-quote-repost .post-actions-repost-own,
.post-card-repost-entry .post-actions,
.post-card-repost-entry .post-actions-simple-repost,
.post-card-repost-entry .post-actions-repost-own {
    --pa-icon: 18.75px;
    --pa-hit: 34.75px;
    --pa-count-w: 3ch;
    --pa-slot: 34.75px; /* equal slot width → even space-between centres */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important; /* 5 equal gaps: ends flush, middles even */
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Equal-width slots so space-between places icon centres at 0 / 25% / 50% / 75% / 100% */
.post-card .post-actions > .post-actions-item,
.reply-card .post-actions > .post-actions-item,
.post-card-repost-entry .post-actions > .post-actions-item,
.post-card-simple-repost .post-actions > .post-actions-item,
.post-card-simple-repost .post-actions-simple-repost > .post-actions-item,
.post-card-quote-repost .post-actions-repost-own > .post-actions-item,
.post-card-repost-entry .post-actions-simple-repost > .post-actions-item,
.post-card-repost-entry .post-actions-repost-own > .post-actions-item {
    flex: 0 0 var(--pa-slot) !important;
    width: var(--pa-slot) !important;
    min-width: var(--pa-slot) !important;
    max-width: var(--pa-slot) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.post-actions-reply { order: 1 !important; justify-content: flex-start !important; }
.post-actions-repost { order: 2 !important; justify-content: center !important; }
.post-actions-like { order: 3 !important; justify-content: center !important; }
.post-actions-views { order: 4 !important; justify-content: center !important; }
.post-actions-bookmark,
.post-actions-share { order: 5 !important; justify-content: flex-end !important; }

/* Button shell — only icon sizes the box; count is absolute */
.post-card .post-actions .post-actions-btn,
.post-card .post-actions .like-button,
.post-card .post-actions a.post-views-link,
.post-card-repost-entry .post-actions .post-actions-btn,
.post-card-repost-entry .post-actions .like-button,
.post-card-repost-entry .post-actions a.post-views-link,
body.social-page .post-actions .like-button,
.feed .post-card .post-actions-btn,
body.social-home .post-actions-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: var(--pa-hit) !important;
    width: auto !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.post-actions-item form {
    display: flex !important;
    align-items: center !important;
    justify-content: inherit !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Fixed icon hit — never grows with count */
.post-card .post-actions .post-actions-icon,
.post-card-repost-entry .post-actions .post-actions-icon {
    position: relative !important;
    z-index: 1 !important;
    width: var(--pa-hit) !important;
    height: var(--pa-hit) !important;
    min-width: var(--pa-hit) !important;
    max-width: var(--pa-hit) !important;
    flex: 0 0 var(--pa-hit) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}
.post-card .post-actions .post-actions-icon svg,
.post-card-repost-entry .post-actions .post-actions-icon svg {
    width: var(--pa-icon) !important;
    height: var(--pa-icon) !important;
    min-width: var(--pa-icon) !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* COMMENT: left edge of SVG under display name (slot still full width for even spacing) */
.post-actions-reply {
    justify-content: flex-start !important;
}
.post-actions-reply .post-actions-btn,
.post-actions-reply form {
    justify-content: flex-start !important;
    margin: 0 !important;
    width: 100% !important;
}
.post-actions-reply .post-actions-icon {
    width: var(--pa-icon) !important;
    min-width: var(--pa-icon) !important;
    max-width: var(--pa-icon) !important;
    flex: 0 0 var(--pa-icon) !important;
    justify-content: flex-start !important;
}

/* MIDDLE three: icon dead-centre in their slots
   (slots sit at 25% / 50% / 75% via space-between) */
.post-actions-repost,
.post-actions-like,
.post-actions-views {
    justify-content: center !important;
}
.post-actions-repost form,
.post-actions-like form,
.post-actions-repost .post-actions-btn,
.post-actions-like .post-actions-btn,
.post-actions-like .like-button,
.post-actions-views .post-actions-btn,
.post-actions-views a.post-views-link {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    justify-content: center !important;
}

/* BOOKMARK: right edge of slot under ⋯ */
.post-actions-bookmark {
    justify-content: flex-end !important;
}
.post-actions-bookmark form,
.post-actions-bookmark .post-actions-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    justify-content: flex-end !important;
}
.post-actions-bookmark .post-actions-icon {
    width: var(--pa-hit) !important;
    min-width: var(--pa-hit) !important;
    max-width: var(--pa-hit) !important;
    flex: 0 0 var(--pa-hit) !important;
    justify-content: center !important;
}

/* COUNTS: absolute — never shift icons (1 / 999 / 1k / 1.2k) */
.post-card .post-actions .post-actions-count,
.post-card .post-actions .post-views-count,
.post-card .post-actions .count-value,
.post-card .post-actions .repost-count,
.post-card-repost-entry .post-actions .post-actions-count,
.post-card-repost-entry .post-actions .post-views-count,
.post-card-repost-entry .post-actions .count-value,
.post-card-repost-entry .post-actions .repost-count,
.reply-card .post-actions .post-actions-count,
body.social-home .post-actions .post-actions-count,
.feed .post-card .post-actions .post-actions-count {
    position: absolute !important;
    left: 100% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 0 0 2px !important;
    padding: 0 !important;
    min-width: 0 !important;
    max-width: var(--pa-count-w) !important;
    width: max-content !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    pointer-events: none !important;
    color: inherit !important;
    display: block !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    flex: none !important;
    float: none !important;
}

.post-card .post-actions .post-actions-count:empty,
.post-card .post-actions .post-views-count:empty,
.post-card-repost-entry .post-actions .post-actions-count:empty,
.post-card-repost-entry .post-actions .post-views-count:empty,
body.social-home .post-actions .post-actions-count:empty,
.feed .post-card .post-actions .post-actions-count:empty {
    display: block !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.post-actions-reply .post-actions-count {
    left: 100% !important;
    margin-left: 4px !important;
}

/* Anchor absolute counts to the icon, not the full slot (keeps 1k tight to glyph) */
.post-actions-repost .post-actions-btn,
.post-actions-like .post-actions-btn,
.post-actions-like .like-button,
.post-actions-views .post-actions-btn,
.post-actions-views a.post-views-link {
    /* icon is centred in slot; count rides to the right of the icon */
    position: relative !important;
}

/* Simple/quote repost: actions locked to content column */
.post-card-simple-repost > .post-body,
.post-card-quote-repost > .post-body {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}
.post-card-simple-repost > .post-body > .post-meta-row { display: none !important; }
.post-card-simple-repost > .post-body > .post-card-open-zone,
.post-card-simple-repost > .post-body > .post-repost-embed,
.post-card-quote-repost > .post-body > .post-card-open-zone {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
}
.post-card-simple-repost > .post-body > .post-actions,
.post-card-simple-repost .post-actions-simple-repost,
.post-card-simple-repost .post-actions-repost-own,
.post-card-quote-repost > .post-body > .post-actions,
.post-card-quote-repost .post-actions-repost-own,
.post-card-repost-entry > .post-body > .post-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

@media (max-width: 700px) {
    .post-card .post-actions,
    .post-card-simple-repost .post-actions,
    .post-card-repost-entry .post-actions {
        --pa-icon: 18px;
        --pa-hit: 32px;
        --pa-slot: 32px;
        --pa-count-w: 2.75ch;
    }
    .post-card-simple-repost > .post-body,
    .post-card-quote-repost > .post-body {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        column-gap: 9px !important;
    }
}

/* actmobile1-20260723 — mobile/app same even spacing as desktop
   Icon centres locked at 0% · 25% · 50% · 75% · 100% of the action bar
   (comment — repost — heart — views — bookmark). Counts stay absolute.
*/
@media (max-width: 700px) {
    .post-card .post-actions,
    .reply-card .post-actions,
    .post-card-simple-repost .post-actions,
    .post-card-simple-repost .post-actions-simple-repost,
    .post-card-simple-repost .post-actions-repost-own,
    .post-card-quote-repost .post-actions,
    .post-card-quote-repost .post-actions-repost-own,
    .post-card-repost-entry .post-actions,
    .post-card-repost-entry .post-actions-simple-repost,
    .post-card-repost-entry .post-actions-repost-own,
    body.social-home .post-actions,
    .feed .post-card .post-actions,
    body.social-home .feed .post-actions {
        --pa-icon: 18.75px;
        --pa-hit: 34.75px;
        --pa-slot: 34.75px;
        --pa-count-w: 2.75ch;
        position: relative !important;
        display: block !important; /* absolute children; not flex (avoids mobile flex fights) */
        width: 100% !important;
        max-width: 100% !important;
        min-height: var(--pa-hit) !important;
        height: var(--pa-hit) !important;
        margin: 8px 0 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Kill old mobile stretch / flex:1 / auto-margins */
    .post-card .post-actions > .post-actions-item,
    .reply-card .post-actions > .post-actions-item,
    .post-card-repost-entry .post-actions > .post-actions-item,
    .post-card-simple-repost .post-actions > .post-actions-item,
    .post-card-simple-repost .post-actions-simple-repost > .post-actions-item,
    .post-card-simple-repost .post-actions-repost-own > .post-actions-item,
    .post-card-quote-repost .post-actions-repost-own > .post-actions-item,
    .post-card-repost-entry .post-actions-simple-repost > .post-actions-item,
    .post-card-repost-entry .post-actions-repost-own > .post-actions-item,
    body.social-home .post-actions > .post-actions-item,
    .feed .post-card .post-actions > .post-actions-item,
    .post-card-simple-repost .post-actions-repost-own .post-actions-reply,
    .post-card-simple-repost .post-actions-repost-own .post-actions-repost,
    .post-card-simple-repost .post-actions-repost-own .post-actions-like,
    .post-card-simple-repost .post-actions-repost-own .post-actions-views,
    .post-card-simple-repost .post-actions-repost-own .post-actions-bookmark {
        position: absolute !important;
        top: 50% !important;
        flex: 0 0 var(--pa-slot) !important;
        width: var(--pa-slot) !important;
        min-width: var(--pa-slot) !important;
        max-width: var(--pa-slot) !important;
        height: var(--pa-hit) !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    /* 0% — comment (left edge under name) */
    .post-card .post-actions > .post-actions-reply,
    .post-card-repost-entry .post-actions > .post-actions-reply,
    .post-card-simple-repost .post-actions > .post-actions-reply,
    .post-card-simple-repost .post-actions-simple-repost > .post-actions-reply,
    .post-card-simple-repost .post-actions-repost-own > .post-actions-reply,
    .post-card-quote-repost .post-actions-repost-own > .post-actions-reply,
    .post-card-repost-entry .post-actions-simple-repost > .post-actions-reply,
    .post-card-repost-entry .post-actions-repost-own > .post-actions-reply,
    body.social-home .post-actions > .post-actions-reply,
    .feed .post-card .post-actions > .post-actions-reply {
        left: 0 !important;
        right: auto !important;
        transform: translateY(-50%) !important;
        justify-content: flex-start !important;
    }

    /* 25% — repost (between comment and heart) */
    .post-card .post-actions > .post-actions-repost,
    .post-card-repost-entry .post-actions > .post-actions-repost,
    .post-card-simple-repost .post-actions > .post-actions-repost,
    .post-card-simple-repost .post-actions-simple-repost > .post-actions-repost,
    .post-card-simple-repost .post-actions-repost-own > .post-actions-repost,
    .post-card-quote-repost .post-actions-repost-own > .post-actions-repost,
    .post-card-repost-entry .post-actions-simple-repost > .post-actions-repost,
    .post-card-repost-entry .post-actions-repost-own > .post-actions-repost,
    body.social-home .post-actions > .post-actions-repost,
    .feed .post-card .post-actions > .post-actions-repost {
        left: 25% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        justify-content: center !important;
    }

    /* 50% — heart (true centre between comment and bookmark) */
    .post-card .post-actions > .post-actions-like,
    .post-card-repost-entry .post-actions > .post-actions-like,
    .post-card-simple-repost .post-actions > .post-actions-like,
    .post-card-simple-repost .post-actions-simple-repost > .post-actions-like,
    .post-card-simple-repost .post-actions-repost-own > .post-actions-like,
    .post-card-quote-repost .post-actions-repost-own > .post-actions-like,
    .post-card-repost-entry .post-actions-simple-repost > .post-actions-like,
    .post-card-repost-entry .post-actions-repost-own > .post-actions-like,
    body.social-home .post-actions > .post-actions-like,
    .feed .post-card .post-actions > .post-actions-like {
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        justify-content: center !important;
    }

    /* 75% — views (between heart and bookmark) */
    .post-card .post-actions > .post-actions-views,
    .post-card-repost-entry .post-actions > .post-actions-views,
    .post-card-simple-repost .post-actions > .post-actions-views,
    .post-card-simple-repost .post-actions-simple-repost > .post-actions-views,
    .post-card-simple-repost .post-actions-repost-own > .post-actions-views,
    .post-card-quote-repost .post-actions-repost-own > .post-actions-views,
    .post-card-repost-entry .post-actions-simple-repost > .post-actions-views,
    .post-card-repost-entry .post-actions-repost-own > .post-actions-views,
    body.social-home .post-actions > .post-actions-views,
    .feed .post-card .post-actions > .post-actions-views {
        left: 75% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        justify-content: center !important;
    }

    /* 100% — bookmark (right edge under ⋯) */
    .post-card .post-actions > .post-actions-bookmark,
    .post-card .post-actions > .post-actions-share,
    .post-card-repost-entry .post-actions > .post-actions-bookmark,
    .post-card-simple-repost .post-actions > .post-actions-bookmark,
    .post-card-simple-repost .post-actions-simple-repost > .post-actions-bookmark,
    .post-card-simple-repost .post-actions-repost-own > .post-actions-bookmark,
    .post-card-quote-repost .post-actions-repost-own > .post-actions-bookmark,
    .post-card-repost-entry .post-actions-simple-repost > .post-actions-bookmark,
    .post-card-repost-entry .post-actions-repost-own > .post-actions-bookmark,
    body.social-home .post-actions > .post-actions-bookmark,
    .feed .post-card .post-actions > .post-actions-bookmark {
        left: auto !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        justify-content: flex-end !important;
        margin-left: 0 !important;
    }

    /* Buttons / icons — match desktop proportions */
    .post-card .post-actions .post-actions-btn,
    .post-card .post-actions .like-button,
    .post-card .post-actions a.post-views-link,
    .post-card-repost-entry .post-actions .post-actions-btn,
    body.social-home .post-actions-btn,
    .feed .post-card .post-actions-btn {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: var(--pa-hit) !important;
        width: auto !important;
        overflow: visible !important;
        border: none !important;
        background: transparent !important;
    }

    .post-actions-item form {
        display: flex !important;
        align-items: center !important;
        justify-content: inherit !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .post-card .post-actions .post-actions-icon,
    .post-card-repost-entry .post-actions .post-actions-icon,
    body.social-home .post-actions .post-actions-icon,
    .feed .post-card .post-actions .post-actions-icon {
        width: var(--pa-hit) !important;
        height: var(--pa-hit) !important;
        min-width: var(--pa-hit) !important;
        max-width: var(--pa-hit) !important;
        flex: 0 0 var(--pa-hit) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .post-card .post-actions .post-actions-icon svg,
    .post-card-repost-entry .post-actions .post-actions-icon svg,
    body.social-home .post-actions .post-actions-icon svg,
    .feed .post-card .post-actions .post-actions-icon svg,
    body.social-home .post-actions-icon svg,
    .feed .post-card:not(.post-card-expanded):not(.post-card-embedded) .post-actions-icon svg {
        width: var(--pa-icon) !important;
        height: var(--pa-icon) !important;
        min-width: var(--pa-icon) !important;
        display: block !important;
    }

    /* Reply: tight left glyph under display name */
    .post-actions-reply .post-actions-btn,
    .post-actions-reply form {
        justify-content: flex-start !important;
        width: 100% !important;
    }
    .post-actions-reply .post-actions-icon {
        width: var(--pa-icon) !important;
        min-width: var(--pa-icon) !important;
        max-width: var(--pa-icon) !important;
        flex: 0 0 var(--pa-icon) !important;
        justify-content: flex-start !important;
    }

    .post-actions-repost .post-actions-btn,
    .post-actions-like .post-actions-btn,
    .post-actions-like .like-button,
    .post-actions-views .post-actions-btn,
    .post-actions-views a.post-views-link {
        margin: 0 !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .post-actions-bookmark .post-actions-btn,
    .post-actions-bookmark form {
        margin: 0 !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }

    /* Counts stay out of flow (same as desktop) */
    .post-card .post-actions .post-actions-count,
    .post-card .post-actions .post-views-count,
    .post-card .post-actions .count-value,
    .post-card .post-actions .repost-count,
    .post-card-repost-entry .post-actions .post-actions-count,
    body.social-home .post-actions .post-actions-count,
    .feed .post-card .post-actions .post-actions-count,
    body.social-home .post-actions-count,
    .feed .post-card:not(.post-card-expanded):not(.post-card-embedded) .post-actions-count {
        position: absolute !important;
        left: 100% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 0 0 2px !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        max-width: var(--pa-count-w) !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        display: block !important;
    }

    .post-actions-reply .post-actions-count {
        margin-left: 4px !important;
    }

    /* Repost bars: full content-column width, no -8px stretch */
    .post-card-simple-repost > .post-body > .post-actions,
    .post-card-simple-repost .post-actions-simple-repost,
    .post-card-simple-repost .post-actions-repost-own,
    .post-card-quote-repost .post-actions-repost-own,
    .post-card-repost-entry > .post-body > .post-actions,
    body.social-home .post-card-simple-repost .post-actions-simple-repost,
    .feed .post-card-simple-repost .post-actions-simple-repost {
        margin: 8px 0 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        border-top: none !important;
    }

    /* Keep simple-repost actions in name column (same as desktop) */
    .post-card-simple-repost > .post-body,
    .post-card-quote-repost > .post-body {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        column-gap: 9px !important;
        width: 100% !important;
    }
    .post-card-simple-repost > .post-body > .post-actions,
    .post-card-simple-repost .post-actions-simple-repost,
    .post-card-simple-repost .post-actions-repost-own,
    .post-card-quote-repost .post-actions-repost-own,
    .post-card-repost-entry > .post-body > .post-actions {
        grid-column: 2 !important;
    }
}

/* 20260723-ptemote1-composer-mobile */

/* 20260723-ptemote1 mobile gif 3x3 + media chip + global emotes wrap */
.gif-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: min(52vh, 420px) !important;
    -webkit-overflow-scrolling: touch !important;
    align-content: start !important;
}
.gif-card {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    touch-action: manipulation !important;
}
.gif-card .gif-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    pointer-events: none !important;
}
@media (max-width: 700px) {
    .gif-picker,
    .gif-picker-dm {
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
        transform: translateX(-50%) !important;
        width: min(100vw - 16px, 420px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: min(58vh, 480px) !important;
        z-index: 10050 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .gif-picker-backdrop,
    .gif-picker-backdrop-dm {
        z-index: 10040 !important;
    }
    .gif-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-height: 180px !important;
        max-height: none !important;
    }
    .gif-card {
        min-height: 96px !important;
        aspect-ratio: 1 / 1 !important;
    }
}

/* Media attached chip */
.composer-media-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(29, 155, 240, 0.45);
    background: rgba(29, 155, 240, 0.12);
    color: #e7e9ea;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
}
.composer-media-chip[hidden] { display: none !important; }
.composer-media-chip-icon { font-size: 16px; }
.composer-media-chip-text { flex: 1 1 auto; min-width: 0; }
.composer-media-chip-clear {
    border: 0;
    background: rgba(255,255,255,.08);
    color: #e7e9ea;
    border-radius: 999px;
    min-height: 30px;
    padding: 0 12px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.composer-has-media .composer-media-slot,
.composer-has-media .media-preview {
    outline: 2px solid rgba(29, 155, 240, 0.35);
    outline-offset: 2px;
    border-radius: 12px;
}
.media-preview {
    position: relative;
    margin: 8px 12px 0;
    max-width: min(280px, 70vw);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--social-border, #2f3336);
    background: #000;
}
.media-preview img,
.media-preview video {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    background: #000;
}
.composer-emote-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 12px 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 12px;
    color: #8b98a5;
}
.composer-emote-tip img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.composer-emote-tip[hidden] { display: none !important; }

/* Global emotes: wrap heading + 2-row-friendly grid */
.emoji-picker-section-global {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.emoji-picker-heading-global,
.emoji-picker-section-global .emoji-picker-heading {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.3 !important;
    padding: 8px 8px 6px !important;
}
.emoji-picker-grid-emotes {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    max-height: calc(44px * 2 + 12px) !important; /* ~two rows */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 4px 6px !important;
}
.emoji-picker,
.composer-emoji-picker,
.emoji-picker-dm {
    overflow-x: hidden !important;
    max-width: min(340px, calc(100vw - 16px)) !important;
}
@media (max-width: 700px) {
    .emoji-picker-grid-emotes {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        max-height: calc(48px * 2 + 14px) !important;
    }
    .emoji-picker.emoji-picker-dm,
    .composer-emoji-picker {
        max-height: min(62vh, 460px) !important;
    }
}

/* DM message body stream emotes */
.dm-msg-emote-img,
.dm-message-body .dm-msg-emote-img,
.dm-bubble .dm-msg-emote-img {
    width: 1.35em !important;
    height: 1.35em !important;
    max-width: 1.35em !important;
    max-height: 1.35em !important;
    object-fit: contain !important;
    vertical-align: -6px !important;
    display: inline-block !important;
    margin: 0 1px !important;
}

/* emote-ui-fix: in-field emote images + chat list previews */
.composer-emote-tip { display: none !important; }
.composer-chat-preview { display: none !important; }
.composer-hl-emote {
    display: inline-block;
    /* width measured */
    height: 1.25em;
    /* max-width measured */
    max-height: 22px;
    vertical-align: -0.25em;
    object-fit: contain;
    margin: 0 1px;
}
.composer-hl-emote-missing {
    display: inline-block;
    width: 0.4em;
    height: 1em;
}
.dm-convo-preview {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.dm-convo-preview-emote {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
    vertical-align: middle;
}
.dm-convo-preview-emoji {
    font-size: 15px;
    line-height: 1;
}
.portal-messages-app .dm-compose .composer-highlight-wrap {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}
.portal-messages-app .dm-compose .composer-highlight-input {
    width: 100%;
}

/* 20260723-gif3x3v2 force shared gif/emoji */
/* 20260723-gif3x3v2
   Portal + Social + Support + Community:
   - GIF picker: clean centered sheet, true 3x3 square grid (no overlap/off-screen)
   - Global emotes: exactly TWO visible rows, scroll inside the popup (never spill off)
*/

/* ========== GIF backdrop ========== */
.gif-picker-backdrop,
.gif-picker-backdrop-dm,
body.portal-section-messages .gif-picker-backdrop,
body.portal-section-messages .gif-picker-backdrop-dm,
body.social-messages .gif-picker-backdrop,
body.social-messages .gif-picker-backdrop-dm {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    background: rgba(0, 0, 0, 0.62) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: auto !important;
}

/* ========== GIF sheet (modal) ========== */
.gif-picker,
.gif-picker-dm,
body.portal-section-messages .gif-picker,
body.portal-section-messages .gif-picker-dm,
body.portal-section-messages.msg-has-thread .gif-picker,
body.portal-section-messages.msg-has-thread .gif-picker-dm,
body.social-messages .gif-picker,
body.social-messages .gif-picker-dm,
.portal-messages-app .gif-picker,
.portal-messages-app .gif-picker-dm {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    width: min(360px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(56vh, 460px) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483001 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid var(--social-border, #2f3336) !important;
    background: var(--bg, #000) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65) !important;
    box-sizing: border-box !important;
}

/* Desktop / wide: center fully in viewport */
@media (min-width: 901px) {
    .gif-picker,
    .gif-picker-dm,
    body.portal-section-messages .gif-picker,
    body.portal-section-messages .gif-picker-dm,
    body.social-messages .gif-picker {
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        max-height: min(70vh, 520px) !important;
        width: min(420px, calc(100vw - 32px)) !important;
    }
}

.gif-picker-header,
.gif-picker .gif-picker-header,
.gif-picker-dm .gif-picker-header {
    flex: 0 0 auto !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--social-border, #2f3336) !important;
    box-sizing: border-box !important;
}

.gif-search {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ========== GIF grid: true 3 columns ========== */
.gif-grid,
body.portal-section-messages .gif-grid,
body.social-messages .gif-grid,
.portal-messages-app .gif-grid,
.gif-picker .gif-grid,
.gif-picker-dm .gif-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    padding: 10px !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    align-content: start !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.gif-grid-status {
    grid-column: 1 / -1 !important;
    padding: 28px 12px !important;
    text-align: center !important;
    color: var(--text-muted, #71767b) !important;
    font-size: 14px !important;
}

/* Square cells — no max-height that collapses/overlaps */
.gif-card,
body.portal-section-messages .gif-card,
body.social-messages .gif-card,
.portal-messages-app .gif-card,
.gif-picker .gif-card,
.gif-picker-dm .gif-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    padding: 0 0 100% 0 !important; /* 1:1 square via padding trick (works everywhere) */
    margin: 0 !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #111 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    box-sizing: border-box !important;
}

.gif-card .gif-thumb,
body.portal-section-messages .gif-card .gif-thumb,
.gif-picker .gif-card .gif-thumb {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
}

/* ========== Global emotes: TWO rows inside the emoji popup ========== */
.emoji-picker-section-global,
.composer-emoji-picker .emoji-picker-section-global,
.emoji-picker-dm .emoji-picker-section-global {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.emoji-picker-heading-global,
.emoji-picker-section-global .emoji-picker-heading {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
    padding: 8px 8px 4px !important;
    box-sizing: border-box !important;
}

/* Grid with ~5 cols, capped to 2 rows of height; extra emotes scroll *inside* */
.emoji-picker-grid-emotes,
.composer-emoji-picker .emoji-picker-grid-emotes,
.emoji-picker-dm .emoji-picker-grid-emotes,
body.portal-section-messages .emoji-picker-grid-emotes,
body.social-messages .emoji-picker-grid-emotes,
.portal-messages-app .emoji-picker-grid-emotes {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: 40px !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* exactly two rows visible */
    max-height: calc(40px * 2 + 6px) !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 4px 6px !important;
    margin: 0 !important;
    flex-wrap: unset !important;
    align-items: stretch !important;
}

.emoji-picker-grid-emotes .emoji-picker-emote-btn,
.composer-emoji-picker .emoji-picker-grid-emotes .emoji-picker-emote-btn,
.emoji-picker-dm .emoji-picker-grid-emotes .emoji-picker-emote-btn,
body.portal-section-messages .emoji-picker-grid-emotes .emoji-picker-emote-btn {
    width: 100% !important;
    height: 40px !important;
    min-width: 0 !important;
    min-height: 40px !important;
    max-width: none !important;
    max-height: 40px !important;
    padding: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: unset !important;
    box-sizing: border-box !important;
}

.emoji-picker-grid-emotes .emoji-picker-emote-btn img,
.composer-emoji-picker .emoji-picker-grid-emotes img,
.emoji-picker-dm .emoji-picker-grid-emotes img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Emoji popup itself stays on-screen */
.emoji-picker,
.composer-emoji-picker,
.emoji-picker-dm,
body.portal-section-messages .composer-emoji-picker,
body.portal-section-messages .emoji-picker-dm,
body.social-messages .composer-emoji-picker,
body.social-messages .emoji-picker-dm {
    position: fixed !important;
    z-index: 2147483001 !important;
    right: auto !important;
    width: min(320px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(62vh, 460px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 700px) {
    .emoji-picker-grid-emotes,
    body.portal-section-messages .emoji-picker-grid-emotes,
    body.social-messages .emoji-picker-grid-emotes {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-rows: 42px !important;
        max-height: calc(42px * 2 + 6px) !important;
    }
    .emoji-picker-grid-emotes .emoji-picker-emote-btn,
    body.portal-section-messages .emoji-picker-grid-emotes .emoji-picker-emote-btn {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }
}

/* Keep media chip / in-field emote bits */
.composer-emote-tip { display: none !important; }
.composer-chat-preview { display: none !important; }

.composer-media-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(29, 155, 240, 0.45);
    background: rgba(29, 155, 240, 0.12);
    color: #e7e9ea;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
}
.composer-media-chip[hidden] { display: none !important; }
.composer-media-chip-icon { font-size: 16px; }
.composer-media-chip-text { flex: 1 1 auto; min-width: 0; }
.composer-media-chip-clear {
    border: 0;
    background: rgba(255,255,255,.08);
    color: #e7e9ea;
    border-radius: 999px;
    min-height: 30px;
    padding: 0 12px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.composer-has-media .composer-media-slot,
.composer-has-media .media-preview {
    outline: 2px solid rgba(29, 155, 240, 0.35);
    outline-offset: 2px;
    border-radius: 12px;
}
.media-preview {
    position: relative;
    margin: 8px 12px 0;
    max-width: min(280px, 70vw);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--social-border, #2f3336);
    background: #000;
}
.media-preview img,
.media-preview video {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    background: #000;
}

.dm-msg-emote-img,
.dm-message-body .dm-msg-emote-img,
.dm-bubble .dm-msg-emote-img {
    width: 1.35em !important;
    height: 1.35em !important;
    max-width: 1.35em !important;
    max-height: 1.35em !important;
    object-fit: contain !important;
    vertical-align: -6px !important;
    display: inline-block !important;
    margin: 0 1px !important;
}

.composer-hl-emote {
    display: inline-block;
    /* width measured */
    height: 1.25em;
    /* max-width measured */
    max-height: 22px;
    vertical-align: -0.25em;
    object-fit: contain;
    margin: 0 1px;
}
.composer-hl-emote-missing {
    display: inline-block;
    width: 0.4em;
    height: 1em;
}
.dm-convo-preview {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.dm-convo-preview-emote {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
    vertical-align: middle;
}
.dm-convo-preview-emoji {
    font-size: 15px;
    line-height: 1;
}
.portal-messages-app .dm-compose .composer-highlight-wrap {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}
.portal-messages-app .dm-compose .composer-highlight-input {
    width: 100%;
}

/* bugfix 20260726 composer highlight visibility + emote slots */
.composer-highlight-wrap { position: relative; width: 100%; min-width: 0; }
.composer-highlight-backdrop {
    color: var(--text, #e7e9ea) !important;
    -webkit-text-fill-color: var(--text, #e7e9ea);
}
.composer-highlight-input {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    caret-color: var(--text, #e7e9ea) !important;
    background: transparent !important;
}
.composer-hl-emote-slot {
    display: inline-block; vertical-align: middle; text-align: center;
    line-height: 0; overflow: hidden; height: 1.2em;
}
.composer-hl-emote-slot .composer-hl-emote,
.composer-hl-emote {
    display: inline-block; /* width: measured px from JS */ /* height: from inline */
    /* max-width/height measured */ max-height: 1.15em; object-fit: contain; vertical-align: middle;
}
.composer-hl-emote-missing { display: inline-block; vertical-align: middle; height: 1.2em; }

/* bugfix 20260726 trending mobile */
@media (max-width: 1100px) {
    .trending-mobile, .discovery-feed-head .trending-mobile {
        width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: clip;
    }
    .trending-mobile-posts, .discovery-feed-head .trending-mobile-posts {
        padding: 4px 12px 12px !important; max-width: 100%; box-sizing: border-box;
    }
    .trending-mobile-post { min-width: 0; max-width: 100%; box-sizing: border-box; }
    .trending-mobile-post-text {
        white-space: normal !important; display: -webkit-box;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        word-break: break-word; line-height: 1.3 !important;
    }
}

/* Compact in-field emotes — image only, no ghost shortcode width */
.composer-hl-emote-slot.composer-hl-emote-compact,
.composer-hl-emote-compact {
    display: inline-block !important;
    /* width: measured px from JS */
    /* min-width measured */
    /* max-width/height measured */
    /* height: from inline */
    line-height: 0 !important;
    overflow: hidden !important;
    vertical-align: -0.2em !important;
    margin: 0 !important;
    padding: 0 !important;
}
.composer-hl-emote-compact .composer-hl-emote,
.composer-hl-emote {
    /* width: measured px from JS */
    /* height: from inline */
    /* max-width/height measured */
    /* max-width/height measured */
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}
.composer-hl-emote-missing {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* compvis placeholder restore */
.composer-highlight-input::placeholder,
textarea.composer-highlight-input::placeholder {
    color: var(--text-muted, #71767b) !important;
    -webkit-text-fill-color: var(--text-muted, #71767b) !important;
    opacity: 1 !important;
}

/* ========== mobile lab 20260727-mobtest1 ========== */
.settings-mobile-lab {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 24px;
}
.moblab-download {
    display: block;
    text-decoration: none;
    color: #e7e9ea !important;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(29, 155, 240, 0.45);
    background: linear-gradient(180deg, rgba(29, 155, 240, 0.18), rgba(29, 155, 240, 0.06));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.moblab-download:hover {
    border-color: rgba(29, 155, 240, 0.75);
}
.moblab-download-kicker {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1d9bf0;
    margin-bottom: 4px;
}
.moblab-download strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 4px;
}
.moblab-download-sub {
    display: block;
    font-size: 13px;
    color: #8b98a5;
    line-height: 1.35;
}
.moblab-env {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #16181c;
    border: 1px solid #2f3336;
    color: #8b98a5;
    font-size: 13px;
    line-height: 1.4;
}
.moblab-env.is-native {
    color: #3dd68c;
    border-color: rgba(61, 214, 140, 0.35);
}
.moblab-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 720px) {
    .moblab-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.moblab-card {
    padding: 14px 14px 12px;
    border-radius: 16px;
    border: 1px solid #2f3336;
    background: #0f1114;
}
.moblab-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: #e7e9ea;
}
.moblab-card p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #8b98a5;
}
.moblab-btn {
    width: 100%;
    min-height: 44px;
    font-weight: 700 !important;
}
.moblab-status {
    margin: 10px 0 0 !important;
    font-size: 12px !important;
    font-weight: 650;
    line-height: 1.35;
    color: #8b98a5;
}
.moblab-status.is-ok { color: #3dd68c !important; }
.moblab-status.is-error { color: #ff6b7a !important; }

.moblab-modal[hidden] { display: none !important; }
.moblab-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.moblab-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}
.moblab-modal-card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    max-height: min(86vh, 640px);
    overflow: auto;
    border-radius: 18px;
    border: 1px solid #2f3336;
    background: #0f1114;
    color: #e7e9ea;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.moblab-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 8px;
}
.moblab-modal-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}
.moblab-modal-x {
    border: 0;
    background: rgba(255,255,255,0.08);
    color: #e7e9ea;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.moblab-modal-body {
    padding: 8px 14px 14px;
}
.moblab-modal-foot {
    padding: 0 14px 14px;
}
.moblab-modal-foot .btn {
    width: 100%;
    min-height: 44px;
}
.moblab-video {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 14px;
    background: #000;
    border: 1px solid #2f3336;
}
.moblab-hint {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #e7e9ea;
}
.moblab-hint-soft {
    color: #8b98a5 !important;
    font-size: 12px !important;
}
.moblab-mic-meter {
    height: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    border: 1px solid #2f3336;
}
.moblab-mic-meter span {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #1d9bf0, #3dd68c);
    transition: width 0.05s linear;
}
html.moblab-modal-open,
html.moblab-modal-open body {
    overflow: hidden !important;
}
/* ========== /mobile lab 20260727-mobtest1 ========== */

/* moblab close buttons always tappable on mobile WebView */
.moblab-modal-foot .btn,
.moblab-modal-x,
[data-moblab-close] {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: rgba(29,155,240,.25);
  touch-action: manipulation !important;
  min-height: 44px !important;
  cursor: pointer !important;
}
.moblab-modal-x {
  min-width: 44px !important;
  min-height: 44px !important;
}
.moblab-modal-card { pointer-events: auto !important; }
.moblab-modal-backdrop { pointer-events: auto !important; }
.moblab-modal[hidden],
.moblab-modal[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.moblab-modal.is-open,
.moblab-modal:not([hidden]) {
  display: flex !important;
}

/* ========== reel + media polish 20260727-reelui1 ========== */
.post-media-video,
.post-video-shell {
  position: relative !important;
  background: #0a0a0a !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.post-media-video video,
.post-video-shell video {
  background: #000 !important;
  min-height: 180px !important;
}
.post-video-play-badge {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 56px !important;
  height: 56px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.55) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) !important;
  pointer-events: none !important;
  display: grid !important;
  place-items: center !important;
  z-index: 2 !important;
}
.post-video-play-badge span {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 10px 0 10px 18px !important;
  border-color: transparent transparent transparent #fff !important;
  margin-left: 4px !important;
}
.post-media-video:has(video[poster]) .post-video-play-badge,
.post-media-video video:not([poster]) + .post-video-play-badge {
  opacity: 1;
}

/* Composer media preview thumbnails */
.composer-media-preview,
.media-preview.composer-media-preview {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 8px 0 !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid #2f3336 !important;
  background: #16181c !important;
  max-width: 100% !important;
}
.composer-media-thumb-wrap {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  flex: 0 0 72px !important;
  background: #000 !important;
}
.composer-media-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.composer-media-play {
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 8px 0 8px 14px !important;
  border-color: transparent transparent transparent #fff !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  pointer-events: none !important;
  left: 46% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.composer-media-meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #e7e9ea !important;
}
.composer-media-chip-clear,
.media-preview-remove {
  flex: 0 0 auto !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.1) !important;
  color: #e7e9ea !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  cursor: pointer !important;
}

/* Reels upload — cleaner mobile sheet */
@media (max-width: 1100px) {
  .reel-upload-modal.open {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .reel-upload-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, 920px) !important;
    border-radius: 18px 18px 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
  .reel-upload-handle {
    display: block !important;
  }
  .reel-upload-head {
    min-height: 52px !important;
    padding: 0 10px !important;
  }
  .reel-upload-title {
    font-size: 17px !important;
  }
  .reel-upload-submit {
    min-height: 40px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
  }
  .reel-upload-stage-wrap {
    padding: 12px 14px 8px !important;
  }
  .reel-upload-dropzone {
    min-height: 200px !important;
    border-radius: 18px !important;
    border-width: 1.5px !important;
    background: #111 !important;
    padding: 24px 16px !important;
  }
  .reel-upload-dropzone-inner strong {
    color: #e7e9ea !important;
    font-size: 16px !important;
  }
  .reel-upload-browse {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    min-width: 160px !important;
    margin-top: 6px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: #1d9bf0 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  .reel-upload-hint {
    font-size: 12px !important;
    color: #71767b !important;
  }
  .reel-upload-preview-frame {
    width: min(220px, 70vw) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.45) !important;
  }
  .reel-upload-preview-hint {
    font-size: 12px !important;
    color: #71767b !important;
  }
  .reel-upload-change {
    min-height: 40px !important;
    margin-top: 10px !important;
    border: 1px solid #2f3336 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #e7e9ea !important;
    font-weight: 700 !important;
    padding: 0 14px !important;
  }
  .reel-upload-fields {
    padding: 8px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    gap: 12px !important;
  }
  .reel-upload-field {
    display: grid !important;
    gap: 6px !important;
  }
  .reel-upload-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #71767b !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
  }
  .reel-upload-field input,
  .reel-upload-field textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #2f3336 !important;
    border-radius: 14px !important;
    background: #16181c !important;
    color: #e7e9ea !important;
    font-size: 16px !important;
    padding: 12px 14px !important;
    min-height: 48px !important;
  }
  .reel-upload-field textarea {
    min-height: 88px !important;
    resize: vertical !important;
  }
  .reel-upload-label-hint {
    font-size: 11px !important;
    color: #71767b !important;
  }
  .reel-upload-more {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    color: #1d9bf0 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: left !important;
    padding: 4px 0 8px !important;
    cursor: pointer !important;
    min-height: 40px !important;
  }
  .reel-upload-more-panel {
    display: grid !important;
    gap: 12px !important;
  }
  .reel-upload-more-panel[hidden] {
    display: none !important;
  }
}
/* ========== /reel + media polish 20260727-reelui1 ========== */

/* ========== reels-ui-insane 20260727-reels2 ========== */
/*
 * Feed .post-actions-* rules (horizontal icon+count) leak into reels side rail.
 * Scope everything under body.reels-page / .reel-slide with !important so counts
 * sit UNDER the chips (TikTok-style), not beside them.
 */

/* ---- immersive page chrome ---- */
body.reels-page {
  background: #000 !important;
}
body.reels-page .page,
body.reels-page .layout-reels,
body.reels-page .layout-reels .main-content,
body.reels-page .reels-main,
body.reels-page .reels-viewer {
  background: #000 !important;
}

/* ---- side rail: vertical stack, never flex-grow like feed metrics ---- */
body.reels-page .reel-side-rail {
  position: absolute !important;
  right: max(6px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(112px, calc(100px + env(safe-area-inset-bottom, 0px))) !important;
  z-index: 6 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 18px !important;
  width: 64px !important;
  max-width: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  order: unset !important;
  flex: none !important;
}

body.reels-page .reel-side-action,
body.reels-page .reel-side-action.post-actions-like,
body.reels-page .reel-side-action.post-actions-bookmark,
body.reels-page .reel-side-action.post-actions-views,
body.reels-page .reel-side-action.post-actions-repost,
body.reels-page .reel-side-like,
body.reels-page .reel-side-comments,
body.reels-page .reel-side-bookmark,
body.reels-page .reel-side-views {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  flex: 0 0 auto !important;
  order: unset !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  text-align: center !important;
  pointer-events: auto !important;
  position: relative !important;
}

body.reels-page .reel-side-action form.reel-like-form,
body.reels-page .reel-side-action form.like-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Buttons: COLUMN — icon chip on top, count under (kill feed inline-flex) */
body.reels-page .reel-side-btn,
body.reels-page .reel-side-btn.post-actions-btn,
body.reels-page .reel-side-btn.like-button,
body.reels-page .reel-side-btn.bookmark-btn,
body.reels-page .reel-side-btn.reel-comments-btn,
body.reels-page .reel-side-btn.reel-like-btn,
body.reels-page .post-actions-like .like-button.reel-side-btn,
body.reels-page .post-actions-bookmark .bookmark-btn.reel-side-btn,
body.social-page.reels-page .post-actions-like .like-button.reel-side-btn {
  appearance: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform 0.14s ease, color 0.18s ease !important;
}

body.reels-page .reel-side-btn:active {
  transform: scale(0.92) !important;
}

/* Glass chip behind SVG — real circular target */
body.reels-page .reel-side-chip {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  flex: 0 0 48px !important;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.14s ease !important;
}

/* Kill feed circular hit-target sizing on icons inside chips */
body.reels-page .reel-side-chip .post-actions-icon,
body.reels-page .reel-side-action .post-actions-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  flex: none !important;
}

body.reels-page .reel-side-chip .post-actions-icon svg,
body.reels-page .reel-side-action .post-actions-icon svg {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: block !important;
  fill: currentColor !important;
  color: inherit !important;
  flex-shrink: 0 !important;
}

/* Counts UNDER chips — never absolute-left like feed */
body.reels-page .reel-side-label,
body.reels-page .reel-side-label.post-actions-count,
body.reels-page .reel-side-label.count-value,
body.reels-page .reel-side-label.repost-count,
body.reels-page .reel-side-label.reel-comment-count,
body.reels-page .reel-side-label.reel-views-count,
body.reels-page .reel-side-action .post-actions-count,
body.reels-page .reel-side-action .count-value,
body.reels-page .reel-side-btn .post-actions-count,
body.reels-page .reel-side-btn .count-value {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 64px !important;
  min-width: 0 !important;
  min-height: 14px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
  color: #fff !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 8px rgba(0, 0, 0, 0.55) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
  float: none !important;
  flex: none !important;
  box-sizing: border-box !important;
}

body.reels-page .reel-side-label:empty,
body.reels-page .reel-side-action .post-actions-count:empty,
body.reels-page .reel-side-btn .post-actions-count:empty {
  display: none !important;
  visibility: hidden !important;
  min-height: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
}

/* Active / hover glow on chips only */
body.reels-page .reel-side-like .like-button.is-liked .reel-side-chip,
body.reels-page .reel-side-like .reel-side-btn.is-liked .reel-side-chip {
  background: rgba(249, 24, 128, 0.28) !important;
  border-color: rgba(249, 24, 128, 0.55) !important;
  box-shadow: 0 0 22px rgba(249, 24, 128, 0.4), 0 6px 16px rgba(0, 0, 0, 0.4) !important;
  color: #ff4d9a !important;
}
body.reels-page .reel-side-like .like-button.is-liked,
body.reels-page .reel-side-like .like-button.is-liked .post-actions-icon,
body.reels-page .reel-side-like .like-button.is-liked .post-actions-icon svg {
  color: #ff4d9a !important;
  fill: currentColor !important;
}
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked .reel-side-chip {
  background: rgba(255, 212, 0, 0.22) !important;
  border-color: rgba(255, 212, 0, 0.5) !important;
  box-shadow: 0 0 20px rgba(255, 212, 0, 0.32), 0 6px 16px rgba(0, 0, 0, 0.4) !important;
  color: #ffd400 !important;
}
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked,
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked .post-actions-icon,
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked .post-actions-icon svg {
  color: #ffd400 !important;
  fill: currentColor !important;
}
body.reels-page .reel-side-btn:hover .reel-side-chip,
body.reels-page .reel-side-btn:focus-visible .reel-side-chip {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  transform: scale(1.04) !important;
}
body.reels-page .reel-side-views.reel-views-stats {
  cursor: pointer !important;
}
body.reels-page .reel-side-views .reel-side-chip {
  color: #fff !important;
}

/* Views action is a bare div with chip+label — keep column layout */
body.reels-page .reel-side-views {
  gap: 5px !important;
}

/* ---- bottom caption / author ---- */
body.reels-page .reel-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 4 !important;
  padding: 28px 72px calc(18px + env(safe-area-inset-bottom, 0px)) 14px !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 28%,
    rgba(0, 0, 0, 0.72) 100%
  ) !important;
  display: grid !important;
  gap: 10px !important;
  pointer-events: none !important;
}
body.reels-page .reel-overlay a,
body.reels-page .reel-overlay button {
  pointer-events: auto !important;
}
body.reels-page .reel-author {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: 100% !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75) !important;
}
body.reels-page .reel-author .reel-avatar,
body.reels-page .reel-author .author-avatar,
body.reels-page .reel-author > img,
body.reels-page .reel-author a > img:not(.user-badge-emoji):not(.user-badge-icon) {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
  flex-shrink: 0 !important;
}
body.reels-page .reel-author-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: min(52vw, 240px) !important;
}
/* Keep profile badge emojis sized with the name, not giant */
body.reels-page .reel-author .user-badge-emoji,
body.reels-page .reel-author .user-badge-tip-btn,
body.reels-page .reel-author .user-badge-tip-btn .user-badge-emoji {
  width: 1em !important;
  height: 1em !important;
  min-width: 1em !important;
  min-height: 1em !important;
  max-width: 1.1em !important;
  max-height: 1.1em !important;
  font-size: 1em !important;
  line-height: 1 !important;
  vertical-align: -0.1em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 4px !important;
}
body.reels-page .reel-caption {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  max-height: 4.2em !important;
  overflow: hidden !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  word-break: break-word !important;
}
body.reels-page .reel-caption a {
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* ---- video + slide ---- */
body.reels-page .reel-slide {
  background: #000 !important;
}
body.reels-page .reel-video {
  background: #000 !important;
  object-fit: cover !important;
}
body.reels-page .reel-chrome {
  z-index: 5 !important;
}

/* Mute + overflow */
body.reels-page .reel-mute-toggle {
  width: 42px !important;
  height: 42px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
body.reels-page .reel-post-menu .post-menu-trigger {
  width: 42px !important;
  height: 42px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* ---- MOBILE / APP ---- */
@media (max-width: 1100px) {
  body.reels-page .reels-viewer,
  body.reels-page .reel-slide {
    height: calc(100dvh - var(--header-mobile) - var(--nav-mobile)) !important;
    min-height: calc(100dvh - var(--header-mobile) - var(--nav-mobile)) !important;
  }
  body.reels-page .reel-side-rail {
    right: max(4px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(96px, calc(84px + env(safe-area-inset-bottom, 0px))) !important;
    gap: 16px !important;
    width: 60px !important;
    max-width: 60px !important;
  }
  body.reels-page .reel-side-action,
  body.reels-page .reel-side-btn {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
  }
  body.reels-page .reel-side-chip {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    flex-basis: 50px !important;
  }
  body.reels-page .reel-side-chip .post-actions-icon,
  body.reels-page .reel-side-chip .post-actions-icon svg {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
  body.reels-page .reel-side-label,
  body.reels-page .reel-side-action .post-actions-count {
    font-size: 12px !important;
    font-weight: 800 !important;
    max-width: 60px !important;
  }
  body.reels-page .reel-overlay {
    padding: 32px 68px max(16px, env(safe-area-inset-bottom, 0px)) 12px !important;
  }
  body.reels-page .reel-author-name {
    max-width: min(48vw, 200px) !important;
  }
}

/* Capacitor / very small phones */
@media (max-width: 400px) {
  body.reels-page .reel-side-rail {
    width: 56px !important;
    max-width: 56px !important;
    gap: 14px !important;
  }
  body.reels-page .reel-side-action,
  body.reels-page .reel-side-btn {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }
  body.reels-page .reel-side-chip {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }
  body.reels-page .reel-side-chip .post-actions-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ---- DESKTOP: cinema phone frame ---- */
@media (min-width: 1101px) {
  body.reels-page {
    background: #050505 !important;
  }
  body.reels-page .layout-reels {
    background: transparent !important;
  }
  body.reels-page .layout-reels .main-content {
    background: #050505 !important;
    border-left-color: #1a1a1a !important;
    border-right-color: #1a1a1a !important;
  }
  body.reels-page .reels-main {
    background: transparent !important;
    padding-bottom: 12px !important;
  }
  body.reels-page .reels-desktop-upload {
    width: min(440px, 100%) !important;
    max-width: 440px !important;
    padding: 12px 8px 8px !important;
  }
  body.reels-page .reel-upload-toggle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e7e9ea !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  body.reels-page .reel-upload-toggle:hover {
    background: rgba(29, 155, 240, 0.2) !important;
    color: #1d9bf0 !important;
    border-color: rgba(29, 155, 240, 0.4) !important;
  }
  body.reels-page .reels-viewer {
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    height: min(calc(100vh - 72px), 860px) !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 24px 80px rgba(0, 0, 0, 0.65),
      0 0 60px rgba(29, 155, 240, 0.08) !important;
    background: #000 !important;
  }
  body.reels-page .reel-slide {
    height: min(calc(100vh - 72px), 860px) !important;
    min-height: min(calc(100vh - 72px), 860px) !important;
    border-radius: 0 !important;
  }
  body.reels-page .reel-side-rail {
    right: 12px !important;
    bottom: 120px !important;
    gap: 20px !important;
    width: 68px !important;
    max-width: 68px !important;
  }
  body.reels-page .reel-side-action,
  body.reels-page .reel-side-btn {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }
  body.reels-page .reel-side-chip {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }
  body.reels-page .reel-side-chip .post-actions-icon,
  body.reels-page .reel-side-chip .post-actions-icon svg {
    width: 26px !important;
    height: 26px !important;
  }
  body.reels-page .reel-side-label {
    font-size: 13px !important;
    max-width: 68px !important;
  }
  body.reels-page .reel-mute-toggle {
    position: absolute !important;
    top: 16px !important;
    left: max(12px, calc(50% - 210px + 14px)) !important;
  }
  body.reels-page .reel-overlay {
    padding: 36px 80px 28px 18px !important;
  }
  body.reels-page .reel-comments-panel {
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.55) !important;
  }
}

/* Light theme still black stage */
html[data-theme="light"] body.reels-page,
html[data-theme="light"] body.reels-page .reels-viewer,
html[data-theme="light"] body.reels-page .reel-slide {
  background: #000 !important;
}
/* ========== /reels-ui-insane 20260727-reels2 ========== */

/* ========== reel-preview + single-play 20260727-reelprev1 ========== */

/* Feed: hide custom play badge — only native video controls */
.post-video-play-badge,
button.post-video-play-badge,
.post-video-shell .post-video-play-badge,
.post-media-video .post-video-play-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Feed video shell: no min-height grey block fighting aspect ratio */
.post-media-video .post-video-shell {
  position: relative !important;
  background: #000 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.post-media-video video.feed-autoplay-video,
.post-video-shell video.feed-autoplay-video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 420px !important;
  background: #000 !important;
  min-height: 0 !important;
  border-radius: inherit !important;
}

/* Reel upload preview — real video, no grey chrome / no fake crop */
.reel-upload-preview {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: center !important;
}
.reel-upload-preview[hidden] {
  display: none !important;
}
.reel-upload-preview-frame {
  position: relative !important;
  width: min(260px, 72vw) !important;
  max-width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  cursor: default !important;
  touch-action: pan-y !important;
}
.reel-upload-preview-frame.has-video {
  background: #000 !important;
}
.reel-upload-preview-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #000 !important;
  border: 0 !important;
  display: block !important;
  /* no native UI */
  pointer-events: none !important;
}
/* Hide all native media chrome on preview (the grey play) */
.reel-upload-preview-video::-webkit-media-controls,
.reel-upload-preview-video::-webkit-media-controls-enclosure,
.reel-upload-preview-video::-webkit-media-controls-panel,
.reel-upload-preview-video::-webkit-media-controls-start-playback-button,
.reel-upload-preview-video::-webkit-media-controls-play-button,
.reel-upload-preview-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
.reel-upload-preview-mask {
  display: none !important;
}
.reel-upload-preview-hint {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #8b98a5 !important;
}
.reel-upload-change {
  min-height: 40px !important;
  border: 1px solid #2f3336 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #e7e9ea !important;
  font-weight: 700 !important;
  padding: 0 16px !important;
  cursor: pointer !important;
}

@media (max-width: 1100px) {
  .reel-upload-preview-frame {
    width: min(220px, 68vw) !important;
  }
}
/* ========== /reel-preview + single-play 20260727-reelprev1 ========== */

/* ========== sheets + reel icons + thumb 20260727-sheets1 ========== */

/* ---- Shared sheet / popup polish ---- */
.sheet-modal.post-chooser-modal,
.sheet-modal.reel-upload-modal,
.post-chooser-modal,
.reel-upload-modal,
.confirm-modal,
.new-message-modal,
.composer-modal,
.repost-quote-modal,
.reply-modal,
.report-modal {
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
}
.post-chooser-backdrop,
.reel-upload-backdrop,
.confirm-modal .confirm-backdrop,
.composer-modal .composer-backdrop,
.sheet-backdrop {
  background: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.sheet-handle,
.post-chooser-card .sheet-handle,
.reel-upload-handle {
  display: block !important;
  width: 40px !important;
  height: 4px !important;
  margin: 10px auto 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  flex-shrink: 0 !important;
}
.post-chooser-card,
.reel-upload-card,
.confirm-modal .confirm-card,
.composer-card,
.new-message-modal .new-message-card,
.repost-quote-modal .repost-quote-card,
.reply-modal-card,
.report-modal-card {
  width: min(480px, 100%) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-radius: 20px 20px 0 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 0 !important;
  background: #16181c !important;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden !important;
}
html[data-theme="light"] .post-chooser-card,
html[data-theme="light"] .reel-upload-card {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ---- Create chooser (Post / Reel) ---- */
.post-chooser-card {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
.post-chooser-head {
  display: grid !important;
  grid-template-columns: 44px 1fr 44px !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 52px !important;
  padding: 4px 10px 8px !important;
  border-bottom: 0 !important;
}
.post-chooser-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  color: #e7e9ea !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}
.post-chooser-close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  color: #e7e9ea !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.post-chooser-close:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}
.post-chooser-options {
  display: grid !important;
  gap: 10px !important;
  background: transparent !important;
  padding: 4px 14px 8px !important;
}
.post-chooser-option {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  padding: 14px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: #0f1114 !important;
  color: #e7e9ea !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
.post-chooser-option:hover,
.post-chooser-option:focus-visible {
  background: #1a1d22 !important;
  border-color: rgba(29, 155, 240, 0.45) !important;
  outline: none !important;
}
.post-chooser-option:active {
  transform: scale(0.985) !important;
}
.post-chooser-option-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
.post-chooser-option-icon svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}
.post-chooser-option-icon-feed {
  background: linear-gradient(145deg, rgba(29, 155, 240, 0.28), rgba(29, 155, 240, 0.1)) !important;
  color: #1d9bf0 !important;
  box-shadow: inset 0 0 0 1px rgba(29, 155, 240, 0.25) !important;
}
.post-chooser-option-icon-reel {
  background: linear-gradient(145deg, rgba(255, 45, 85, 0.3), rgba(255, 107, 138, 0.12)) !important;
  color: #ff4d6d !important;
  box-shadow: inset 0 0 0 1px rgba(255, 77, 109, 0.28) !important;
}
.post-chooser-option-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}
.post-chooser-option-text strong {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #e7e9ea !important;
}
.post-chooser-option-text span {
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: #8b98a5 !important;
}
.post-chooser-chevron {
  color: #6e767d !important;
  flex-shrink: 0 !important;
  display: grid !important;
  place-items: center !important;
}
.post-chooser-foot {
  margin: 4px 18px 0 !important;
  font-size: 12px !important;
  color: #6e767d !important;
  text-align: center !important;
}

@media (min-width: 1101px) {
  .post-chooser-modal {
    align-items: center !important;
    padding: 24px !important;
  }
  .post-chooser-card {
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: min(420px, 100%) !important;
    padding-bottom: 16px !important;
  }
  .sheet-handle,
  .post-chooser-card .sheet-handle {
    display: none !important;
  }
}

/* ---- Reels side icons: TikTok-clean ---- */
body.reels-page .reel-side-rail {
  gap: 20px !important;
  width: 58px !important;
  max-width: 58px !important;
  right: max(8px, env(safe-area-inset-right, 0px)) !important;
}
body.reels-page .reel-side-action,
body.reels-page .reel-side-btn {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  gap: 4px !important;
}
/* Drop muddy glass disks — solid white glyph + soft shadow */
body.reels-page .reel-side-chip {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff !important;
}
body.reels-page .reel-side-chip .post-actions-icon,
body.reels-page .reel-side-action .post-actions-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  background: transparent !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75)) !important;
}
body.reels-page .reel-side-chip .post-actions-icon svg,
body.reels-page .reel-side-svg,
body.reels-page .reel-side-chip svg {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  display: block !important;
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
body.reels-page .reel-side-label {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}
body.reels-page .reel-side-like .like-button.is-liked .reel-side-chip,
body.reels-page .reel-side-like .like-button.is-liked .post-actions-icon,
body.reels-page .reel-side-like .like-button.is-liked svg {
  color: #fe2c55 !important;
  filter: drop-shadow(0 0 8px rgba(254, 44, 85, 0.55)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked .reel-side-chip,
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked .post-actions-icon,
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked svg {
  color: #ffd400 !important;
  filter: drop-shadow(0 0 8px rgba(255, 212, 0, 0.45)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.reels-page .reel-side-btn:hover .reel-side-chip {
  transform: scale(1.08) !important;
  background: transparent !important;
}

/* ---- Reel upload snapshot thumb ---- */
.reel-upload-preview-frame {
  position: relative !important;
  width: min(240px, 70vw) !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
.reel-upload-preview-thumb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  z-index: 2 !important;
  background: #000 !important;
}
.reel-upload-preview-thumb[hidden] {
  display: none !important;
}
.reel-upload-preview-thumb.is-ready {
  display: block !important;
}
/* hide live video under thumb once snap ready (still used for capture) */
.reel-upload-preview-frame:has(.reel-upload-preview-thumb.is-ready) .reel-upload-preview-video {
  opacity: 0 !important;
  pointer-events: none !important;
}
.reel-upload-preview-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: #000 !important;
  z-index: 1 !important;
}
.reel-upload-preview-badge {
  position: absolute !important;
  left: 8px !important;
  bottom: 8px !important;
  z-index: 3 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  backdrop-filter: blur(6px) !important;
}
.reel-upload-preview-badge[hidden] {
  display: none !important;
}
.reel-upload-preview-hint {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #8b98a5 !important;
}

/* Reel upload card as sheet too */
.reel-upload-modal {
  align-items: flex-end !important;
  padding: 0 !important;
}
.reel-upload-card {
  max-height: min(92dvh, 900px) !important;
  border-radius: 20px 20px 0 0 !important;
}
@media (min-width: 1101px) {
  .reel-upload-modal {
    align-items: center !important;
    padding: 24px !important;
  }
  .reel-upload-card {
    border-radius: 20px !important;
    max-height: min(88vh, 860px) !important;
  }
}

/* outline reels icons must stay strokes */
body.reels-page .reel-side-chip svg[fill="none"],
body.reels-page .reel-side-svg[fill="none"] {
  fill: none !important;
}
body.reels-page .reel-side-chip svg:not([fill="none"]),
body.reels-page .reel-side-svg:not([fill="none"]) {
  fill: currentColor !important;
}
body.reels-page .reel-side-chip svg[stroke],
body.reels-page .reel-side-svg[stroke] {
  stroke: currentColor !important;
}

/* ========== /sheets + reel icons + thumb 20260727-sheets1 ========== */

/* ========== thumb scrub + rail spacing 20260727-thumbscrub1 ========== */

/* Scrubber */
.reel-upload-scrub {
  width: min(260px, 88vw) !important;
  margin: 10px auto 0 !important;
  display: grid !important;
  gap: 6px !important;
  text-align: left !important;
}
.reel-upload-scrub[hidden] { display: none !important; }
.reel-upload-scrub-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.reel-upload-scrub-label {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #e7e9ea !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.reel-upload-scrub-time {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1d9bf0 !important;
  font-variant-numeric: tabular-nums !important;
}
.reel-upload-scrub-range {
  width: 100% !important;
  accent-color: #1d9bf0 !important;
  height: 28px !important;
  cursor: pointer !important;
}
.reel-upload-scrub-hint {
  margin: 0 !important;
  font-size: 12px !important;
  color: #8b98a5 !important;
  line-height: 1.3 !important;
}
.reel-upload-preview-thumb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 2 !important;
  background: #000 !important;
}
.reel-upload-preview-thumb.is-ready { display: block !important; }
.reel-upload-preview-frame.has-thumb .reel-upload-preview-video {
  opacity: 0 !important;
  pointer-events: none !important;
}
.reel-upload-preview-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: #000 !important;
  z-index: 1 !important;
}

/* Profile reel tiles: image thumbs */
.profile-reel-tile {
  position: relative !important;
  overflow: hidden !important;
  background: #000 !important;
}
.profile-reel-tile .profile-reel-thumb,
.profile-reel-tile img.profile-reel-thumb,
.profile-reel-tile video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: #000 !important;
}
.post-reel-embed-media img.post-reel-embed-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: #000 !important;
}

/* Reels side rail: perfect column spacing, always room for count */
body.reels-page .reel-side-rail {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px !important;
  width: 56px !important;
  max-width: 56px !important;
}
body.reels-page .reel-side-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  min-height: 62px !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.reels-page .reel-side-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  gap: 3px !important;
  min-height: 62px !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.reels-page .reel-side-chip {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important;
  margin: 0 auto !important;
}
body.reels-page .reel-side-label,
body.reels-page .reel-side-action .post-actions-count,
body.reels-page .reel-side-btn .post-actions-count,
body.reels-page .reel-side-label.reel-bookmark-label {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  transform: none !important;
  width: 56px !important;
  max-width: 56px !important;
  min-height: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 15px !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.9) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}
/* never hide zero counts on reels */
body.reels-page .reel-side-label:empty::after {
  content: '0';
}
body.reels-page .reel-bookmark-label:empty::after {
  content: '';
}
body.reels-page .reel-side-label:empty,
body.reels-page .reel-side-action .post-actions-count:empty {
  display: block !important;
  visibility: visible !important;
  min-height: 15px !important;
}
/* ========== /thumb scrub + rail spacing 20260727-thumbscrub1 ========== */

/* ========== notifications clear overlap fix 20260727-notifclear2 ========== */
/* Kill the sticky Clear-all strip that covered notification rows on mobile. */

body.social-notifications .page-heading.page-heading-notifications {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  min-height: 53px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--social-border) !important;
  background: var(--bg-glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-sizing: border-box !important;
}

body.social-notifications .notifications-feed {
  position: relative !important;
  z-index: 1 !important;
  /* ensure first rows are never under a sticky bar */
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.social-notifications .notification-row {
  position: relative !important;
  z-index: 1 !important;
}

/* Mobile: Clear lives in the fixed top header — hide entire in-page heading bar */
@media (max-width: 1100px) {
  body.social-notifications .page-heading,
  body.social-notifications .page-heading.page-heading-notifications {
    display: none !important;
    position: static !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.social-notifications .btn-clear-notifications-desktop {
    display: none !important;
  }

  /* Compact text action in mobile header (right side) */
  body.social-notifications .mobile-header-clear-notifications {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 52px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid var(--social-border) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  body.social-notifications .mobile-header-clear-notifications:active {
    transform: scale(0.96);
    background: var(--social-hover) !important;
  }
  body.social-notifications .mobile-header-clear-label {
    display: block !important;
  }
  body.social-notifications .mobile-header-clear-notifications:disabled {
    opacity: 0.45 !important;
    pointer-events: none !important;
  }

  /* List starts immediately under mobile header — no second title bar */
  body.social-notifications .notifications-feed {
    margin-top: 0 !important;
  }
  body.social-notifications .notification-row:first-child {
    border-top: 0 !important;
  }
}

@media (min-width: 1101px) {
  body.social-notifications .mobile-header-clear-notifications {
    display: none !important;
  }
  body.social-notifications .btn-clear-notifications-desktop {
    display: inline-flex !important;
  }
}
/* ========== /notifications clear overlap fix 20260727-notifclear2 ========== */

/* ========== notif clear trash icon 20260727-notiftrash1 ========== */
body.social-notifications .mobile-header-clear-notifications {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--text, #e7e9ea) !important;
  box-shadow: none !important;
}
body.social-notifications .mobile-header-clear-notifications svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: currentColor !important;
  pointer-events: none !important;
}
body.social-notifications .mobile-header-clear-notifications:hover,
body.social-notifications .mobile-header-clear-notifications:focus-visible {
  background: rgba(244, 33, 46, 0.12) !important;
  color: #f4212e !important;
}
body.social-notifications .mobile-header-clear-notifications:active {
  transform: scale(0.94);
}
body.social-notifications .mobile-header-clear-label {
  display: none !important;
}

body.social-notifications .btn-clear-notifications-desktop {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body.social-notifications .btn-clear-notifications-desktop svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: currentColor !important;
  flex-shrink: 0 !important;
}
@media (max-width: 1100px) {
  body.social-notifications .btn-clear-notifications-desktop {
    display: none !important;
  }
}
/* ========== /notif clear trash icon 20260727-notiftrash1 ========== */

/* ========== reels bookmark + comments polish 20260727-reelsbm1 ========== */

/* Side rail: tighter, even stacks with counts */
body.reels-page .reel-side-rail {
  gap: 12px !important;
  width: 52px !important;
  max-width: 52px !important;
}
body.reels-page .reel-side-action,
body.reels-page .reel-side-btn {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  min-height: 54px !important;
  gap: 2px !important;
}
body.reels-page .reel-side-chip {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
}
body.reels-page .reel-side-chip .post-actions-icon,
body.reels-page .reel-side-chip .post-actions-icon svg,
body.reels-page .reel-side-svg {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
}
body.reels-page .reel-side-label,
body.reels-page .reel-side-label.reel-bookmark-count,
body.reels-page .reel-bookmark-count {
  display: block !important;
  visibility: visible !important;
  width: 52px !important;
  max-width: 52px !important;
  min-height: 14px !important;
  height: 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 14px !important;
  text-align: center !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.9) !important;
}
body.reels-page .reel-bookmark-label:empty::after,
body.reels-page .reel-side-label.reel-bookmark-count:empty::after {
  content: '0' !important;
}

/* Comments sheet — fuller, cleaner TikTok-style */
body.reels-page .reel-comments-sheet,
.reel-comments-sheet {
  z-index: 9500 !important;
}
body.reels-page .reel-comments-backdrop,
.reel-comments-backdrop {
  background: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
body.reels-page .reel-comments-panel,
.reel-comments-panel {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  transform: translateY(100%) !important;
  border-radius: 18px 18px 0 0 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 0 !important;
  background: #16181c !important;
  max-height: min(78dvh, 720px) !important;
  box-shadow: 0 -18px 50px rgba(0,0,0,.55) !important;
  overflow: hidden !important;
}
.reel-comments-sheet.open .reel-comments-panel,
body.reels-page .reel-comments-sheet.open .reel-comments-panel {
  transform: translateY(0) !important;
}
html[data-theme="light"] body.reels-page .reel-comments-panel,
html[data-theme="light"] .reel-comments-panel {
  background: #fff !important;
}
body.reels-page .reel-comments-head,
.reel-comments-head {
  padding: 10px 12px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: inherit !important;
}
body.reels-page .reel-comments-handle,
.reel-comments-handle {
  width: 44px !important;
  height: 4px !important;
  margin: 0 auto 10px !important;
  background: rgba(255,255,255,0.28) !important;
}
body.reels-page .reel-comments-title,
.reel-comments-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}
body.reels-page .reel-comments-close,
.reel-comments-close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  font-size: 22px !important;
  color: #e7e9ea !important;
}
body.reels-page .reel-comments-body,
.reel-comments-body {
  background: transparent !important;
}
body.reels-page .reel-comments-list,
.reel-comments-list {
  padding: 8px 12px 16px !important;
}
body.reels-page .reel-comments-list .reply-card,
.reel-comments-list .reply-card {
  padding: 12px 4px !important;
  border-bottom: 1px solid rgba(47,51,54,0.55) !important;
}
body.reels-page .reel-comments-loading,
body.reels-page .reel-comments-empty,
.reel-comments-loading,
.reel-comments-empty {
  padding: 40px 18px !important;
  font-size: 15px !important;
  color: #8b98a5 !important;
}
body.reels-page .reel-comments-compose,
.reel-comments-compose {
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  background: #121417 !important;
}
html[data-theme="light"] body.reels-page .reel-comments-compose {
  background: #f7f9f9 !important;
}
body.reels-page .reel-comments-form .comment-textarea,
.reel-comments-form .comment-textarea {
  min-height: 44px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
  padding: 10px 14px !important;
  background: #0f1114 !important;
  border: 1px solid #2f3336 !important;
  color: #e7e9ea !important;
}
body.reels-page .reel-comments-login,
.reel-comments-login {
  padding: 8px 0 !important;
}

@media (min-width: 1101px) {
  body.reels-page .reel-comments-panel,
  .reel-comments-panel {
    left: 50% !important;
    right: auto !important;
    width: min(440px, calc(100% - 24px)) !important;
    max-width: 440px !important;
    transform: translate(-50%, 100%) !important;
    border-radius: 18px 18px 0 0 !important;
  }
  .reel-comments-sheet.open .reel-comments-panel,
  body.reels-page .reel-comments-sheet.open .reel-comments-panel {
    transform: translate(-50%, 0) !important;
  }
}

@media (max-width: 1100px) {
  body.reels-page .reel-side-rail {
    gap: 11px !important;
    right: max(6px, env(safe-area-inset-right, 0px)) !important;
  }
  body.reels-page .reel-comments-panel {
    max-height: min(82dvh, 760px) !important;
  }
}
/* ========== /reels bookmark + comments polish 20260727-reelsbm1 ========== */

/* ========== desktop reels original restore 20260727-deskorig1 ========== */
@media (min-width: 1101px) {
  /* ---- page / column (original) ---- */
  body.reels-page {
    background: var(--bg) !important;
    overflow: hidden !important;
  }
  body.reels-page .page {
    background: var(--bg) !important;
  }
  body.reels-page .layout-reels {
    display: grid !important;
    grid-template-columns: minmax(0, var(--feed-width)) !important;
    width: var(--feed-width) !important;
    max-width: calc(100% - var(--content-offset)) !important;
    margin-left: var(--content-offset) !important;
    min-height: 100vh !important;
    background: transparent !important;
  }
  body.reels-page .layout-reels .main-content {
    width: 100% !important;
    max-width: var(--feed-width) !important;
    border-left: 1px solid var(--social-border) !important;
    border-right: 1px solid var(--social-border) !important;
    background: var(--bg) !important;
    padding: 0 !important;
  }
  body.reels-page .reels-main {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    background: var(--bg) !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  body.reels-page .reels-desktop-upload {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 10px 10px 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  body.reels-page .reel-upload-toggle {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: var(--text) !important;
    background: transparent !important;
  }
  body.reels-page .reel-upload-toggle:hover {
    background: var(--social-hover) !important;
    color: #fff !important;
  }

  /* ---- viewer / slides (original 420 column, full viewport height) ---- */
  body.reels-page .reels-viewer {
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    height: calc(100vh - 52px) !important;
    min-height: calc(100vh - 52px) !important;
    max-height: calc(100vh - 52px) !important;
    margin: 0 auto !important;
    border-left: 1px solid var(--social-border) !important;
    border-right: 1px solid var(--social-border) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-snap-type: y mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--bg) !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }
  body.reels-page .reels-viewer::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  body.reels-page .reel-slide {
    position: relative !important;
    height: calc(100vh - 52px) !important;
    min-height: calc(100vh - 52px) !important;
    max-height: calc(100vh - 52px) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    background: var(--bg) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }
  body.reels-page .reel-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: var(--bg) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }
  body.reels-page .reel-chrome {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }
  body.reels-page .reel-top-bar {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    pointer-events: none !important;
  }
  body.reels-page .reel-post-menu {
    pointer-events: auto !important;
  }
  body.reels-page .reel-post-menu .post-menu-trigger {
    width: 40px !important;
    height: 40px !important;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* ---- side rail + icons (original chips, aligned column) ---- */
  body.reels-page .reel-side-rail {
    position: absolute !important;
    right: 8px !important;
    left: auto !important;
    top: auto !important;
    bottom: 108px !important;
    z-index: 6 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    order: unset !important;
    flex: none !important;
  }
  body.reels-page .reel-side-action,
  body.reels-page .reel-side-action.post-actions-like,
  body.reels-page .reel-side-action.post-actions-bookmark,
  body.reels-page .reel-side-action.post-actions-views,
  body.reels-page .reel-side-like,
  body.reels-page .reel-side-comments,
  body.reels-page .reel-side-bookmark,
  body.reels-page .reel-side-views {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    min-width: 52px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    text-align: center !important;
    pointer-events: auto !important;
    position: relative !important;
    flex: 0 0 auto !important;
    order: unset !important;
  }
  body.reels-page .reel-side-action form.reel-like-form,
  body.reels-page .reel-side-action form.like-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.reels-page .reel-side-btn,
  body.reels-page .reel-side-btn.post-actions-btn,
  body.reels-page .reel-side-btn.like-button,
  body.reels-page .reel-side-btn.bookmark-btn,
  body.reels-page .reel-side-btn.reel-comments-btn,
  body.reels-page .reel-side-btn.reel-like-btn,
  body.social-page.reels-page .post-actions-like .like-button.reel-side-btn,
  body.social-page.reels-page .post-actions-bookmark .bookmark-btn.reel-side-btn {
    appearance: none !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 52px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    cursor: pointer !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  /* Original glass chips */
  body.reels-page .reel-side-chip {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
    color: #fff !important;
    flex: 0 0 46px !important;
  }
  body.reels-page .reel-side-chip .post-actions-icon,
  body.reels-page .reel-side-action .post-actions-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    filter: none !important;
    color: inherit !important;
    flex: none !important;
  }
  body.reels-page .reel-side-chip .post-actions-icon svg,
  body.reels-page .reel-side-svg,
  body.reels-page .reel-side-chip svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: block !important;
    color: inherit !important;
  }
  body.reels-page .reel-side-chip svg[fill="none"],
  body.reels-page .reel-side-svg[fill="none"] {
    fill: none !important;
  }
  body.reels-page .reel-side-chip svg:not([fill="none"]),
  body.reels-page .reel-side-svg:not([fill="none"]) {
    fill: currentColor !important;
  }
  body.reels-page .reel-side-chip svg[stroke],
  body.reels-page .reel-side-svg[stroke] {
    stroke: currentColor !important;
  }
  /* Counts under icons — aligned, always visible (incl 0) */
  body.reels-page .reel-side-label,
  body.reels-page .reel-side-label.post-actions-count,
  body.reels-page .reel-side-label.count-value,
  body.reels-page .reel-side-label.reel-comment-count,
  body.reels-page .reel-side-label.reel-views-count,
  body.reels-page .reel-side-label.reel-bookmark-count,
  body.reels-page .reel-side-label.reel-bookmark-label,
  body.reels-page .reel-side-action .post-actions-count,
  body.reels-page .reel-side-btn .post-actions-count {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    min-width: 52px !important;
    max-width: 64px !important;
    min-height: 14px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85) !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    overflow: visible !important;
    float: none !important;
    flex: none !important;
    pointer-events: none !important;
  }
  body.reels-page .reel-side-label:empty::after {
    content: '0' !important;
  }
  /* liked / bookmarked chip accents (original) */
  body.reels-page .reel-side-like .like-button.is-liked .reel-side-chip {
    background: rgba(249, 24, 128, 0.18) !important;
    border-color: rgba(249, 24, 128, 0.45) !important;
    box-shadow: 0 0 20px rgba(249, 24, 128, 0.28) !important;
    color: var(--social-like-active) !important;
  }
  body.reels-page .reel-side-like .like-button.is-liked,
  body.reels-page .reel-side-like .like-button.is-liked .post-actions-icon,
  body.reels-page .reel-side-like .like-button.is-liked .post-actions-icon svg {
    color: var(--social-like-active) !important;
  }
  body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked .reel-side-chip {
    background: rgba(255, 212, 0, 0.16) !important;
    border-color: rgba(255, 212, 0, 0.42) !important;
    box-shadow: 0 0 20px rgba(255, 212, 0, 0.22) !important;
    color: var(--social-bookmark) !important;
  }
  body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked,
  body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked .post-actions-icon,
  body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked .post-actions-icon svg {
    color: var(--social-bookmark) !important;
  }
  body.reels-page .reel-side-btn:hover .reel-side-chip {
    transform: none !important;
  }

  /* ---- caption overlay (original) ---- */
  body.reels-page .reel-overlay {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    z-index: 2 !important;
    padding: 16px 72px 24px 16px !important;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78)) !important;
    display: grid !important;
    gap: 10px !important;
    pointer-events: none !important;
  }
  body.reels-page .reel-overlay a,
  body.reels-page .reel-overlay button {
    pointer-events: auto !important;
  }
  body.reels-page .reel-author {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: inherit !important;
    text-shadow: none !important;
  }
  body.reels-page .reel-author .reel-avatar,
  body.reels-page .reel-author .author-avatar,
  body.reels-page .reel-author > img,
  body.reels-page .reel-author a > img:not(.user-badge-emoji):not(.user-badge-icon) {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
  }
  body.reels-page .reel-caption {
    margin: 0 !important;
    color: #f2f6fb !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    max-height: 4.2em !important;
    overflow: hidden !important;
    font-weight: 400 !important;
    text-shadow: none !important;
  }

  /* ---- mute (original desktop) ---- */
  body.reels-page .reel-mute-toggle {
    position: absolute !important;
    z-index: 24 !important;
    top: 16px !important;
    left: max(12px, calc(50% - 210px + 12px)) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  }

  /* ---- comments sheet (original centered card, not full browser) ---- */
  body.reels-page .reel-comments-sheet,
  .reel-comments-sheet {
    z-index: 9000 !important;
  }
  body.reels-page .reel-comments-backdrop,
  .reel-comments-backdrop {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.reels-page .reel-comments-panel,
  .reel-comments-panel {
    position: absolute !important;
    left: calc(var(--content-offset) + (var(--feed-width) / 2)) !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    max-height: min(78dvh, 640px) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--card-bg-panel) !important;
    border-radius: 16px 16px 0 0 !important;
    border-top: 1px solid var(--social-border) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45) !important;
    transform: translate(-50%, 100%) !important;
    transition: transform 0.24s ease !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .reel-comments-sheet.open .reel-comments-panel,
  body.reels-page .reel-comments-sheet.open .reel-comments-panel {
    transform: translate(-50%, 0) !important;
  }
  body.reels-page .reel-comments-head,
  .reel-comments-head {
    padding: 8px 12px 10px !important;
    border-bottom: 1px solid var(--social-border) !important;
    background: transparent !important;
  }
  body.reels-page .reel-comments-handle,
  .reel-comments-handle {
    width: 40px !important;
    height: 4px !important;
    margin: 2px auto 10px !important;
    background: var(--drag-handle) !important;
  }
  body.reels-page .reel-comments-title,
  .reel-comments-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }
  body.reels-page .reel-comments-close,
  .reel-comments-close {
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    font-size: 26px !important;
    color: var(--text-muted) !important;
  }
  body.reels-page .reel-comments-list,
  .reel-comments-list {
    padding: 8px 12px 12px !important;
  }
  body.reels-page .reel-comments-compose,
  .reel-comments-compose {
    flex-shrink: 0 !important;
    border-top: 1px solid var(--social-border) !important;
    background: var(--card-bg-panel) !important;
    padding: 10px 12px 12px !important;
  }
  body.reels-page .reel-comments-form .comment-textarea,
  .reel-comments-form .comment-textarea {
    min-height: 44px !important;
    max-height: 120px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    background: var(--input-bg, rgba(255,255,255,.04)) !important;
    border: 1px solid var(--social-border) !important;
    color: var(--text) !important;
  }
}
/* ========== /desktop reels original restore 20260727-deskorig1 ========== */

/* ========== reels icons + mute align + upload desk 20260727-reelalign1 ========== */

/* ===== Mute ↔ 3-dot: same row geometry on every slide snap ===== */
body.reels-page .reels-viewer {
  position: relative !important;
}
body.reels-page .reel-mute-toggle {
  position: absolute !important;
  z-index: 24 !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  /* stays pinned to viewer frame while slides scroll underneath */
}
body.reels-page .reel-top-bar {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
body.reels-page .reel-post-menu {
  pointer-events: auto !important;
}
body.reels-page .reel-post-menu .post-menu-trigger {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  border-radius: 999px !important;
}
body.reels-page .reel-post-menu .post-menu-trigger svg {
  width: 20px !important;
  height: 20px !important;
}
body.reels-page .reel-mute-icon,
body.reels-page .reel-mute-icon svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

/* ===== TikTok-clean side icons — desktop AND mobile ===== */
body.reels-page .reel-side-rail {
  position: absolute !important;
  right: 8px !important;
  left: auto !important;
  top: auto !important;
  bottom: max(108px, calc(96px + env(safe-area-inset-bottom, 0px))) !important;
  z-index: 6 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  width: 56px !important;
  max-width: 56px !important;
  min-width: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}
body.reels-page .reel-side-action,
body.reels-page .reel-side-btn {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  min-height: 0 !important;
  gap: 3px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.reels-page .reel-side-action form.like-form,
body.reels-page .reel-side-action form.reel-like-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 !important;
  width: 100% !important;
}
/* No glass disks — white glyphs + drop shadow (mobile look on desktop too) */
body.reels-page .reel-side-chip {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff !important;
}
body.reels-page .reel-side-chip .post-actions-icon,
body.reels-page .reel-side-action .post-actions-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75)) !important;
  color: inherit !important;
}
body.reels-page .reel-side-chip .post-actions-icon svg,
body.reels-page .reel-side-svg,
body.reels-page .reel-side-chip svg {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  display: block !important;
  color: #fff !important;
}
body.reels-page .reel-side-chip svg[fill="none"],
body.reels-page .reel-side-svg[fill="none"] {
  fill: none !important;
}
body.reels-page .reel-side-chip svg:not([fill="none"]),
body.reels-page .reel-side-svg:not([fill="none"]) {
  fill: currentColor !important;
}
body.reels-page .reel-side-chip svg[stroke],
body.reels-page .reel-side-svg[stroke] {
  stroke: currentColor !important;
}
body.reels-page .reel-side-label,
body.reels-page .reel-side-label.reel-bookmark-count,
body.reels-page .reel-bookmark-count,
body.reels-page .reel-side-action .post-actions-count {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  transform: none !important;
  width: 56px !important;
  max-width: 56px !important;
  min-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
body.reels-page .reel-side-label:empty::after {
  content: '0' !important;
}
body.reels-page .reel-side-like .like-button.is-liked .reel-side-chip,
body.reels-page .reel-side-like .like-button.is-liked .post-actions-icon,
body.reels-page .reel-side-like .like-button.is-liked svg {
  color: #fe2c55 !important;
  filter: drop-shadow(0 0 8px rgba(254, 44, 85, 0.55)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked .reel-side-chip,
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked .post-actions-icon,
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked svg {
  color: #ffd400 !important;
  filter: drop-shadow(0 0 8px rgba(255, 212, 0, 0.45)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.reels-page .reel-side-btn:hover .reel-side-chip {
  transform: scale(1.06) !important;
  background: transparent !important;
}

/* Overlay room for rail */
body.reels-page .reel-overlay {
  padding-right: 72px !important;
}

/* ===== Desktop: keep feed column layout, TikTok icons, mute align ===== */
@media (min-width: 1101px) {
  body.reels-page .reels-viewer {
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    height: calc(100vh - 52px) !important;
    min-height: calc(100vh - 52px) !important;
    max-height: calc(100vh - 52px) !important;
    margin: 0 auto !important;
    border-left: 1px solid var(--social-border) !important;
    border-right: 1px solid var(--social-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg) !important;
    position: relative !important;
  }
  body.reels-page .reel-slide {
    height: calc(100vh - 52px) !important;
    min-height: calc(100vh - 52px) !important;
    max-height: calc(100vh - 52px) !important;
  }
  body.reels-page .reel-mute-toggle {
    top: 10px !important;
    left: 10px !important;
  }
  body.reels-page .reel-top-bar {
    top: 10px !important;
    right: 10px !important;
  }
  body.reels-page .reel-side-rail {
    right: 8px !important;
    bottom: 108px !important;
    gap: 14px !important;
  }

  /* Create reel popup — centered desktop card (not forced bottom sheet) */
  body.reels-page .reel-upload-modal,
  .reel-upload-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
  }
  body.reels-page .reel-upload-card,
  .reel-upload-card {
    width: min(480px, calc(100% - 32px)) !important;
    max-width: 480px !important;
    max-height: min(88vh, 860px) !important;
    margin: 0 auto !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: #16181c !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html[data-theme="light"] body.reels-page .reel-upload-card,
  html[data-theme="light"] .reel-upload-card {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }
  body.reels-page .reel-upload-handle,
  .reel-upload-handle {
    display: none !important;
  }
  body.reels-page .reel-upload-head,
  .reel-upload-head {
    display: grid !important;
    grid-template-columns: 44px 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  body.reels-page .reel-upload-title,
  .reel-upload-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: #e7e9ea !important;
  }
  body.reels-page .reel-upload-close,
  .reel-upload-close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #e7e9ea !important;
    display: grid !important;
    place-items: center !important;
  }
  body.reels-page .reel-upload-submit,
  .reel-upload-submit {
    min-height: 36px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: #1d9bf0 !important;
    color: #fff !important;
    font-weight: 800 !important;
    border: 0 !important;
  }
  body.reels-page .reel-upload-submit:disabled,
  .reel-upload-submit:disabled {
    opacity: 0.45 !important;
  }
  body.reels-page .reel-upload-form,
  .reel-upload-form {
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  body.reels-page .reel-upload-stage-wrap,
  .reel-upload-stage-wrap {
    padding: 18px 18px 10px !important;
  }
  body.reels-page .reel-upload-dropzone,
  .reel-upload-dropzone {
    min-height: 200px !important;
    border: 1.5px dashed #2f3336 !important;
    border-radius: 16px !important;
    background: #0f1114 !important;
    padding: 28px 16px !important;
  }
  body.reels-page .reel-upload-browse,
  .reel-upload-browse {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    min-width: 160px !important;
    margin-top: 8px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: #1d9bf0 !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    border: 0 !important;
  }
  body.reels-page .reel-upload-preview-frame,
  .reel-upload-preview-frame {
    width: min(240px, 70%) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
  }
  body.reels-page .reel-upload-fields,
  .reel-upload-fields {
    padding: 8px 18px 18px !important;
    gap: 12px !important;
  }
  body.reels-page .reel-upload-field input,
  body.reels-page .reel-upload-field textarea,
  .reel-upload-field input,
  .reel-upload-field textarea {
    border-radius: 14px !important;
    border: 1px solid #2f3336 !important;
    background: #0f1114 !important;
    color: #e7e9ea !important;
    font-size: 15px !important;
    padding: 12px 14px !important;
    min-height: 46px !important;
  }
  body.reels-page .reel-upload-scrub,
  .reel-upload-scrub {
    width: min(260px, 90%) !important;
    margin: 10px auto 0 !important;
  }
  body.reels-page .reel-upload-change,
  .reel-upload-change {
    min-height: 40px !important;
    margin-top: 10px !important;
    border: 1px solid #2f3336 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #e7e9ea !important;
    font-weight: 700 !important;
    padding: 0 16px !important;
  }
  /* Post chooser desktop stay centered card */
  .post-chooser-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
  }
  .post-chooser-card {
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: min(420px, calc(100% - 32px)) !important;
    max-width: 420px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
  }
  .post-chooser-card .sheet-handle {
    display: none !important;
  }
}

/* Mobile: mute still matches 3-dot; viewer already below header via body padding */
@media (max-width: 1100px) {
  body.reels-page .reel-mute-toggle {
    top: 10px !important;
    left: 10px !important;
  }
  body.reels-page .reel-top-bar {
    top: 10px !important;
    right: 10px !important;
  }
  body.reels-page .reel-side-rail {
    bottom: max(96px, calc(84px + env(safe-area-inset-bottom, 0px))) !important;
    gap: 12px !important;
  }
}
/* ========== /reels icons + mute align + upload desk 20260727-reelalign1 ========== */

/* ========== reels mute + icons clean 20260727-reelclean1 ========== */

/* ---- MUTE: exactly one speaker ---- */
body.reels-page .reel-mute-toggle {
  position: absolute !important;
  z-index: 24 !important;
  top: 10px !important;
  left: 10px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
body.reels-page .reel-mute-toggle .reel-mute-icon {
  display: none !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.reels-page .reel-mute-toggle .reel-mute-icon svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}
/* muted state (default): show X speaker only */
body.reels-page .reel-mute-toggle:not(.is-unmuted) .reel-mute-icon-muted {
  display: block !important;
}
body.reels-page .reel-mute-toggle:not(.is-unmuted) .reel-mute-icon-unmuted {
  display: none !important;
}
/* unmuted: show waves speaker only */
body.reels-page .reel-mute-toggle.is-unmuted .reel-mute-icon-unmuted {
  display: block !important;
}
body.reels-page .reel-mute-toggle.is-unmuted .reel-mute-icon-muted {
  display: none !important;
}
body.reels-page .reel-mute-toggle.is-unmuted {
  color: #1d9bf0 !important;
  background: rgba(29, 155, 240, 0.18) !important;
  border-color: rgba(29, 155, 240, 0.4) !important;
}

/* 3-dot matches mute pill size + top row */
body.reels-page .reel-top-bar {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: none !important;
}
body.reels-page .reel-post-menu {
  pointer-events: auto !important;
}
body.reels-page .reel-post-menu .post-menu-trigger {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  display: grid !important;
  place-items: center !important;
}
body.reels-page .reel-post-menu .post-menu-trigger svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

/* ---- Side rail: one tight column, icons + counts centered ---- */
body.reels-page .reel-side-rail {
  position: absolute !important;
  right: 6px !important;
  left: auto !important;
  top: auto !important;
  bottom: max(100px, calc(88px + env(safe-area-inset-bottom, 0px))) !important;
  z-index: 6 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}
body.reels-page .reel-side-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}
body.reels-page .reel-side-action form.like-form,
body.reels-page .reel-side-action form.reel-like-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 2px !important;
}
body.reels-page .reel-side-btn,
body.reels-page .reel-side-btn.post-actions-btn,
body.reels-page .reel-side-btn.like-button,
body.reels-page .reel-side-btn.bookmark-btn,
body.reels-page .reel-side-btn.reel-comments-btn {
  appearance: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font: inherit !important;
  line-height: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
}
/* Icon hit area — no glass, just glyph */
body.reels-page .reel-side-chip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  flex: 0 0 44px !important;
  color: #fff !important;
}
body.reels-page .reel-side-chip .post-actions-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)) !important;
  color: inherit !important;
}
body.reels-page .reel-side-chip .post-actions-icon svg,
body.reels-page .reel-side-svg,
body.reels-page .reel-side-chip svg {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  display: block !important;
  margin: 0 auto !important;
  color: #fff !important;
}
body.reels-page .reel-side-chip svg[fill="none"],
body.reels-page .reel-side-svg[fill="none"] {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
}
body.reels-page .reel-side-chip svg:not([fill="none"]),
body.reels-page .reel-side-svg:not([fill="none"]) {
  fill: currentColor !important;
}
/* Count row — fixed height so every action lines up */
body.reels-page .reel-side-label,
body.reels-page .reel-side-label.post-actions-count,
body.reels-page .reel-side-label.reel-comment-count,
body.reels-page .reel-side-label.reel-views-count,
body.reels-page .reel-side-label.reel-bookmark-count,
body.reels-page .reel-side-label.count-value,
body.reels-page .reel-side-action .post-actions-count,
body.reels-page .reel-side-btn .post-actions-count {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  width: 52px !important;
  max-width: 52px !important;
  min-height: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 15px !important;
  letter-spacing: 0.01em !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
  flex: none !important;
}
body.reels-page .reel-side-label:empty::after {
  content: '0' !important;
}
body.reels-page .reel-side-like .like-button.is-liked .reel-side-chip,
body.reels-page .reel-side-like .like-button.is-liked .post-actions-icon,
body.reels-page .reel-side-like .like-button.is-liked svg {
  color: #fe2c55 !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked .reel-side-chip,
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked .post-actions-icon,
body.reels-page .reel-side-bookmark .bookmark-btn.is-bookmarked svg {
  color: #ffd400 !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.reels-page .reel-side-btn:hover .reel-side-chip {
  transform: scale(1.05) !important;
  background: transparent !important;
}
body.reels-page .reel-overlay {
  padding-right: 64px !important;
}

@media (min-width: 1101px) {
  body.reels-page .reels-viewer {
    position: relative !important;
  }
  body.reels-page .reel-mute-toggle {
    top: 10px !important;
    left: 10px !important;
  }
  body.reels-page .reel-top-bar {
    top: 10px !important;
    right: 10px !important;
  }
  body.reels-page .reel-side-rail {
    right: 8px !important;
    bottom: 112px !important;
    gap: 14px !important;
    width: 52px !important;
  }
}

@media (max-width: 1100px) {
  body.reels-page .reel-side-rail {
    right: 4px !important;
    bottom: max(92px, calc(80px + env(safe-area-inset-bottom, 0px))) !important;
    gap: 11px !important;
  }
}
/* ========== /reels mute + icons clean 20260727-reelclean1 ========== */

/* ========== mute per-slide + icon nudge 20260727-muteslide1 ========== */

/* Top row on every slide: speaker left, ⋯ right */
body.reels-page .reel-top-controls {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: 10px !important;
  z-index: 8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  height: 40px !important;
  pointer-events: none !important;
}
body.reels-page .reel-top-controls .reel-mute-toggle,
body.reels-page .reel-top-controls .reel-top-bar,
body.reels-page .reel-top-controls .post-menu,
body.reels-page .reel-top-controls .reel-post-menu {
  pointer-events: auto !important;
}

body.reels-page .reel-mute-toggle {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 40px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
  z-index: 8 !important;
}
body.reels-page .reel-mute-toggle .reel-mute-icon {
  display: none !important;
  width: 20px !important;
  height: 20px !important;
}
body.reels-page .reel-mute-toggle .reel-mute-icon svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}
body.reels-page .reel-mute-toggle:not(.is-unmuted) .reel-mute-icon-muted {
  display: block !important;
}
body.reels-page .reel-mute-toggle:not(.is-unmuted) .reel-mute-icon-unmuted {
  display: none !important;
}
body.reels-page .reel-mute-toggle.is-unmuted .reel-mute-icon-unmuted {
  display: block !important;
}
body.reels-page .reel-mute-toggle.is-unmuted .reel-mute-icon-muted {
  display: none !important;
}
body.reels-page .reel-mute-toggle.is-unmuted {
  color: #1d9bf0 !important;
  background: rgba(29, 155, 240, 0.2) !important;
  border-color: rgba(29, 155, 240, 0.42) !important;
}

body.reels-page .reel-top-bar {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: 40px !important;
  pointer-events: none !important;
}
body.reels-page .reel-top-bar .post-menu,
body.reels-page .reel-top-bar .reel-post-menu {
  pointer-events: auto !important;
}
body.reels-page .reel-post-menu .post-menu-trigger {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  display: grid !important;
  place-items: center !important;
}

/* Kill leftover global mute on viewer */
body.reels-page .reels-viewer > .reel-mute-toggle {
  display: none !important;
}

/* Side rail vertical nudges */
body.reels-page .reel-side-rail {
  gap: 10px !important;
}
body.reels-page .reel-side-like,
body.reels-page .reel-side-like-static {
  transform: translateY(-12px) !important;
}
body.reels-page .reel-side-comments,
body.reels-page .reel-side-comments-static {
  transform: translateY(10px) !important;
}
body.reels-page .reel-side-bookmark {
  transform: translateY(-8px) !important;
}
body.reels-page .reel-side-views {
  transform: none !important;
}

@media (min-width: 1101px) {
  body.reels-page .reel-top-controls {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
  }
  body.reels-page .reel-side-like {
    transform: translateY(-14px) !important;
  }
  body.reels-page .reel-side-comments {
    transform: translateY(12px) !important;
  }
  body.reels-page .reel-side-bookmark {
    transform: translateY(-10px) !important;
  }
}
/* ========== /mute per-slide + icon nudge 20260727-muteslide1 ========== */

/* ========== comments icon nudge 20260727-commentnudge1 ========== */
/* Comments was a bit low — raise slightly (still below heart) */
body.reels-page .reel-side-comments,
body.reels-page .reel-side-comments-static {
  transform: translateY(4px) !important;
}
@media (min-width: 1101px) {
  body.reels-page .reel-side-comments,
  body.reels-page .reel-side-comments-static {
    transform: translateY(5px) !important;
  }
}
/* ========== /comments icon nudge 20260727-commentnudge1 ========== */

/* ========== reel author role color 20260727-reactrole1 ========== */
/* Allow highest-role color on reels display name (don't force pure white on identity text) */
body.reels-page .reel-author {
  color: #fff !important;
}
body.reels-page .reel-author .identity-name-text,
body.reels-page .reel-author-name.identity-name-text,
body.reels-page .reel-author .identity-name-wrap .identity-name-text {
  /* inline style from social_identity_name_style_attr wins via !important there */
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75) !important;
}
body.reels-page .reel-author .identity-name-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: min(58vw, 280px) !important;
}
body.reels-page .reel-author .identity-name-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: min(52vw, 240px) !important;
}
/* Fallback when no role color: keep bright white */
body.reels-page .reel-author .identity-name-text:not([style]),
body.reels-page span.reel-author-name:not([style]) {
  color: #fff !important;
}
/* Community reactions must stay visible under bubbles */
.portal-messages-app .dm-messages[data-channel="community"] .dm-reactions,
.dm-messages[data-channel="community"] .dm-reactions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
  max-width: 100% !important;
}
.portal-messages-app .dm-messages[data-channel="community"] .dm-reaction-chip,
.dm-messages[data-channel="community"] .dm-reaction-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  visibility: visible !important;
}
/* ========== /reel author role color 20260727-reactrole1 ========== */


/* Ted Premium badge — no box; blue starburst reads on its own */
.user-badge-icon--premium {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    /* slightly larger so the seal is readable next to names */
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.18em;
}
.profile-title .user-badge-icon--premium {
    width: 1.35em;
    height: 1.35em;
}
.user-badge-tip-btn .user-badge-icon--premium {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ========== closer bigger badges + names 20260727-names2 ========== */
:root {
    --user-badge-emoji-size: 1.32em;
    --user-badge-emoji-size-profile: 1.5em;
}
.identity-name-wrap {
    gap: 0.04em !important;
    align-items: center !important;
}
.post-author .user-badges,
.notification-actor-link .user-badges,
.dm-thread-name .user-badges,
.profile-title .user-badges,
.suggestion-row-name .user-badges,
.reel-author .user-badges,
.tb-profile-preview-badges {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 0.05em !important;
}
.user-badge-emoji,
.user-badge-icon {
    width: var(--user-badge-emoji-size) !important;
    height: var(--user-badge-emoji-size) !important;
}
.profile-title .user-badge-emoji,
.profile-title .user-badge-icon,
.profile-title .user-badge-tip-btn {
    width: var(--user-badge-emoji-size-profile) !important;
    height: var(--user-badge-emoji-size-profile) !important;
}
/* Premium seal: slightly larger + snug to name */
.user-badge-icon--premium {
    width: 1.55em !important;
    height: 1.55em !important;
    margin-left: -0.06em !important;
    margin-right: -0.02em !important;
    vertical-align: -0.24em !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    object-fit: contain !important;
}
.profile-title .user-badge-icon--premium,
.profile-title .user-badge-tip-btn .user-badge-icon--premium {
    width: 1.7em !important;
    height: 1.7em !important;
    margin-left: -0.04em !important;
}
body.reels-page .reel-author .user-badge-emoji,
body.reels-page .reel-author .user-badge-icon,
body.reels-page .reel-author .user-badge-tip-btn,
body.reels-page .reel-author .user-badge-tip-btn .user-badge-emoji,
body.reels-page .reel-author .user-badge-tip-btn .user-badge-icon {
    width: 1.4em !important;
    height: 1.4em !important;
    min-width: 1.4em !important;
    min-height: 1.4em !important;
    max-width: 1.55em !important;
    max-height: 1.55em !important;
}
body.reels-page .reel-author .user-badge-icon--premium {
    width: 1.55em !important;
    height: 1.55em !important;
    max-width: 1.55em !important;
    max-height: 1.55em !important;
    margin-left: -0.06em !important;
}
.tb-profile-preview-name-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.04em !important;
}
.tb-profile-preview-name-row .tb-profile-preview-name {
    margin: 0 !important;
}
.tb-profile-preview-badges {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}
.tb-profile-preview-badges .user-badge-icon,
.tb-profile-preview-badges .user-badge-emoji {
    width: 1.55em !important;
    height: 1.55em !important;
}
.tb-profile-preview-badges .user-badge-icon--premium {
    width: 1.65em !important;
    height: 1.65em !important;
}
/* ========== /closer bigger badges + names 20260727-names2 ========== */

/* ========== thread fix 20260727-thread1 ========== */
/* Clean X-style continuous spine; aligned avatars; Show replies under parent */

.post-thread-main,
.post-thread-feed,
.post-detail-thread {
    --thread-pad-x: 16px;
    --thread-avatar-col: 40px;
    --thread-avatar-size: 40px;
    --thread-gap: 12px;
    --thread-spine-x: calc(var(--thread-pad-x) + (var(--thread-avatar-col) / 2));
    --thread-content-indent: calc(var(--thread-pad-x) + var(--thread-avatar-col) + var(--thread-gap));
    --thread-line: var(--social-border, #2f3336);
}

.post-detail-thread {
    --thread-pad-x: 16px;
    --thread-main-avatar-size: 48px;
    --thread-avatar-col: 40px;
    --thread-avatar-size: 40px;
}

@media (max-width: 640px) {
    .post-thread-main,
    .post-thread-feed,
    .post-detail-thread {
        --thread-pad-x: 12px;
        --thread-avatar-col: 36px;
        --thread-avatar-size: 36px;
        --thread-gap: 10px;
    }
    .post-detail-thread {
        --thread-main-avatar-size: 40px;
        --thread-avatar-col: 36px;
        --thread-avatar-size: 36px;
    }
}

/* Kill leftover elbows / grey nested panels / double lines */
.post-thread-replies .reply-thread-branch,
.reply-thread-branch,
.reply-thread-nested,
.reply-thread-meta {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.reply-card-nested::before,
.reply-card-nested::after,
.reply-card-nested:not(:last-child)::after,
.reply-thread-branch::before,
.reply-thread-branch:not([hidden])::before {
    content: none !important;
    display: none !important;
}

/* Main post → replies spine */
.post-detail-thread:has(.post-thread-replies > .reply-thread-node) .post-card-main {
    position: relative !important;
    border-bottom: none !important;
    overflow: visible !important;
}
.post-detail-thread:has(.post-thread-replies > .reply-thread-node) .post-card-main::after,
.post-card.post-thread-open:not(.post-card-expanded):has(+ .post-thread-feed:not([hidden]))::after {
    content: '' !important;
    position: absolute !important;
    left: var(--thread-spine-x) !important;
    width: 2px !important;
    transform: translateX(-50%) !important;
    background: var(--thread-line) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.post-detail-thread:has(.post-thread-replies > .reply-thread-node) .post-card-main::after {
    top: calc(12px + var(--thread-main-avatar-size, 48px) + 2px) !important;
    bottom: 0 !important;
}
.post-card.post-thread-open:not(.post-card-expanded):has(+ .post-thread-feed:not([hidden])) {
    position: relative !important;
    overflow: visible !important;
    border-bottom: none !important;
}
.post-card.post-thread-open:not(.post-card-expanded):has(+ .post-thread-feed:not([hidden]))::after {
    top: calc(12px + var(--thread-avatar-size) + 2px) !important;
    bottom: 0 !important;
}

/* Root + nested share one avatar column so the spine is a single straight line */
.post-thread-feed .reply-card-root,
.post-detail-thread .reply-card-root,
.post-thread-main .reply-card-root,
.reply-card-root,
.post-thread-feed .reply-card-nested,
.post-detail-thread .reply-card-nested,
.post-thread-main .reply-card-nested,
.reply-card-nested {
    display: grid !important;
    grid-template-columns: var(--thread-avatar-col) minmax(0, 1fr) !important;
    column-gap: var(--thread-gap) !important;
    row-gap: 0 !important;
    padding: 10px var(--thread-pad-x) 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: relative !important;
}
.reply-card-root:hover,
.reply-card-nested:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}
html[data-theme="light"] .reply-card-root:hover,
html[data-theme="light"] .reply-card-nested:hover {
    background: rgba(15, 20, 25, 0.03) !important;
}

.reply-rail {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: var(--thread-avatar-col) !important;
    min-height: var(--thread-avatar-size) !important;
    z-index: 1 !important;
}
.reply-card-root .post-avatar-link .author-avatar,
.reply-card-root .author-avatar,
.reply-card-nested .post-avatar-link .author-avatar,
.reply-card-nested .author-avatar {
    width: var(--thread-avatar-size) !important;
    height: var(--thread-avatar-size) !important;
    position: relative !important;
    z-index: 2 !important;
    background-color: var(--bg, #000) !important;
    border-radius: 999px !important;
}

.reply-body {
    min-width: 0 !important;
    padding-bottom: 2px !important;
}

/* Continuous spine through top-level nodes (and open nested) */
.post-thread-replies {
    position: relative !important;
}
.post-thread-replies > .reply-thread-node {
    position: relative !important;
    z-index: 1 !important;
    border: none !important;
}
.post-thread-replies > .reply-thread-node:not(:last-child)::after,
.post-thread-replies > .reply-thread-node--has-branch:has(.reply-thread-branch:not([hidden]))::after {
    content: '' !important;
    position: absolute !important;
    left: var(--thread-spine-x) !important;
    top: calc(10px + var(--thread-avatar-size) + 2px) !important;
    bottom: 0 !important;
    width: 2px !important;
    transform: translateX(-50%) !important;
    background: var(--thread-line) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Cap under last leaf avatar so the line does not run into empty space */
.post-thread-replies > .reply-thread-node:last-child:not(:has(.reply-thread-branch:not([hidden]))) .reply-card-root .reply-rail::after,
.post-thread-replies > .reply-thread-node--has-branch:has(.reply-thread-branch:not([hidden])):last-child .reply-thread-nested > .reply-card-nested:last-child .reply-rail::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: calc(var(--thread-avatar-size) + 2px) !important;
    bottom: -40vh !important;
    width: 8px !important;
    transform: translateX(-50%) !important;
    background: var(--bg, #000) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Connector stub from parent post into first reply */
.post-thread-replies > .reply-thread-node:first-child .reply-card-root .reply-rail::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: -12px !important;
    width: 2px !important;
    height: 12px !important;
    transform: translateX(-50%) !important;
    background: var(--thread-line) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Kill old rail stubs that mis-align */
.post-thread-replies > .reply-thread-node .reply-card-root .reply-rail::after,
.reply-thread-node--has-branch .reply-card-root .reply-rail::after {
    /* only last-leaf mask above may show */
}
.post-thread-replies > .reply-thread-node:not(:last-child) .reply-card-root .reply-rail::after,
.post-thread-replies > .reply-thread-node--has-branch:has(.reply-thread-branch:not([hidden])):not(:last-child) .reply-card-root .reply-rail::after {
    content: none !important;
    display: none !important;
}

/* Show / Hide replies — under content column, blue, aligned with text */
.reply-thread-meta {
    position: relative !important;
    z-index: 2 !important;
    padding: 0 var(--thread-pad-x) 4px var(--thread-content-indent) !important;
    margin: 0 !important;
    background: transparent !important;
}
.reply-show-replies-btn {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 2px 0 8px !important;
    min-height: 28px !important;
    border: none !important;
    background: none !important;
    color: var(--social-blue, #1d9bf0) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    cursor: pointer !important;
    text-align: left !important;
    box-shadow: none !important;
    font-family: inherit !important;
}
.reply-show-replies-btn:hover {
    text-decoration: underline !important;
    color: var(--social-blue, #1d9bf0) !important;
}
@media (max-width: 640px) {
    .reply-show-replies-btn {
        min-height: 40px !important;
        padding: 6px 0 10px !important;
        font-size: 15px !important;
    }
}

/* Nested flat under parent — same grid column */
.reply-thread-branch {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.reply-thread-branch[hidden] {
    display: none !important;
}
.reply-thread-nested {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.reply-thread-nested > .reply-card-nested {
    padding-top: 6px !important;
}

/* Feed "View N replies" under posts */
a.post-view-thread {
    display: inline-flex !important;
    align-items: center !important;
    margin: 4px 0 0 !important;
    padding: 4px 0 !important;
    color: var(--social-blue, #1d9bf0) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    min-height: 32px !important;
}
a.post-view-thread:hover {
    text-decoration: underline !important;
}

/* Typography consistent root/nested */
.reply-card-root .post-author,
.reply-card-nested .post-author {
    font-size: 15px !important;
    font-weight: 800 !important;
}
.reply-card-root .post-handle,
.reply-card-root .post-time,
.reply-card-nested .post-handle,
.reply-card-nested .post-time {
    font-size: 14px !important;
}
.reply-card-root .post-text,
.reply-card-root .reply-text,
.reply-card-nested .post-text,
.reply-card-nested .reply-text {
    font-size: 15px !important;
    line-height: 20px !important;
    margin: 2px 0 4px !important;
}

/* Action bars sit under text, not under avatar */
.reply-actions-thread,
.reply-actions-nested {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 0 2px -6px !important;
}

/* No divider lines between replies in a conversation block */
.post-thread-replies .reply-card,
.post-thread-replies > .reply-thread-node {
    border-bottom: none !important;
}
.post-thread-main .post-thread-replies {
    border-bottom: 1px solid var(--social-border, #2f3336);
}
.post-thread-feed .post-thread-main .post-thread-replies {
    border-bottom: none !important;
}

/* Show more (long posts) stays blue and left-aligned under text */
.post-text-block .post-read-more {
    display: inline !important;
    color: var(--social-blue, #1d9bf0) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
}
/* ========== /thread fix 20260727-thread1 ========== */

/* Premium name colour picker in edit profile */
.profile-edit-name-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.profile-edit-name-color-row input[type="color"] {
    width: 44px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--social-border, #2f3336);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}
.profile-edit-name-color-row #profileEditNameColor {
    max-width: 120px;
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.profile-edit-name-color-preview {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}
.profile-edit-name-color-preview strong {
    font-size: 16px;
    font-weight: 800;
}

/* ========== larger profile avatars 20260727-avsave1 ========== */
.profile-page .profile-avatar {
    width: 168px !important;
    height: 168px !important;
    margin-top: -96px !important;
    font-size: 2.4rem !important;
    border-width: 5px !important;
}
.profile-avatar-row .avatar-live-link {
    width: 168px !important;
    height: 168px !important;
    max-width: 168px !important;
    max-height: 168px !important;
    margin-top: -96px !important;
}
.profile-page .avatar-live-ring > .profile-avatar {
    border-width: 5px !important;
}
.profile-avatar-row {
    min-height: 72px !important;
}

/* Profile preview modal avatars */
.tb-profile-preview-avatar {
    width: 104px !important;
    height: 104px !important;
}
.tb-profile-preview-avatar-wrap {
    left: 16px !important;
    top: -52px !important;
}
.tb-profile-preview-avatar-wrap.is-live .avatar-live-link {
    width: 104px !important;
    height: 104px !important;
    max-width: 104px !important;
    max-height: 104px !important;
}
.tb-profile-preview-body {
    padding-top: 56px !important;
}

@media (min-width: 641px) {
    .profile-page .profile-avatar {
        width: 180px !important;
        height: 180px !important;
        margin-top: -100px !important;
        font-size: 2.6rem !important;
    }
    .profile-avatar-row .avatar-live-link {
        width: 180px !important;
        height: 180px !important;
        max-width: 180px !important;
        max-height: 180px !important;
        margin-top: -100px !important;
    }
    .tb-profile-preview-avatar {
        width: 112px !important;
        height: 112px !important;
    }
    .tb-profile-preview-avatar-wrap {
        top: -56px !important;
    }
    .tb-profile-preview-avatar-wrap.is-live .avatar-live-link {
        width: 112px !important;
        height: 112px !important;
        max-width: 112px !important;
        max-height: 112px !important;
    }
    .tb-profile-preview-body {
        padding-top: 60px !important;
    }
}

@media (max-width: 640px) {
    .profile-page .profile-avatar {
        width: 112px !important;
        height: 112px !important;
        margin-top: -60px !important;
        font-size: 1.6rem !important;
        border-width: 4px !important;
    }
    .profile-avatar-row .avatar-live-link {
        width: 112px !important;
        height: 112px !important;
        max-width: 112px !important;
        max-height: 112px !important;
        margin-top: -60px !important;
    }
    .profile-page .avatar-live-ring > .profile-avatar {
        border-width: 4px !important;
    }
    .profile-avatar-row {
        min-height: 52px !important;
    }
    /* Mobile edit sheet: always show footer Save */
    .profile-edit-foot {
        display: flex !important;
    }
    .profile-edit-save-top {
        display: inline-flex !important;
    }
}
/* ========== /larger profile avatars 20260727-avsave1 ========== */

/* Profile music dock + themed profile 20260727-thememusic2 */
.profile-music-dock {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 0 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(12,16,24,.94), rgba(12,16,24,.88));
  border-bottom: 1px solid rgba(255,196,64,.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.profile-music-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,196,64,.22);
  background: rgba(255,196,64,.08);
  color: #ffe6a8;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.profile-music-toggle.is-playing {
  border-color: rgba(80, 200, 140, .35);
  background: rgba(80, 200, 140, .1);
  color: #c8f5d8;
}
.profile-music-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.profile-music-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.profile-music-copy strong {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-music-copy small {
  font-size: 12px;
  opacity: .8;
}

@media (max-width: 640px) {
  .profile-music-dock {
    position: sticky;
    top: var(--mobile-header-h, 52px);
  }
}


/* profile-fx simple: transparent canvas overlay, never blocks UI */
.profile-fx-canvas {
  pointer-events: none !important;
  background: transparent !important;
}
body > .profile-fx-canvas {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 3 !important;
}
.tb-profile-preview-card > .profile-fx-canvas {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  border-radius: inherit;
}

/* ========== caret + emote align 20260727-caretfix1 ========== */
.composer-highlight-wrap {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
}
.composer-highlight-backdrop {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    background: transparent !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}
.composer-highlight-input,
textarea.composer-highlight-input {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    caret-color: var(--text, #e7e9ea) !important;
    letter-spacing: 0 !important;
    font-kerning: none !important;
    font-variant-ligatures: none !important;
}
.composer-highlight-input,
.composer-highlight-backdrop,
textarea.composer-highlight-input {
    letter-spacing: 0 !important;
    font-kerning: none !important;
    font-variant-ligatures: none !important;
}
.composer-hl-emote-slot,
.composer-hl-emote-compact,
.composer-hl-emote-slot.composer-hl-emote-compact {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    vertical-align: -0.12em !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    letter-spacing: 0 !important;
    box-sizing: border-box !important;
}
.composer-hl-emote,
.composer-hl-emote-compact .composer-hl-emote,
.composer-hl-emote-slot .composer-hl-emote {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
    vertical-align: top !important;
}
.composer-hl-emote-missing {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    vertical-align: -0.12em !important;
}
/* ========== /caret + emote align 20260727-caretfix1 ========== */

/* caret-emote-final-override */
.composer-hl-emote-slot,
.composer-hl-emote-compact,
.composer-hl-emote-slot.composer-hl-emote-compact {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  letter-spacing: 0 !important;
}
.composer-hl-emote-slot .composer-hl-emote,
.composer-hl-emote {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
}

/* ========== emote enter-space 20260727-emotespace1 ========== */
/* Emotes sit inside the line like normal emoji — no tall gap after Enter */
.composer-highlight-backdrop {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: inherit;
}
.composer-hl-emote-slot,
.composer-hl-emote-compact,
.composer-hl-emote-slot.composer-hl-emote-compact {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
    vertical-align: -0.15em !important;
    overflow: hidden !important;
    letter-spacing: 0 !important;
    box-sizing: border-box !important;
    /* do not force height/width — JS sets measured px */
}
.composer-hl-emote,
.composer-hl-emote-slot .composer-hl-emote,
.composer-hl-emote-compact .composer-hl-emote {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: top !important;
    object-fit: contain !important;
    /* kill old display:block gap under images */
}
.composer-hl-emote-missing {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    vertical-align: -0.15em !important;
    overflow: hidden !important;
}
/* ========== /emote enter-space 20260727-emotespace1 ========== */

/* ========== unified emote size 20260727-emotesize1 ========== */
/* One final size for custom emotes in posts, comments, and chat bubbles.
   Stops small→large pop when PHP HTML is later replaced by JS. */
img.dm-msg-emote-img,
img.social-emote-img,
img.post-emote-img,
.dm-msg-emote-img,
.social-emote-img,
.post-emote-img,
.dm-message-body .dm-msg-emote-img,
.dm-bubble .dm-msg-emote-img,
.dm-bubble-text img.dm-msg-emote-img,
.dm-bubble-text img.social-emote-img,
.dm-bubble-text img.post-emote-img,
.post-text img.social-emote-img,
.post-text img.post-emote-img,
.reply-text img.social-emote-img,
.reply-text img.post-emote-img {
    display: inline-block !important;
    width: 1.35em !important;
    height: 1.35em !important;
    max-width: 1.35em !important;
    max-height: 1.35em !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    vertical-align: -0.25em !important;
    margin: 0 0.05em !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    /* no transitions — size must be correct on first paint */
    transition: none !important;
}
/* ========== /unified emote size 20260727-emotesize1 ========== */

/* ========== mobile text visible 20260727-mobvis1 ========== */
/* Typed characters must ALWAYS be visible on phones / WebView apps.
   Transparent overlay is desktop-only (emote images in field). */
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
    .composer-highlight-input,
    textarea.composer-highlight-input,
    .composer-highlight-wrap textarea,
    body.portal-section-messages .dm-compose textarea,
    body.portal-section-messages .dm-compose .composer-highlight-input,
    body.portal-section-messages.msg-has-thread .dm-compose textarea,
    body.portal-section-messages.msg-has-thread .dm-compose .composer-highlight-input,
    .portal-messages-app .dm-compose textarea,
    .portal-messages-app .dm-compose .composer-highlight-input,
    body.social-messages .dm-compose textarea,
    body.social-messages .dm-compose .composer-highlight-input,
    .composer-textarea,
    .comment-textarea,
    #dmComposeInput,
    #dmEditInput,
    #postEditContent,
    .feed-composer textarea,
    .composer-modal textarea,
    .reply-modal textarea {
        color: #e7e9ea !important;
        -webkit-text-fill-color: #e7e9ea !important;
        caret-color: #e7e9ea !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .composer-highlight-backdrop,
    .composer-highlight-wrap .composer-highlight-backdrop,
    body.portal-section-messages .composer-highlight-backdrop,
    .portal-messages-app .composer-highlight-backdrop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    /* When highlight wrap remains, give the field its own pill background */
    body.portal-section-messages .dm-compose .composer-highlight-wrap textarea,
    .portal-messages-app .dm-compose .composer-highlight-wrap textarea,
    .composer-highlight-wrap > textarea {
        background: #16181c !important;
        color: #e7e9ea !important;
        -webkit-text-fill-color: #e7e9ea !important;
    }
    body.portal-section-messages .dm-compose textarea::placeholder,
    body.portal-section-messages .dm-compose .composer-highlight-input::placeholder,
    .portal-messages-app .dm-compose textarea::placeholder,
    .composer-highlight-input::placeholder,
    textarea.composer-highlight-input::placeholder {
        color: #71767b !important;
        -webkit-text-fill-color: #71767b !important;
        opacity: 1 !important;
    }
}
/* Desktop-only: transparent text for highlight overlay */
@media (min-width: 1101px) and (hover: hover) {
    textarea.composer-highlight-input.composer-highlight-input {
        /* keep existing transparent overlay on real desktop */
    }
}
/* ========== /mobile text visible 20260727-mobvis1 ========== */

/* ========== premium settings UI 20260727-premui1 ========== */
.premium-settings-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 28px;
  max-width: 640px;
  width: 100%;
  box-sizing: border-box;
}
.premium-card {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--social-border, #2f3336);
  background: rgba(255,255,255,0.03);
}
.premium-card + .premium-card {
  margin-top: 0;
}
.premium-card-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text, #e7e9ea);
  line-height: 1.25;
}
.premium-card-desc {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted, #8b98a5);
}
.premium-name-color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.premium-name-color-row input[type="color"] {
  width: 48px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.premium-name-color-row .premium-hex-input {
  flex: 1 1 120px;
  min-width: 0;
  max-width: 160px;
  text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
}
.premium-name-preview {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted, #8b98a5);
}
.premium-name-preview strong {
  font-weight: 800;
}
.premium-theme-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  width: 100%;
}
.premium-theme-swatch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.02);
  box-sizing: border-box;
  min-width: 0;
}
.premium-theme-swatch.is-selected {
  border-color: rgba(29,155,240,.65);
  background: rgba(29,155,240,.08);
}
.premium-theme-swatch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.premium-theme-swatch-chip {
  display: block;
  width: 100%;
  aspect-ratio: 1.4;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
}
.premium-theme-swatch-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text, #e7e9ea);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}
.premium-fx-options {
  display: grid;
  gap: 10px;
  width: 100%;
}
.premium-fx-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  box-sizing: border-box;
  background: rgba(0,0,0,.15);
}
.premium-fx-option:has(input:checked),
.premium-fx-option.is-on {
  border-color: rgba(29,155,240,.55);
  background: rgba(29,155,240,.08);
}
.premium-fx-option input {
  margin-top: 3px;
  flex: 0 0 auto;
}
.premium-fx-option strong {
  display: block;
  font-size: 14px;
  color: var(--text, #e7e9ea);
}
.premium-fx-option small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted, #8b98a5);
  line-height: 1.35;
}
.premium-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
}
.premium-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #8b98a5);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.premium-input,
.premium-settings-form .settings-input,
.premium-settings-form input[type="text"],
.premium-settings-form input[type="url"],
.premium-settings-form input[type="file"] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--social-border, #2f3336);
  background: #0f1114;
  color: var(--text, #e7e9ea);
  font-size: 15px;
}
.premium-settings-form input[type="file"] {
  padding: 10px;
  font-size: 13px;
}
.premium-music-current {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(29,155,240,.08);
  border: 1px solid rgba(29,155,240,.25);
  font-size: 13px;
  color: var(--text, #e7e9ea);
  word-break: break-word;
}
.premium-music-current audio {
  display: block;
  width: 100%;
  margin-top: 8px;
}
.premium-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted, #8b98a5);
}
.premium-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  color: var(--text-muted, #8b98a5);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.premium-or::before,
.premium-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--social-border, #2f3336);
}
.premium-save-row {
  position: sticky;
  bottom: 0;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 28%);
  z-index: 2;
}
.premium-save-row .btn {
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  font-weight: 800;
}
body.social-settings .settings-detail-body .premium-settings-form {
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .premium-settings-form {
    gap: 12px;
    padding-bottom: 40px;
  }
  .premium-card {
    padding: 14px 12px;
    border-radius: 14px;
  }
  .premium-theme-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .premium-theme-swatch {
    padding: 6px 4px;
  }
  .premium-name-color-row .premium-hex-input {
    max-width: none;
    flex: 1 1 auto;
  }
  .premium-name-color-row .btn {
    width: 100%;
  }
  .premium-name-color-row {
    display: grid;
    grid-template-columns: 48px 1fr;
  }
  .premium-name-color-row .btn {
    grid-column: 1 / -1;
  }
}
/* ========== /premium settings UI 20260727-premui1 ========== */

/* ========== dm mention contrast 20260727-dmmention1 ========== */
/* @mentions in chat: stand out from blue outgoing bubbles (was near-white) */
.dm-bubble-text .post-mention,
.dm-bubble-text .discord-mention,
.dm-message-body .post-mention,
.dm-message-body .discord-mention,
.composer-chat-preview .post-mention,
.composer-chat-preview .discord-mention {
    color: #00c853 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    background: rgba(0, 200, 83, 0.14);
    padding: 0 4px;
    border-radius: 4px;
}
.dm-bubble-text .post-mention:hover,
.dm-bubble-text .discord-mention:hover {
    color: #00e676 !important;
    text-decoration: underline !important;
    background: rgba(0, 230, 118, 0.18);
}
/* Outgoing blue bubble: bright mint + dark chip so @name never matches white body text */
.dm-msg.outgoing .dm-bubble-text .post-mention,
.dm-msg.outgoing .dm-bubble-text .discord-mention,
.dm-msg.outgoing .dm-message-body .post-mention,
.dm-msg.outgoing .dm-message-body .discord-mention {
    color: #b9f6ca !important;
    font-weight: 800 !important;
    background: rgba(0, 0, 0, 0.22) !important;
    padding: 1px 5px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.dm-msg.outgoing .dm-bubble-text .post-mention:hover,
.dm-msg.outgoing .dm-bubble-text .discord-mention:hover {
    color: #e8ffe8 !important;
    background: rgba(0, 0, 0, 0.32) !important;
    text-decoration: underline !important;
}
/* Incoming dark bubble: solid green */
.dm-msg.incoming .dm-bubble-text .post-mention,
.dm-msg.incoming .dm-bubble-text .discord-mention {
    color: #00e676 !important;
    font-weight: 800 !important;
    background: rgba(0, 230, 118, 0.12) !important;
    padding: 1px 5px !important;
    border-radius: 5px !important;
}
/* ========== /dm mention contrast 20260727-dmmention1 ========== */

/* ========== dm edit modal visible text 20260727-editedit1 ========== */
/* Edit message popup must NEVER use transparent highlight text */
#dmEditModal .dm-edit-textarea,
#dmEditModal textarea,
#dmEditInput,
textarea#dmEditInput,
textarea.dm-edit-textarea,
.dm-edit-modal .dm-edit-textarea,
.dm-edit-modal textarea,
.dm-edit-sheet .dm-edit-textarea,
.dm-edit-panel .dm-edit-textarea {
    color: #e7e9ea !important;
    -webkit-text-fill-color: #e7e9ea !important;
    caret-color: #e7e9ea !important;
    background: #000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-opacity: 1 !important;
}
#dmEditModal .dm-edit-textarea::placeholder,
#dmEditInput::placeholder,
textarea.dm-edit-textarea::placeholder {
    color: #71767b !important;
    -webkit-text-fill-color: #71767b !important;
    opacity: 1 !important;
}
/* If highlight wrap was incorrectly applied inside edit modal, kill it */
#dmEditModal .composer-highlight-backdrop,
.dm-edit-modal .composer-highlight-backdrop,
#dmEditModal .composer-highlight-wrap .composer-highlight-backdrop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
#dmEditModal .composer-highlight-input,
#dmEditModal textarea.composer-highlight-input,
#dmEditModal .composer-highlight-wrap textarea {
    color: #e7e9ea !important;
    -webkit-text-fill-color: #e7e9ea !important;
    caret-color: #e7e9ea !important;
    background: #000 !important;
}
#dmEditModal .composer-highlight-wrap {
    background: #000 !important;
}
/* ========== /dm edit modal visible text 20260727-editedit1 ========== */

/* ========== dm paste media preview 20260727-dmpaste1 ========== */
/* Override old media-tag-only hide — pasted/attached media must show a real thumb */
body.portal-section-messages .dm-compose .media-preview.composer-media-preview,
body.portal-section-messages .dm-compose .composer-media-preview,
.portal-messages-app .dm-compose .media-preview.composer-media-preview,
.portal-messages-app .dm-compose .composer-media-preview,
body.social-messages .dm-compose .media-preview.composer-media-preview,
body.social-messages .dm-compose .composer-media-preview {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 8px 0 0 !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    border: 1px solid #2f3336 !important;
    background: #16181c !important;
    outline: none !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 72px !important;
    height: auto !important;
    overflow: visible !important;
}
body.portal-section-messages .dm-compose .composer-media-thumb-wrap,
.portal-messages-app .dm-compose .composer-media-thumb-wrap {
    position: relative !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    flex: 0 0 72px !important;
    background: #0a0a0a !important;
    display: block !important;
}
body.portal-section-messages .dm-compose .composer-media-thumb,
.portal-messages-app .dm-compose .composer-media-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
body.portal-section-messages .dm-compose .composer-media-meta,
.portal-messages-app .dm-compose .composer-media-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #e7e9ea !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
body.portal-section-messages .dm-compose .composer-media-chip-clear,
body.portal-section-messages .dm-compose .media-preview-remove,
.portal-messages-app .dm-compose .composer-media-chip-clear {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.1) !important;
    color: #e7e9ea !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    cursor: pointer !important;
}
body.portal-section-messages .dm-compose .composer-media-slot.dm-media-slot:not(:empty),
.portal-messages-app .dm-compose .composer-media-slot.dm-media-slot:not(:empty) {
    display: block !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    outline: none !important;
}
/* Don't draw empty blue outline when media is attached */
body.portal-section-messages .dm-compose.composer-has-media .composer-media-slot,
body.portal-section-messages .dm-compose .composer-has-media .composer-media-slot,
.portal-messages-app .dm-compose.composer-has-media .composer-media-slot {
    outline: none !important;
}
/* ========== /dm paste media preview 20260727-dmpaste1 ========== */

/* ========== dm react more list 20260727-reactlist1 ========== */
/* Reaction "More" picker: scrollable grid list (not horizontal swipe strip) */
.dm-emoji-picker.dm-emoji-picker-sheet,
.dm-emoji-picker.dm-emoji-picker-global {
    position: fixed !important;
    z-index: 2147483002 !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(360px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(62vh, 460px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    padding: 10px 10px 12px !important;
    border-radius: 16px !important;
    border: 1px solid var(--social-border, #2f3336) !important;
    background: var(--bg, #000) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65) !important;
}
.dm-emoji-picker .emoji-picker-section {
    margin: 0 0 10px !important;
}
.dm-emoji-picker .emoji-picker-heading,
.dm-emoji-picker .dm-emoji-picker-global-label {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--text-muted, #8b98a5) !important;
    margin: 0 0 6px 4px !important;
    text-transform: none !important;
}
.dm-emoji-picker .emoji-picker-grid,
.dm-emoji-picker .dm-emoji-picker-emote-grid,
.dm-emoji-picker .emoji-picker-grid-emotes {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: visible !important;
    flex-wrap: unset !important;
    max-width: none !important;
}
.dm-emoji-picker .emoji-picker-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: inherit !important;
    cursor: pointer !important;
    flex: unset !important;
}
.dm-emoji-picker .emoji-picker-btn:hover,
.dm-emoji-picker .emoji-picker-btn:active {
    background: rgba(255, 255, 255, 0.08) !important;
}
.dm-emoji-picker .dm-emoji-picker-emote-img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    display: block !important;
}
/* Kill old mobile swipe strip styles */
.dm-emoji-picker.dm-emoji-picker-mobile-strip {
    border-radius: 16px !important;
    max-width: calc(100vw - 16px) !important;
}
.dm-emoji-picker .emoji-picker-grid-strip {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    flex-wrap: unset !important;
    overflow-x: visible !important;
    max-width: none !important;
    gap: 4px !important;
}
@media (max-width: 700px) {
    .dm-emoji-picker .emoji-picker-grid,
    .dm-emoji-picker .dm-emoji-picker-emote-grid,
    .dm-emoji-picker .emoji-picker-grid-emotes,
    .dm-emoji-picker .emoji-picker-grid-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    .dm-emoji-picker .emoji-picker-btn {
        height: 46px !important;
        min-height: 46px !important;
        font-size: 24px !important;
    }
}
/* ========== /dm react more list 20260727-reactlist1 ========== */

/* ========== emoji scroll-safe 20260727-emojiscroll1 ========== */
.emoji-picker,
.composer-emoji-picker,
.emoji-picker-dm,
.dm-emoji-picker,
.dm-emoji-picker-sheet {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}
.emoji-picker .emoji-picker-btn,
.dm-emoji-picker .emoji-picker-btn,
.composer-emoji-picker .emoji-picker-btn {
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}
.emoji-picker .emoji-picker-btn img,
.dm-emoji-picker .emoji-picker-btn img {
    pointer-events: none !important;
    -webkit-user-drag: none !important;
}
/* ========== /emoji scroll-safe 20260727-emojiscroll1 ========== */

/* ========== emoji no-scroll-select 20260727-emojitap1 ========== */
.emoji-picker,
.composer-emoji-picker,
.emoji-picker-dm,
.dm-emoji-picker,
.dm-emoji-picker-sheet {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}
/* While finger is dragging/scrolling, buttons shouldn't steal the gesture */
.emoji-picker.is-dragging .emoji-picker-btn,
.dm-emoji-picker.is-dragging .emoji-picker-btn,
.composer-emoji-picker.is-dragging .emoji-picker-btn {
    pointer-events: none !important;
}
.emoji-picker .emoji-picker-btn,
.dm-emoji-picker .emoji-picker-btn {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation !important;
}
.emoji-picker .emoji-picker-btn img {
    pointer-events: none !important;
}
/* ========== /emoji no-scroll-select 20260727-emojitap1 ========== */