/* G Club VS Community — desktop social layout. Mobile Community remains isolated. */
body.vs-community-modal-open { overflow: hidden !important; }
body.vs-community-modal-open > nav { z-index: 1 !important; }

#friends_tab_list[hidden], #friends_tab_requests[hidden] { display: none !important; }

.vs-global-search-panel { background: #0d1728; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: 0 20px 55px rgba(0,0,0,.55); inset-inline-end: 0; max-height: min(650px,calc(100dvh - 92px)); overflow-y: auto; padding: 9px; position: absolute; top: calc(100% + 10px); width: min(390px,calc(100vw - 24px)); z-index: 1000; }
.vs-global-search-panel[hidden] { display: none; }
.vs-global-search-mobile-head { display: none; }
.vs-global-search-status { color: #8390a4; font-size: 12px; padding: 18px 12px; text-align: center; }
.vs-global-search-section + .vs-global-search-section { border-top: 1px solid rgba(255,255,255,.07); margin-top: 7px; padding-top: 7px; }
.vs-global-search-section h3 { color: #77859a; font-size: 10px; font-weight: 900; letter-spacing: .12em; padding: 6px 8px; text-transform: uppercase; }
.vs-global-search-result { align-items: center; border-radius: 10px; display: grid; gap: 10px; grid-template-columns: 40px minmax(0,1fr) auto; min-height: 54px; padding: 7px 8px; text-align: start; width: 100%; }
.vs-global-search-result:hover, .vs-global-search-result.is-active { background: rgba(247,171,57,.1); }
.vs-global-search-result-media { align-items: center; background: rgba(247,171,57,.1); border-radius: 9px; color: #f7ab39; display: flex; height: 40px; justify-content: center; object-fit: cover; width: 40px; }
.vs-global-search-result strong, .vs-global-search-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-global-search-result strong { color: #f3f6fa; font-size: 13px; }
.vs-global-search-result small { color: #7f8da2; font-size: 11px; margin-top: 2px; }
.vs-global-search-result > i { color: #68758a; font-size: 11px; }

body.vs-native-modal-open { overflow: hidden; }
.vs-native-modal { align-items: center; background: rgba(0,0,0,.78); display: flex; inset: 0; justify-content: center; padding: 18px; position: fixed; z-index: 1000004; }
.vs-native-modal[hidden] { display: none; }
.vs-native-modal-card { background: linear-gradient(150deg,#162239,#0c1525 72%); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; box-shadow: 0 28px 80px rgba(0,0,0,.6); max-width: 460px; padding: 28px; position: relative; text-align: center; width: 100%; }
.vs-native-modal-close { align-items: center; background: rgba(255,255,255,.07); border-radius: 50%; color: #a6b1c1; display: flex; height: 36px; inset-inline-end: 14px; justify-content: center; position: absolute; top: 14px; width: 36px; }
.vs-native-modal-eyebrow { color: #f7ab39; font-size: 11px; font-weight: 900; letter-spacing: .16em; margin-bottom: 6px; }
.vs-native-modal-card h2 { color: white; font-size: 25px; font-weight: 900; }
.vs-native-modal-description { color: #9eabba; font-size: 14px; line-height: 1.55; margin: 8px auto 18px; max-width: 350px; }
.vs-rewards-gift-icon { align-items: center; background: rgba(247,171,57,.13); border: 1px solid rgba(247,171,57,.28); border-radius: 20px; color: #f7ab39; display: flex; font-size: 32px; height: 76px; justify-content: center; margin: 0 auto 16px; width: 76px; }
.vs-rewards-profile { background: rgba(0,0,0,.22); border-radius: 10px; color: #c5cfdd; font-size: 13px; margin: 0 auto 14px; padding: 9px 12px; }
.vs-rewards-result { align-items: center; background: rgba(247,171,57,.1); border: 1px solid rgba(247,171,57,.24); border-radius: 14px; color: #f7c36e; display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; padding: 16px; }
.vs-rewards-result[hidden] { display: none; }
.vs-rewards-result i { font-size: 25px; }
.vs-rewards-result strong { color: white; font-size: 19px; }
.vs-rewards-result small, .vs-rewards-result span { color: #cbd5e1; font-size: 12px; }
.vs-native-primary { align-items: center; background: #f7ab39; border-radius: 11px; color: #07101d; display: inline-flex; font-size: 14px; font-weight: 900; gap: 8px; justify-content: center; min-height: 44px; padding: 10px 20px; }
.vs-native-primary:disabled { opacity: .55; }
.vs-notification-detail-image { border-radius: 16px; height: 72px; margin: 0 auto 15px; object-fit: cover; width: 72px; }

#view_community {
    --vsc-bg: #050b14;
    --vsc-card: #0f172a;
    --vsc-card-soft: #121d30;
    --vsc-hover: rgba(255, 255, 255, .055);
    --vsc-line: rgba(255, 255, 255, .075);
    --vsc-muted: #91a0b5;
    --vsc-text: #f3f6fb;
    --vsc-primary: #f7ab39;
    color: var(--vsc-text);
    font-family: Rajdhani, Cairo, sans-serif;
    min-width: 0;
}
#view_community.fade-in-up { animation: none; transform: none; }
#view_community [hidden] { display: none !important; }

.vs-community-header {
    align-items: baseline;
    display: flex;
    gap: 16px;
    margin: 0 auto 16px;
    max-width: 1420px;
    padding-inline: 4px;
}
.vs-community-header h1 {
    font-family: Orbitron, sans-serif;
    font-size: clamp(26px, 2vw, 30px);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.2;
    text-transform: uppercase;
}
.vs-community-header p { color: var(--vsc-muted); font-size: 15px; }

.vs-community-login {
    align-items: center;
    background: var(--vsc-card);
    border: 1px solid var(--vsc-line);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    margin: 64px auto;
    max-width: 560px;
    padding: 48px 24px;
    text-align: center;
}
.vs-community-login-icon {
    align-items: center;
    background: rgba(247, 171, 57, .12);
    border-radius: 16px;
    color: var(--vsc-primary);
    display: flex;
    font-size: 28px;
    height: 64px;
    justify-content: center;
    margin-bottom: 16px;
    width: 64px;
}
.vs-community-login h2 { font-family: Orbitron, sans-serif; font-size: 22px; font-weight: 900; }
.vs-community-login p { color: var(--vsc-muted); font-size: 15px; margin: 8px 0 20px; }
.vs-community-login a,
.vs-community-primary-button {
    background: var(--vsc-primary);
    border-radius: 12px;
    color: #07101d;
    font-size: 14px;
    font-weight: 900;
    min-height: 40px;
    padding: 9px 20px;
}

.vs-community-layout {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(240px, 260px) minmax(680px, 760px);
    justify-content: center;
    margin: 0 auto;
    max-width: 1060px;
    min-width: 0;
}
.vs-community-main { min-width: 0; }
.vs-community-rail {
    max-height: calc(100dvh - 104px);
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px;
    position: sticky;
    scrollbar-color: rgba(255,255,255,.12) transparent;
    scrollbar-width: thin;
    top: 84px;
}
.vs-community-rail::-webkit-scrollbar { width: 5px; }
.vs-community-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }

.vs-community-rail-nav { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; }
.vs-community-rail-nav button {
    align-items: center;
    border-radius: 12px;
    color: #d8e0eb;
    display: flex;
    font-size: 15px;
    font-weight: 800;
    gap: 12px;
    min-height: 46px;
    padding: 8px 12px;
    text-align: start;
    width: 100%;
}
.vs-community-rail-nav button:hover,
.vs-community-rail-nav button.is-active { background: var(--vsc-hover); color: white; }
.vs-community-rail-nav button.is-active i { background: var(--vsc-primary); color: #07101d; }
.vs-community-rail-nav i {
    align-items: center;
    background: rgba(255,255,255,.06);
    border-radius: 10px;
    color: var(--vsc-primary);
    display: flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}
.vs-community-rail-section { border-top: 1px solid var(--vsc-line); padding: 16px 4px; }
.vs-community-left-secondary { display: block; }
.vs-community-right { display: none; }
.vs-community-post-link { color: #60a5fa; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: rgba(96,165,250,.45); text-underline-offset: 2px; }
.vs-community-post-link:hover { color: #93c5fd; text-decoration-color: currentColor; }
.vs-community-rail-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; padding-inline: 8px; }
.vs-community-rail-heading h2 {
    color: #dce4ef;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.vs-community-rail-heading > span { color: var(--vsc-muted); font-size: 12px; font-weight: 800; }
.vs-community-rail-list { display: flex; flex-direction: column; gap: 2px; }
.vs-community-rail-person,
.vs-community-rail-group {
    align-items: center;
    border-radius: 12px;
    display: grid;
    gap: 10px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    min-height: 52px;
    padding: 6px 8px;
    text-align: start;
    width: 100%;
}
.vs-community-rail-person:hover,
.vs-community-rail-group:hover { background: var(--vsc-hover); }
.vs-community-rail-person img,
.vs-community-rail-group img {
    background: #09111e;
    border-radius: 10px;
    height: 40px;
    object-fit: cover;
    width: 40px;
}
.vs-community-rail-person strong,
.vs-community-rail-group strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-community-rail-person small,
.vs-community-rail-group small { color: var(--vsc-muted); display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-community-rail-person > span:last-child { color: var(--vsc-primary); font-size: 12px; font-weight: 900; }
.vs-community-rail-more {
    color: var(--vsc-primary);
    font-size: 13px;
    font-weight: 800;
    min-height: 36px;
    padding: 6px 8px;
    text-align: start;
}
.vs-community-rail-more:hover { text-decoration: underline; }
.vs-community-trending-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 8px; }
.vs-community-trending-list button {
    background: rgba(247,171,57,.08);
    border-radius: 999px;
    color: #f8b84f;
    font-size: 13px;
    font-weight: 800;
    padding: 7px 10px;
}
.vs-community-trending-list button:hover { background: rgba(247,171,57,.15); }

.vs-community-scope {
    align-items: center;
    background: rgba(15, 23, 42, .92);
    border-bottom: 1px solid var(--vsc-line);
    border-radius: 16px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
    min-height: 64px;
    overflow: hidden;
    padding: 8px 12px;
    position: relative;
}
.vs-community-scope::after {
    background-image: var(--vsc-scope-cover, none);
    background-position: center;
    background-size: cover;
    content: "";
    inset: 0;
    opacity: .09;
    pointer-events: none;
    position: absolute;
}
.vs-community-scope > * { position: relative; z-index: 1; }
.vs-community-scope-identity { align-items: center; display: flex; flex: 1; gap: 12px; min-width: 0; }
.vs-community-scope-icon {
    align-items: center;
    background: rgba(247,171,57,.12);
    border-radius: 12px;
    color: var(--vsc-primary);
    display: flex;
    flex: 0 0 44px;
    height: 44px;
    justify-content: center;
    overflow: hidden;
}
.vs-community-scope-icon img { height: 100%; object-fit: cover; width: 100%; }
.vs-community-scope-identity p { color: var(--vsc-muted); font-size: 12px; font-weight: 700; }
.vs-community-scope-identity h2 { font-size: 17px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-community-scope-bio { font-size: 13px !important; font-weight: 600 !important; line-height: 1.35; margin-top: 4px; max-width: 620px; white-space: pre-line; }
.vs-community-scope.is-community-page { align-items: flex-end; box-shadow: inset 0 -90px 75px rgba(3,8,16,.88); min-height: 190px; padding: 84px 18px 16px; }
.vs-community-scope.is-community-page::after { opacity: .42; }
.vs-community-scope.is-community-page .vs-community-scope-identity { align-items: flex-end; }
.vs-community-scope.is-community-page .vs-community-scope-icon { background: #0c1626; border: 3px solid #0f172a; border-radius: 17px; flex-basis: 76px; height: 76px; }
.vs-community-scope.is-community-page .vs-community-scope-identity h2 { font-size: 24px; }
.vs-community-scope.is-community-page .vs-community-scope-actions { padding-bottom: 3px; }
.vs-community-icon-button {
    align-items: center;
    background: rgba(255,255,255,.06);
    border-radius: 10px;
    color: #d7dfeb;
    display: inline-flex;
    flex: 0 0 auto;
    height: 38px;
    justify-content: center;
    width: 38px;
}
.vs-community-icon-button:hover { background: rgba(255,255,255,.1); color: white; }
.vs-community-back i:dir(rtl) { transform: scaleX(-1); }
.vs-community-follow {
    background: var(--vsc-primary);
    border-radius: 10px;
    color: #07101d;
    font-size: 13px;
    font-weight: 900;
    min-height: 38px;
    padding: 8px 14px;
}
.vs-community-follow[data-following="true"] { background: rgba(255,255,255,.08); color: #e6edf6; }
.vs-community-scope-actions { align-items: center; display: flex; gap: 8px; }

.vs-community-center-surface {
    background: var(--vsc-card);
    border: 1px solid var(--vsc-line);
    border-radius: 16px;
    margin-bottom: 12px;
    min-height: 420px;
    padding: 18px;
}
.vs-community-center-header { align-items: center; border-bottom: 1px solid var(--vsc-line); display: flex; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; }
.vs-community-center-header p { color: var(--vsc-muted); font-size: 12px; font-weight: 800; }
.vs-community-center-header h2 { font-size: 20px; font-weight: 900; }
.vs-community-center-header > button { align-items: center; background: rgba(255,255,255,.06); border-radius: 10px; color: var(--vsc-muted); display: flex; gap: 8px; padding: 9px 12px; }
.vs-community-center-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vs-community-center-block { background: rgba(7, 13, 24, .36); border: 1px solid var(--vsc-line); border-radius: 14px; padding: 14px; }
.vs-community-center-block h3 { font-size: 14px; font-weight: 900; margin-bottom: 10px; }
.vs-community-center-list { display: flex; flex-direction: column; gap: 7px; }
.vs-community-discovery-row { align-items: center; border-radius: 12px; display: flex; gap: 8px; justify-content: space-between; min-width: 0; padding: 6px; }
.vs-community-discovery-row:hover { background: var(--vsc-hover); }
.vs-community-discovery-identity { align-items: center; display: flex; gap: 10px; min-width: 0; text-align: start; }
.vs-community-discovery-identity > img { border-radius: 10px; flex: 0 0 40px; height: 40px; object-fit: cover; width: 40px; }
.vs-community-discovery-identity > span { min-width: 0; }
.vs-community-discovery-identity strong, .vs-community-discovery-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-community-discovery-identity strong { font-size: 13px; }
.vs-community-discovery-identity small { color: var(--vsc-muted); font-size: 11px; margin-top: 2px; }
.vs-community-discovery-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 4px; }
.vs-community-discovery-actions button { align-items: center; background: rgba(247,171,57,.11); border-radius: 9px; color: var(--vsc-primary); display: flex; font-size: 11px; font-weight: 800; gap: 5px; min-height: 32px; padding: 6px 8px; }
.vs-community-discovery-actions button:last-child { background: transparent; color: var(--vsc-muted); padding-inline: 7px; }
.vs-community-discovery-actions button:hover { background: rgba(247,171,57,.2); }
.vs-community-discovery-empty { color: var(--vsc-muted); display: block; padding: 8px; }
.vs-community-center-trends { align-items: stretch; flex-direction: column; flex-wrap: nowrap; }
.vs-community-trend-item { align-items: center; display: flex !important; justify-content: space-between; text-align: start; width: 100%; }
.vs-community-trend-item strong, .vs-community-trend-item small { display: block; }
.vs-community-trend-item small { color: var(--vsc-muted); font-size: 10px; font-weight: 600; margin-top: 2px; }
.vs-community-trend-item em { background: rgba(255,255,255,.08); border-radius: 999px; color: #d7dfeb; font-size: 9px; font-style: normal; padding: 3px 6px; text-transform: uppercase; }
.vs-community-trend-item em.is-hot { background: rgba(239,68,68,.14); color: #fb7185; }
.vs-community-trend-item em.is-rising { background: rgba(56,189,248,.13); color: #7dd3fc; }

.vs-community-composer,
.vs-community-reels-section,
.vs-community-post,
.vs-community-post-skeleton {
    background: var(--vsc-card);
    border: 1px solid var(--vsc-line);
    border-radius: 16px;
}
.vs-community-composer { margin-bottom: 12px; padding: 12px 16px; transition: border-color .18s ease; }
.vs-community-composer:focus-within,
.vs-community-composer.is-expanded { border-color: rgba(247,171,57,.25); }
.vs-community-composer-row { align-items: flex-start; display: grid; gap: 12px; grid-template-columns: 44px minmax(0, 1fr); }
.vs-community-composer-row img { border-radius: 12px; height: 44px; object-fit: cover; width: 44px; }
.vs-community-composer textarea {
    background: rgba(5,11,20,.62);
    border: 0;
    border-radius: 999px;
    color: white;
    font-size: 15px;
    height: 44px;
    line-height: 24px;
    min-height: 44px;
    outline: none;
    overflow: hidden;
    padding: 10px 16px;
    resize: none;
    width: 100%;
}
.vs-community-composer.is-expanded textarea { border-radius: 12px; height: 92px; overflow-y: auto; resize: vertical; }
.vs-community-composer-name { display: none; }
.vs-community-composer-expanded { display: none; margin-top: 12px; }
.vs-community-composer.is-expanded .vs-community-composer-expanded { display: block; }
.vs-community-dropzone.is-dragging { background: rgba(247,171,57,.06); outline: 1px dashed var(--vsc-primary); outline-offset: 4px; }
.vs-community-media-preview { background: #02050a; border-radius: 12px; max-height: 440px; overflow: hidden; position: relative; width: 100%; }
.vs-community-media-preview img,
.vs-community-media-preview video { display: block; max-height: 440px; object-fit: contain; width: 100%; }
.vs-community-remove-media {
    align-items: center;
    background: rgba(2,5,10,.82);
    border-radius: 50%;
    display: flex;
    height: 36px;
    justify-content: center;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 36px;
    z-index: 2;
}
[dir="rtl"] .vs-community-remove-media { left: 12px; right: auto; }
.vs-community-composer-actions {
    align-items: center;
    border-top: 1px solid var(--vsc-line);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 8px;
}
.vs-community-composer:not(.is-expanded) .vs-community-composer-actions { margin-top: 8px; }
.vs-community-media-button {
    align-items: center;
    border-radius: 10px;
    color: #d7dfeb;
    display: flex;
    font-size: 14px;
    font-weight: 800;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
}
.vs-community-media-button i { color: #45c787; }
.vs-community-media-button:hover,
.vs-community-ghost-button:hover { background: var(--vsc-hover); }
.vs-community-composer-actions > span { color: var(--vsc-muted); display: none; font-size: 12px; }
.vs-community-composer.is-expanded .vs-community-composer-actions > span { display: inline; }
.vs-community-composer-actions > span.is-limit { color: #fb7185; }
.vs-community-composer-submit { display: flex; gap: 8px; }
.vs-community-ghost-button { border-radius: 10px; color: var(--vsc-muted); display: none; font-size: 13px; font-weight: 800; min-height: 40px; padding: 8px 12px; }
.vs-community-composer.is-expanded .vs-community-ghost-button { display: inline-flex; }
.vs-community-primary-button:disabled { cursor: not-allowed; filter: grayscale(.45); opacity: .55; }
.vs-community-upload-state { margin-top: 12px; }
.vs-community-upload-state > div { color: var(--vsc-muted); display: flex; font-size: 13px; justify-content: space-between; margin-bottom: 4px; }
.vs-community-upload-state button { color: #fb7185; font-weight: 800; }
.vs-community-upload-state progress { accent-color: var(--vsc-primary); height: 7px; width: 100%; }

.vs-community-reels-section { margin-bottom: 12px; overflow: hidden; padding: 12px; }
.vs-community-section-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; }
.vs-community-section-heading h2 { align-items: center; display: flex; font-size: 17px; font-weight: 900; gap: 8px; }
.vs-community-section-heading h2 i { color: var(--vsc-primary); }
.vs-community-reels-controls { display: flex; gap: 6px; }
.vs-community-reels-controls button[hidden] { display: none; }
.vs-community-reels {
    direction: ltr;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 2px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
[dir="rtl"] .vs-community-reel-card { direction: rtl; text-align: right; }
[dir="rtl"] #vsCommunityReelsPrevious i,
[dir="rtl"] #vsCommunityReelsNext i { transform: scaleX(-1); }
.vs-community-reels::-webkit-scrollbar { display: none; }
.vs-community-reels-empty { align-items: center; color: var(--vsc-muted); display: flex; justify-content: center; min-height: 96px; width: 100%; }
.vs-community-reel-end-sentinel { align-self: stretch; flex: 0 0 2px; min-height: 80px; }
.vs-community-reel-card {
    aspect-ratio: 9 / 16;
    background: #05070b;
    border-radius: 12px;
    flex: 0 0 126px;
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    text-align: start;
}
.vs-community-reel-card::after { background: linear-gradient(transparent 48%, rgba(0,0,0,.88)); content: ""; inset: 0; position: absolute; }
.vs-community-reel-card > img { height: 100%; object-fit: cover; transition: transform .2s ease; width: 100%; }
.vs-community-reel-card:hover > img { transform: scale(1.025); }
.vs-community-reel-hover-preview { height: 100%; inset: 0; object-fit: cover; opacity: 0; pointer-events: none; position: absolute; transition: opacity .16s ease; width: 100%; z-index: 0; }
.vs-community-reel-card.is-previewing .vs-community-reel-hover-preview { opacity: 1; }
.vs-community-reel-card.is-previewing > img { opacity: 0; }
.vs-community-reel-play {
    align-items: center;
    background: rgba(0,0,0,.44);
    border-radius: 50%;
    display: flex;
    font-size: 10px;
    height: 26px;
    justify-content: center;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 26px;
    z-index: 1;
}
.vs-community-reel-card-copy { bottom: 10px; inset-inline: 8px; position: absolute; z-index: 1; }
.vs-community-reel-card-copy img { border: 1px solid rgba(255,255,255,.5); border-radius: 50%; height: 24px; object-fit: cover; width: 24px; }
.vs-community-reel-card-copy strong { display: block; font-size: 12px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-community-reel-card-copy small { color: #d2d9e3; display: block; font-size: 11px; }

.vs-community-feed { display: flex; flex-direction: column; gap: 12px; }
.vs-community-post { content-visibility: auto; contain-intrinsic-size: 620px; overflow: visible; }
.vs-community-post-head { align-items: center; display: flex; gap: 10px; padding: 14px 16px 8px; position: relative; }
.vs-community-author { align-items: center; display: flex; gap: 10px; min-width: 0; text-align: start; }
.vs-community-author > img { border-radius: 50%; height: 46px; object-fit: cover; width: 46px; }
.vs-community-author > span { min-width: 0; }
.vs-community-author strong { align-items: center; display: flex; font-size: 15px; font-weight: 900; gap: 5px; }
.vs-community-prime { color: var(--vsc-primary); font-size: 12px; }
.vs-community-author time { color: var(--vsc-muted); display: inline; font-size: 12px; }
.vs-community-post-context { color: var(--vsc-muted); font-size: 12px; }
.vs-community-menu-button { align-items: center; border-radius: 50%; color: var(--vsc-muted); display: flex; height: 38px; justify-content: center; margin-inline-start: auto; width: 38px; }
.vs-community-menu-button:hover { background: var(--vsc-hover); color: white; }
.vs-community-post-menu {
    background: #152035;
    border: 1px solid var(--vsc-line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.4);
    inset-inline-end: 14px;
    min-width: 176px;
    padding: 4px;
    position: absolute;
    top: 54px;
    z-index: 30;
}
.vs-community-post-menu button { align-items: center; border-radius: 8px; display: flex; font-size: 14px; font-weight: 700; gap: 10px; min-height: 38px; padding: 8px 10px; text-align: start; width: 100%; }
.vs-community-post-menu button:hover { background: var(--vsc-hover); }
.vs-community-post-menu button[data-vsc-action="delete-post"] { color: #fb7185; }
.vs-community-post-copy { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; padding: 4px 16px 12px; white-space: pre-wrap; }
.vs-community-post-copy-text.is-collapsed { -webkit-box-orient: vertical; -webkit-line-clamp: 5; display: -webkit-box; overflow: hidden; }
.vs-community-see-more { color: #dce5f1; display: block; font-size: 14px; font-weight: 900; margin-top: 4px; }
.vs-community-see-more:hover { text-decoration: underline; }
.vs-community-hashtag { color: #f8b84f; direction: ltr; font-weight: 800; unicode-bidi: isolate; }
.vs-community-hashtag:hover { text-decoration: underline; }
.vs-community-post-media {
    align-items: center;
    background: #02050a;
    display: flex;
    justify-content: center;
    max-height: 740px;
    min-height: 180px;
    overflow: hidden;
    position: relative;
}
.vs-community-post-media > img,
.vs-community-post-media > video { display: block; margin: 0 auto; max-height: 740px; object-fit: contain; width: 100%; }
.vs-community-post-media > img { cursor: zoom-in; }
.vs-community-post-media > video { background: #02050a; cursor: pointer; }
.vs-community-feed-video-mute {
    align-items: center;
    background: rgba(0,0,0,.62);
    border-radius: 50%;
    display: flex;
    height: 38px;
    justify-content: center;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 38px;
    z-index: 3;
}
[dir="rtl"] .vs-community-feed-video-mute { left: 12px; right: auto; }
.vs-community-feed-video-audio { inset-inline-end: 12px; position: absolute; top: 12px; z-index: 4; }
.vs-community-feed-video-audio .vs-community-feed-video-mute { inset: auto; position: static; }
.vs-community-audio-control { position: relative; }
.vs-community-volume-popover {
    background: #111c2f;
    border: 1px solid var(--vsc-line);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0,0,0,.42);
    inset-inline-end: 0;
    min-width: 180px;
    padding: 9px 10px;
    position: absolute;
    top: calc(100% + 7px);
    z-index: 12;
}
.vs-community-volume-popover span { color: #dce4ef; display: block; font-size: 11px; font-weight: 800; margin-bottom: 5px; white-space: nowrap; }
.vs-community-volume-popover input { accent-color: var(--vsc-primary); display: block; width: 100%; }
.vs-community-volume-popover[hidden] { display: none; }
.vs-community-feed-video-label {
    background: rgba(0,0,0,.62);
    border-radius: 999px;
    bottom: 12px;
    color: white;
    font-size: 12px;
    font-weight: 800;
    opacity: 0;
    padding: 7px 10px;
    pointer-events: none;
    position: absolute;
    transition: opacity .16s ease;
}
.vs-community-post-media:hover .vs-community-feed-video-label { opacity: 1; }
.vs-community-processing { align-items: center; color: var(--vsc-muted); display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 260px; }
.vs-community-processing i { color: var(--vsc-primary); font-size: 24px; }
.vs-community-processing button { background: var(--vsc-hover); border-radius: 10px; font-size: 13px; min-height: 38px; padding: 8px 12px; }
.vs-community-post-meta { align-items: center; color: var(--vsc-muted); display: flex; font-size: 13px; justify-content: space-between; min-height: 44px; padding: 8px 16px; }
.vs-community-liker-summary { align-items: center; display: flex; gap: 8px; min-width: 0; }
.vs-community-liker-avatars { display: flex; padding-inline-start: 4px; }
.vs-community-liker-avatars img { border: 2px solid var(--vsc-card); border-radius: 50%; height: 24px; margin-inline-start: -6px; object-fit: cover; width: 24px; }
.vs-community-post-meta button:hover { color: white; text-decoration: underline; }
.vs-community-post-actions { border-top: 1px solid var(--vsc-line); display: grid; grid-template-columns: repeat(3, 1fr); margin-inline: 12px; padding: 4px 0; }
.vs-community-post-actions button { align-items: center; border-radius: 8px; color: var(--vsc-muted); display: flex; font-size: 14px; font-weight: 800; gap: 8px; justify-content: center; min-height: 42px; }
.vs-community-post-actions button:hover { background: var(--vsc-hover); color: white; }
.vs-community-post-actions button.is-liked { color: #fb7185; }
.vs-community-post-actions button:disabled { opacity: .55; }

.vs-community-ad { background: var(--vsc-card); border: 1px solid var(--vsc-line); border-radius: 16px; overflow: hidden; }
.vs-community-ad img { display: block; max-height: 280px; object-fit: cover; width: 100%; }
.vs-community-ad span { color: var(--vsc-muted); display: block; font-size: 12px; font-weight: 800; padding: 8px 12px; }
.vs-community-empty { align-items: center; color: var(--vsc-muted); display: flex; flex-direction: column; margin-top: 12px; padding: 28px 16px; text-align: center; }
.vs-community-empty > i { color: #58677b; font-size: 28px; margin-bottom: 8px; }
.vs-community-empty h3 { color: #e2e8f0; font-size: 17px; font-weight: 900; }
.vs-community-empty p { font-size: 13px; margin-top: 4px; }
.vs-community-empty button { background: var(--vsc-hover); border-radius: 10px; font-weight: 800; margin-top: 12px; min-height: 38px; padding: 8px 14px; }
.vs-community-sentinel { align-items: center; display: flex; height: 56px; justify-content: center; }
.vs-community-mini-loader { animation: vsc-spin .75s linear infinite; border: 2px solid rgba(255,255,255,.12); border-radius: 50%; border-top-color: var(--vsc-primary); height: 24px; width: 24px; }
@keyframes vsc-spin { to { transform: rotate(360deg); } }
.vs-community-skeleton { animation: vsc-pulse 1.4s ease-in-out infinite; background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.075), rgba(255,255,255,.035)); background-size: 200% 100%; border-radius: 8px; }
@keyframes vsc-pulse { to { background-position: -200% 0; } }
.vs-community-post-skeleton { padding: 16px; }
.vs-community-post-skeleton .s1 { height: 44px; margin-bottom: 16px; width: 44%; }
.vs-community-post-skeleton .s2 { height: 16px; margin-bottom: 8px; width: 80%; }
.vs-community-post-skeleton .s3 { height: 340px; margin-top: 16px; width: 100%; }
.vs-community-rail-skeleton { height: 48px; margin-bottom: 4px; width: 100%; }
.vs-community-reel-skeleton { aspect-ratio: 9 / 16; flex: 0 0 126px; }
.vs-community-inline-error { align-items: center; color: var(--vsc-muted); display: flex; flex-direction: column; font-size: 13px; gap: 8px; justify-content: center; min-height: 90px; padding: 12px; text-align: center; width: 100%; }
.vs-community-inline-error button { align-items: center; background: var(--vsc-hover); border-radius: 9px; color: white; display: flex; font-weight: 800; gap: 7px; min-height: 36px; padding: 7px 11px; }

/* Dialog manager: the panel is fixed; only its body scrolls. */
.vs-community-dialog { align-items: center; background: rgba(0, 2, 6, .88); display: flex; inset: 0; justify-content: center; padding: 16px; position: fixed; z-index: 1000000; }
.vs-community-dialog-panel {
    background: #0e1829;
    border: 1px solid var(--vsc-line);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0,0,0,.52);
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 32px);
    max-width: 640px;
    min-height: 0;
    overflow: hidden;
    width: min(100%, 640px);
}
.vs-community-dialog-panel.is-wide { max-width: 900px; width: min(100%, 900px); }
.vs-community-dialog-header { align-items: center; border-bottom: 1px solid var(--vsc-line); display: flex; flex: 0 0 auto; justify-content: space-between; min-height: 60px; padding: 12px 16px; }
.vs-community-dialog-header h2 { font-family: Orbitron, sans-serif; font-size: 15px; font-weight: 900; text-transform: uppercase; }
.vs-community-dialog-close { align-items: center; background: var(--vsc-hover); border-radius: 50%; color: var(--vsc-muted); display: flex; height: 38px; justify-content: center; width: 38px; }
.vs-community-dialog-close:hover { color: white; }
.vs-community-dialog-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 12px 16px; }
.vs-community-dialog-footer { border-top: 1px solid var(--vsc-line); flex: 0 0 auto; padding: 12px 16px; }
.vs-community-dialog-person { align-items: center; border-radius: 10px; display: flex; gap: 12px; min-height: 58px; padding: 7px; text-align: start; width: 100%; }
.vs-community-dialog-person:hover { background: var(--vsc-hover); }
.vs-community-dialog-person img { border-radius: 50%; height: 44px; object-fit: cover; width: 44px; }
.vs-community-dialog-person strong { display: block; font-size: 15px; }
.vs-community-dialog-person small { color: var(--vsc-muted); display: block; font-size: 12px; }
.vs-community-dialog-loader { display: flex; justify-content: center; padding: 16px; }
.vs-community-comments-list { min-height: 120px; }
.vs-community-comment { border-bottom: 1px solid rgba(255,255,255,.055); display: grid; gap: 10px; grid-template-columns: 40px minmax(0,1fr); padding: 12px 0; }
.vs-community-comment > img { border-radius: 50%; height: 40px; object-fit: cover; width: 40px; }
.vs-community-comment-head { align-items: center; display: flex; gap: 8px; }
.vs-community-comment-head strong { font-size: 14px; }
.vs-community-comment-head time { color: var(--vsc-muted); font-size: 12px; }
.vs-community-comment-text { font-size: 14px; line-height: 1.5; margin-top: 2px; white-space: pre-wrap; }
.vs-community-comment-tools { display: flex; gap: 12px; margin-top: 6px; }
.vs-community-comment-tools button { color: var(--vsc-muted); font-size: 12px; font-weight: 800; }
.vs-community-comment-tools button:hover { color: var(--vsc-primary); }
.vs-community-replies { border-inline-start: 2px solid rgba(247,171,57,.14); margin-top: 8px; padding-inline-start: 12px; }
.vs-community-reply { display: grid; gap: 8px; grid-template-columns: 32px minmax(0,1fr); padding: 8px 0; }
.vs-community-reply > img { border-radius: 50%; height: 32px; object-fit: cover; width: 32px; }
.vs-community-comment-compose { align-items: flex-end; display: flex; gap: 8px; }
.vs-community-comment-compose textarea,
.vs-community-form textarea,
.vs-community-share-search {
    background: rgba(5,11,20,.72);
    border: 1px solid var(--vsc-line);
    border-radius: 12px;
    color: white;
    min-height: 42px;
    outline: none;
    padding: 10px 12px;
    resize: vertical;
    width: 100%;
}
.vs-community-comment-compose button,
.vs-community-form button[type="submit"],
.vs-community-share-send { background: var(--vsc-primary); border-radius: 10px; color: #07101d; flex: 0 0 auto; font-size: 13px; font-weight: 900; min-height: 40px; padding: 8px 14px; }
.vs-community-reply-target { align-items: center; background: rgba(247,171,57,.08); border-radius: 8px; color: var(--vsc-muted); display: flex; font-size: 12px; justify-content: space-between; margin-bottom: 8px; padding: 7px 10px; }
.vs-community-form { display: flex; flex-direction: column; gap: 12px; }
.vs-community-form label { color: var(--vsc-muted); font-size: 13px; font-weight: 800; }
.vs-community-form textarea { min-height: 120px; }
.vs-community-form button[type="submit"] { align-self: flex-end; }
.vs-community-share-actions { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); margin-bottom: 12px; }
.vs-community-share-actions button { align-items: center; background: var(--vsc-hover); border-radius: 10px; display: flex; font-size: 14px; font-weight: 800; gap: 8px; justify-content: center; min-height: 46px; }
.vs-community-share-actions button:hover { color: var(--vsc-primary); }
.vs-community-share-tabs { border-bottom: 1px solid var(--vsc-line); display: flex; margin-bottom: 10px; }
.vs-community-share-tabs button { border-bottom: 2px solid transparent; color: var(--vsc-muted); font-size: 14px; font-weight: 800; padding: 10px 14px; }
.vs-community-share-tabs button.is-active { border-color: var(--vsc-primary); color: white; }
.vs-community-share-search { margin-bottom: 8px; }
.vs-community-share-destination { align-items: center; display: grid; gap: 10px; grid-template-columns: 42px minmax(0,1fr) auto; padding: 7px 2px; }
.vs-community-share-destination img { border-radius: 50%; height: 42px; object-fit: cover; width: 42px; }
.vs-community-share-destination strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-community-share-destination small { color: var(--vsc-muted); font-size: 12px; }
.vs-community-share-send:disabled { background: rgba(255,255,255,.08); color: var(--vsc-muted); }

.vs-community-image-viewer { background: rgba(0,0,0,.96); padding: 0; }
.vs-community-image-viewer img { max-height: calc(100dvh - 32px); max-width: calc(100vw - 32px); object-fit: contain; }
.vs-community-image-viewer .vs-community-dialog-close { position: fixed; right: 16px; top: 16px; z-index: 2; }
[dir="rtl"] .vs-community-image-viewer .vs-community-dialog-close { left: 16px; right: auto; }

/* Reel viewer: video owns the composition; identity and timeline are overlays. */
.vs-community-reel-dialog { background: rgba(0,0,0,.965); overflow: hidden; padding: 12px; }
.vs-community-reel-close { position: fixed; right: 16px; top: 16px; z-index: 8; }
[dir="rtl"] .vs-community-reel-close { left: 16px; right: auto; }
.vs-community-reel-shell {
    align-items: center;
    display: flex;
    gap: 16px;
    height: calc(100dvh - 24px);
    justify-content: center;
    max-height: 1000px;
    max-width: calc(100vw - 24px);
    min-height: 0;
    transition: transform .18s ease;
    width: 100%;
}
.vs-community-reel-navigation { display: flex; flex-direction: column; gap: 12px; }
.vs-community-reel-nav { align-items: center; background: rgba(255,255,255,.1); border-radius: 50%; display: flex; height: 44px; justify-content: center; width: 44px; }
.vs-community-reel-nav:disabled { opacity: .25; }
.vs-community-reel-stage {
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
    height: min(calc(100dvh - 24px), 1000px);
    max-width: calc(100vw - 180px);
    overflow: hidden;
    position: relative;
}
.vs-community-reel-media-host { height: 100%; width: 100%; }
.vs-community-reel-media-host > video { background: #000; height: 100%; object-fit: contain; width: 100%; }
.vs-community-reel-media-host > video[hidden] { display: none; }
.vs-community-reel-readability { background: linear-gradient(transparent 48%, rgba(0,0,0,.86)); bottom: 0; height: 44%; inset-inline: 0; pointer-events: none; position: absolute; }
.vs-community-reel-identity { bottom: 54px; inset-inline: 16px; position: absolute; z-index: 3; }
.vs-community-reel-author { align-items: center; display: flex; gap: 8px; text-align: start; }
.vs-community-reel-author img { border: 1px solid rgba(255,255,255,.55); border-radius: 50%; height: 38px; object-fit: cover; width: 38px; }
.vs-community-reel-author h3 { font-size: 15px; font-weight: 900; text-shadow: 0 2px 8px #000; }
.vs-community-reel-text { display: -webkit-box; font-size: 14px; line-height: 1.4; margin-top: 8px; max-width: 90%; overflow: hidden; text-shadow: 0 2px 8px #000; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: pre-wrap; }
.vs-community-reel-audio { position: absolute; right: 12px; top: 12px; z-index: 4; }
[dir="rtl"] .vs-community-reel-audio { left: 12px; right: auto; }
.vs-community-reel-controls { bottom: 8px; inset-inline: 12px; position: absolute; z-index: 4; }
.vs-community-reel-controls input[type="range"] { accent-color: var(--vsc-primary); cursor: pointer; height: 18px; width: 100%; }
.vs-community-reel-time { color: rgba(255,255,255,.9); display: flex; font-size: 11px; justify-content: space-between; margin-top: -2px; }
.vs-community-reel-actions { align-items: center; display: flex; flex-direction: column; gap: 14px; }
.vs-community-reel-action { align-items: center; display: flex; flex-direction: column; gap: 3px; min-width: 52px; }
.vs-community-reel-action > i { align-items: center; background: rgba(255,255,255,.1); border-radius: 50%; display: flex; font-size: 19px; height: 46px; justify-content: center; transition: background .16s ease, transform .16s ease; width: 46px; }
.vs-community-reel-action:hover > i { background: rgba(255,255,255,.17); transform: translateY(-1px); }
.vs-community-reel-action.is-liked > i { color: #fb7185; }
.vs-community-reel-action.is-saved > i { color: #f7ab39; background: rgba(247,171,57,.16); }
.vs-community-reel-action span { color: #e1e7ef; font-size: 12px; font-weight: 800; }
.vs-community-reel-comments-drawer {
    background: #0e1829;
    border: 1px solid var(--vsc-line);
    border-radius: 16px;
    display: flex;
    flex: 0 0 410px;
    flex-direction: column;
    height: min(calc(100dvh - 32px), 920px);
    min-height: 0;
    overflow: hidden;
}
.vs-community-reel-comments-drawer[hidden] { display: none; }
.vs-community-reel-comments-drawer .vs-community-dialog-body { flex: 1 1 auto; }
.vs-community-reel-comments-drawer .vs-community-dialog-footer { flex: 0 0 auto; }
.vs-community-post.is-notification-highlight,
.vs-community-comment.is-notification-highlight,
.vs-community-reply.is-notification-highlight { animation: vsc-notification-highlight 3.2s ease-out; }
@keyframes vsc-notification-highlight { 0%, 24% { background: rgba(247,171,57,.2); box-shadow: 0 0 0 2px rgba(247,171,57,.66); } 100% { background: transparent; box-shadow: 0 0 0 0 transparent; } }
.vs-community-borrowed-video-placeholder { background: #02050a; min-height: 180px; width: 100%; }
.vs-community-reel-dialog.is-transitioning .vs-community-reel-stage { animation: vsc-reel-in .18s ease-out; }
@keyframes vsc-reel-in { from { opacity: .7; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

.vs-community-toast { background: #172238; border: 1px solid rgba(247,171,57,.35); border-radius: 12px; bottom: 24px; box-shadow: 0 16px 44px rgba(0,0,0,.4); color: white; font-size: 14px; font-weight: 800; left: 50%; max-width: min(420px,90vw); padding: 10px 16px; position: fixed; transform: translateX(-50%); z-index: 1000002; }
.vs-community-toast.is-error { border-color: rgba(251,113,133,.5); }

#view_community button:focus-visible,
#view_community textarea:focus-visible,
#view_community input:focus-visible,
#view_community [tabindex]:focus-visible { outline: 2px solid var(--vsc-primary); outline-offset: 2px; }

@media (min-width: 1700px) {
    .vs-community-layout { grid-template-columns: minmax(220px,240px) minmax(680px,760px) minmax(210px,230px); max-width: 1278px; }
    .vs-community-header { max-width: 1278px; }
    .vs-community-right { display: block; }
    .vs-community-left-secondary { display: none; }
}

@media (min-width: 2200px) {
    .vs-community-layout { gap: 32px; grid-template-columns: 260px minmax(720px,780px) 230px; max-width: 1334px; }
    .vs-community-header { max-width: 1334px; }
}

@media (max-width: 1699px) {
    .vs-community-layout { display: block; max-width: 760px; }
    .vs-community-header { max-width: 760px; }
    .vs-community-left { display: flex; gap: 8px; max-height: none; overflow-x: auto; overflow-y: visible; padding: 0 0 12px; position: static; }
    .vs-community-rail-nav { flex: 0 0 auto; flex-direction: row; padding: 0; }
    .vs-community-rail-nav button { min-height: 42px; padding: 6px 10px; width: auto; }
    .vs-community-rail-nav i { height: 30px; width: 30px; }
    .vs-community-left .vs-community-rail-section { display: none; }
}

@media (max-width: 1199px) {
    .vs-community-layout { display: block; max-width: 760px; }
    .vs-community-header { max-width: 760px; }
    .vs-community-left { display: flex; gap: 8px; max-height: none; overflow-x: auto; overflow-y: visible; padding: 0 0 12px; position: static; }
    .vs-community-rail-nav { flex: 0 0 auto; flex-direction: row; padding: 0; }
    .vs-community-rail-nav button { min-height: 42px; padding: 6px 10px; width: auto; }
    .vs-community-rail-nav i { height: 30px; width: 30px; }
    .vs-community-left .vs-community-rail-section { display: none; }
}

@media (max-width: 1023px) {
    .vs-global-search-panel { border-radius: 16px; inset: calc(68px + env(safe-area-inset-top)) 10px auto; max-height: calc(100dvh - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); position: fixed; width: auto; }
    .vs-global-search-mobile-head { align-items: center; display: grid; gap: 9px; grid-template-columns: auto minmax(0,1fr) auto; padding: 4px 4px 9px; }
    .vs-global-search-mobile-head > i { color: #718096; }
    .vs-global-search-mobile-head input { background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: white; min-height: 40px; outline: none; padding: 8px 10px; width: 100%; }
    .vs-global-search-mobile-head button { align-items: center; border-radius: 9px; color: #94a3b8; display: flex; height: 36px; justify-content: center; width: 36px; }
}

@media (max-width: 767px) {
    body.vs-community-active .vs-layout { padding-inline: 8px; }
    .vs-community-header { align-items: flex-start; flex-direction: column; gap: 2px; margin-bottom: 12px; }
    .vs-community-header h1 { font-size: 24px; }
    .vs-community-header p { font-size: 13px; }
    .vs-community-rail-nav button span { display: none; }
    .vs-community-composer { padding: 12px; }
    .vs-community-composer-actions { flex-wrap: wrap; }
    .vs-community-composer-submit { margin-inline-start: auto; }
    .vs-community-reel-card { flex-basis: 112px; }
    .vs-community-post-actions button span { display: none; }
    .vs-community-dialog { padding: 8px; }
    .vs-community-dialog-panel { max-height: calc(100dvh - 16px); }
    .vs-community-reel-dialog { padding: 0; }
    .vs-community-reel-shell { gap: 0; height: 100dvh; max-width: 100vw; padding: 0; }
    .vs-community-reel-stage { border-radius: 0; height: 100dvh; max-width: min(100vw,calc(100dvh * .5625)); touch-action: pan-x; width: 100vw; }
    .vs-community-reel-navigation { display: none; }
    .vs-community-reel-actions { bottom: calc(82px + env(safe-area-inset-bottom)); gap: 11px; inset-inline-end: 8px; position: absolute; z-index: 6; }
    .vs-community-reel-action > i { background: rgba(0,0,0,.5); box-shadow: 0 3px 12px rgba(0,0,0,.28); height: 42px; width: 42px; }
    .vs-community-reel-action span { color: white; text-shadow: 0 1px 5px #000; }
    .vs-community-reel-close { right: max(10px,env(safe-area-inset-right)); top: max(10px,env(safe-area-inset-top)); }
    [dir="rtl"] .vs-community-reel-close { left: max(10px,env(safe-area-inset-left)); right: auto; }
    .vs-community-reel-audio { right: max(10px,env(safe-area-inset-right)); top: calc(58px + env(safe-area-inset-top)); }
    [dir="rtl"] .vs-community-reel-audio { left: max(10px,env(safe-area-inset-left)); right: auto; }
    .vs-community-reel-identity { bottom: calc(53px + env(safe-area-inset-bottom)); inset-inline-end: 66px; }
    .vs-community-reel-controls { bottom: calc(7px + env(safe-area-inset-bottom)); }
    .vs-community-reel-comments-drawer { inset: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); position: fixed; z-index: 7; }
    .vs-native-modal { padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
    .vs-community-center-grid { grid-template-columns: 1fr; }
    .vs-community-center-surface { padding: 12px; }
    .vs-community-discovery-actions button span { display: none; }
}

@media (max-height: 800px) {
    .vs-community-dialog { padding: 8px; }
    .vs-community-dialog-panel { max-height: calc(100dvh - 16px); }
    .vs-community-reel-dialog { padding: 8px; }
    .vs-community-reel-shell { height: calc(100dvh - 16px); }
    .vs-community-reel-stage { height: calc(100dvh - 16px); }
    .vs-community-reel-comments-drawer { height: calc(100dvh - 16px); }
}

@media (max-width: 767px) {
    .vs-community-reel-dialog { padding: 0; }
    .vs-community-reel-shell, .vs-community-reel-stage { height: 100dvh; }
    .vs-community-reel-comments-drawer { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
    #view_community *, #view_community *::before, #view_community *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .vs-community-post.is-notification-highlight,
    .vs-community-comment.is-notification-highlight,
    .vs-community-reply.is-notification-highlight { animation: none; outline: 2px solid var(--vsc-primary); }
}