/* Ted-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: 52px;
    --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%;
    -webkit-font-smoothing: antialiased;
}

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

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);
}

.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);
}

.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 {
    width: 26px;
    height: 26px;
    display: block;
    flex-shrink: 0;
}

.sidebar-item.active .icon svg {
    fill: currentColor;
    stroke: none;
}

.sidebar-item.active .icon svg path[fill='none'],
.sidebar-item.active .icon svg.reels-icon path[fill='none'] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

.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);
}

.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;
}

/* 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: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--social-border);
}

.tabs.tabs-three {
    grid-template-columns: repeat(3, 1fr);
}

.tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 0;
    background: transparent;
}

.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: 56px;
    height: 4px;
    background: var(--social-blue);
    border-radius: 2px;
}

/* 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: 30;
    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-picker .composer-audience-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.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);
}

.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);
}

.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;
}

.post-card:hover {
    background: var(--social-hover);
    transform: none;
}

.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);
}

.post-media img,
.post-media video {
    width: 100%;
    max-height: 510px;
    display: block;
    object-fit: cover;
}

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

/* X-style post action row */
.post-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    width: 100%;
    margin: 0 -4px;
}

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

.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;
}

.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;
}

.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-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;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
}

.profile-admin-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 100%;
    width: 100%;
    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: 600;
    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;
}

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

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

.report-modal-card {
    position: relative;
    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: 460;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 16px 16px;
}

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

.post-edit-card {
    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: 108px;
    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: 10000;
    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;
}

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

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: 1;
    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;
}

.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;
}

.suggestion-row-profile:hover .suggestion-row-name {
    text-decoration: underline;
}

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

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

.suggestion-row-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}

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

.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: 20000;
    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: 100px;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.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;
    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;
    animation: nav-badge-pop 0.28s ease;
}

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



@keyframes nav-badge-pop {
    0% {
        transform: scale(0.5);
        opacity: 0.4;
    }
    70% {
        transform: scale(1.12);
    }
    100% {
        transform: 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 {
    width: 32px;
    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;
    z-index: 20;
    width: 100%;
    max-width: 100%;
    background: var(--bg);
    border-top: 1px solid var(--social-border);
    padding: 0 max(0px, env(safe-area-inset-left)) env(safe-area-inset-bottom, 0) max(0px, env(safe-area-inset-right));
    box-sizing: border-box;
}

.mobile-nav-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    height: var(--nav-mobile);
    align-items: center;
    justify-items: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: var(--nav-mobile);
    color: var(--text-muted);
    text-decoration: none;
    position: relative;
    transition: color 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav-item:hover {
    color: var(--text);
    transform: none;
    background: transparent;
}

.mobile-nav-item.active {
    color: var(--text);
    background: transparent;
}

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

.mobile-nav-icon {
    width: 26px;
    height: 26px;
    display: block;
    flex-shrink: 0;
}

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

.mobile-nav-item.active .mobile-nav-icon.reels-icon path[fill='none'] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

.mobile-nav-item.disabled {
    opacity: 0.38;
    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;
}

.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 #000, 0 0 0 3px var(--text);
}

.mobile-nav-item {
    position: relative;
}

.mobile-nav-item .nav-badge {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(10px);
    margin: 0;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    padding: 0 4px;
    border-width: 2px;
    background: #f4212e;
}

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

.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;
}

.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);
}

.composer-card {
    position: relative;
    z-index: 1;
    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: 1;
}

.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(100vw - 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(100vw - 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;
    }

    .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;
    }
}

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

    .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:not([data-active-tab="discovery"]) .trending-mobile,
    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(100vw - 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, 0));
    }

    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 .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(100vw - 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 {
    height: 200px;
    background: var(--chip-bg);
    background-size: cover;
    background-position: center;
}

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

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-identity-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    width: 100%;
}

.profile-page .profile-avatar {
    width: 134px;
    height: 134px;
    font-size: 2rem;
    border: 4px solid var(--border-strong);
    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-title {
    margin: 8px 0 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.15;
}

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

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

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

.profile-bio {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text);
}

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

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

.profile-stat-link:hover {
    text-decoration: underline;
    color: var(--text);
}

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

.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: 44px;
        min-width: 108px;
        padding: 10px 18px;
        font-size: 15px;
        -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: 44px;
        min-width: 120px;
        padding: 12px 20px;
        -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(100vw - 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: 12px;
}

@media (max-width: 1100px) {
    .profile-banner {
        height: 150px;
    }

    .profile-page .profile-avatar {
        width: 80px;
        height: 80px;
        margin-top: -44px;
        font-size: 1.2rem;
    }
}

/* —— 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 {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--social-border);
    color: var(--text);
    transition: background 0.12s;
}

.notification-row: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-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;
}

.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: 0;
}

/* —— 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;
}

.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;
    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;
}

.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);
    }
}

.dm-jump-present {
    position: absolute;
    left: 50%;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(8px);
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    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);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.dm-jump-present.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.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;
    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: sticky;
    top: 0;
    z-index: 5;
    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.55;
    z-index: 0;
}

.dm-day-divider-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 4px 14px;
    border-radius: 999px;
    border: 1px solid var(--social-border);
    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);
}

.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-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: 1px solid var(--social-border);
}

.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;
}

.dm-msg.incoming .dm-bubble {
    background: var(--input-bg);
    color: var(--text);
}

.dm-msg.outgoing .dm-bubble {
    background: var(--social-blue);
    color: #fff;
    position: relative;
}

.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: 700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.dm-edit-modal.open {
    display: flex;
}

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

.dm-edit-card {
    position: relative;
    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;
    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,
.dm-msg.incoming.is-react-open .dm-react-bar,
.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;
    z-index: 600;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    touch-action: manipulation;
}

.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;
    }
}

.dm-msg.incoming .dm-react-bar:not(.is-floating) {
    position: absolute;
    left: calc(100% + 6px);
    bottom: 0;
    margin-left: 0;
}

.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: 12060;
    display: none;
    align-items: center;
    justify-content: center;
}

.dm-media-lightbox.open {
    display: flex;
}

html.dm-lightbox-open {
    overflow: hidden;
}

.dm-media-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: zoom-out;
}

.dm-media-lightbox-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    touch-action: none;
}

.dm-media-lightbox-stage img {
    max-width: min(96vw, 1200px);
    max-height: 92vh;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    pointer-events: none;
}

.dm-media-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    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 {
        max-width: 100vw;
        max-height: calc(100vh - 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: 1px solid var(--social-border);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 20px;
    font-family: inherit;
    outline: none;
}

.dm-compose textarea:focus {
    border-color: 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;
    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: 425px;
    }
}

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: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    font-weight: inherit !important;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
}

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

    .gif-picker {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none;
        bottom: calc(64px + env(safe-area-inset-bottom, 0));
        top: auto !important;
        max-height: 45vh;
    }

    .emoji-picker.emoji-picker-dm {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none;
    }

    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: 0;
    }
}

/* 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: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--social-border);
}

.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-top: 10px;
}

.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;
    inset: 0;
    z-index: 420;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.blocked-users-modal.open {
    display: flex;
}

.blocked-users-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}

.blocked-users-card {
    position: relative;
    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;
}

.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-screen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-call-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(16px);
}

.dm-call-card {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    padding: 32px 24px 28px;
    text-align: center;
}

.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; }
    100% { transform: scale(1.45); 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: var(--bg);
}

.dm-call-video-stage {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

.dm-call-remote-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg);
}

.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 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.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--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.settings-has-panel .settings-nav-panel {
        display: none !important;
    }

    body.social-settings.settings-has-panel .settings-detail-panel {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        top: var(--header-mobile);
        bottom: 0;
        z-index: 99999;  /* very high so internal popups like the connection/Discord modal are above navs and chrome; modal itself uses even higher z */
    }
}

/* 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,
[class*="-modal-card"],
[class*="-panel"],
.modal-card,
.popup-card {
    z-index: 10000000 !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;
}

/* Emoji pickers inside any composer/toolbar must float above any open popup or sheet */
.emoji-picker,
.emoji-grid,
[data-emoji-picker],
.composer-emoji-picker,
.comment-toolbar .emoji-list,
.feed-composer [class*="emoji"],
.reel-comments-compose [class*="emoji"],
.reply-modal [class*="emoji"],
[class*="emoji-picker"],
[class*="emoji-grid"] {
    z-index: 30000 !important;
}

/* 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: 100vw;
        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: 100vw !important;
        max-width: 100vw !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;
}

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);
    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: 85;
    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: 650;
    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;
}

.pwa-launch-modal.open {
    display: flex;
}

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;
    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: 90;
    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);
}

@media (min-width: 1101px) {
    .pwa-push-banner {
        left: auto;
        right: 24px;
        bottom: 24px;
        max-width: 380px;
    }
}

/* Profile edit modal */
.profile-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 640;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.profile-edit-modal.open {
    display: flex;
}

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;
    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: 100vw;
    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: 100vw;
    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);
}

.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: 520px;
    }
}

/* 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: 10050;
    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(100vw - 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(100vw - 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(100vw - 12px));
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        margin: 0 auto;
    }

    .reel-upload-card {
        width: min(520px, calc(100vw - 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(100vw - 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(100vw - 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(100vw - 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-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(100vw - 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,
html[data-theme="light"] .mobile-nav-item {
    color: var(--text);
}

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-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"] .mobile-nav,
html[data-theme="light"].pwa-installed .mobile-header,
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);
}