/* :root tokens moved to tokens.css (Sprint 2 — design system foundation) */

:root[data-theme="light"] {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text);
    background:
        radial-gradient(circle at 16% 14%, rgba(255, 45, 170, 0.21), transparent 32%),
        radial-gradient(circle at 82% 10%, rgba(139, 92, 255, 0.24), transparent 34%),
        radial-gradient(circle at 14% 86%, rgba(0, 229, 255, 0.14), transparent 36%),
        linear-gradient(180deg, #040507, var(--bg));
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.16) 0.5px, transparent 0.5px),
        linear-gradient(90deg, rgba(255, 45, 170, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(139, 92, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px, 82px 82px, 82px 82px;
    mask-image: radial-gradient(circle at center, black, transparent 84%);
    pointer-events: none;
}

.page-backdrop,
.page-glow {
    position: fixed;
    pointer-events: none;
}

.page-glow {
    width: 30rem;
    height: 30rem;
    border-radius: 999px;
    filter: blur(42px);
    opacity: 0.52;
    animation: drift 18s ease-in-out infinite;
}

.page-glow--one {
    top: -8rem;
    left: -8rem;
    background: radial-gradient(circle, rgba(255, 45, 170, 0.45), rgba(255, 45, 170, 0));
}

.page-glow--two {
    right: -7rem;
    bottom: -10rem;
    background: radial-gradient(circle, rgba(139, 92, 255, 0.5), rgba(139, 92, 255, 0));
    animation-direction: reverse;
}

.site-shell {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.25rem 0 3rem;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: inherit;
    text-decoration: none;
}

.brand__mark,
.logo-placeholder {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 45, 170, 0.4), 0 0 34px rgba(139, 92, 255, 0.45);
    font-weight: 800;
    letter-spacing: 0.06em;
}

.brand__mark--image {
    display: block;
    object-fit: contain;
    padding: 0;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(255, 45, 170, 0.32), 0 0 34px rgba(139, 92, 255, 0.42);
}

.brand__copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.brand__copy strong {
    font-size: 0.95rem;
}

.brand__copy small,
.text-muted {
    color: var(--muted);
}

.theme-toggle {
    border: 1px solid rgba(139, 92, 255, 0.42);
    background: rgba(8, 10, 15, 0.72);
    color: var(--text);
    padding: 0.9rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(16px);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(139, 92, 255, 0.34);
}

.auth-layout,
.home-hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.auth-panel,
.stack-card,
.home-hero {
    position: relative;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 45, 170, 0.14);
    border: 1px solid rgba(255, 45, 170, 0.4);
    color: #ffd1ef;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
}

.home-brand-lockup {
    display: block;
    width: min(100%, 470px);
    height: auto;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 10px 32px rgba(139, 92, 255, 0.35));
}

h1,
.form-heading h2 {
    margin: 1rem 0 0.75rem;
    font-family: var(--font-display);
    line-height: 1.04;
    letter-spacing: -0.03em;
}

h1 {
    font-size: clamp(2.8rem, 5vw, 4.9rem);
    max-width: 11ch;
}

.form-heading h2 {
    font-size: 2rem;
}

.lede,
.form-heading p,
.stack-card p,
.home-copy p {
    color: var(--muted);
    line-height: 1.7;
    font-size: 1rem;
    max-width: 60ch;
}

.feature-pills,
.hero-actions,
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.feature-pills {
    margin-top: 1.5rem;
}

.feature-pills span,
.stack-card,
.glass-card,
.dashboard-shell,
.dash-card {
    border: 1px solid var(--border);
    background: linear-gradient(160deg, rgba(15, 18, 27, 0.95), rgba(8, 10, 15, 0.9));
    box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 45, 170, 0.16);
    backdrop-filter: blur(22px);
}

.feature-pills span {
    padding: 0.75rem 1rem;
    border-radius: 999px;
    color: var(--text);
}

.stack-card,
.glass-card,
.dashboard-shell,
.dash-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.stack-card::before,
.dashboard-shell::before,
.dash-card::before,
.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.08) 48%, transparent 64%);
    transform: translateX(-130%);
    opacity: 0;
    pointer-events: none;
}

.stack-card:hover,
.dash-card:hover,
.glass-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 28px rgba(139, 92, 255, 0.34);
}

.stack-card:hover::before,
.dash-card:hover::before,
.glass-card:hover::before {
    opacity: 1;
    animation: sweep 1.2s ease;
}

.auth-panel--form,
.home-hero,
.dashboard-shell {
    padding: 2rem;
}

.auth-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.field {
    display: grid;
    gap: 0.55rem;
}

.field span {
    font-size: 0.95rem;
    color: var(--muted);
}

.field input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    background: rgba(9, 12, 18, 0.92);
    color: var(--text);
    padding: 1rem 1.05rem;
    font: inherit;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.field input:focus {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.16), 0 0 26px rgba(255, 45, 170, 0.22);
    transform: translateY(-1px);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
    padding: 0.95rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}

.button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.22) 50%, transparent 72%);
    transform: translateX(-140%);
    transition: transform 380ms ease;
}

.button:hover::before {
    transform: translateX(140%);
}

.button--primary {
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
    color: #fff;
    border-color: rgba(255, 45, 170, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 45, 170, 0.38), 0 16px 34px rgba(139, 92, 255, 0.36);
}

.button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(255, 45, 170, 0.62), 0 22px 42px rgba(139, 92, 255, 0.42);
    filter: brightness(1.05);
}

.button--primary:active {
    transform: translateY(0);
}

.button--ghost {
    background: rgba(8, 11, 17, 0.86);
    color: var(--text);
    border-color: rgba(0, 229, 255, 0.34);
}

.button--ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.28);
}

.home-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.home-card-stack {
    display: grid;
    gap: 1rem;
}

.stack-card {
    padding: 1.4rem;
    border-radius: 1.4rem;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.stack-card h3 {
    margin: 0 0 0.4rem;
}

.hero-actions {
    margin-top: 1.75rem;
}

.dashboard-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.dashboard-grid {
    margin-top: 1.6rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dash-card {
    border-radius: 1.35rem;
    padding: 1.15rem;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.dash-card h3 {
    margin: 0;
}

.dash-card p {
    margin: 0.5rem 0 0;
    color: var(--muted);
}

.dash-metric {
    margin-top: 0.7rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
}

.dashboard-page--admin .dash-card {
    border-color: rgba(255, 45, 170, 0.45);
}

.dashboard-page--admin .dash-metric {
    color: #FFD7F2;
}

.control-console {
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
    gap: 1.25rem;
}

.control-sidebar {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.control-sidebar__brand h1,
.control-header h2 {
    margin: 0.45rem 0 0;
    font-size: clamp(2rem, 4vw, 3rem);
}

.control-nav {
    display: grid;
    gap: 0.6rem;
}

.control-nav__link {
    display: block;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    text-decoration: none;
    color: var(--text);
    border: 1px solid rgba(139, 92, 255, 0.2);
    background: rgba(8, 11, 17, 0.66);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.control-nav__link:hover,
.control-nav__link.is-active {
    transform: translateY(-1px);
    border-color: rgba(255, 45, 170, 0.42);
    box-shadow: 0 0 24px rgba(139, 92, 255, 0.2);
}

.control-nav__link.is-active {
    background: linear-gradient(135deg, rgba(255, 45, 170, 0.16), rgba(139, 92, 255, 0.2));
}

.control-main {
    min-width: 0;
}

.control-header {
    margin-bottom: 1rem;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.kpi-card {
    min-height: 100%;
}

.control-panel-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.control-panel {
    margin-top: 1rem;
}

.control-panel__header,
.control-live-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.control-stack {
    display: grid;
    gap: 0.85rem;
}

.control-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.control-list-item strong,
.control-panel h3 {
    margin: 0;
}

.control-list-item p,
.control-panel p {
    margin: 0.35rem 0 0;
}

.control-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(139, 92, 255, 0.15);
    color: #f0e6ff;
}

.control-badge--high,
.control-badge--open {
    background: rgba(255, 45, 170, 0.18);
    color: #ffd6ef;
}

.control-badge--medium,
.control-badge--in-review,
.control-badge--review,
.control-badge--escalated {
    background: rgba(0, 229, 255, 0.16);
    color: #d5f7ff;
}

.control-badge--resolved,
.control-badge--dismissed {
    background: rgba(57, 255, 136, 0.16);
    color: #d9ffea;
}

.control-live-card small,
.control-notice,
.control-meta-grid span {
    color: var(--muted);
}

.control-status-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
}

.control-status-dot.is-live {
    background: #39FF88;
    box-shadow: 0 0 0 8px rgba(57, 255, 136, 0.12);
}

.control-status-dot.is-offline {
    background: #FF8A4D;
    box-shadow: 0 0 0 8px rgba(255, 138, 77, 0.12);
}

.control-sidebar__actions,
.control-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.control-notice {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(57, 255, 136, 0.22);
    background: rgba(57, 255, 136, 0.08);
}

.control-search,
.control-form-grid input,
.control-form-grid select,
.control-form-grid textarea,
.control-inline-form select {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.95rem;
    background: rgba(9, 12, 18, 0.92);
    color: var(--text);
    padding: 0.85rem 0.95rem;
    font: inherit;
}

.control-search {
    max-width: 220px;
}

.control-table-wrap {
    overflow-x: auto;
}

.control-table {
    width: 100%;
    border-collapse: collapse;
}

.control-table th,
.control-table td {
    padding: 1rem 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
    text-align: left;
}

.control-inline-form {
    display: contents;
}

.control-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.control-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.control-form-grid label {
    display: grid;
    gap: 0.45rem;
}

.control-form-grid__full {
    grid-column: 1 / -1;
}

.control-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.dashboard-page--kids .dash-card--kids {
    border-color: rgba(139, 92, 255, 0.44);
    box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(139, 92, 255, 0.25);
}

.kids-safety {
    margin: 0.75rem 0 0;
    color: #d9ffed;
    font-weight: 700;
}

.my-space {
    position: relative;
    isolation: isolate;
}

body.my-space-panel-open {
    overflow: hidden;
}

.my-space__beams {
    position: absolute;
    inset: -6rem 0 auto;
    height: 14rem;
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 45, 170, 0.18), transparent 38%),
        radial-gradient(circle at 78% 22%, rgba(139, 92, 255, 0.18), transparent 36%),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
    filter: blur(24px);
    pointer-events: none;
}

.my-space__ticker {
    position: relative;
    margin-bottom: 0.9rem;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(255, 45, 170, 0.14);
    background: rgba(9, 10, 16, 0.72);
}

.my-space__ticker-track {
    display: flex;
    gap: 2rem;
    white-space: nowrap;
    padding: 0.55rem 1rem;
    color: #e8d8ff;
    font-size: 0.8rem;
    animation: my-space-ticker 20s linear infinite;
}

.my-space__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.my-space__particles span {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 16px rgba(139, 92, 255, 0.45);
    animation: my-space-float 12s linear infinite;
}

.my-space__particles span:nth-child(1) { left: 8%; top: 18%; animation-delay: -1s; }
.my-space__particles span:nth-child(2) { left: 22%; top: 62%; animation-delay: -6s; }
.my-space__particles span:nth-child(3) { left: 48%; top: 14%; animation-delay: -3s; }
.my-space__particles span:nth-child(4) { left: 74%; top: 28%; animation-delay: -7s; }
.my-space__particles span:nth-child(5) { left: 82%; top: 66%; animation-delay: -2s; }
.my-space__particles span:nth-child(6) { left: 58%; top: 78%; animation-delay: -9s; }

.my-space__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr) minmax(220px, 0.7fr);
    gap: 1rem;
    margin-bottom: 1.2rem;
    position: relative;
    animation: my-space-rise 500ms ease both;
}

.my-space__title {
    font-size: clamp(2.15rem, 4vw, 3.7rem);
}

.my-space__status {
    margin: 0.25rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #dce1ff;
    font-size: 0.88rem;
}

.my-space__status-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: var(--neon-green);
    box-shadow: 0 0 14px rgba(57, 255, 136, 0.7);
    animation: my-space-pulse 1.6s ease-out infinite;
}

.my-space__hero-block {
    position: relative;
    z-index: 1;
}

.my-space__hero-block--profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.my-space__avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.my-space__avatar-glow {
    position: absolute;
    inset: -1rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 45, 170, 0.36), rgba(139, 92, 255, 0.08), transparent 72%);
    filter: blur(18px);
    animation: drift 10s ease-in-out infinite;
}

.my-space__avatar {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
    color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
    box-shadow: 0 0 0 1px rgba(255, 45, 170, 0.45), 0 0 34px rgba(139, 92, 255, 0.46);
    animation: drift 8s ease-in-out infinite;
}

.my-space__pulse {
    position: absolute;
    inset: -0.35rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 45, 170, 0.45);
    animation: my-space-pulse 1.8s ease-out infinite;
}

.my-space__composer {
    display: grid;
    gap: 0.55rem;
}

.my-space__composer-label {
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.my-space__composer input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.15rem;
    background: rgba(7, 10, 15, 0.95);
    color: var(--text);
    padding: 1rem 1.05rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.my-space__composer input[readonly] {
    cursor: pointer;
}

.my-space__post-button {
    margin-top: 0.85rem;
    width: 100%;
}

.my-space__breathing-button {
    animation: my-space-breathe 2.6s ease-in-out infinite;
}

.my-space__badge-card {
    height: 100%;
    display: grid;
    align-content: start;
    gap: 0.65rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, rgba(18, 10, 28, 0.95), rgba(8, 13, 20, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 26px rgba(255, 45, 170, 0.22);
}

.my-space__badge-card strong {
    font-size: 1.15rem;
}

.my-space__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) minmax(0, 0.9fr);
    gap: 1rem;
}

.my-space__column {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.my-space-card {
    position: relative;
    animation: my-space-rise 550ms ease both;
}

.my-space-card:nth-child(2) {
    animation-delay: 90ms;
}

.my-space-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.my-space-card__header h3 {
    margin: 0.35rem 0 0;
}

.my-space-card__action {
    min-height: 2.6rem;
    padding: 0.7rem 1rem;
}

.feed-preview,
.group-list,
.message-list,
.achievement-list {
    display: grid;
    gap: 0.85rem;
}

.feed-item--new {
    animation: my-space-rise 420ms ease both;
}

.feed-item,
.group-list__item,
.message-list__item,
.discover-card,
.activity-stream__item {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    padding: 0.9rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.feed-item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.8rem;
}

.feed-item__avatar,
.friend-row__avatar {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 45, 170, 0.92), rgba(139, 92, 255, 0.92));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 0 18px rgba(139, 92, 255, 0.35);
}

.feed-item strong,
.group-list__item strong,
.message-list__item strong,
.discover-card strong {
    display: block;
}

.feed-item__meta {
    display: block;
    margin-top: 0.25rem;
    color: #c9bfff;
    font-size: 0.8rem;
}

.feed-item__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.reaction-row,
.feed-item__actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.reaction-button,
.text-button,
.message-list__item--button,
.friend-row__avatar--button,
.my-space__quick-link,
.my-space__badge-chip--button {
    font: inherit;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.reaction-button,
.text-button {
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.reaction-button:hover,
.text-button:hover {
    box-shadow: 0 0 18px rgba(139, 92, 255, 0.22);
}

.feed-item span,
.activity-stream__time,
.my-space__count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #d8d1ff;
    font-size: 0.82rem;
}

.group-list__item {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: center;
}

.activity-stream {
    display: grid;
    gap: 0.75rem;
}

.activity-stream__item {
    display: grid;
    grid-template-columns: 2.3rem minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
}

.activity-stream__time {
    justify-content: center;
    padding: 0.4rem 0;
    border-radius: 999px;
    background: rgba(255, 45, 170, 0.12);
    border: 1px solid rgba(255, 45, 170, 0.22);
}

.discover-grid {
    display: grid;
    gap: 0.85rem;
}

.discover-card {
    display: grid;
    gap: 0.6rem;
}

.button--following {
    background: rgba(255, 45, 170, 0.18);
    color: #ffe5f5;
    border-color: rgba(255, 45, 170, 0.42);
    box-shadow: 0 0 20px rgba(255, 45, 170, 0.22);
}

.button--joined {
    background: linear-gradient(135deg, rgba(57, 255, 136, 0.18), rgba(0, 229, 255, 0.18));
    color: #dcfff0;
    border-color: rgba(57, 255, 136, 0.42);
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.22);
}

.message-list__item {
    position: relative;
}

.message-list__item--button {
    text-align: left;
    width: 100%;
}

.message-list__item::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: var(--neon-pink);
    box-shadow: 0 0 12px rgba(255, 45, 170, 0.65);
    animation: my-space-pulse 1.5s ease-out infinite;
}

.friend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.friend-row__avatar--button {
    padding: 0;
}

.safety-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.safety-actions .button:last-child {
    grid-column: 1 / -1;
}

.achievement-list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.my-space__badge-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 45, 170, 0.14);
    border: 1px solid rgba(255, 45, 170, 0.4);
    color: #ffe1f4;
    font-weight: 700;
    box-shadow: 0 0 18px rgba(139, 92, 255, 0.18);
}

.my-space__badge-chip--button:hover,
.my-space__badge-chip--button:focus-visible {
    box-shadow: 0 0 24px rgba(255, 45, 170, 0.3);
    transform: translateY(-1px);
}

.achievement-progress {
    margin-top: 1rem;
    height: 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.achievement-progress__bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple), var(--neon-cyan));
    box-shadow: 0 0 22px rgba(139, 92, 255, 0.3);
    transition: width 260ms ease;
}

.achievement-tooltip {
    margin-top: 0.75rem;
    color: #dacfff;
    font-size: 0.88rem;
}

.my-space__live-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    font-size: 0.82rem;
}

.my-space__live-dot::before,
.my-space__count-badge::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--neon-pink);
    box-shadow: 0 0 14px rgba(255, 45, 170, 0.7);
    animation: my-space-pulse 1.6s ease-out infinite;
}

.my-space__footer-actions {
    justify-content: flex-end;
}

.my-space__quick-nav {
    display: none;
}

.my-space-modal,
.my-space-drawer {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.my-space-modal__backdrop,
.my-space-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(8px);
}

.my-space-modal__panel,
.my-space-drawer__panel,
.my-space-profile-popover {
    position: relative;
    z-index: 1;
}

.my-space-modal__panel {
    width: min(92vw, 34rem);
    margin: 8vh auto 0;
    padding: 1.25rem;
}

.my-space-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(92vw, 28rem);
    height: 100%;
    padding: 1.25rem;
    border-radius: 0;
}

.my-space-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.my-space-modal__header h2 {
    margin: 0;
}

.my-space-modal__close {
    border: 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    cursor: pointer;
}

.my-space-form {
    display: grid;
    gap: 0.9rem;
}

.my-space-form label {
    display: grid;
    gap: 0.4rem;
}

.my-space-form span {
    color: var(--muted);
    font-size: 0.88rem;
}

.my-space-form input,
.my-space-form textarea,
.my-space-form select,
.chat-compose input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    background: rgba(7, 10, 15, 0.95);
    color: var(--text);
    padding: 0.9rem 1rem;
    font: inherit;
}

.my-space-form__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: end;
}

.chat-thread {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    max-height: calc(100vh - 14rem);
    overflow: auto;
    padding-right: 0.3rem;
}

.chat-thread__bubble {
    max-width: 86%;
    padding: 0.8rem 0.95rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.05);
}

.chat-thread__bubble--me {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(255, 45, 170, 0.2), rgba(139, 92, 255, 0.18));
}

.chat-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    margin-top: 1rem;
}

.safety-tips ul {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
    color: var(--muted);
}

.my-space-profile-popover {
    position: fixed;
    right: 1rem;
    bottom: 6rem;
    width: min(20rem, calc(100vw - 2rem));
    padding: 1rem;
    z-index: 45;
}

.my-space-profile-popover__avatar {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
    color: #fff;
    font-weight: 800;
}

.my-space-profile-popover__actions {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

@keyframes my-space-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes my-space-breathe {
    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(255, 45, 170, 0.38), 0 16px 34px rgba(139, 92, 255, 0.32);
    }
    50% {
        box-shadow: 0 0 0 1px rgba(255, 45, 170, 0.58), 0 24px 42px rgba(139, 92, 255, 0.44);
    }
}

@keyframes my-space-ticker {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-30%);
    }
}

@keyframes my-space-float {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 0.3;
    }
    50% {
        transform: translate3d(0, -18px, 0);
        opacity: 0.8;
    }
    100% {
        transform: translate3d(0, -36px, 0);
        opacity: 0;
    }
}

@keyframes my-space-pulse {
    0% {
        transform: scale(0.92);
        opacity: 0.9;
    }
    70% {
        transform: scale(1.14);
        opacity: 0.2;
    }
    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

@keyframes drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(1.8rem, -1.4rem, 0) scale(1.06);
    }
}

@keyframes sweep {
    from {
        transform: translateX(-130%);
    }
    to {
        transform: translateX(130%);
    }
}

/* =========================================================
   Admin Phase 2 — new components
   ========================================================= */

.control-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.control-toolbar--standalone {
    margin-bottom: 1rem;
}

.control-filter-select {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.95rem;
    background: rgba(9, 12, 18, 0.92);
    color: var(--text);
    padding: 0.75rem 0.95rem;
    font: inherit;
    cursor: pointer;
}

.control-panel__header--flex-wrap {
    flex-wrap: wrap;
    gap: 1rem;
}

.control-panel__header-left {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.control-list-item__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Bulk action bar */
.control-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 1rem;
    background: rgba(139, 92, 255, 0.1);
    border: 1px solid rgba(139, 92, 255, 0.28);
}

.control-bulk-bar[hidden] {
    display: none;
}

.control-bulk-bar__label {
    font-weight: 700;
    white-space: nowrap;
}

/* AI score badge */
.control-ai-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(255, 220, 80, 0.12);
    color: #ffe99a;
    border: 1px solid rgba(255, 220, 80, 0.22);
}

.control-ai-badge--critical {
    background: rgba(255, 45, 170, 0.18);
    color: #ffd6ef;
    border-color: rgba(255, 45, 170, 0.3);
}

.control-ai-badge--high {
    background: rgba(255, 138, 77, 0.16);
    color: #ffd9c0;
    border-color: rgba(255, 138, 77, 0.28);
}

.control-ai-badge--medium {
    background: rgba(255, 220, 80, 0.12);
    color: #ffe99a;
    border-color: rgba(255, 220, 80, 0.22);
}

.control-ai-badge--low {
    background: rgba(57, 255, 136, 0.1);
    color: #b6ffda;
    border-color: rgba(57, 255, 136, 0.2);
}

/* Safety group sections */
.control-safety-group {
    margin-top: 1.25rem;
}

.control-safety-group__header {
    margin-bottom: 0.65rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.control-safety-group[hidden] {
    display: none;
}

/* Toggle switch */
.control-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.control-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.control-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.control-toggle__track {
    display: block;
    width: 2.5rem;
    height: 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 180ms ease;
    position: relative;
}

.control-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    transition: transform 180ms ease, background 180ms ease;
}

.control-toggle input:checked + .control-toggle__track {
    background: rgba(57, 255, 136, 0.45);
    border-color: rgba(57, 255, 136, 0.5);
}

.control-toggle input:checked + .control-toggle__track::after {
    transform: translateX(1.1rem);
    background: #39FF88;
}

/* Activity feed */
.control-activity-feed {
    display: grid;
    gap: 0.65rem;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.control-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left-width: 3px;
}

.control-activity-item--info {
    border-left-color: rgba(139, 92, 255, 0.5);
}

.control-activity-item--warning {
    border-left-color: rgba(255, 220, 80, 0.5);
}

.control-activity-item--critical {
    border-left-color: rgba(255, 45, 170, 0.6);
}

.control-activity-item__dot {
    flex-shrink: 0;
    margin-top: 0.35rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
}

.control-activity-item--info .control-activity-item__dot { background: #8b5cf6; }
.control-activity-item--warning .control-activity-item__dot { background: #ffd650; }
.control-activity-item--critical .control-activity-item__dot { background: #ff2daa; box-shadow: 0 0 6px rgba(255, 45, 170, 0.5); }

.control-activity-item__body {
    flex: 1;
    min-width: 0;
}

.control-activity-item__body strong,
.control-activity-item__body p,
.control-activity-item__body small {
    display: block;
    margin: 0;
}

.control-activity-item__body p {
    margin-top: 0.2rem;
}

.control-activity-item__body small {
    margin-top: 0.3rem;
    color: var(--muted);
}

.control-live-ticker {
    display: grid;
    gap: 0.2rem;
}

/* Audit / code styling */
.control-code {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    color: #c8b4ff;
    word-break: break-all;
}

.control-code--inline {
    display: inline-block;
}

.control-muted {
    color: var(--muted);
    font-size: 0.8rem;
}

/* =========================================================
   Admin Phase 3 — confirm modal, detail drawer, undo toast
   ========================================================= */

/* Confirm modal */
.control-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-modal[hidden] { display: none !important; }

.control-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

.control-modal__panel {
    position: relative;
    z-index: 1;
    background: var(--bg-card, #12121e);
    border: 1px solid rgba(139, 92, 255, 0.35);
    border-radius: 14px;
    padding: 2rem;
    width: min(440px, 94vw);
    box-shadow: 0 0 60px rgba(139, 92, 255, 0.2), 0 8px 32px rgba(0, 0, 0, 0.5);
}

.control-modal__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text, #f0f0ff);
    margin: 0 0 0.65rem;
}

.control-modal__body {
    color: var(--muted, #a0a0c0);
    margin: 0 0 1.25rem;
    line-height: 1.55;
    font-size: 0.95rem;
}

.control-modal__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

/* Detail drawer */
.control-drawer {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
}

.control-drawer[hidden] { display: none !important; }

.control-drawer:not([hidden]) { pointer-events: auto; }

.control-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.control-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 96vw);
    background: var(--bg-card, #12121e);
    border-left: 1px solid rgba(139, 92, 255, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.5);
}

.control-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(139, 92, 255, 0.18);
    flex-shrink: 0;
}

.control-drawer__header strong {
    font-size: 0.95rem;
    color: var(--text, #f0f0ff);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.control-drawer__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted, #a0a0c0);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.control-drawer__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text, #f0f0ff);
}

.control-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 255, 0.3) transparent;
}

.control-drawer__spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
}

.control-drawer__spinner::after {
    content: '';
    width: 30px;
    height: 30px;
    border: 3px solid rgba(139, 92, 255, 0.25);
    border-top-color: rgba(139, 92, 255, 0.9);
    border-radius: 50%;
    animation: admin-spin 0.7s linear infinite;
}

@keyframes admin-spin { to { transform: rotate(360deg); } }

/* Drawer detail content */
.drawer-detail h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text, #f0f0ff);
    margin: 0.2rem 0 0.6rem;
}

.drawer-detail__badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.drawer-detail h4 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted, #a0a0c0);
    margin: 1.25rem 0 0.5rem;
}

/* Undo toast */
.control-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1100;
    background: var(--bg-card, #12121e);
    border: 1px solid rgba(57, 255, 136, 0.4);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.45);
    color: var(--text, #f0f0ff);
    font-size: 0.88rem;
    min-width: 220px;
    max-width: min(360px, 90vw);
}

.control-toast[hidden] { display: none !important; }

.control-toast__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted, #a0a0c0);
    margin-left: auto;
    padding: 0 0.25rem;
    line-height: 1;
    font-size: 0.95rem;
}

.control-toast__close:hover { color: var(--text, #f0f0ff); }

/* Audit server-side filter bar */
.control-audit-filters {
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Admin notice banner */
.control-notice {
    background: rgba(139, 92, 255, 0.1);
    border: 1px solid rgba(139, 92, 255, 0.28);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--text, #f0f0ff);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

/* =========================================================
   Admin Phase 2 — responsive breakpoints
   ========================================================= */

@media (max-width: 1000px) {
    .control-console {
        grid-template-columns: 1fr;
    }

    .control-sidebar {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: 1rem;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .control-panel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .auth-layout,
    .home-hero {
        grid-template-columns: 1fr;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .my-space__hero,
    .my-space__grid {
        grid-template-columns: 1fr;
    }

    .my-space__hero {
        margin-top: 1rem;
    }

    h1 {
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    .site-shell {
        width: min(100%, calc(100% - 1rem));
        padding-top: 0.75rem;
    }

    .site-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-hero,
    .dashboard-shell {
        padding: 1.25rem;
        border-radius: 1.3rem;
    }

    .control-console {
        grid-template-columns: 1fr;
    }

    .kpi-grid,
    .control-panel-grid,
    .control-form-grid {
        grid-template-columns: 1fr;
    }

    .control-search {
        max-width: none;
    }

    .control-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .control-filter-select,
    .control-search {
        width: 100%;
    }

    .control-bulk-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .control-list-item__meta {
        flex-wrap: wrap;
    }

    .control-panel__header-left {
        flex-direction: row;
        align-items: flex-start;
    }

    .control-activity-feed {
        max-height: 45vh;
    }

    .control-activity-item {
        flex-direction: column;
        gap: 0.5rem;
    }

    .control-list-item,
    .control-panel__header,
    .control-live-card__header {
        flex-direction: column;
    }

    .dashboard-topbar {
        flex-direction: column;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .my-space__hero-block--profile {
        align-items: flex-start;
        flex-direction: column;
    }

    .group-list__item,
    .my-space-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .my-space__ticker {
        margin-bottom: 1.1rem;
    }

    .my-space__title {
        font-size: clamp(1.9rem, 11vw, 2.5rem);
    }

    .feed-item,
    .activity-stream__item {
        grid-template-columns: 1fr;
    }

    .feed-item__footer,
    .chat-compose,
    .my-space-form__row {
        grid-template-columns: 1fr;
    }

    .safety-actions {
        grid-template-columns: 1fr;
    }

    .my-space__footer-actions {
        margin-bottom: 5.5rem;
        justify-content: stretch;
    }

    .my-space__footer-actions .button {
        flex: 1 1 100%;
    }

    .my-space__quick-nav {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        z-index: 35;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.5rem;
        padding: 0.55rem;
        border-radius: 1.2rem;
        background: rgba(7, 10, 15, 0.94);
        border: 1px solid rgba(139, 92, 255, 0.25);
        backdrop-filter: blur(16px);
    }

    .my-space__quick-link {
        display: grid;
        place-items: center;
        min-height: 3rem;
        border-radius: 0.95rem;
        color: var(--text);
        background: rgba(255, 255, 255, 0.04);
        text-decoration: none;
    }

    .my-space-drawer__panel {
        width: 100%;
    }

    .my-space-profile-popover {
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        bottom: 5.5rem;
    }

    h1 {
        font-size: clamp(2.1rem, 13vw, 3.1rem);
    }
}

/* =========================================================
   Admin Phase 3 — mobile fixes for new components
   ========================================================= */

@media (max-width: 700px) {
    .control-drawer__panel {
        width: 100vw;
    }

    .control-modal__panel {
        width: 95vw;
        padding: 1.25rem;
    }

    .control-toast {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        min-width: unset;
        max-width: unset;
    }

    .control-audit-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .control-modal__actions {
        flex-direction: column-reverse;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-glow,
    .stack-card,
    .glass-card,
    .dash-card,
    .button,
    .my-space__particles span,
    .my-space__avatar,
    .my-space__pulse,
    .my-space__avatar-glow,
    .message-list__item::after,
    .my-space__live-dot::before,
    .my-space__count-badge::before,
    .my-space__ticker-track,
    .my-space__breathing-button {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Vybe Social Phase 4 — Component Styles
   ============================================================ */

/* ── Top nav ──────────────────────────────────────────────── */
.vs-topnav {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(var(--bg-rgb, 10, 5, 25), 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(139, 92, 246, 0.18);
}
.vs-topnav__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 3.25rem;
}
.vs-topnav__links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.vs-topnav__links::-webkit-scrollbar { display: none; }
.vs-topnav__link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 9999px;
    color: var(--muted, #a0a0b0);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s;
    position: relative;
}
.vs-topnav__link:hover {
    background: rgba(139, 92, 246, 0.12);
    color: var(--text, #e8e8f0);
}
.vs-topnav__link--active {
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
}
.vs-topnav__logout {
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    color: var(--muted, #a0a0b0);
    font-size: 0.8rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s;
}
.vs-topnav__logout:hover { color: #f87171; }

/* ── Badge / count pill ───────────────────────────────────── */
.vs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background: #8b5cf6;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}
.vs-badge--dm { background: #06b6d4; }

/* ── Avatar ───────────────────────────────────────────────── */
.vs-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
    flex-shrink: 0;
    font-style: normal;
}
.vs-avatar--xs { width: 1.6rem; height: 1.6rem; font-size: 0.9rem; }
.vs-avatar--sm { width: 2rem;   height: 2rem;   font-size: 1rem; }
.vs-avatar--md { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
.vs-avatar--lg { width: 4rem;   height: 4rem;   font-size: 2rem; }

/* ── Compose form ─────────────────────────────────────────── */
.vs-compose-form { display: flex; flex-direction: column; gap: 0.75rem; }
.vs-compose-form__author { display: flex; gap: 0.75rem; align-items: flex-start; }
.vs-compose-form__input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 0.75rem;
    color: var(--text, #e8e8f0);
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.18s;
}
.vs-compose-form__input:focus {
    outline: none;
    border-color: #8b5cf6;
}
.vs-compose-form__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
}
.vs-compose-form__select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 0.5rem;
    color: var(--text, #e8e8f0);
    padding: 0.45rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
}
.vs-compose-form--inline { flex-direction: row; align-items: center; gap: 0.75rem; }
.vs-compose-form--inline .vs-compose-form__input { min-width: 0; }

/* ── Feed layout ──────────────────────────────────────────── */
.vs-feed-layout {
    max-width: 680px;
    margin: 1.5rem auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vs-feed-compose { padding: 1rem 1.25rem; }
.vs-feed { display: flex; flex-direction: column; gap: 0.875rem; }

/* ── Post card ────────────────────────────────────────────── */
.vs-post { padding: 1rem 1.25rem; }
.vs-post--compact { padding: 0.75rem 0; border-bottom: 1px solid rgba(139,92,246,0.1); }
.vs-post--compact:last-child { border-bottom: none; }
.vs-post__header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.vs-post__avatar-link { text-decoration: none; flex-shrink: 0; }
.vs-post__meta { flex: 1; min-width: 0; }
.vs-post__author {
    display: block;
    font-weight: 600;
    color: var(--text, #e8e8f0);
    text-decoration: none;
    font-size: 0.9rem;
}
.vs-post__author:hover { color: #c4b5fd; }
.vs-post__body { margin: 0.25rem 0 0.75rem; }
.vs-post__body p { margin: 0; line-height: 1.55; }
.vs-post__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.vs-post__delete-form { margin-left: auto; }

/* ── Reaction button ──────────────────────────────────────── */
.vs-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(139,92,246,0.25);
    background: rgba(139,92,246,0.08);
    color: var(--muted, #a0a0b0);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.vs-react-btn:hover { background: rgba(139,92,246,0.18); color: #c4b5fd; }
.vs-react-btn--active {
    background: rgba(139,92,246,0.28);
    border-color: #8b5cf6;
    color: #c4b5fd;
}
.vs-react-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Action links ─────────────────────────────────────────── */
.vs-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted, #a0a0b0);
    font-size: 0.875rem;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 0.5rem;
    transition: color 0.18s, background 0.18s;
}
.vs-action-link:hover { color: #c4b5fd; background: rgba(139,92,246,0.1); }

/* ── Icon buttons ─────────────────────────────────────────── */
.vs-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
    color: var(--muted, #a0a0b0);
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}
.vs-icon-btn:hover { background: rgba(255,255,255,0.08); }
.vs-icon-btn--danger:hover { background: rgba(239,68,68,0.12); color: #f87171; }

/* ── Comments ─────────────────────────────────────────────── */
.vs-post-detail-layout {
    max-width: 680px;
    margin: 1.5rem auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vs-comment-compose { padding: 1rem 1.25rem; }
.vs-comment-list { display: flex; flex-direction: column; gap: 0.75rem; }
.vs-comment {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
}
.vs-comment__body { flex: 1; min-width: 0; }
.vs-comment__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}
.vs-comment__body p { margin: 0; font-size: 0.925rem; }
.vs-comment__delete { margin-left: auto; }

/* ── Notifications ────────────────────────────────────────── */
.vs-list-layout {
    max-width: 680px;
    margin: 1.5rem auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.vs-list-layout__header {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.vs-list-layout__header h2 { margin: 0; }
.vs-notif-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    transition: background 0.15s;
}
.vs-notif-item--unread { border-left: 3px solid #8b5cf6; }
.vs-notif-item__icon { font-size: 1.25rem; flex-shrink: 0; }
.vs-notif-item__body { flex: 1; min-width: 0; }
.vs-notif-item__body p { margin: 0 0 0.2rem; font-size: 0.9rem; }
.vs-notif-item__cta { flex-shrink: 0; }
.vs-notif-hint { color: #c4b5fd; font-size: 0.9rem; padding: 0.25rem 0; }

/* ── DM inbox ─────────────────────────────────────────────── */
.vs-dm-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    text-decoration: none;
    color: var(--text, #e8e8f0);
    transition: background 0.15s;
}
.vs-dm-row:hover { background: rgba(139,92,246,0.1); }
.vs-dm-row--unread { border-left: 3px solid #06b6d4; }
.vs-dm-row__body { flex: 1; min-width: 0; }
.vs-dm-row__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.2rem;
}
.vs-dm-row__preview {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted, #a0a0b0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vs-dm-row__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}
.vs-online-pill,
.vs-story-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.vs-online-pill {
    color: #86efac;
    background: rgba(34,197,94,0.16);
    border: 1px solid rgba(34,197,94,0.35);
}
.vs-story-pill {
    color: #c4b5fd;
    background: rgba(139,92,246,0.16);
    border: 1px solid rgba(139,92,246,0.35);
}

/* ── DM thread ────────────────────────────────────────────── */
.vs-thread-layout {
    max-width: 680px;
    margin: 1.5rem auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: calc(100dvh - 6rem);
}
.vs-thread-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    flex-shrink: 0;
}
.vs-thread-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.vs-thread-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.5rem 0;
    scroll-behavior: smooth;
}
.vs-thread-compose { padding: 0.75rem 1rem; flex-shrink: 0; }
.vs-bubble {
    max-width: 70%;
    padding: 0.65rem 0.95rem;
    border-radius: 1.25rem;
    line-height: 1.45;
    font-size: 0.9rem;
    position: relative;
}
.vs-bubble--mine {
    align-self: flex-end;
    background: #8b5cf6;
    color: #fff;
    border-bottom-right-radius: 0.35rem;
}
.vs-bubble--theirs {
    align-self: flex-start;
    background: rgba(255,255,255,0.08);
    border-bottom-left-radius: 0.35rem;
}
.vs-bubble p { margin: 0; }
.vs-bubble__ts {
    display: block;
    font-size: 0.7rem;
    margin-top: 0.3rem;
    opacity: 0.65;
    text-align: right;
}
.vs-thread-separator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin: 0.45rem 0 0.2rem;
}
.vs-thread-separator span {
    font-size: 0.68rem;
    color: #c4b5fd;
    background: rgba(139,92,246,0.15);
    border: 1px solid rgba(139,92,246,0.3);
    padding: 0.12rem 0.55rem;
    border-radius: 9999px;
}
.vs-thread-separator p {
    margin: 0;
    font-size: 0.72rem;
    color: #94a3b8;
}

.vs-compose-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.vs-compose-tool {
    border: 1px solid rgba(139,92,246,0.3);
    background: rgba(255,255,255,0.06);
    color: #c4b5fd;
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
}
.vs-compose-tool:hover {
    background: rgba(139,92,246,0.2);
}

/* ── Messaging UX refresh ─────────────────────────────────── */
.vs-messaging-shell {
    max-width: 1120px;
    margin: 1.25rem auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}
.vs-messaging-sidebar {
    padding: 0.75rem;
    max-height: calc(100dvh - 6.75rem);
    overflow-y: auto;
    position: sticky;
    top: 4rem;
}
.vs-messaging-sidebar__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.35rem 0.6rem;
}
.vs-messaging-sidebar__title h3 {
    margin: 0;
    font-size: 0.9rem;
    color: #c4b5fd;
    letter-spacing: 0.02em;
}
.vs-messaging-sidebar__list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.vs-dm-row--active {
    background: rgba(6,182,212,0.14);
    border-left: 3px solid #06b6d4;
}

.vs-thread-layout {
    max-width: none;
    margin: 0;
    padding: 0;
    height: calc(100dvh - 6.2rem);
    min-height: 540px;
}
.vs-thread-header {
    background: linear-gradient(90deg, rgba(139,92,246,0.18), rgba(6,182,212,0.12));
}
.vs-thread-messages {
    background:
      radial-gradient(circle at 20% 0%, rgba(139,92,246,0.12), transparent 40%),
      radial-gradient(circle at 80% 100%, rgba(6,182,212,0.1), transparent 35%);
    border: 1px solid rgba(139,92,246,0.15);
    border-radius: 14px;
    padding: 1rem;
    position: relative;
}
.vs-thread-messages::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(139,92,246,0.05), rgba(6,182,212,0.03), rgba(139,92,246,0.05));
    animation: vsAmbientShift 12s linear infinite;
    pointer-events: none;
}
@keyframes vsAmbientShift {
    0% { transform: translateX(-8%); }
    50% { transform: translateX(8%); }
    100% { transform: translateX(-8%); }
}
.vs-thread-compose {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: rgba(22, 12, 40, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(139,92,246,0.2);
}
.vs-bubble {
    max-width: min(72%, 560px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.vs-bubble--mine {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.vs-bubble--theirs {
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.08);
}
.vs-dm-read-receipt {
    color: #7dd3fc;
    font-weight: 600;
}

.vs-typing-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    padding: 0.35rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    color: #bae6fd;
    border: 1px solid rgba(125,211,252,0.3);
    background: rgba(6,182,212,0.14);
}
.vs-typing-dot {
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    background: #7dd3fc;
    animation: vsTypingPulse 1s infinite ease-in-out;
}
.vs-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.vs-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes vsTypingPulse {
    0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

.vs-empty-feed--art { position: relative; overflow: hidden; }
.vs-empty-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background: rgba(139,92,246,0.12);
    border: 1px solid rgba(139,92,246,0.25);
}
.vs-empty-art span { font-size: 1.15rem; }
.vs-thread-empty { margin: 0.5rem 0; }

.vs-topnav--messages .vs-topnav__link { min-width: 0; }

/* ── Profile ──────────────────────────────────────────────── */
.vs-profile-layout {
    max-width: 900px;
    margin: 1.5rem auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1rem;
    align-items: start;
}
.vs-profile-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    position: sticky;
    top: 4rem;
}
.vs-profile-card__avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    font-size: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vs-profile-card__info { width: 100%; }
.vs-profile-card__name { margin: 0 0 0.1rem; font-size: 1.25rem; }
.vs-profile-card__bio { font-size: 0.9rem; color: var(--muted, #a0a0b0); margin: 0.25rem 0; }
.vs-profile-card__website { font-size: 0.85rem; color: #8b5cf6; word-break: break-all; }
.vs-profile-card__stats {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.vs-profile-stat { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.vs-profile-stat strong { font-size: 1.15rem; }
.vs-profile-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.vs-profile-posts { display: flex; flex-direction: column; gap: 0.875rem; }
.vs-profile-posts h3 { margin: 0 0 0.25rem; color: var(--muted, #a0a0b0); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Edit profile ─────────────────────────────────────────── */
.vs-edit-profile { padding: 1.5rem; }
.vs-edit-profile__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.vs-settings-form { display: flex; flex-direction: column; gap: 1rem; }
.vs-settings-form__field { display: flex; flex-direction: column; gap: 0.35rem; }
.vs-settings-form__label { font-size: 0.85rem; font-weight: 600; color: var(--muted, #a0a0b0); }
.vs-settings-form__row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; }
.vs-settings-form__actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }

/* ── Follow / suggest ─────────────────────────────────────── */
.vs-follow-btn {
    padding: 0.3rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.825rem;
    background: rgba(139,92,246,0.18);
    border: 1px solid rgba(139,92,246,0.35);
    color: #c4b5fd;
    cursor: pointer;
    transition: background 0.18s;
}
.vs-follow-btn:hover { background: rgba(139,92,246,0.35); }
.vs-suggest-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(139,92,246,0.08);
}
.vs-suggest-row:last-child { border-bottom: none; }
.vs-suggest-name { flex: 1; font-size: 0.9rem; text-decoration: none; color: var(--text, #e8e8f0); }
.vs-suggest-name:hover { color: #c4b5fd; }

/* ── Notices ──────────────────────────────────────────────── */
.vs-notice {
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(139,92,246,0.3);
    background: rgba(139,92,246,0.1);
    color: #c4b5fd;
    transition: opacity 0.4s;
    max-width: 680px;
    margin: 0.5rem auto;
}
.vs-notice--success { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.3); color: #6ee7b7; }
.vs-notice--warn    { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #fcd34d; }
.vs-notice--info    { background: rgba(6,182,212,0.1);  border-color: rgba(6,182,212,0.25); color: #67e8f9; }

/* ── Empty feed ───────────────────────────────────────────── */
.vs-empty-feed {
    padding: 3rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.vs-empty-feed__icon { font-size: 3rem; }
.vs-empty-feed h3 { margin: 0; }
.vs-empty-feed p { margin: 0; color: var(--muted, #a0a0b0); }

/* ── Utility ──────────────────────────────────────────────── */
.vs-muted { color: var(--muted, #a0a0b0); font-size: 0.82rem; }
.vs-no-content { font-size: 0.9rem; padding: 1rem 0; text-align: center; }
.vs-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted, #a0a0b0);
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}
.vs-back-link:hover { color: #c4b5fd; }
.vs-block-btn { font-size: 0.825rem; }

/* ════════════════════════════════════════════════════════════
   PHASE 2 — stories, feed tabs, communities, onboarding,
              badges, pinned post, media uploads, DM reactions
   ══════════════════════════════════════════════════════════ */

/* ── Stories bar ──────────────────────────────────────────── */
.vs-stories-bar {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.75rem 0 1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.5rem;
}
.vs-stories-bar::-webkit-scrollbar { display: none; }

.vs-story-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    flex-shrink: 0;
}
.vs-story-bubble__inner {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border: 3px solid transparent;
    transition: transform .2s;
}
.vs-story-bubble--unseen .vs-story-bubble__inner {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 2px #1a0533, 0 0 0 4px #8b5cf6;
}
.vs-story-bubble--add .vs-story-bubble__inner {
    border-style: dashed;
    border-color: #8b5cf6;
    color: #8b5cf6;
}
.vs-story-bubble:hover .vs-story-bubble__inner { transform: scale(1.08); }
.vs-story-bubble__name {
    font-size: 0.7rem;
    color: var(--muted, #a0a0b0);
    text-align: center;
    max-width: 3.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Story strip (on stories page) ───────────────────────── */
.vs-story-strip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
}
.vs-story-card {
    position: relative;
    width: 120px;
    height: 200px;
    border-radius: 12px;
    background: var(--story-bg, #8b5cf6);
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, opacity .2s;
    border: 2px solid rgba(139,92,246,.4);
}
.vs-story-card--seen { opacity: 0.6; border-color: rgba(255,255,255,.15); }
.vs-story-card:hover { transform: scale(1.04); opacity: 1; }
.vs-story-card__img,
.vs-story-card__video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.vs-story-card__text {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
    padding: 0.5rem;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.vs-story-card__views {
    position: absolute;
    bottom: 0.4rem;
    right: 0.5rem;
    z-index: 2;
    font-size: 0.7rem;
    color: rgba(255,255,255,.8);
    background: rgba(0,0,0,.35);
    border-radius: 4px;
    padding: 1px 4px;
}

/* ── Story viewer overlay ─────────────────────────────────── */
.vs-story-viewer {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
/* Modal card */
.vs-story-viewer__modal {
    display: flex;
    flex-direction: column;
    width: min(95vw, 420px);
    max-height: min(92vh, 780px);
    border-radius: 20px;
    overflow: hidden;
    background: #130229;
    box-shadow: 0 32px 96px rgba(0,0,0,.75);
    position: relative;
}
/* Gradient header (author + close) */
.vs-story-viewer__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .65rem .65rem .8rem;
    background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, transparent 100%);
    pointer-events: none;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.vs-story-viewer__header-info { flex: 1; display: flex; align-items: center; gap: .45rem; }
/* Close button (inside modal, top-right, always clickable) */
.vs-story-viewer__close {
    position: absolute;
    top: .55rem;
    right: .55rem;
    background: rgba(0,0,0,.55);
    border: none;
    color: #fff;
    font-size: 1rem;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    cursor: pointer;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .15s;
}
.vs-story-viewer__close:hover { background: rgba(139,92,246,.65); }
/* Media pane */
.vs-story-viewer__media {
    flex: 1;
    min-height: 220px;
    max-height: calc(min(92vh, 780px) - 150px);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8b5cf6;
}
.vs-story-viewer__media img,
.vs-story-viewer__media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.vs-story-viewer__media-text {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
    color: #fff;
    font-size: 1.1rem;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,.7);
    padding: 0 1.25rem;
    pointer-events: none;
}
/* Footer panel */
.vs-story-viewer__footer {
    flex-shrink: 0;
    padding: .7rem .9rem .8rem;
    background: rgba(19,2,41,.97);
    border-top: 1px solid rgba(139,92,246,.2);
    max-height: 220px;
    overflow-y: auto;
}
/* Reaction row inside footer */
.vs-story-viewer__reactions {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    margin-bottom: .55rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Comments section inside footer */
.vs-story-viewer__comments {
    font-size: .85rem;
    max-height: 90px;
    overflow-y: auto;
    margin-bottom: .45rem;
}
/* Comment form inside footer */
.vs-story-viewer__comment-form { display: flex; gap: .4rem; }
.vs-story-viewer__comment-form .vs-compose-form__input { flex: 1; min-height: auto; }
/* Nav arrows — outside modal, absolute on overlay */
.vs-story-viewer__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.45);
    border: none;
    color: #fff;
    font-size: 2rem;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: background .15s;
}
.vs-story-viewer__nav:hover { background: rgba(139,92,246,.55); }
.vs-story-viewer__nav--prev { left: max(.6rem, calc(50% - min(95vw, 420px)/2 - 3rem)); }
.vs-story-viewer__nav--next { right: max(.6rem, calc(50% - min(95vw, 420px)/2 - 3rem)); }
/* ── Story item wrapper (thumbnail + count strip) ─────────── */
.vs-story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: .3rem;
}
.vs-story-item__counts {
    font-size: .68rem;
    color: var(--muted, #a0a0b0);
    text-align: center;
    white-space: nowrap;
    min-height: 1rem;
}
@media (max-width: 600px) {
    .vs-story-viewer__nav--prev { left: .35rem; }
    .vs-story-viewer__nav--next { right: .35rem; }
}

/* ── Feed tabs ────────────────────────────────────────────── */
.vs-feed-tabs {
    display: flex;
    gap: 0;
    background: rgba(255,255,255,.04);
    border-radius: 12px;
    padding: 0.25rem;
    margin-bottom: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.vs-feed-tabs::-webkit-scrollbar { display: none; }
.vs-feed-tab {
    flex: 1;
    min-width: 6rem;
    text-align: center;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    color: var(--muted, #a0a0b0);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.vs-feed-tab:hover { background: rgba(255,255,255,.06); color: #c4b5fd; }
.vs-feed-tab--active {
    background: rgba(139,92,246,.25);
    color: #c4b5fd;
}

/* ── Upload button + media preview ───────────────────────── */
.vs-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(139,92,246,.3);
    color: #c4b5fd;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background .2s;
    user-select: none;
}
.vs-upload-btn:hover { background: rgba(139,92,246,.2); }
.vs-media-preview {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.vs-post__media {
    margin-top: 0.75rem;
    border-radius: 12px;
    overflow: hidden;
    max-height: 480px;
}
.vs-post__img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
}
.vs-post__video {
    width: 100%;
    max-height: 480px;
    display: block;
    border-radius: 12px;
}

/* ── Community cards / grid ───────────────────────────────── */
.vs-community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.vs-community-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .2s;
}
.vs-community-card:hover { transform: translateY(-2px); }
.vs-community-card__cover {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vs-community-card__emoji { font-size: 2.5rem; }
.vs-community-card__body { padding: 1rem; }
.vs-community-card__name { margin: 0 0 .25rem; font-size: 1rem; font-weight: 600; }
.vs-community-card__desc {
    font-size: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 .5rem;
}
.vs-community-card__meta { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }

/* ── Community header (group_detail) ─────────────────────── */
.vs-community-header {
    overflow: hidden;
    padding: 0;
}
.vs-community-header__banner {
    height: 100px;
    background: var(--cover, #8b5cf6);
    opacity: 0.6;
}
.vs-community-header__body {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem 1.25rem;
    flex-wrap: wrap;
}
.vs-community-header__emoji {
    font-size: 2.5rem;
    margin-top: -2rem;
    background: rgba(26,5,51,.8);
    border-radius: 12px;
    padding: .25rem .5rem;
    border: 2px solid rgba(139,92,246,.4);
}
.vs-community-header__info { flex: 1; min-width: 160px; }
.vs-community-header__name { margin: 0 0 .25rem; font-size: 1.3rem; }
.vs-community-header__actions { margin-left: auto; }
.vs-community-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 1.25rem;
}
.vs-community-sidebar { padding: 1.25rem; max-height: 480px; overflow-y: auto; }
.vs-community-sidebar h3 { margin: 0 0 .75rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }

/* ── Onboarding wizard ────────────────────────────────────── */
.vs-onboarding {
    max-width: 560px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}
.vs-onboarding__card { padding: 2rem; }
.vs-onboarding__header { text-align: center; margin-bottom: 2rem; }
.vs-onboarding__header h1 { margin: .5rem 0 .25rem; }
.vs-onboarding__step h2 { font-size: 1.1rem; margin: 0 0 1.25rem; color: #c4b5fd; }
.vs-onboarding__suggestions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 340px;
    overflow-y: auto;
}
.vs-onboarding__suggest-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    cursor: pointer;
    transition: background .2s;
}
.vs-onboarding__suggest-item:hover { background: rgba(139,92,246,.15); }
.vs-onboarding__suggest-item input { flex-shrink: 0; accent-color: #8b5cf6; }
.vs-wizard-nav {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.75rem;
}
.vs-wizard-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.vs-wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    transition: background .2s, transform .2s;
}
.vs-wizard-dot--active { background: #8b5cf6; transform: scale(1.25); }
.vs-wizard-dot--done { background: #10b981; }

/* ── Badges ───────────────────────────────────────────────── */
.vs-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}
.vs-badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.775rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--badge-color, #8b5cf6) 20%, transparent);
    color: var(--badge-color, #8b5cf6);
    border: 1px solid color-mix(in srgb, var(--badge-color, #8b5cf6) 40%, transparent);
}

/* ── Pinned post ─────────────────────────────────────────── */
.vs-pinned-post {
    padding: 1rem 1.25rem;
    border-left: 3px solid #8b5cf6;
}
.vs-pinned-post__label {
    font-size: 0.75rem;
    color: #8b5cf6;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Profile cover ─────────────────────────────────────────── */
.vs-profile-card__cover {
    height: 80px;
    background: var(--profile-cover, #1a0533);
    border-radius: 8px 8px 0 0;
    margin: -1.25rem -1.25rem .75rem;
    opacity: 0.7;
}

/* ── Post actions-right (pin button) ──────────────────────── */
.vs-post__actions-right {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

/* ── DM reactions ─────────────────────────────────────────── */
.vs-dm-reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8rem;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    padding: 0.1rem 0.4rem;
    cursor: pointer;
    transition: background .15s;
}
.vs-dm-reaction:hover { background: rgba(139,92,246,.3); }
.vs-dm-reaction-row { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .25rem; }
.vs-dm-reaction--mine { background: rgba(139,92,246,.4); border: 1px solid rgba(139,92,246,.7); }
.vs-react-count { font-size: 0.7rem; opacity: 0.85; margin-left: 1px; }
.vs-dm-reaction-picker { display: flex; gap: .2rem; flex-wrap: wrap; margin-top: .15rem; opacity: .88; transition: opacity .2s; pointer-events: auto; }
.vs-bubble:hover .vs-dm-reaction-picker { opacity: 1; }
.vs-dm-react-add { font-size: 0.78rem; background: rgba(255,255,255,.05); border-radius: 999px; padding: 0.08rem 0.35rem; cursor: pointer; transition: background .15s; }
.vs-dm-react-add:hover { background: rgba(139,92,246,.3); }
@media (hover: none) {
    .vs-dm-reaction-picker { opacity: 1; }
}
.vs-dm-read-receipt {
    color: #67e8f9;
    opacity: 0.9;
}

/* ── Rich profile meta ───────────────────────────────────── */
.vs-profile-card__info .vs-muted {
    display: block;
}

/* ── Phase 2 responsive ─────────────────────────────────── */
@media (max-width: 700px) {
    .vs-community-layout { grid-template-columns: 1fr; }
    .vs-community-sidebar { max-height: none; }
    .vs-feed-tab { min-width: 4.5rem; font-size: .8rem; padding: .5rem .65rem; }
    .vs-community-grid { grid-template-columns: 1fr 1fr; }
    .vs-story-viewer__nav { display: none; }
}
@media (max-width: 480px) {
    .vs-community-grid { grid-template-columns: 1fr; }
}

/* ── Mobile responsive (Phase 4) ─────────────────────────── */
@media (max-width: 700px) {
    .vs-topnav__link span:not(.vs-badge) { display: none; }
    .vs-topnav__link { padding: 0.45rem 0.6rem; font-size: 1.1rem; }
    .vs-profile-layout { grid-template-columns: 1fr; }
    .vs-profile-card { position: static; }
    .vs-thread-layout { height: calc(100dvh - 5rem); }
    .vs-bubble { max-width: 85%; }
    .vs-settings-form__row { grid-template-columns: 1fr 1fr; }
    .vs-feed-layout, .vs-post-detail-layout, .vs-list-layout { padding: 0 0.5rem; }

    .vs-messaging-shell {
        grid-template-columns: 1fr;
        padding: 0 0.5rem;
    }
    .vs-messaging-sidebar {
        position: static;
        max-height: none;
        order: 2;
    }
    .vs-thread-layout {
        order: 1;
        min-height: 70dvh;
    }
    .vs-thread-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        margin-top: 0.25rem;
    }
    .vs-compose-form--inline {
        flex-wrap: wrap;
    }
    .vs-compose-tools {
        width: 100%;
        order: 2;
    }
    .vs-compose-form--inline .vs-compose-form__input {
        order: 3;
        width: 100%;
    }
    .vs-compose-form--inline .button {
        order: 4;
    }
    .vs-topnav--messages .vs-topnav__links {
        gap: 0.1rem;
    }
    .vs-topnav--messages .vs-topnav__links a:nth-child(3) {
        display: none;
    }
    .vs-topnav--messages .vs-topnav__logout {
        display: none;
    }
}

/* =============================================================
   Phase 2A — Product Polish Styles
   ============================================================= */

/* ── Character counter ─────────────────────────────────────── */
.vs-char-counter {
    font-size: 0.78rem;
    color: var(--muted, #a0a0b0);
    align-self: center;
    margin-left: auto;
    flex-shrink: 0;
    transition: color 0.2s;
}

/* ── Reaction pop animation ────────────────────────────────── */
@keyframes vs-react-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
.vs-react-btn--pop {
    animation: vs-react-pop 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ── Live notification toast ───────────────────────────────── */
.vs-live-toast {
    transition: opacity 0.3s;
    border-radius: 0.7rem !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.45);
}
.vs-live-toast[style*="cursor:pointer"]:hover {
    border-color: rgba(139,92,246,0.5) !important;
}

/* ── Push opt-in banner ────────────────────────────────────── */
.vs-push-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border-radius: 0.9rem;
    background: rgba(139,92,246,0.1);
    border: 1px solid rgba(139,92,246,0.3);
    margin-bottom: 0.75rem;
}
.vs-push-banner[hidden] { display: none; }
.vs-push-banner__body { flex: 1; }
.vs-push-banner__title { font-weight: 700; margin: 0 0 0.15rem; font-size: 0.9rem; }
.vs-push-banner__desc  { margin: 0; font-size: 0.82rem; color: var(--muted, #a0a0b0); }
.vs-push-banner__btn   { flex-shrink: 0; white-space: nowrap; }

/* ── Settings page layout ──────────────────────────────────── */
.vs-settings-layout {
    max-width: 720px;
    margin: 1.5rem auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vs-settings-section {
    display: grid;
    gap: 0.65rem;
    padding: 1.25rem;
}
.vs-settings-section__title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted, #a0a0b0);
    font-weight: 700;
    margin: 0;
}
.vs-settings-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vs-settings-row:last-child { border-bottom: none; }
.vs-settings-row__label { font-size: 0.9rem; }
.vs-settings-row__desc  { font-size: 0.78rem; color: var(--muted, #a0a0b0); margin: 0.1rem 0 0; }

/* ── Online pill in DM inbox ───────────────────────────────── */
.vs-online-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: #6ee7b7;
    font-weight: 600;
}
.vs-online-pill::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px rgba(16,185,129,0.6);
}
.vs-story-pill {
    font-size: 0.7rem;
    color: #c4b5fd;
    font-weight: 600;
}

/* ── Mobile: wider tap targets for nav ─────────────────────── */
@media (max-width: 480px) {
    .vs-topnav__link {
        padding: 0.5rem 0.55rem;
        font-size: 1.2rem;
        min-height: 2.75rem;
    }
    .vs-react-btn {
        min-height: 2.5rem;
        padding: 0.4rem 0.75rem;
    }
    .vs-action-link {
        min-height: 2.5rem;
        padding: 0.4rem 0.6rem;
    }
    .vs-compose-form__input {
        font-size: 1rem;
    }
    .vs-feed-layout {
        padding: 0 0.35rem;
    }
    .vs-settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}


/* ════════════════════════════════════════════════════════════════
   Phase C — Canonical nav additions + bottom-nav + UX polish
   ════════════════════════════════════════════════════════════════ */

/* ── Top-nav brand wordmark ──────────────────────────────────── */
.vs-topnav__brand {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: var(--text, #e8e8f0);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    padding: 0 0.25rem;
    margin-right: 0.25rem;
}
.vs-topnav__brand-mark {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}
.vs-topnav__brand-name {
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #c4b5fd, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Secondary / overflow nav links ─────────────────────────── */
.vs-topnav__secondary {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex-shrink: 0;
    border-left: 1px solid rgba(139, 92, 246, 0.15);
    padding-left: 0.35rem;
    margin-left: 0.25rem;
}
.vs-topnav__link--sm {
    font-size: 0.8rem;
    padding: 0.35rem 0.55rem;
    opacity: 0.8;
}
.vs-topnav__link--sm:hover { opacity: 1; }

/* ── Logout label (hide text on very small screens) ─────────── */
.vs-topnav__logout-label { display: inline; }

/* ── Avatar inside nav link ──────────────────────────────────── */
.vs-topnav__avatar {
    flex-shrink: 0;
}

/* ── Mobile bottom navigation bar ───────────────────────────── */
.vs-bnav {
    display: none; /* shown only via media query */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: rgba(var(--bg-rgb, 10, 5, 25), 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(139, 92, 246, 0.2);
    padding: 0.3rem 0.5rem max(0.5rem, env(safe-area-inset-bottom));
    padding-bottom: calc(0.4rem + env(safe-area-inset-bottom));
}
.vs-bnav {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
.vs-bnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.75rem;
    color: var(--muted, #a0a0b0);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 500;
    min-width: 3.5rem;
    position: relative;
    transition: color 0.15s, background 0.15s;
}
.vs-bnav__item:hover,
.vs-bnav__item--active {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.12);
}
.vs-bnav__icon {
    font-size: 1.3rem;
    line-height: 1;
}
.vs-bnav__label { line-height: 1; }
.vs-bnav__badge {
    position: absolute;
    top: 0.1rem;
    right: 0.4rem;
    font-size: 0.6rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.2rem;
}

/* Hide top-nav on mobile; show bottom-nav instead */
@media (max-width: 640px) {
    .vs-topnav { display: none; }
    .vs-bnav { display: flex; }
    /* Add bottom padding so content isn't hidden behind bottom nav */
    .site-shell { padding-bottom: 4.5rem; }
    .vs-topnav__brand-name { display: none; }
}
/* Show top-nav on desktop; hide bottom-nav */
@media (min-width: 641px) {
    .vs-bnav { display: none; }
    .vs-topnav__secondary { display: flex; }
}
/* Hide secondary overflow on medium screens */
@media (max-width: 900px) {
    .vs-topnav__secondary { display: none; }
    .vs-topnav__brand-name { display: none; }
}

/* ── Games preview card ──────────────────────────────────────── */
.vs-games-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.vs-game-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.75rem;
    background: rgba(139, 92, 246, 0.08);
    border-radius: 0.6rem;
    font-size: 0.875rem;
    color: var(--text, #e8e8f0);
    border: 1px solid rgba(139, 92, 246, 0.15);
}
.vs-coming-soon {
    font-size: 0.7rem;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ── Softer empty-state helper ───────────────────────────────── */
.vs-no-content {
    font-size: 0.875rem;
    padding: 0.5rem 0;
    opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════
   VYBE SPACE — PHASE D  (Profile + My Space Fun Layer)
   ═══════════════════════════════════════════════════════════════ */

/* ── Profile layout ──────────────────────────────────────────── */
.vs-profile-layout {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.75rem 0.75rem 5rem;
}

/* ── Profile card (macro) ─────────────────────────────────────── */
.vs-profile-card {
    border-radius: 1.25rem;
    overflow: hidden;
    position: relative;
    border: 1.5px solid var(--border-glass, rgba(139,92,246,.25));
}

.vs-profile-card__cover {
    height: 90px;
    width: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.vs-profile-card__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -36px 0 0 1rem;
    position: relative;
    z-index: 1;
    border: 3px solid #0d0d1a;
    flex-shrink: 0;
}

.vs-profile-card__info {
    padding: 0.5rem 1.1rem 0.6rem;
}

.vs-profile-card__eyebrow {
    font-size: 0.7rem;
    opacity: 0.7;
    display: block;
    margin-bottom: 0.1rem;
}

.vs-profile-card__name {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.1rem;
    line-height: 1.2;
}

.vs-profile-card__handle {
    font-size: 0.85rem;
    margin: 0 0 0.35rem;
}

.vs-profile-card__bio {
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
    line-height: 1.4;
}

.vs-profile-card__tagline {
    font-style: italic;
    opacity: 0.85;
}

.vs-profile-card__meta {
    font-size: 0.82rem;
    margin: 0.25rem 0 0;
}

.vs-profile-card__status {
    font-size: 0.85rem;
    opacity: 0.8;
    margin: 0.35rem 0 0;
    font-style: italic;
}

.vs-profile-card__website {
    font-size: 0.82rem;
    color: var(--accent, #8b5cf6);
    text-decoration: none;
    display: block;
    margin-top: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-profile-card__website:hover {
    text-decoration: underline;
}

.vs-profile-card__stats {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 0.55rem;
}

.vs-profile-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.55rem 0.4rem;
    font-size: 0.82rem;
    gap: 0.1rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

a.vs-profile-stat:hover {
    background: rgba(139,92,246,.1);
}

.vs-profile-stat--active {
    color: var(--accent, #8b5cf6);
}

.vs-profile-stat strong {
    font-size: 1.05rem;
    font-weight: 700;
}

.vs-profile-card__actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding: 0.6rem 1rem 0.85rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

.vs-profile-card__block-btn {
    margin-left: auto;
    opacity: 0.65;
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem !important;
}

/* ── Profile tabs ────────────────────────────────────────────── */
.vs-profile-tabs {
    display: flex;
    gap: 0;
    background: rgba(13,13,26,.55);
    border-radius: 0.85rem;
    overflow: hidden;
    border: 1px solid rgba(139,92,246,.18);
    backdrop-filter: blur(10px);
}

.vs-profile-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 0.4rem;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    color: rgba(255,255,255,.6);
    transition: background 0.15s, color 0.15s;
    border-right: 1px solid rgba(255,255,255,.06);
    text-align: center;
}

.vs-profile-tab:last-child {
    border-right: none;
}

.vs-profile-tab:hover {
    background: rgba(139,92,246,.12);
    color: rgba(255,255,255,.9);
}

.vs-profile-tab--active {
    background: rgba(139,92,246,.22);
    color: #fff;
    font-weight: 600;
}

.vs-profile-tab__count {
    background: var(--accent, #8b5cf6);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 99px;
    line-height: 1.3;
    min-width: 1.2em;
    text-align: center;
}

/* ── Badge strip ─────────────────────────────────────────────── */
.vs-badge-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 1rem 0.6rem;
}

.vs-badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.65rem;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
}

.vs-badge-chip--earned {
    background: color-mix(in srgb, var(--badge-color, #8b5cf6) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--badge-color, #8b5cf6) 45%, transparent);
    color: color-mix(in srgb, var(--badge-color, #8b5cf6) 90%, white);
}

.vs-badge-chip--vibe {
    background: rgba(6,182,212,.13);
    border: 1px solid rgba(6,182,212,.3);
    color: #67e8f9;
}

/* ── About tab ───────────────────────────────────────────────── */
.vs-profile-about {
    padding: 1.2rem 1.3rem;
    border-radius: 1.1rem;
}

.vs-profile-about__heading {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.85rem;
}

.vs-profile-about__section {
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.vs-profile-about__section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.vs-profile-about__tagline {
    font-size: 1rem;
    font-style: italic;
    opacity: 0.85;
    margin: 0 0 0.4rem;
}

.vs-profile-about__row {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.3rem 0;
    font-size: 0.88rem;
}

.vs-profile-about__label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: 0.55;
    min-width: 90px;
    flex-shrink: 0;
}

/* ── Guestbook cards ────────────────────────────────────────── */
.vs-guestbook-card {
    border-radius: 1rem;
    padding: 1rem 1.15rem;
}

.vs-guestbook-card--header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.vs-guestbook-card__header-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vs-guestbook-card--compose {
    background: rgba(139,92,246,.07);
    border: 1px solid rgba(139,92,246,.2);
}

.vs-guestbook-card__heading {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.vs-guestbook-card__stickers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.vs-guestbook-card__author {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.vs-guestbook-card__author-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.vs-guestbook-card__sticker {
    font-size: 1.2rem;
    line-height: 1;
}

.vs-guestbook-card__time {
    font-size: 0.78rem;
    margin-left: auto;
    flex-shrink: 0;
}

.vs-guestbook-card__message {
    margin: 0 0 0.5rem;
    word-break: break-word;
    line-height: 1.5;
    font-size: 0.92rem;
}

.vs-guestbook-card__controls {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-top: 0.4rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

.vs-guestbook-card--hidden {
    opacity: 0.55;
    border: 1px dashed rgba(255,255,255,.2) !important;
}

/* ── Sticker wall ───────────────────────────────────────────── */
.vs-sticker-wall {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.vs-sticker-wall__grid {
    border-radius: 1rem;
    padding: 1.1rem 1.2rem;
}

.vs-sticker-wall__heading {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.8rem;
}

.vs-sticker-wall__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.65rem;
}

.vs-sticker-wall__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55rem 0.3rem;
    border-radius: 0.75rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    text-align: center;
    transition: transform 0.15s, background 0.15s;
    cursor: default;
}

.vs-sticker-wall__item:hover {
    transform: scale(1.08);
    background: rgba(139,92,246,.12);
}

.vs-sticker-wall__emoji {
    font-size: 1.9rem;
    line-height: 1;
}

.vs-sticker-wall__note {
    font-size: 0.68rem;
    opacity: 0.7;
    line-height: 1.25;
    word-break: break-word;
    max-width: 72px;
}

.vs-sticker-wall__send {
    border-radius: 1rem;
    padding: 1.1rem 1.2rem;
}

.vs-sticker-wall__picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ── Sticker pick labels ─────────────────────────────────────── */
.vs-sticker-pick {
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.25rem;
    border-radius: 0.4rem;
    border: 2px solid transparent;
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vs-sticker-pick:hover {
    border-color: rgba(139,92,246,.4);
    background: rgba(139,92,246,.1);
    transform: scale(1.1);
}

.vs-sticker-pick--active {
    border-color: var(--accent, #8b5cf6) !important;
    background: rgba(139,92,246,.18) !important;
    transform: scale(1.15) !important;
}

.vs-sticker-pick--none {
    font-size: 0.78rem;
    padding: 0.3rem 0.55rem;
    border-color: rgba(255,255,255,.1);
    opacity: 0.6;
}

/* ── My Space quick links ────────────────────────────────────── */
.vs-myspace-quicklinks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.vs-myspace-quicklink {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.vs-myspace-quicklink:hover {
    background: rgba(139,92,246,.18);
    border-color: rgba(139,92,246,.35);
    color: #fff;
}

.vs-myspace-quicklink--primary {
    background: rgba(139,92,246,.18);
    border-color: rgba(139,92,246,.35);
    color: #c4b5fd;
}

.vs-myspace-quicklink--primary:hover {
    background: rgba(139,92,246,.3);
}

/* ── Profile posts (tab content) ────────────────────────────── */
.vs-profile-posts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Empty states (unified) ──────────────────────────────────── */
.vs-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 2rem 1.5rem;
    border-radius: 1rem;
}

.vs-empty-state__icon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 0.2rem;
}

.vs-empty-state h3 {
    margin: 0;
    font-size: 1.05rem;
}

.vs-empty-state p {
    margin: 0;
    font-size: 0.87rem;
}

/* ── Guestbook preview wrapper ───────────────────────────────── */
.vs-guestbook-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── misc ────────────────────────────────────────────────────── */
.vs-link {
    color: var(--accent, #8b5cf6);
    text-decoration: none;
}

.vs-link:hover {
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
   Phase E — Game Lounge
   ───────────────────────────────────────────────────────────────────────── */

/* Page header used across game pages */
.vs-page-header {
    margin-bottom: 1.5rem;
}
.vs-page-header__title {
    margin: .15rem 0 .4rem;
    font-size: clamp(1.4rem, 4vw, 2rem);
    line-height: 1.2;
}

/* Game lounge grid — responsive card layout */
.vs-game-lounge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Generic game card */
.vs-game-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1.1rem 1.25rem;
    border-radius: 1.25rem;
    transition: box-shadow .15s, transform .12s;
}
.vs-game-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.vs-game-card--inactive {
    opacity: .55;
}
.vs-game-card--active {
    border: 1px solid rgba(139,92,246,.4);
}
.vs-game-card__icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}
.vs-game-card__action {
    display: flex;
    align-items: flex-end;
}

/* Invite card */
.vs-game-invite-card {
    padding: 1.1rem 1.25rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(139,92,246,.3);
}
.vs-game-invite-card__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
}
.vs-game-invite-card__actions {
    display: flex;
    gap: .5rem;
}

/* Players strip */
.vs-game-players-strip {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: .9rem 1.1rem;
    border-radius: 1rem;
}
.vs-game-player {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
    min-width: 140px;
}
.vs-game-player--active {
    background: rgba(139,92,246,.08);
    border-radius: .75rem;
    padding: .35rem .6rem;
}
.vs-game-player--empty {
    opacity: .5;
}

/* Status banner */
.vs-game-status {
    text-align: center;
    padding: .85rem 1.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 1rem;
    letter-spacing: .01em;
}

/* Board wrapper */
.vs-game-board-wrap {
    display: flex;
    justify-content: center;
    margin: .5rem 0 1.5rem;
}

/* Tic-Tac-Toe 3×3 board */
.vs-game-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: min(320px, 85vw);
}

/* Individual cell */
.vs-game-cell {
    aspect-ratio: 1 / 1;
    border-radius: .75rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    font-weight: 700;
    position: relative;
    overflow: hidden;
    transition: background .12s;
}
.vs-game-cell--filled {
    background: rgba(139,92,246,.1);
}

/* Clickable cell button */
.vs-game-cell__form {
    position: absolute;
    inset: 0;
    margin: 0;
}
.vs-game-cell__btn {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    transition: background .12s;
}
.vs-game-cell__btn:hover {
    background: rgba(139,92,246,.18);
}
.vs-game-cell__hint {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    opacity: .25;
    color: var(--accent, #8b5cf6);
    font-weight: 700;
    pointer-events: none;
}
.vs-game-cell__btn:hover .vs-game-cell__hint {
    opacity: .7;
}

/* X and O marks */
.vs-game-cell__mark {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}
.vs-game-cell__mark--x {
    color: #a78bfa;
}
.vs-game-cell__mark--o {
    color: #67e8f9;
}

/* Connect 4 board overrides */
.vs-c4-board {
    width: min(520px, 94vw);
    gap: 5px;
}

.vs-c4-cell {
    background: rgba(18, 26, 52, 0.75);
    border-color: rgba(255, 255, 255, 0.14);
}

.vs-c4-cell__form {
    position: absolute;
    inset: 0;
    margin: 0;
}

.vs-c4-cell__btn {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.vs-c4-cell__btn:hover {
    background: rgba(139, 92, 246, 0.16);
}

.vs-c4-cell__piece {
    display: block;
    width: 74%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* "Live" game chip on My Space / lobby */
.vs-game-chip--live {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(139,92,246,.12);
    border: 1px solid rgba(139,92,246,.35);
    border-radius: 2rem;
    padding: .25rem .7rem;
    font-size: .85rem;
    text-decoration: none;
    color: inherit;
    transition: background .12s, border-color .12s;
}
.vs-game-chip--live:hover {
    background: rgba(139,92,246,.22);
    border-color: rgba(139,92,246,.6);
}

/* Section title for game pages */
.vs-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .7rem;
    opacity: .85;
}

/* Notice banner */
.vs-notice {
    padding: .7rem 1rem;
    border-radius: .75rem;
    font-size: .9rem;
}
.vs-notice--info {
    background: rgba(6,182,212,.12);
    border: 1px solid rgba(6,182,212,.3);
    color: #67e8f9;
}

/* Game invites section */
.vs-game-invites {
    margin-bottom: 1.5rem;
}

/* Report details */
.vs-report-details summary {
    list-style: none;
}
.vs-report-details summary::-webkit-details-marker {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════
   Phase F — Progression Layer
   ══════════════════════════════════════════════════════════════════ */

/* Level badge */
.vs-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #6d28d9);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(139,92,246,.5);
    border: 2px solid rgba(255,255,255,.15);
}
.vs-level-badge--lg {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.1rem;
}

/* XP bar */
.vs-xp-bar {
    width: 100%;
    height: .5rem;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
}
.vs-xp-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #a78bfa, #38bdf8);
    border-radius: 999px;
    transition: width .5s ease;
    min-width: 4px;
}

/* Streak pill */
.vs-streak-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .75rem;
    background: rgba(251,146,60,.15);
    border: 1px solid rgba(251,146,60,.35);
    color: #fb923c;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Achievement grid */
.vs-achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}
.vs-achievement-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .75rem;
    padding: .75rem;
    text-align: center;
    transition: border-color .2s, background .2s;
}
.vs-achievement-card:hover {
    border-color: rgba(167,139,250,.5);
    background: rgba(167,139,250,.08);
}
.vs-achievement-card__emoji {
    font-size: 1.8rem;
    display: block;
    margin-bottom: .4rem;
}
.vs-achievement-card__name {
    font-size: .78rem;
    font-weight: 600;
    color: #e2e8f0;
    line-height: 1.2;
}
.vs-achievement-card__desc {
    font-size: .7rem;
    color: rgba(148,163,184,.75);
    margin-top: .2rem;
    line-height: 1.3;
}
.vs-achievement-card--locked {
    opacity: .4;
    filter: grayscale(1);
}

/* Game history list */
.vs-history-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.vs-history-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.1rem;
}
.vs-history-card__result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: .3rem .5rem;
    border-radius: .4rem;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}
.vs-history-card__result--win {
    background: rgba(74,222,128,.15);
    color: #4ade80;
    border: 1px solid rgba(74,222,128,.35);
}
.vs-history-card__result--loss {
    background: rgba(248,113,113,.12);
    color: #f87171;
    border: 1px solid rgba(248,113,113,.3);
}
.vs-history-card__result--draw {
    background: rgba(148,163,184,.1);
    color: #94a3b8;
    border: 1px solid rgba(148,163,184,.25);
}
.vs-history-card__result--canceled,
.vs-history-card__result--unknown {
    background: rgba(148,163,184,.08);
    color: #64748b;
    border: 1px solid rgba(148,163,184,.15);
}
.vs-history-card__info {
    flex: 1;
    min-width: 0;
}
.vs-history-card__info strong {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: #e2e8f0;
}

/* Rematch button */
.vs-rematch-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    text-decoration: none;
}
.vs-rematch-btn:hover { opacity: .85; transform: translateY(-1px); }
.vs-rematch-btn:active { transform: translateY(0); opacity: 1; }

/* Activity feed */
.vs-activity-feed {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.vs-activity-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem .8rem;
    background: rgba(255,255,255,.04);
    border-radius: .5rem;
    font-size: .82rem;
    color: #cbd5e1;
}
.vs-activity-item__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: .05rem;
}
.vs-activity-item__text { flex: 1; line-height: 1.35; }
.vs-activity-item__time { color: #475569; font-size: .72rem; white-space: nowrap; margin-top: .1rem; }



/* ============================================================
   Phase G — Mobile Game Lounge Polish
   ============================================================ */

/* ── Lounge wrapper ───────────────────────────────────────── */
.vs-lounge { padding-bottom: 4rem; }

/* ── Compact lounge header ───────────────────────────────── */
.vs-lounge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.25rem .5rem;
  max-width: 760px;
  margin: 0 auto .5rem;
}
.vs-lounge-header__title {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 800;
  margin: 0;
}
.vs-lounge-header__sub {
  font-size: .82rem;
  color: #94a3b8;
  margin: .15rem 0 0;
}
.vs-lounge-header__hist-btn {
  font-size: 1.4rem;
  text-decoration: none;
  line-height: 1;
  opacity: .75;
  transition: opacity .2s;
}
.vs-lounge-header__hist-btn:hover { opacity: 1; }

/* ── Section headers ─────────────────────────────────────── */
.vs-lounge-section { max-width: 760px; margin: 0 auto 1.25rem; padding: 0 1rem; }
.vs-lounge-section__title {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
  margin: 0 0 .6rem;
}

/* ── Invite stack ────────────────────────────────────────── */
.vs-invite-stack { display: flex; flex-direction: column; gap: .6rem; }
.vs-invite-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(139,92,246,.35);
  border-left: 3px solid #a78bfa;
  border-radius: 12px;
}
.vs-invite-card__info { flex: 1; }
.vs-invite-card__info strong { display: block; font-size: .95rem; }
.vs-invite-card__game { font-size: .8rem; color: #94a3b8; }
.vs-invite-card__btns { display: flex; gap: .5rem; flex-shrink: 0; }

/* ── Active games horizontal scroll ─────────────────────── */
.vs-active-games-scroll {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .4rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vs-active-games-scroll::-webkit-scrollbar { display: none; }

.vs-active-card {
  flex: 0 0 auto;
  width: 180px;
  background: rgba(15,10,30,.7);
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 14px;
  padding: .9rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s, transform .2s;
}
.vs-active-card:hover { border-color: rgba(139,92,246,.6); transform: translateY(-2px); }
.vs-active-card--your-turn {
  border-color: rgba(139,92,246,.6);
  box-shadow: 0 0 16px rgba(139,92,246,.25);
  animation: turnPulse 1.8s ease-in-out infinite;
}
.vs-active-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .5rem; }
.vs-active-card__icon { font-size: 1.4rem; line-height: 1; }
.vs-active-card__chip {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .2rem .45rem;
  border-radius: 6px;
  line-height: 1;
}
.vs-chip--your-turn { background: rgba(139,92,246,.25); color: #a78bfa; border: 1px solid rgba(139,92,246,.4); }
.vs-chip--waiting   { background: rgba(234,179,8,.15);  color: #fbbf24; border: 1px solid rgba(234,179,8,.3); }
.vs-chip--opp-turn  { background: rgba(100,116,139,.15); color: #94a3b8; border: 1px solid rgba(100,116,139,.3); }
.vs-active-card__game-name { font-size: .9rem; font-weight: 700; margin: 0 0 .25rem; line-height: 1.2; }
.vs-active-card__opponent  { font-size: .78rem; color: #94a3b8; margin: 0; line-height: 1.4; }

/* ── Game catalogue grid ─────────────────────────────────── */
.vs-game-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .9rem;
}
@media (max-width: 500px) {
  .vs-game-catalog { grid-template-columns: 1fr; }
}

.vs-catalog-card {
  position: relative;
  padding: 1rem 1.1rem 1rem;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.vs-catalog-card--soon { opacity: .55; filter: grayscale(.35); pointer-events: none; }
.vs-catalog-card__icon { font-size: 1.6rem; line-height: 1; margin-bottom: .15rem; }
.vs-catalog-card__name { font-size: 1rem; font-weight: 700; margin: 0; }
.vs-catalog-card__desc { font-size: .82rem; color: #94a3b8; margin: 0; flex: 1; }
.vs-catalog-card__meta { font-size: .75rem; color: #64748b; margin: 0; }
.vs-catalog-card__footer { margin-top: .5rem; }
.vs-catalog-card__cta { font-size: .85rem; padding: .45rem .9rem; }

.vs-game-live-badge {
  position: absolute; top: .6rem; right: .7rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  padding: .18rem .45rem; border-radius: 5px;
  background: rgba(74,222,128,.18); color: #4ade80;
  border: 1px solid rgba(74,222,128,.35);
}
.vs-game-soon-badge {
  position: absolute; top: .6rem; right: .7rem;
  font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  padding: .18rem .45rem; border-radius: 5px;
  background: rgba(100,116,139,.18); color: #64748b;
  border: 1px solid rgba(100,116,139,.25);
}
.vs-coming-soon-pill {
  display: inline-block;
  font-size: .78rem; color: #64748b;
  background: rgba(100,116,139,.12);
  padding: .3rem .7rem; border-radius: 20px;
  border: 1px solid rgba(100,116,139,.2);
}

/* ── Social rail ─────────────────────────────────────────── */
.vs-lounge-social-rail {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
@media (max-width: 580px) {
  .vs-lounge-social-rail { grid-template-columns: 1fr; }
}

.vs-friends-playing,
.vs-activity-rail {
  padding: 1rem;
  border-radius: 14px;
}

/* Friends list */
.vs-friends-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.vs-friend-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.vs-friend-row__avatar-wrap { position: relative; flex-shrink: 0; }
.vs-friend-row__dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid #0f0a1e;
}
.vs-dot--online { background: #4ade80; }
.vs-dot--game   { background: #a78bfa; }
.vs-friend-row__info { flex: 1; min-width: 0; }
.vs-friend-row__name { font-size: .88rem; font-weight: 600; text-decoration: none; color: inherit; }
.vs-friend-row__name:hover { color: #a78bfa; }
.vs-friend-row__status { display: block; font-size: .75rem; color: #64748b; }
.vs-friend-challenge-btn {
  text-decoration: none; font-size: 1rem; line-height: 1;
  opacity: .65; transition: opacity .2s;
}
.vs-friend-challenge-btn:hover { opacity: 1; }

/* Activity feed */
.vs-activity-feed-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.vs-activity-item { display: flex; gap: .5rem; align-items: flex-start; font-size: .82rem; line-height: 1.4; }
.vs-activity-item__icon { flex-shrink: 0; font-size: 1rem; line-height: 1.4; }
.vs-activity-item__text { flex: 1; }
.vs-activity-item__text a { color: #a78bfa; text-decoration: none; }
.vs-activity-item__text a:hover { text-decoration: underline; }

/* ── Rematch banner ──────────────────────────────────────── */
.vs-rematch-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1.1rem;
  margin-top: 1.5rem;
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 14px;
}

/* ── Session header ──────────────────────────────────────── */
.vs-session-header {
  text-align: center;
  padding: .75rem 1rem .25rem;
  max-width: 480px;
  margin: 0 auto;
}
.vs-session-header__title {
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  font-weight: 800;
  margin: 0 0 .25rem;
}
.vs-session-header__meta { color: #64748b; }

/* ── Lobby card ──────────────────────────────────────────── */
.vs-lobby-card {
  max-width: 440px;
  margin: 0 auto;
  padding: 1.5rem;
  border-radius: 16px;
}
.vs-lobby-card__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; }
.vs-lobby-form { display: flex; flex-direction: column; gap: .6rem; }
.vs-lobby-form__row { display: flex; gap: .6rem; }
.vs-lobby-form__row .vs-input { flex: 1; min-width: 0; }

/* ── How-to details ──────────────────────────────────────── */
.vs-howto {
  max-width: 440px;
  margin: 0 auto;
  padding: .75rem 1.25rem;
  border-radius: 12px;
  cursor: pointer;
}
.vs-howto__summary { font-size: .9rem; font-weight: 600; color: #94a3b8; user-select: none; }
.vs-howto__list { margin: .6rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.vs-howto__list li { font-size: .85rem; color: #94a3b8; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.vs-breadcrumb {
  max-width: 480px;
  margin: .5rem auto .2rem;
  padding: 0 1rem;
  font-size: .82rem;
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes turnPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(139,92,246,.5); }
  50%      { box-shadow: 0 0 0 8px rgba(139,92,246,0); }
}
.vs-turn-pulse { animation: turnPulse 1.8s ease-in-out infinite; }

@keyframes winGlow {
  to { background: rgba(74,222,128,.18); box-shadow: 0 0 14px rgba(74,222,128,.5); }
}
.vs-game-cell--win { animation: winGlow .6s ease forwards; }

@keyframes cellPop {
  0%   { transform: scale(.75); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.vs-game-cell--placed { animation: cellPop .22s ease; }

/* ── Mobile-first overrides ──────────────────────────────── */
@media (max-width: 480px) {
  .vs-lounge-header { padding: .75rem .9rem .35rem; }
  .vs-lounge-section { padding: 0 .75rem; }
  .vs-lobby-card, .vs-howto { padding: 1.1rem; }
  .vs-active-card { width: 160px; }
}

/* ============================================================
   Phase H — Friends & Social Presence
   ============================================================ */

/* ── Friend grid ─────────────────────────────────────────── */
.vs-friend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
  margin-top: .4rem;
}
@media (max-width: 480px) {
  .vs-friend-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
}

/* ── Friend card ─────────────────────────────────────────── */
.vs-friend-card {
  padding: .9rem 1rem;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.vs-friend-card.vs-best-friend {
  border-color: rgba(236,72,153,.35);
  box-shadow: 0 0 12px rgba(236,72,153,.12);
}
.vs-friend-card__avatar-wrap {
  position: relative;
  width: fit-content;
}
.vs-friend-card__info { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.vs-friend-card__name {
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  line-height: 1.2;
}
.vs-friend-card__name:hover { color: #a78bfa; }
.vs-friend-card__actions {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-top: .15rem;
}
/* Dot on card avatar */
.vs-friend-card__dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid #0f0a1e;
}
.vs-friend-card__dot.vs-dot--online  { background: #4ade80; }
.vs-friend-card__dot.vs-dot--offline { background: transparent; }

/* ── Friend row (all friends list) ──────────────────────── */
.vs-friends-list { display: flex; flex-direction: column; gap: .45rem; }
.vs-friend-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .9rem;
  border-radius: 12px;
}
.vs-friend-row__avatar-wrap { position: relative; flex-shrink: 0; }
.vs-friend-row__dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid #0f0a1e;
}
.vs-friend-row__dot.vs-dot--online  { background: #4ade80; }
.vs-friend-row__dot.vs-dot--offline { background: transparent; }
.vs-friend-row__info  { flex: 1; min-width: 0; }
.vs-friend-row__name  { font-size: .9rem; font-weight: 700; text-decoration: none; color: inherit; display: block; }
.vs-friend-row__name:hover { color: #a78bfa; }
.vs-friend-row__status { font-size: .75rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.vs-friend-row__actions { display: flex; gap: .3rem; flex-shrink: 0; }

/* ── Online dot (standalone) ─────────────────────────────── */
.vs-online-dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid #0f0a1e;
  background: transparent;
  pointer-events: none;
}
.vs-online-dot--on { background: #4ade80; }

/* ── Presence pill ───────────────────────────────────────── */
.vs-presence-pill {
  display: inline-block;
  font-size: .71rem;
  color: #94a3b8;
  background: rgba(148,163,184,.08);
  padding: .12rem .45rem;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.18);
  white-space: nowrap;
}
.vs-presence-pill--online {
  color: #4ade80;
  background: rgba(74,222,128,.08);
  border-color: rgba(74,222,128,.25);
}

/* ── Mood chip ───────────────────────────────────────────── */
.vs-mood-chip {
  display: inline-block;
  font-size: .77rem;
  color: #c4b5fd;
  background: rgba(139,92,246,.1);
  padding: .18rem .5rem;
  border-radius: 20px;
  border: 1px solid rgba(139,92,246,.22);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Mood editor ─────────────────────────────────────────── */
.vs-mood-editor-section { margin-bottom: .6rem; }
.vs-mood-editor__form {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.vs-mood-editor__emoji {
  width: 2.6rem;
  text-align: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: .35rem .25rem;
  font-size: 1.1rem;
  color: inherit;
  cursor: pointer;
}
.vs-mood-editor__text { flex: 1; min-width: 140px; }

/* Status editor on friends hub */
.vs-status-editor {
  max-width: 600px;
  margin: 0 auto .75rem;
  padding: .75rem 1rem;
  border-radius: 12px;
}
.vs-status-editor__form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vs-status-editor__label { font-size: .78rem; color: #94a3b8; white-space: nowrap; }
.vs-status-editor__row   { display: flex; align-items: center; gap: .5rem; flex: 1; flex-wrap: wrap; }
.vs-status-editor__emoji-pick {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: .35rem .25rem;
  font-size: 1rem;
  color: inherit;
  cursor: pointer;
}
.vs-status-editor__text { flex: 1; min-width: 120px; }

/* ── Best friends strip ──────────────────────────────────── */
.vs-best-friends-strip {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin-top: .2rem;
}
.vs-best-friend-bubble {
  position: relative;
  text-decoration: none;
  display: inline-flex;
}
.vs-best-friend-bubble:hover .vs-avatar { opacity: .85; }

/* ── Action buttons on friend cards ─────────────────────── */
.vs-friend-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  width: 2rem; height: 2rem;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, border-color .18s;
  color: inherit;
}
.vs-friend-action-btn:hover { background: rgba(255,255,255,.12); }
.vs-best-friend-toggle--on { border-color: rgba(236,72,153,.4); background: rgba(236,72,153,.08); }

/* ── Wave button ─────────────────────────────────────────── */
.vs-wave-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  padding: .3rem .45rem;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  color: inherit;
  transition: background .18s;
}
.vs-wave-btn:hover { background: rgba(255,255,255,.12); }

/* ── Live presence row in thread header ──────────────────── */
.vs-live-presence {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .2rem;
}

/* ── Profile friend bar ──────────────────────────────────── */
.vs-profile-friend-bar { margin-bottom: .6rem; }

/* ── Notice banner ───────────────────────────────────────── */
.vs-notice {
  max-width: 600px;
  margin: .5rem auto;
  padding: .65rem 1rem;
  border-radius: 10px;
  font-size: .88rem;
  border: 1px solid transparent;
}
.vs-notice--info {
  background: rgba(139,92,246,.1);
  border-color: rgba(139,92,246,.25);
  color: #c4b5fd;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .vs-friend-card__actions { gap: .2rem; }
  .vs-friend-action-btn    { width: 1.8rem; height: 1.8rem; font-size: .8rem; }
  .vs-mood-editor__form    { flex-wrap: wrap; }
  .vs-status-editor__row   { flex-wrap: wrap; }
  .vs-friend-row { padding: .55rem .7rem; }
}

/* ============================================================
   Phase I — Home Mobile Layout + CSP Polish
   ============================================================ */

/* ── Quick bar (mobile-only horizontal strip) ────────────── */
.vs-home-quickbar {
  display: none; /* hidden on desktop */
}

/* ── Desktop-only quick links inside badge card ──────────── */
.vs-home-desktop-ql {
  display: grid; /* visible on desktop */
}

/* ── Hero info wrapper ───────────────────────────────────── */
.vs-home-hero-info {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

/* ── Mood chip inline in hero ────────────────────────────── */
.vs-home-mood-chip {
  margin-top: .3rem;
  max-width: 240px;
}

/* ── Feed post row on home ───────────────────────────────── */
.vs-home-post {
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-bottom: .75rem;
  margin-bottom: .1rem;
}
.vs-home-post:last-of-type {
  border-bottom: none;
}
.vs-home-post__actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: nowrap;
}
.vs-home-post__actions .vs-react-btn,
.vs-home-post__actions .vs-action-link {
  min-height: 2.2rem;     /* comfortable tap target */
  display: inline-flex;
  align-items: center;
  padding: .35rem .65rem;
}

/* ── See all button ──────────────────────────────────────── */
.vs-home-see-all {
  display: block;
  text-align: center;
  margin-top: .65rem;
  font-size: .84rem;
}

/* ── Stats row in hero ───────────────────────────────────── */
.vs-home-stats-row {
  font-size: .85rem;
  margin: .2rem 0 0;
}

/* ============================================================
   Mobile overrides — max-width: 640px
   ============================================================ */
@media (max-width: 640px) {

  /* Show mobile quickbar, hide desktop quicklinks in badge card */
  .vs-home-quickbar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .4rem;
    padding: .5rem 0 .4rem;
    margin-bottom: .5rem;
    scrollbar-width: none;
  }
  .vs-home-quickbar::-webkit-scrollbar { display: none; }
  .vs-home-quickbar .vs-myspace-quicklink {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: .76rem;
    padding: .38rem .6rem;
  }
  .vs-home-desktop-ql {
    display: none; /* hide inside badge card on mobile */
  }

  /* ── Compact hero ────────────────────────────────────────── */
  .vs-home-compact-hero {
    gap: .6rem;
    margin-bottom: .6rem;
  }

  /* Profile block: keep avatar + info side-by-side */
  .vs-home-compact-hero .my-space__hero-block--profile {
    flex-direction: row;
    align-items: center;
    gap: .7rem;
  }

  /* Smaller avatar */
  .vs-home-compact-hero .my-space__avatar {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
  }

  /* Remove avatar glow for perf on mobile */
  .vs-home-compact-hero .my-space__avatar-glow {
    display: none;
  }

  /* Compact title */
  .vs-home-compact-hero .my-space__title {
    font-size: clamp(1.35rem, 6.5vw, 2rem);
    line-height: 1.15;
    margin: 0;
  }

  /* Compact eyebrow */
  .vs-home-compact-hero .eyebrow {
    font-size: .68rem;
  }

  /* Status dot row */
  .vs-home-compact-hero .my-space__status {
    font-size: .76rem;
    margin: .1rem 0 0;
  }

  /* Stats (followers) */
  .vs-home-stats-row {
    font-size: .76rem;
    margin: .15rem 0 0;
  }

  /* Mood chip: don't overflow on mobile */
  .vs-home-mood-chip {
    max-width: calc(100vw - 5rem);
    font-size: .74rem;
  }

  /* Composer: tighter */
  .vs-home-compact-hero .my-space__hero-block--composer {
    padding: 0;
  }
  .vs-home-compact-hero .vs-compose-form__input {
    font-size: .88rem;
    min-height: 3rem;
  }
  .vs-home-compact-hero .vs-compose-form__row {
    flex-wrap: wrap;
    gap: .35rem;
  }
  .vs-home-compact-hero .vs-compose-form__row .button--primary {
    flex: 1;
    min-width: 80px;
  }

  /* Badge/streak block: compact */
  .vs-home-compact-hero .my-space__badge-card {
    gap: .35rem;
    padding: .7rem .85rem;
  }
  .vs-home-compact-hero .my-space__badge-card strong {
    font-size: 1rem;
  }

  /* Grid: single column, tighter gaps */
  .my-space__grid {
    gap: .55rem;
  }

  /* Cards: consistent spacing */
  .my-space-card {
    border-radius: .9rem;
  }
  .my-space-card__header {
    margin-bottom: .65rem;
  }

  /* Phase H sections (mood editor, best friends) */
  .vs-mood-editor-section {
    margin-bottom: .5rem;
    padding: .7rem .9rem;
  }
  .vs-mood-editor__form {
    flex-wrap: wrap;
    gap: .4rem;
  }
  .vs-mood-editor__text {
    min-width: 0;
    flex: 1 1 140px;
  }

  /* Stories bar: tighter on mobile */
  .vs-stories-bar {
    gap: .65rem;
    padding: .5rem 0 .75rem;
  }

  /* Feed posts on home: comfortable taps */
  .vs-home-post + .vs-home-post {
    margin-top: .5rem;
  }
  .vs-home-post__actions .vs-react-btn,
  .vs-home-post__actions .vs-action-link {
    min-height: 2.4rem;
    font-size: .88rem;
  }

  /* Suggested people rows */
  .vs-suggest-row {
    padding: .35rem 0;
  }

  /* Section spacing between glass cards */
  .vs-home-mobile > .glass-card,
  .vs-home-mobile > .vs-lounge-section {
    margin-bottom: .5rem;
  }

  /* Notice banner: clear of bottom nav */
  #vs-page-notice,
  .vs-notice[id] {
    position: fixed;
    bottom: 5.5rem;
    left: .75rem;
    right: .75rem;
    z-index: 8500;
    margin: 0;
  }
}

/* ── Very small screens (≤ 400px) ────────────────────────── */
@media (max-width: 400px) {
  .vs-home-compact-hero .my-space__title {
    font-size: clamp(1.15rem, 6vw, 1.6rem);
  }
  .vs-home-compact-hero .my-space__avatar {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.1rem;
  }
  .vs-home-quickbar .vs-myspace-quicklink {
    font-size: .72rem;
    padding: .32rem .5rem;
  }
}

/* ============================================================
   Phase J — Final Mobile Polish (spacing + nav clearance)
   ============================================================ */

/* ── Mobile: tighter vertical rhythm ─────────────────────── */
@media (max-width: 640px) {

  /* Undo the 1rem margin-top that the 980px breakpoint adds to .my-space__hero */
  .vs-home-compact-hero.my-space__hero {
    margin-top: 0;
  }

  /* Sections between hero and grid: tighter */
  .vs-home-mobile > .glass-card,
  .vs-home-mobile > .vs-lounge-section {
    margin-bottom: .35rem; /* was .5rem in Phase I */
  }

  /* Mood editor section: pull closer to hero */
  .vs-mood-editor-section {
    margin-bottom: .35rem;
  }

  /* Profile setup reminder: compact on mobile */
  .vs-home-mobile .glass-card[style*="justify-content:space-between"] {
    padding: .7rem .9rem;
    margin-top: .35rem;
  }

  /* Grid columns: minimal gap on mobile */
  .my-space__grid {
    gap: .4rem; /* was .55rem in Phase I */
  }

  /* Card headers: reduce bottom margin so Feed starts sooner */
  .vs-home-mobile .my-space-card__header {
    margin-bottom: .45rem;
  }

  /* Feed card: pull up by reducing glass-card internal padding on mobile */
  .vs-home-mobile .my-space-card {
    padding: .8rem .9rem;
  }

  /* Best friends strip: tighter spacing */
  .vs-best-friends-strip {
    gap: .55rem;
  }

  /* Stories bar: less top breathing room on mobile home */
  .vs-home-mobile .vs-stories-bar {
    padding-top: .3rem;
    padding-bottom: .5rem;
    margin-bottom: .3rem;
  }

  /* Content area: enough bottom clearance for bnav + FAB */
  .site-shell {
    padding-bottom: 5.5rem; /* was 4.5rem — extra room for FAB above nav */
  }
}

/* ── Very small screens (≤ 400px): even tighter ─────────── */
@media (max-width: 400px) {
  .vs-home-mobile > .glass-card,
  .vs-home-mobile > .vs-lounge-section {
    margin-bottom: .25rem;
  }
  .vs-home-mobile .my-space-card {
    padding: .65rem .75rem;
  }
  .my-space__grid {
    gap: .3rem;
  }
}

/* ============================================================
   Phase K — Feed Momentum + Compact Mobile Social Polish
   ============================================================ */

/* ── Activity card (social heartbeat) ─────────────────────── */
.vs-activity-card {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .9rem;
  border-radius: .85rem;
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.13);
  animation: vs-fade-in .3s ease both;
}
.vs-activity-card__icon {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}
.vs-activity-card__text {
  flex: 1;
  min-width: 0;
  font-size: .83rem;
  color: var(--muted, #a0a0b0);
  line-height: 1.35;
}
.vs-activity-card__text strong { color: var(--text, #e8e8f0); }
.vs-activity-card__ts {
  font-size: .71rem;
  color: var(--muted, #a0a0b0);
  white-space: nowrap;
  flex-shrink: 0;
}
.vs-activity-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  background: rgba(139,92,246,.18);
  color: #c4b5fd;
  padding: .2rem .55rem;
  border-radius: 9999px;
  font-weight: 600;
  white-space: nowrap;
}
.vs-social-pulse {
  display: inline-block;
  width: .42rem;
  height: .42rem;
  border-radius: 9999px;
  background: #8b5cf6;
  flex-shrink: 0;
  animation: vs-pulse-dot 2.2s ease infinite;
}

/* ── Presence rail ─────────────────────────────────────────── */
.vs-presence-rail-wrap {
  padding: .6rem 1rem .5rem;
}
.vs-presence-rail-wrap h3 {
  font-size: .72rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .45rem;
}
.vs-presence-rail {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .2rem;
  scrollbar-width: none;
}
.vs-presence-rail::-webkit-scrollbar { display: none; }
.vs-presence-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  flex: 0 0 auto;
  text-decoration: none;
  min-width: 3.25rem;
}
.vs-presence-bubble__avatar {
  position: relative;
}
.vs-presence-bubble__avatar .vs-avatar {
  border: 2px solid rgba(139,92,246,.2);
  transition: border-color .18s;
}
.vs-presence-bubble:hover .vs-avatar {
  border-color: #8b5cf6;
}
.vs-presence-bubble__online {
  position: absolute;
  bottom: 0;
  right: 0;
  width: .6rem;
  height: .6rem;
  border-radius: 9999px;
  background: var(--neon-green, #39ff88);
  border: 2px solid rgba(10,5,25,1);
  animation: vs-pulse-dot 2.5s ease infinite;
}
.vs-presence-bubble__name {
  font-size: .66rem;
  color: var(--muted, #a0a0b0);
  white-space: nowrap;
  max-width: 3.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.vs-presence-bubble__mood {
  font-size: .72rem;
  line-height: 1;
}

/* ── Feed compact mode ─────────────────────────────────────── */
.vs-feed-compact.vs-feed { gap: .65rem; }
.vs-feed-compact .vs-post { padding: .8rem 1rem; }
.vs-feed-compact .vs-post__header {
  gap: .55rem;
  margin-bottom: .3rem;
}
.vs-feed-compact .vs-post__body { margin: .15rem 0 .45rem; }
.vs-feed-compact .vs-post__body p { line-height: 1.47; }
.vs-feed-compact .vs-post__footer { gap: .45rem; }
.vs-feed-compact .vs-react-btn {
  padding: .25rem .65rem;
  font-size: .83rem;
}
.vs-feed-compact .vs-action-link {
  font-size: .83rem;
  padding: .25rem .45rem;
}

/* ── Author hierarchy: stronger weight for scanability ─────── */
.vs-post__author { font-weight: 700; }
.vs-post__meta > .vs-muted { font-size: .78rem; }

/* ── Feed post fade-in ─────────────────────────────────────── */
.vs-feed .vs-post,
.vs-feed .vs-activity-card {
  animation: vs-fade-in .28s ease both;
}
.vs-feed .vs-post:nth-child(2),
.vs-feed .vs-activity-card:nth-child(2) { animation-delay: .05s; }
.vs-feed .vs-post:nth-child(3)          { animation-delay: .10s; }
.vs-feed .vs-post:nth-child(4)          { animation-delay: .15s; }
.vs-feed .vs-post:nth-child(5)          { animation-delay: .18s; }

/* ── Hover glow on post cards ─────────────────────────────── */
.vs-post.glass-card {
  transition: box-shadow .22s, transform .15s;
}
.vs-post.glass-card:hover {
  box-shadow: 0 0 0 1px rgba(139,92,246,.22), 0 6px 24px rgba(139,92,246,.14);
}

/* ── Reaction bounce animation ─────────────────────────────── */
.vs-react-btn--bounce {
  animation: vs-react-bounce .38s cubic-bezier(.36,.07,.19,.97) both;
}

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes vs-fade-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vs-pulse-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(139,92,246,.55); }
  50%     { box-shadow: 0 0 0 4px rgba(139,92,246,0); }
}
@keyframes vs-react-bounce {
  0%,100% { transform: scale(1); }
  35%     { transform: scale(1.28); }
  65%     { transform: scale(.88); }
  82%     { transform: scale(1.05); }
}

/* ── Mobile: compact app bar ─────────────────────────────────
   On ≤640px the vs-topnav is already hidden; only site-header
   (brand logo + theme button) shows at the top of site-shell.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Hide tagline — saves ~1.1rem vertical space */
  .brand__copy small { display: none; }

  /* Tighter site-header */
  .site-header {
    margin-bottom: .45rem;
    padding-top: .35rem;
  }

  /* site-shell: zero top gap on mobile (Phase J keeps padding-bottom: 5.5rem) */
  .site-shell {
    padding-top: 0;
  }

  /* site-header: ultra-compact on mobile — just logo + theme toggle */
  .site-header {
    padding-top: .2rem;
    padding-bottom: .1rem;
    margin-bottom: .2rem;
  }
  .brand__mark--image { width: 1.5rem; height: 1.5rem; }
  .brand__copy strong { font-size: .92rem; }

  /* Feed layout: flush to edges, minimal top gap */
  .vs-feed-layout {
    margin-top: .35rem;
    padding: 0 .5rem;
    gap: .55rem;
  }

  /* Compose card: compact */
  .vs-feed-compose { padding: .6rem .8rem; }

  /* Feed gap: tighter */
  .vs-feed { gap: .5rem; }
  .vs-feed-compact.vs-feed { gap: .45rem; }

  /* Post card: compact */
  .vs-post { padding: .65rem .85rem; }
  .vs-post__header { gap: .5rem; margin-bottom: .28rem; }
  .vs-post__body   { margin: .12rem 0 .4rem; }
  .vs-post__body p { line-height: 1.44; font-size: .92rem; }
  .vs-post__footer { gap: .35rem; flex-wrap: nowrap; }
  .vs-post__author { font-size: .87rem; }
  .vs-post__meta > .vs-muted { font-size: .73rem; }

  /* Tap targets: keep comfortable */
  .vs-react-btn  { padding: .25rem .6rem; font-size: .82rem; min-height: 2.2rem; }
  .vs-action-link { font-size: .82rem; padding: .25rem .42rem; min-height: 2.2rem; }

  /* Feed tabs: smaller on mobile */
  .vs-feed-tab { min-width: 4rem; font-size: .78rem; padding: .45rem .55rem; }

  /* Activity cards: slightly more compact */
  .vs-activity-card { padding: .4rem .75rem; }
  .vs-activity-card__text { font-size: .8rem; }

  /* Presence rail wrap: tight */
  .vs-presence-rail-wrap { padding: .45rem .75rem .35rem; }
}

/* ── Very small (≤400px) ─────────────────────────────────────── */
@media (max-width: 400px) {
  .vs-post { padding: .55rem .7rem; }
  .vs-post__body p { font-size: .89rem; }
}

/* ══════════════════════════════════════════════════════════════
   Phase L — Living Feed + Stories + Profile Personality
   ═══════════════════════════════════════════════════════════ */

/* Stories bar on feed page (same styles as home) */
.vs-feed-layout .vs-stories-bar {
  gap: .65rem;
  padding: .35rem 0 .6rem;
}

/* Profile about: personality rows */
.vs-profile-about__row .vs-profile-about__label {
  min-width: 7rem;
}

/* Activity card: game-win glow */
.vs-activity-card[data-type="game_win"],
.vs-activity-card[data-type="achievement"] {
  border-left: 2px solid #f59e0b;
}

/* ── Mobile: 6-item bottom nav ───────────────────────────── */
@media (max-width: 640px) {
  .vs-bnav__item {
    min-width: 2.9rem;
    padding: .28rem .3rem;
    font-size: .6rem;
  }
  .vs-bnav__icon { font-size: 1.2rem; }

  /* Stories bar on feed: same tight spacing */
  .vs-feed-layout .vs-stories-bar {
    gap: .55rem;
    padding: .3rem 0 .5rem;
  }

  /* Edit profile personality row: stack on very small */
  .vs-settings-form__row { flex-wrap: wrap; }
}

/* ── 395px fine-tune ─────────────────────────────────────── */
@media (max-width: 400px) {
  .vs-bnav__item  { min-width: 2.5rem; padding: .25rem .2rem; }
  .vs-bnav__icon  { font-size: 1.1rem; }
  .vs-bnav__label { font-size: .55rem; }

  /* Story bubble name: shorter */
  .vs-story-bubble__name { max-width: 3rem; font-size: .63rem; }
}

/* ══════════════════════════════════════════════════════════════
   Phase M — Feed Energy + Theme Settings + Mobile Header Polish
   ═══════════════════════════════════════════════════════════ */

/* ── Site header: compact without theme toggle ───────────────── */
.site-header {
  justify-content: flex-start;
  gap: .75rem;
}
/* Brand tagline: hidden on dashboard/feed pages */
.dashboard-page .brand__tagline { display: none; }

/* ── Settings: Theme picker ──────────────────────────────────── */
.vs-theme-picker {
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
}
.vs-theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .7rem 1.15rem;
  border-radius: .75rem;
  border: 1.5px solid rgba(139,92,255,.22);
  background: rgba(139,92,255,.07);
  color: var(--text);
  cursor: pointer;
  font-size: .85rem;
  min-width: 5rem;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.vs-theme-btn span:first-child { font-size: 1.35rem; line-height: 1; }
.vs-theme-btn:hover {
  border-color: rgba(139,92,255,.55);
  background: rgba(139,92,255,.14);
}
.vs-theme-btn--active {
  border-color: var(--accent, #8b5cf6);
  background: rgba(139,92,255,.2);
  box-shadow: 0 0 10px rgba(139,92,255,.28);
}

/* ── Feed: personality chips ─────────────────────────────────── */
.vs-post__chips {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: .28rem;
}
.vs-chip {
  display: inline-flex;
  align-items: center;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  line-height: 1.4;
  font-weight: 500;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(139,92,255,.12);
  border: 1px solid rgba(139,92,255,.22);
  color: var(--accent, #a78bfa);
}
.vs-chip--game { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); color: #34d399; }

/* ── Feed: post timestamp smaller ───────────────────────────── */
.vs-post__timestamp { font-size: .72rem; }

/* ── Feed: read-more clamp ───────────────────────────────────── */
.vs-post__body--clamped {
  max-height: 7.6em;
  overflow: hidden;
  position: relative;
}
.vs-post__body--clamped::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2.2em;
  background: linear-gradient(transparent, var(--card-bg, #101018));
  pointer-events: none;
}
.vs-read-more-btn {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent, #8b5cf6);
  font-size: .78rem;
  padding: .1rem 0 .2rem;
  margin-top: -.1rem;
  text-align: left;
}
.vs-read-more-btn:hover { text-decoration: underline; }

/* ── Composer: polish ────────────────────────────────────────── */
.vs-compose-form__input:focus {
  outline: none;
  border-color: var(--accent, #8b5cf6);
  box-shadow: 0 0 0 2px rgba(139,92,255,.22), 0 0 16px rgba(139,92,255,.12);
}
.vs-compose-form__emoji-row {
  display: flex;
  gap: .3rem;
  align-items: center;
}
.vs-emoji-pick {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: .15rem .2rem;
  border-radius: .35rem;
  line-height: 1;
  opacity: .75;
  transition: opacity .15s, transform .12s;
}
.vs-emoji-pick:hover { opacity: 1; transform: scale(1.18); }
.vs-compose-form__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .3rem;
}
.vs-compose-submit {
  margin-left: auto;
  font-size: .88rem;
  padding: .4rem .9rem;
}
.vs-compose-form__row {
  flex-direction: column;
  gap: .3rem;
}

/* ── Stories: empty hint ─────────────────────────────────────── */
.vs-stories-bar--empty { align-items: center; }
.vs-stories-bar__empty-hint {
  font-size: .75rem;
  color: var(--muted);
  padding: .2rem .5rem;
  white-space: nowrap;
}

/* ── Activity card: type-based colours ──────────────────────── */
.vs-activity-card[data-type="friend_accepted"],
.vs-activity-card[data-type="friend_request"] {
  border-left: 2px solid #60a5fa;
}
.vs-activity-card[data-type="wave"],
.vs-activity-card[data-type="nudge"] {
  border-left: 2px solid #c084fc;
}
.vs-activity-card[data-type="follow"],
.vs-activity-card[data-type="mention"] {
  border-left: 2px solid #34d399;
}

/* ── Mobile: compact header + feed (Phase M overrides) ──────── */
@media (max-width: 640px) {
  /* Header is now just logo + name — tighter */
  .site-header {
    padding-top: .15rem;
    padding-bottom: .08rem;
    margin-bottom: .15rem;
    min-height: 0;
  }
  .brand__mark--image { width: 1.35rem; height: 1.35rem; }
  .brand__copy strong { font-size: .88rem; }

  /* Composer: tighter */
  .vs-feed-compose { padding: .45rem .65rem; }
  .vs-compose-form__input { font-size: .92rem; }
  .vs-compose-form__emoji-row { gap: .2rem; }
  .vs-emoji-pick { font-size: 1rem; }
  .vs-compose-submit { font-size: .82rem; padding: .35rem .7rem; }

  /* Chips: compact */
  .vs-chip { font-size: .68rem; padding: .08rem .42rem; }

  /* Fewer columns in theme picker */
  .vs-theme-btn { min-width: 4.5rem; padding: .6rem .9rem; font-size: .8rem; }
}

@media (max-width: 400px) {
  .vs-theme-btn { min-width: 4rem; padding: .55rem .7rem; }
  .vs-compose-form__actions { gap: .35rem; }
}

/* ── Phase N: Notifications + Real-Time Polish ─────────────────────────── */

/* Badge pulse animation */
@keyframes vs-badge-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5); box-shadow: 0 0 0 4px rgba(139,92,246,.35); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.vs-badge--pulse { animation: vs-badge-pulse .5s ease; }

/* Online dot soft pulse for presence indicators */
@keyframes vs-online-glow {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
.vs-online-pill { animation: vs-online-glow 2s ease infinite; }

/* Notification center: actor avatar */
.vs-notif-item__avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

/* Notification inline actions row */
.vs-notif-item__actions {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .4rem;
}
.vs-notif-item__actions .button,
.vs-notif-item__actions .vs-notif-item__cta {
  font-size: .78rem;
  padding: .22rem .6rem;
}

/* Improved empty state for notification center */
.vs-notif-empty {
  text-align: center;
  padding: 2.5rem 1rem;
}
.vs-notif-empty__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: .75rem;
}
.vs-notif-empty h3 {
  margin: 0 0 .4rem;
}
.vs-notif-empty p {
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
}

/* Notification prefs: auto-save status label */
.vs-pref-save-status {
  font-size: .78rem;
  margin-left: .6rem;
  transition: opacity .3s;
}

/* ══════════════════════════════════════════════════════════════
   Sprint 6 — Phase 1A: Social Density + Polish
   ═══════════════════════════════════════════════════════════ */

/* ── Story ring glow (animated, unseen) ─────────────────────── */
@keyframes vs-story-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #8b5cf6, 0 0 8px rgba(139,92,246,.4); }
  50%       { box-shadow: 0 0 0 3px #c084fc, 0 0 16px rgba(192,132,252,.6); }
}
.vs-story-bubble--unseen .vs-story-bubble__inner {
  animation: vs-story-ring-pulse 2.4s ease infinite;
}
/* Viewed story: softer, no animation */
.vs-story-bubble:not(.vs-story-bubble--unseen) .vs-story-bubble__inner {
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}
/* Story bubble: smooth lift on hover */
.vs-story-bubble:hover .vs-story-bubble__inner {
  transform: scale(1.1);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
/* Story card: sharper seen/unseen distinction */
.vs-story-card--seen {
  opacity: 0.55;
  filter: saturate(0.55);
  border-color: rgba(255,255,255,.1);
}
.vs-story-card:not(.vs-story-card--seen) {
  border: 1.5px solid rgba(139,92,246,.55);
  box-shadow: 0 0 12px rgba(139,92,246,.18);
}
/* Story view count badge */
.vs-story-card__views {
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  background: rgba(0,0,0,.48);
  padding: .1rem .35rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* ── Presence: "Active now" everywhere ─────────────────────── */
.vs-online-dot {
  display: inline-block;
  width: .52rem;
  height: .52rem;
  border-radius: 9999px;
  background: #39ff88;
  flex-shrink: 0;
  animation: vs-pulse-dot 2.5s ease infinite;
}
.vs-online-dot--sm {
  width: .38rem;
  height: .38rem;
}
/* Chip with text */
.vs-active-chip {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .7rem;
  background: rgba(57,255,136,.1);
  border: 1px solid rgba(57,255,136,.25);
  color: #39ff88;
  padding: .1rem .42rem;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.vs-active-chip .vs-online-dot { background: #39ff88; }

/* Story pill in DM inbox */
.vs-story-pill {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .67rem;
  background: rgba(139,92,246,.14);
  border: 1px solid rgba(139,92,246,.3);
  color: #c4b5fd;
  padding: .1rem .38rem;
  border-radius: 999px;
  font-weight: 600;
}
.vs-story-pill::before { content: '📖'; font-size: .7rem; }

/* ── Profile vibe banner (Sprint 6) ─────────────────────────── */
.vs-profile-vibe-banner {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.18);
  border-radius: .65rem;
  padding: .5rem .8rem;
  margin-bottom: .85rem;
}
.vs-profile-vibe-banner__emoji { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.vs-profile-vibe-banner__text {
  font-size: .88rem;
  color: var(--text);
  font-style: italic;
  min-width: 0;
}

/* ── Profile recent activity strip ─────────────────────────── */
.vs-profile-recent-activity {
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: .75rem;
}
.vs-activity-card--profile {
  margin-bottom: .38rem;
  padding: .38rem .72rem;
  border-radius: .6rem;
}
.vs-activity-card--profile:last-child { margin-bottom: 0; }

/* ── Feed: activity card guestbook / vibe_update colors ────── */
.vs-activity-card[data-type="guestbook_signed"] {
  border-left: 2px solid #60a5fa;
}
.vs-activity-card[data-type="vibe_update"] {
  border-left: 2px solid #f59e0b;
}
.vs-activity-card[data-type="story_reaction"] {
  border-left: 2px solid #c084fc;
}

/* ── Vibe / mood chip: compact inline  ──────────────────────── */
.vs-chip--status {
  background: rgba(139,92,246,.1);
  border-color: rgba(139,92,246,.22);
  color: #c4b5fd;
  font-style: italic;
}

/* ── Microinteractions ──────────────────────────────────────── */

/* Badge shimmer */
@keyframes vs-badge-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.vs-badge-chip--earned {
  background: linear-gradient(
    90deg,
    rgba(var(--badge-color-rgb, 139,92,246), .18) 25%,
    rgba(var(--badge-color-rgb, 139,92,246), .32) 50%,
    rgba(var(--badge-color-rgb, 139,92,246), .18) 75%
  );
  background-size: 200% auto;
  animation: vs-badge-shimmer 3.6s linear infinite;
}

/* DM arrival fade-in */
@keyframes vs-dm-arrive {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.vs-dm-msg--new { animation: vs-dm-arrive .28s ease both; }

/* Game invite glow */
@keyframes vs-game-invite-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  50%       { box-shadow: 0 0 0 6px rgba(16,185,129,.25); }
}
.vs-activity-card[data-type="game_invite"],
.vs-activity-card[data-type="game_social_invite"] {
  animation: vs-game-invite-glow 2.8s ease infinite;
  border-left: 2px solid #10b981;
}

/* Friend request highlight */
.vs-activity-card[data-type="friend_request"] {
  background: rgba(96,165,250,.06);
}

/* Notification item pulse on unread */
@keyframes vs-notif-pulse-bg {
  0%   { background: rgba(139,92,246,.10); }
  100% { background: rgba(139,92,246,.04); }
}
.vs-notif-item--unread {
  animation: vs-notif-pulse-bg 1.8s ease forwards;
}

/* ── Mobile 430px (large modern phones) ────────────────────── */
@media (max-width: 430px) {
  .vs-feed-layout { padding: 0 .45rem; gap: .5rem; }
  .vs-post { padding: .6rem .8rem; }
  .vs-post__author { font-size: .86rem; }
  .vs-compose-form__input { font-size: .9rem; }
  .vs-react-btn { min-height: 2.15rem; }
  .vs-action-link { min-height: 2.15rem; }
  /* Bottom nav: label always visible */
  .vs-bnav__label { font-size: .58rem; }
}

/* ── Mobile 395px (iPhone 14/15 exact) ─────────────────────── */
@media (max-width: 395px) {
  .vs-feed-layout { padding: 0 .35rem; }
  .vs-post { padding: .55rem .7rem; }
  /* Composer: full-width submit button */
  .vs-compose-form__actions { flex-wrap: wrap; }
  .vs-compose-submit { flex: 1 0 100%; }
  /* Story bubble name: very compact */
  .vs-story-bubble__name { max-width: 2.8rem; font-size: .61rem; }
  /* Story bubble gap tighter */
  .vs-stories-bar { gap: .42rem; }
  /* Presence rail: tighter bubbles */
  .vs-presence-bubble { min-width: 2.9rem; }
  .vs-presence-bubble__name { max-width: 2.9rem; }
}

/* ── Story quick-react bar (below story card) ───────────────── */
.vs-story-quick-react {
  display: flex;
  gap: .3rem;
  margin-top: .3rem;
  justify-content: center;
}
.vs-story-quick-react__btn {
  background: rgba(255,255,255,.08);
  border: none;
  border-radius: 999px;
  font-size: .95rem;
  padding: .18rem .38rem;
  cursor: pointer;
  transition: transform .15s, background .15s;
  line-height: 1;
}
.vs-story-quick-react__btn:hover {
  background: rgba(139,92,246,.22);
  transform: scale(1.18);
}
.vs-story-quick-react__btn--active {
  background: rgba(139,92,246,.3);
  transform: scale(1.1);
}

/* ── Vibe preset quick-pick (mood editor) ───────────────────── */
.vs-vibe-presets {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-bottom: .45rem;
}
.vs-vibe-preset-btn {
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.22);
  border-radius: 999px;
  font-size: .78rem;
  padding: .18rem .5rem;
  cursor: pointer;
  color: var(--text);
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.vs-vibe-preset-btn:hover {
  background: rgba(139,92,246,.22);
  border-color: rgba(139,92,246,.45);
}

/* ── Feed presence rail: "currently playing" chip ───────────── */
.vs-presence-bubble__activity {
  font-size: .62rem;
  color: #34d399;
  max-width: 3.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* ── Notification: actor avatar color ring ──────────────────── */
.vs-notif-item__avatar--online {
  box-shadow: 0 0 0 2px #39ff88;
}

/* ── Performance: contain paint for feed ────────────────────── */
.vs-feed .vs-post { contain: layout style; }
.vs-activity-card { contain: layout; }


/* Sprint 9A.2: gameplay smoothness + reaction rail + mobile comfort */
[data-game-session] .vs-reaction-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 0.45rem;
  margin-top: 0.9rem;
}

[data-game-session] .vs-reaction-btn {
  min-height: 44px;
  min-width: 44px;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(20, 10, 36, 0.65);
  color: #f8f2ff;
  font-size: 1.1rem;
}

[data-game-session] .vs-reaction-float-layer {
  pointer-events: none;
  position: relative;
  min-height: 0;
}

[data-game-session] .vs-float-reaction {
  position: absolute;
  transform: translateY(0);
  animation: vs-float-fade 1.8s ease-out forwards;
  font-size: 1.2rem;
  opacity: 0.95;
}

@keyframes vs-float-fade {
  0% { opacity: 0; transform: translateY(0) scale(0.9); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.05); }
}

@media (max-width: 430px) {
  [data-game-session] .vs-game-cell,
  [data-game-session] .vs-c4-cell,
  [data-game-session] .vs-mm-card {
    min-height: 44px;
  }

  [data-game-session] .vs-game-cell__btn,
  [data-game-session] .vs-c4-cell__btn,
  [data-game-session] .vs-mm-card__btn {
    min-height: 44px;
  }

  [data-game-session] .vs-rematch-banner {
    gap: 0.5rem;
  }
}