* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Strange black theme */
    --primary-color: #00ff88; /* Neon green accent */
    --primary-dark: #00cc6a; /* Darker neon green */
    --secondary-color: #ff00ff; /* Neon magenta accent */
    --danger-color: #ff3366; /* Bright pink-red */
    --success-color: #00ff88; /* Neon green */
    --bg-dark: #0a0a0a; /* Deep black */
    --bg-darker: #000000; /* Pure black */
    --bg-light: #1a1a1a; /* Slightly lighter black */
    --text-primary: #ffffff; /* Pure white text */
    --text-secondary: #888888; /* Gray text */
    --border-color: #333333; /* Dark gray borders */

    /* Mobile overlay positioning — adjust these to restack all overlays together */
    --mobile-status-bottom: 75px;      /* .mobile-chat-status distance from bottom */
    --mobile-interests-bottom: 55px;   /* .mobile-matched-interests (tablets ≤1024px) */
    --mobile-interests-bottom-sm: 60px;/* .mobile-matched-interests override (phones ≤480px) */
    --mobile-messages-bottom: 100px;   /* .mobile-chat-messages bottom edge */
    --mobile-messages-pad: 60px;       /* .mobile-chat-messages padding-bottom when connected */
    --keyboard-height: 0px;            /* Updated by JS via visualViewport API; lifts input above on-screen keyboard */
    --mobile-input-height: 68px;       /* Measured by JS on first keyboard open; used to anchor messages above input bar */

    /* Announcement type colours */
    --ann-info-color:     #3b82f6;
    --ann-info-bg:        rgba(59, 130, 246, 0.08);
    --ann-info-border:    rgba(59, 130, 246, 0.35);
    --ann-warning-color:  #f59e0b;
    --ann-warning-bg:     rgba(245, 158, 11, 0.08);
    --ann-warning-border: rgba(245, 158, 11, 0.35);
    --ann-error-color:    #ef4444;
    --ann-error-bg:       rgba(239, 68, 68, 0.08);
    --ann-error-border:   rgba(239, 68, 68, 0.35);
    --ann-success-color:  #00ff88;
    --ann-success-bg:     rgba(0, 255, 136, 0.08);
    --ann-success-border: rgba(0, 255, 136, 0.35);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-darker);
    color: var(--text-primary);
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    overflow: hidden;
}

/* Aurora gradient backdrop on the chat/video page — mirrors homepage atmosphere */
body.connection-active {
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        radial-gradient(ellipse 130% 55% at 15% -5%, rgba(0, 255, 136, 0.09) 0%, transparent 55%),
        radial-gradient(ellipse 110% 65% at 88% 105%, rgba(204, 0, 255, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 70% 45% at 60% 50%, rgba(0, 140, 255, 0.03) 0%, transparent 50%),
        var(--bg-darker);
    background-size: 70px 70px, 70px 70px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

header {
    text-align: center;
    margin-bottom: 15px;
    position: relative;
    flex-shrink: 0;
}

/* Header bar on the chat/video page */
body.connection-active header {
    text-align: left;
    padding: 10px 0 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Slightly smaller logo on the nav bar vs the big homepage hero */
body.connection-active header h1 {
    font-size: 2rem;
    animation: logo-glow-pulse 5s ease-in-out infinite;
    margin-bottom: 0;
}

header h1 {
    cursor: pointer;
    transition: opacity 0.2s ease;
    user-select: none;
}

header h1:hover {
    opacity: 0.8;
}

header h1:active {
    opacity: 0.6;
}

.yapgle-logo {
    cursor: pointer;
    user-select: none;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.6), 0 0 40px rgba(0, 255, 136, 0.4);
    transition: text-shadow 0.3s ease;
    display: inline-block;
}

.yapgle-logo:hover {
    text-shadow: 0 0 30px rgba(0, 255, 136, 0.8), 0 0 60px rgba(0, 255, 136, 0.6), 0 0 80px rgba(255, 0, 255, 0.4);
}

/* Hide header on homepage */
body:not(.connection-active) header {
    display: none !important;
}

/* Show header when in connection view */
body.connection-active header {
    display: block !important;
}

/* Hide tagline on video page */
body.connection-active header .tagline {
    display: none !important;
}

/* Hide settings button in header on homepage */
body:not(.connection-active) header .settings-btn {
    display: none !important;
}

/* Show settings button in header when in connection view */
body.connection-active header .settings-btn {
    display: flex !important;
}

.header-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.settings-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(0, 255, 136, 0.5);
    box-shadow: 0 0 14px rgba(0, 255, 136, 0.2);
}

header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00ffe0 0%, #00ff88 38%, #cc00ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
    filter: drop-shadow(0 0 14px rgba(0, 255, 136, 0.45)) drop-shadow(0 0 30px rgba(204, 0, 255, 0.18));
}

.tagline {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 8px;
}

.online-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 56px;
    background: rgba(0, 255, 136, 0.06);
    border: 1px solid rgba(0, 255, 136, 0.22);
    border-radius: 100px;
    font-size: 0.9rem;
    color: rgba(0, 255, 136, 0.9);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.05) inset, 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 30px rgba(0, 255, 136, 0.08);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.online-counter .online-dot {
    animation: dot-ping 2.2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
}

.online-dot {
    width: 8px;
    height: 8px;
    background: var(--success-color);
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

#online-count {
    color: var(--text-primary);
    font-weight: 600;
}

.status {
    text-align: center;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 0.9rem;
}

.status.info {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}

.status.success {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--success-color);
    color: var(--success-color);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}

.status.error {
    background: rgba(255, 51, 102, 0.1);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.2);
}

.hidden {
    display: none !important;
}

.pre-connection {
    text-align: center;
    padding: 0;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
    background:
        radial-gradient(ellipse 200% 90% at 50% -10%, rgba(0, 255, 136, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 140% 80% at 100% 100%, rgba(255, 0, 255, 0.11) 0%, transparent 52%),
        radial-gradient(ellipse 90% 70% at 0% 65%, rgba(0, 140, 255, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 75% 15%, rgba(255, 180, 0, 0.04) 0%, transparent 50%);
}

/* Subtle fading grid overlay — denser at top, invisible at bottom */
.pre-connection::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 70px 70px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse 110% 65% at 50% 0%, black 10%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 110% 65% at 50% 0%, black 10%, transparent 80%);
}

.homepage-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(36px, 5vh, 72px) 40px 20px 40px;
    gap: clamp(32px, 3vh, 52px);
    position: relative;
    z-index: 1;
    overflow-y: auto;
    overflow-x: visible;
    min-height: 0;
    max-width: clamp(1200px, 88vw, 1600px);
    margin: 0 auto;
    width: 100%;
}

/* Wrapper for main content to keep it centered */
.homepage-main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    flex: 1;
    min-height: 0;
    justify-content: flex-start;
}

.homepage-header {
    text-align: center;
    margin-bottom: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    flex-shrink: 0;
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
    min-height: fit-content;
}

/* Gradient rule beneath the header block */
.homepage-header::after {
    content: '';
    display: block;
    width: 160px;
    height: 1px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.5), rgba(200, 0, 255, 0.4), transparent);
    border-radius: 1px;
}

.homepage-title {
    font-size: clamp(7rem, 7.5vw, 11rem);
    font-weight: 900;
    background: linear-gradient(135deg, #00ffe0 0%, #00ff88 38%, #cc00ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    line-height: 1.0;
    letter-spacing: -0.04em;
    padding-bottom: 0.1em;
    padding-top: 0.1em;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 0 30px rgba(0, 255, 136, 0.4)) drop-shadow(0 0 60px rgba(200, 0, 255, 0.2));
    height: auto;
    animation: logo-glow-pulse 5s ease-in-out infinite, logo-float 7s ease-in-out infinite;
}

.homepage-tagline {
    color: rgba(255, 255, 255, 0.65);
    font-size: clamp(1.45rem, 1.5vw, 2.2rem);
    margin: 0;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.homepage-tagline-sub {
    display: block;
    font-size: 0.68em;
    margin-top: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    background: linear-gradient(90deg,
        rgba(0, 255, 136, 0) 0%,
        rgba(0, 255, 200, 0.75) 25%,
        rgba(200, 100, 255, 0.65) 65%,
        rgba(0, 255, 136, 0) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: subtitle-sweep 5s ease-in-out infinite;
}

.homepage-online-counter-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    margin-bottom: 0;
}

.homepage-online-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: rgba(0, 255, 136, 0.06);
    border: 1px solid rgba(0, 255, 136, 0.22);
    border-radius: 100px;
    font-size: 0.82rem;
    color: rgba(0, 255, 136, 0.85);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.05) inset, 0 2px 14px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 255, 136, 0.07);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.homepage-online-counter:hover {
    border-color: rgba(0, 255, 136, 0.4);
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.1) inset, 0 2px 14px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 255, 136, 0.14);
}

/* Scoped pulse ring for the live dot on the homepage counter */
.homepage-online-counter .online-dot {
    animation: dot-ping 2.2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
}

@keyframes dot-ping {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.6); }
    60%       { box-shadow: 0 0 0 7px rgba(0, 255, 136, 0); }
}

.homepage-interests-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: clamp(900px, 60vw, 1200px);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    padding: 6px 6px 6px 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(24px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.homepage-interests-container:focus-within {
    border-color: rgba(0, 255, 136, 0.45);
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.18),
                0 4px 30px rgba(0, 255, 136, 0.18),
                inset 0 1px 0 rgba(0, 255, 136, 0.08);
}

.homepage-interest-input {
    flex: 1;
    padding: 16px 12px;
    background: transparent;
    border: none;
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-family: inherit;
    transition: all 0.2s;
}

.homepage-interest-input:focus {
    outline: none;
}

.homepage-interest-input::placeholder {
    color: var(--text-secondary);
}

.homepage-add-interest-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4), 0 0 20px rgba(0, 255, 136, 0.2);
}

.homepage-add-interest-btn:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 255, 136, 0.5), 0 0 30px rgba(0, 255, 136, 0.3);
}

.homepage-add-interest-btn:active {
    transform: scale(0.95);
}

.homepage-start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 60px;
    background: linear-gradient(135deg, #00ffb3 0%, #00e87a 45%, #00c45a 100%);
    border: none;
    border-radius: 40px;
    color: #000000;
    font-size: 1.4rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    box-shadow: 0 6px 24px rgba(0, 255, 136, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    width: 100%;
    max-width: clamp(900px, 60vw, 1200px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    animation: homepage-fade-in-up 0.65s ease-out 0.3s both, btn-glow-pulse 3.5s ease-in-out 1.5s infinite;
}

.homepage-start-btn:hover {
    transform: translateY(-4px) scale(1.015);
    /* !important needed: paused animation still owns box-shadow in the cascade */
    box-shadow: 0 14px 45px rgba(0, 255, 136, 0.65), 0 0 70px rgba(0, 255, 136, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    animation-play-state: paused;
}

.homepage-start-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 255, 136, 0.4);
}

.homepage-start-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Shimmer sweep across the start button */
.homepage-start-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 62%
    );
    transform: translateX(-120%);
    animation: btn-shimmer 4s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}

.homepage-start-btn:disabled::after {
    display: none;
}

/* Feature pills */
.homepage-feature-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
}

.homepage-feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: border-color 0.25s, color 0.25s, background 0.25s, box-shadow 0.25s;
    cursor: default;
}

/* Live count pill — green accent, sits first in the pills row */
.homepage-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(0, 255, 136, 0.07);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: rgba(0, 255, 136, 0.9);
    backdrop-filter: blur(16px);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.1), inset 0 0 0 1px rgba(0, 255, 136, 0.05);
    transition: border-color 0.25s, color 0.25s, background 0.25s, box-shadow 0.25s;
    cursor: default;
}
.homepage-live-pill .online-dot {
    animation: dot-ping 2.2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
}

/* 🎥 HD Video — teal (child 2 now that live-pill is child 1) */
.homepage-feature-pill:nth-child(2) {
    border-color: rgba(0, 220, 200, 0.2);
    color: rgba(0, 220, 200, 0.7);
}
.homepage-feature-pill:nth-child(2):hover {
    border-color: rgba(0, 220, 200, 0.45);
    background: rgba(0, 220, 200, 0.07);
    color: rgba(0, 230, 210, 1);
    box-shadow: 0 0 18px rgba(0, 220, 200, 0.15);
}

/* 🔒 Anonymous — blue */
.homepage-feature-pill:nth-child(3) {
    border-color: rgba(60, 160, 255, 0.2);
    color: rgba(80, 170, 255, 0.7);
}
.homepage-feature-pill:nth-child(3):hover {
    border-color: rgba(60, 160, 255, 0.45);
    background: rgba(60, 160, 255, 0.07);
    color: rgba(100, 180, 255, 1);
    box-shadow: 0 0 18px rgba(60, 160, 255, 0.15);
}

/* ⚡ Instant Match — amber */
.homepage-feature-pill:nth-child(4) {
    border-color: rgba(255, 200, 0, 0.2);
    color: rgba(255, 210, 40, 0.7);
}
.homepage-feature-pill:nth-child(4):hover {
    border-color: rgba(255, 200, 0, 0.45);
    background: rgba(255, 200, 0, 0.07);
    color: rgba(255, 215, 60, 1);
    box-shadow: 0 0 18px rgba(255, 200, 0, 0.15);
}

/* 🌍 Worldwide — violet */
.homepage-feature-pill:nth-child(5) {
    border-color: rgba(180, 60, 255, 0.2);
    color: rgba(195, 100, 255, 0.7);
}
.homepage-feature-pill:nth-child(5):hover {
    border-color: rgba(180, 60, 255, 0.45);
    background: rgba(180, 60, 255, 0.07);
    color: rgba(210, 130, 255, 1);
    box-shadow: 0 0 18px rgba(180, 60, 255, 0.15);
}

/* ---- Keyframes ---- */

@keyframes logo-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 30px rgba(0, 255, 136, 0.4)) drop-shadow(0 0 60px rgba(200, 0, 255, 0.2));
    }
    50% {
        filter: drop-shadow(0 0 55px rgba(0, 255, 136, 0.65)) drop-shadow(0 0 100px rgba(200, 0, 255, 0.35));
    }
}

@keyframes logo-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-7px); }
}

@keyframes subtitle-sweep {
    0%, 100% { background-position: 200% 0%; }
    50%       { background-position: 0% 0%; }
}

@keyframes btn-shimmer {
    0%        { transform: translateX(-120%); }
    30%, 100% { transform: translateX(220%); }
}

@keyframes btn-glow-pulse {
    0%, 100% {
        box-shadow: 0 6px 24px rgba(0, 255, 136, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }
    50% {
        box-shadow: 0 8px 40px rgba(0, 255, 136, 0.75), 0 0 70px rgba(0, 255, 136, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }
}

@keyframes homepage-fade-in-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Staggered entrance animations — homepage only */
.homepage-header {
    animation: homepage-fade-in-up 0.7s ease-out both;
}

/* Counter is now inside .homepage-header — inherits its animation, no separate fade needed */
.homepage-online-counter-wrapper {
    animation: none;
}

.homepage-interests-container {
    animation: homepage-fade-in-up 0.7s ease-out 0.18s both;
}

/* start btn animation is declared on the rule itself (includes pulse chain) */

.homepage-bottom-section {
    animation: homepage-fade-in-up 0.7s ease-out 0.44s both;
}

.media-error-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 51, 102, 0.15);
    border: 1px solid rgba(255, 51, 102, 0.5);
    border-radius: 12px;
    color: #ff3366;
    font-size: 0.9rem;
    margin-bottom: 16px;
    animation: slideDown 0.3s ease-out;
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.2);
}

.media-error-alert.hidden {
    display: none;
}

.media-error-alert svg {
    flex-shrink: 0;
    color: var(--danger-color);
}

.media-error-alert span {
    line-height: 1.4;
}

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

.homepage-bottom-section {
    width: 100%;
    max-width: clamp(900px, 60vw, 1200px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.homepage-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0;
    padding: 12px 0;
    background: rgba(8, 8, 8, 0.72);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    width: 100%;
    backdrop-filter: blur(32px) saturate(180%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 32px rgba(0, 0, 0, 0.5);
}

.homepage-legal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.homepage-legal-link {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
    letter-spacing: 0.02em;
}

.homepage-legal-link:hover {
    opacity: 1;
    color: var(--primary-color);
}

.homepage-legal-sep {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.4;
}

/* Divider between nav items */
.homepage-nav-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    width: 1px;
    height: 60%;
    background: rgba(255, 255, 255, 0.07);
}

/* About Modal */
.about-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.about-modal.hidden {
    display: none;
}

.about-modal-content {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease-out;
}

.about-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.about-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.about-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.about-body p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.homepage-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease;
    padding: 10px 40px;
    border-radius: 16px;
    position: relative;
    flex: 1;
    outline: none;
}

/* Animated top-edge indicator bar */
.homepage-nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 30px;
    height: 3px;
    background: linear-gradient(90deg, #00ff88, #00ffe0);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}

.homepage-nav-item svg {
    width: 24px;
    height: 24px;
    transition: filter 0.25s ease, transform 0.25s ease;
}

.homepage-nav-item span {
    font-size: 0.8rem;
    font-weight: 500;
    transition: color 0.25s ease;
}

.homepage-nav-item.active {
    color: #00ff88;
}

.homepage-nav-item.active::before {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

.homepage-nav-item.active svg {
    filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.55));
    transform: translateY(-1px);
}

.homepage-nav-item:active {
    transform: scale(0.94);
}

.homepage-nav-item:hover:not(.active) {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
}

.homepage-nav-item:hover:not(.active)::before {
    transform: translateX(-50%) scaleX(0.5);
    opacity: 0.35;
}

.homepage-nav-item:hover:not(.active) svg {
    transform: translateY(-2px);
}

.interests-section {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    background: rgba(26, 26, 26, 0.6);
    border: 2px solid rgba(51, 51, 51, 0.5);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.interests-section.hidden {
    display: none;
}

.interests-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(51, 51, 51, 0.6);
}

.interests-section-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.interests-section-header-left svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.interests-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.01em;
}

.clear-all-interests-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 51, 102, 0.1);
    border: 1px solid rgba(255, 51, 102, 0.3);
    border-radius: 12px;
    color: var(--danger-color);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.clear-all-interests-btn:hover {
    background: rgba(255, 51, 102, 0.2);
    border-color: rgba(255, 51, 102, 0.5);
    transform: translateY(-1px);
}

.clear-all-interests-btn:active {
    transform: translateY(0);
}

.clear-all-interests-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.interests-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 40px;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
}

.interests-list:empty {
    display: none;
}

.interest-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    animation: slideIn 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3), 0 0 20px rgba(0, 255, 136, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.interest-tag .remove-interest {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    transition: all 0.2s;
}

.interest-tag .remove-interest:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.interests-list:empty::before {
    content: 'No interests added yet';
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
}


.connection {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.video-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
    flex: 0 0 auto;
    min-height: 0;
    transform-origin: center center;
    transition: transform 0.3s ease-out;
}

/* Desktop: You (local) on left, Stranger (remote) on right */
.local-video-wrapper {
    order: 1;
}

.remote-video-wrapper {
    order: 2;
}

.video-wrapper {
    position: relative;
    background: var(--bg-darker);
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

body.partner-connected .remote-video-wrapper {
    border-color: rgba(0, 255, 136, 0.28);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.12);
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg-darker);
    will-change: transform;
}

/* Portrait video from mobile — show full frame instead of cropping */
.video-wrapper.video-vertical video {
    object-fit: contain;
    object-position: center;
}

/* Landscape video — standard cover */
.video-wrapper.video-wide video {
    object-fit: cover;
    object-position: center;
}

.video-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
}

.yapgle-brand {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: linear-gradient(135deg, #00ffe0 0%, #00ff88 38%, #cc00ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.4rem;
    font-weight: 700;
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.5));
    z-index: 10;
    pointer-events: none;
    letter-spacing: 0.02em;
}

.waiting-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(0, 255, 136, 0.05) 0%, rgba(0, 0, 0, 0.92) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.waiting-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.interest-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.interest-countdown.hidden {
    display: none;
}

.countdown-number {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00ffe0 0%, #00ff88 38%, #cc00ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    animation: pulse 1s ease-in-out infinite;
}

.countdown-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.waiting-overlay.hidden {
    display: none;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.08);
    border-top-color: #00ff88;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
}

#waiting-message {
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.9rem;
}

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

.controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.matched-interest-tag {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #000;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    /* Two animations: slide in from below, then a double-pulse glow.
       Delays are overridden per-tag via JS for staggered entry.          */
    animation: slideIn 0.4s ease both, tagGlow 1s ease 0.5s both;
}

@keyframes tagGlow {
    0%   { box-shadow: 0 0 10px 4px rgba(0, 255, 136, 0.75); }
    45%  { box-shadow: 0 0 4px  1px rgba(0, 255, 136, 0.25); }
    75%  { box-shadow: 0 0 8px  3px rgba(0, 255, 136, 0.55); }
    100% { box-shadow: none; }
}

/* Label "Shared Interests:" that sits beside the tag bubbles */
.matched-interests-label {
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.9;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 255, 136, 0.4);
}

.btn-secondary {
    background: var(--bg-light);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--border-color);
    transform: translateY(-2px);
}

.btn-danger {
    background: var(--danger-color);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #ff0044;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 51, 102, 0.4);
}

/* Skip button — glassmorphism pill */
#skip-btn {
    border-radius: 40px;
    padding: 14px 40px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

#skip-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.13);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.28);
}

/* Stop button — danger gradient pill */
#stop-btn {
    border-radius: 40px;
    padding: 14px 40px;
    background: linear-gradient(135deg, #ff3366 0%, #cc0030 100%);
    border: none;
    box-shadow: 0 4px 18px rgba(255, 51, 102, 0.4);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

#stop-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 10px 35px rgba(255, 51, 102, 0.6), 0 0 60px rgba(255, 51, 102, 0.3);
}

.btn-icon {
    padding: 12px;
    background: var(--bg-light);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.btn-icon svg {
    width: 28px;
    height: 28px;
}

.btn-icon:hover:not(:disabled) {
    background: var(--border-color);
    transform: scale(1.1);
}

.btn-icon.active {
    background: var(--danger-color);
    color: white;
}

/* Send button — green gradient */
#send-btn {
    background: linear-gradient(135deg, #00ffb3, #00cc6a);
    color: #000;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 255, 136, 0.4);
}

#send-btn:hover:not(:disabled) {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.6);
}

/* Emoji button — glass */
#emoji-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

#emoji-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(0, 255, 136, 0.35);
}

.chat-container {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.chat-status {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    flex-shrink: 0;
    background: rgba(0, 255, 136, 0.06);
    border-bottom: 1px solid rgba(0, 255, 136, 0.15);
}

.chat-status.hidden {
    display: none;
}

.chat-status-icon {
    font-size: 1.1rem;
    color: #00ff88;
}

.chat-status-text {
    flex: 1;
    background: linear-gradient(90deg, #00ff88, #00ffe0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
}

.chat-status-divider {
    display: none; /* Divider is the border-bottom on chat-status */
}

/* Desktop matched interests - appears below chat status */
.desktop-matched-interests {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0, 255, 136, 0.12);
    animation: interestBarFlash 1.5s ease;
}

.desktop-matched-interests.hidden {
    display: none;
}

@keyframes interestBarFlash {
    0%   { background: rgba(0, 255, 136, 0.18); }
    60%  { background: rgba(0, 255, 136, 0.06); }
    100% { background: transparent; }
}

.desktop-matched-interests-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.chat-message {
    padding: 10px 14px;
    border-radius: 8px;
    max-width: 80%;
    word-wrap: break-word;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message.own {
    background: linear-gradient(135deg, #00ffb3, #00cc6a);
    color: #000;
    align-self: flex-end;
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 2px 12px rgba(0, 255, 136, 0.25);
}

.chat-message.remote {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    align-self: flex-start;
    border-radius: 16px 16px 16px 4px;
}

.chat-input-container {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0 0 16px 16px;
    z-index: 10;
    flex-shrink: 0;
}

/* Position emoji picker relative to chat-input-container */
.chat-input-container ~ .emoji-picker {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
}

#chat-input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#chat-input:focus {
    outline: none;
    border-color: rgba(0, 255, 136, 0.45);
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.18);
}

#chat-input::placeholder {
    color: var(--text-secondary);
}

/* Mobile chat input - Hidden on desktop by default */
.mobile-chat-input-container {
    display: none;
}

.mobile-chat-input {
    display: none;
}

/* Mobile overlay elements - Hidden on desktop by default.
   These are shown exclusively by the @media (max-width: 1024px) / (max-width: 480px) blocks.
   Without this, they default to browser display:block and leak into the desktop view. */
.mobile-control-bar {
    display: none;
}

.mobile-chat-messages {
    display: none;
}

.mobile-chat-status {
    display: none;
}

.mobile-chat-status-header {
    display: none;
}

.mobile-matched-interests {
    display: none;
}

/* Mobile emoji quick bar - Hidden on desktop by default */
.emoji-quick-bar {
    display: none; /* Hidden by default, shown only on mobile */
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    background: rgba(0, 0, 0, 0.65);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 20;
    backdrop-filter: blur(24px);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.emoji-quick-scroll {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    flex: 1;
    min-width: 0; /* Allow flex item to shrink */
    max-width: calc(100% - 70px); /* Reserve space for keyboard button */
}

.emoji-quick-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.mobile-keyboard-btn {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    font-size: 1.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    position: relative;
    color: var(--text-primary);
}

.mobile-keyboard-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(255, 0, 255, 0.1));
    opacity: 0;
    transition: opacity 0.2s;
}

.mobile-keyboard-btn:active {
    transform: scale(0.85);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.5);
    color: white;
}

.mobile-keyboard-btn:active::before {
    opacity: 1;
}

.mobile-keyboard-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(0, 255, 136, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 12px rgba(0, 255, 136, 0.1);
}

.emoji-quick-btn {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    font-size: 1.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    position: relative;
}

.emoji-quick-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(255, 0, 255, 0.1));
    opacity: 0;
    transition: opacity 0.2s;
}

.emoji-quick-btn:active {
    transform: scale(0.85);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.5);
}

.emoji-quick-btn:active::before {
    opacity: 1;
}

.emoji-quick-btn:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    body {
        padding: 0;
    }

    /* Hide header only when in connection view */
    body.connection-active header {
        display: none !important;
    }
    
    /* Show header on homepage (pre-connection) */
    header {
        display: block;
        padding: 15px 10px;
    }
    
    /* Hide desktop settings button on mobile - use mobile settings button instead */
    #settings-btn,
    header .settings-btn,
    body.connection-active header .settings-btn {
        display: none !important;
    }
    
    header h1 {
        font-size: 2rem;
    }
    
    .tagline {
        font-size: 0.9rem;
    }

    .video-container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 4px;
        margin-bottom: 0;
        height: 100vh;
        height: 100dvh;
        padding: 4px;
    }

    .video-wrapper {
        min-height: 0;
        width: 100%;
        height: 50vh;
        height: 50dvh;
        border-radius: 0;
        position: relative;
        overflow: hidden;
        background: var(--bg-darker);
    }
    
    .video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    /* 16:9 videos - center, no cropping, show natural aspect ratio */
    .video-wrapper.video-wide {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .video-wrapper.video-wide video {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
    
    /* 9:16 videos - crop top/bottom to fit 16:9 frame, center horizontally */
    .video-wrapper.video-vertical {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .video-wrapper.video-vertical video {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
    }
    
    /* Remote video (peer) on top */
    .remote-video-wrapper {
        order: 1;
    }
    
    /* Local video (user) on bottom */
    .local-video-wrapper {
        order: 2;
    }
    
    .video-label {
        font-size: 0.75rem;
        padding: 4px 8px;
        top: 6px;
        left: 6px;
        z-index: 10;
    }

    .controls {
        display: none; /* Hide controls on mobile */
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .btn-icon {
        width: 52px;
        height: 52px;
        font-size: 1.1rem;
    }
    
    .btn-icon svg {
        width: 26px;
        height: 26px;
    }
    
    .online-counter {
        height: 52px;
    }

    .chat-container {
        max-height: 250px;
    }

    .chat-messages {
        min-height: 150px;
        padding: 15px;
    }
    
    /* Hide desktop chat input on mobile */
    .desktop-chat-input {
        display: none;
    }

    /* ── Show mobile overlay elements on all mobile/tablet devices ────────── */
    .mobile-control-bar {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        top: 8px;
        right: 8px;
        gap: 8px;
        z-index: 60;
        pointer-events: none;
        background: transparent;
    }

    .mobile-control-bar > * {
        pointer-events: auto;
    }

    .mobile-chat-messages {
        display: flex;
        position: absolute;
        top: 0;
        bottom: calc(var(--keyboard-height, 0px) + var(--mobile-messages-bottom));
        left: 0;
        right: 0;
        overflow-y: auto;
        padding: 8px 12px;
        padding-top: 60px;
        flex-direction: column-reverse;
        gap: 6px;
        z-index: 45;
        pointer-events: none;
    }

    .mobile-chat-messages .chat-message {
        pointer-events: auto;
    }

    body.partner-connected .mobile-chat-status {
        display: flex;
        position: absolute;
        bottom: var(--mobile-status-bottom);
        left: 0;
        right: 0;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        padding: 6px 16px;
        z-index: 60;
        background: transparent;
        pointer-events: none;
    }

    .mobile-chat-input-container {
        position: fixed;
        bottom: var(--keyboard-height, 0px);
        left: 0;
        right: 0;
        width: 100vw;
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        /* Fixed padding for Android (Chrome & Firefox). iOS Safari overrides
           this below with env(safe-area-inset-bottom) for the home indicator. */
        padding-bottom: 12px;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        z-index: 70;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
    }

    .mobile-chat-input {
        display: block !important;
        flex: 1;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 24px;
        color: var(--text-primary);
        font-size: 0.95rem;
        font-family: inherit;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        width: auto !important;
        height: auto !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        touch-action: manipulation;
    }

    .mobile-chat-input:focus {
        outline: none;
        border-color: rgba(0, 255, 136, 0.45);
        box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.18);
    }

    .mobile-chat-input::placeholder {
        color: var(--text-secondary);
    }

    /* iOS Safari-only overrides ─────────────────────────────────────────────
       -webkit-touch-callout matches only iOS Safari, not Firefox or Chrome
       for Android.  Keep env(safe-area-inset-bottom) and -webkit-fill-available
       inside this block so they never reach Android browsers.                */
    @supports (-webkit-touch-callout: none) {
        html {
            height: -webkit-fill-available;
        }

        body.connection-active {
            height: -webkit-fill-available;
            min-height: -webkit-fill-available;
        }

        .connection {
            height: -webkit-fill-available;
            min-height: -webkit-fill-available;
        }

        .video-container {
            height: -webkit-fill-available;
            min-height: -webkit-fill-available;
        }

        /* Apply home-indicator clearance only on iOS where it is meaningful.
           Firefox for Android returns its toolbar height via safe-area-inset-bottom
           which inflates the input bar and causes excessive bottom spacing. */
        .mobile-chat-input-container {
            padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        }
    }

    /* Row container for online counter and settings button */
    .mobile-control-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .mobile-online-counter {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        background: rgba(0, 0, 0, 0.55);
        border: 1px solid rgba(0, 255, 136, 0.3);
        box-shadow: 0 0 16px rgba(0, 255, 136, 0.1), inset 0 0 0 1px rgba(0, 255, 136, 0.05);
        border-radius: 100px;
        font-size: 0.78rem;
        color: rgba(0, 255, 136, 0.9);
        font-weight: 600;
        height: 36px;
        box-sizing: border-box;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .mobile-online-dot {
        width: 7px;
        height: 7px;
        background: #00ff88;
        border-radius: 50%;
        display: inline-block;
        animation: dot-ping 2.2s ease-in-out infinite;
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
    }

    .mobile-settings-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.55);
        border: 1px solid rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        color: var(--text-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s, background 0.2s;
    }

    .mobile-settings-btn svg {
        width: 18px;
        height: 18px;
    }

    .mobile-settings-btn:hover {
        border-color: rgba(0, 255, 136, 0.4);
        box-shadow: 0 0 14px rgba(0, 255, 136, 0.15);
    }

    .mobile-settings-btn:active {
        transform: scale(0.9);
        background: rgba(0, 0, 0, 0.75);
    }

    .mobile-send-btn {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, #00ffb3, #00cc6a);
        border: none;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        flex-shrink: 0;
        box-shadow: 0 4px 20px rgba(0, 255, 136, 0.5), 0 0 30px rgba(0, 255, 136, 0.2);
    }

    .mobile-send-btn:active {
        transform: scale(0.95);
        background: linear-gradient(135deg, #00e0a0, #00aa55);
    }

    .mobile-send-btn svg {
        width: 26px;
        height: 26px;
        stroke: #000000;
        stroke-width: 2.5;
    }

    /* Show mobile emoji quick bar */
    .mobile-emoji-bar {
        display: flex;
    }
    
    /* Hide emoji picker button and picker on mobile */
    #emoji-btn {
        display: none;
    }
    
    .emoji-picker {
        display: none !important;
    }
    
    .desktop-matched-interests {
        display: none !important; /* Hide desktop matched interests on mobile */
    }
    
    /* Mobile matched interests — only shown when partner is connected */
    body.partner-connected .mobile-matched-interests {
        position: absolute;
        bottom: var(--mobile-interests-bottom);
        left: 0;
        right: 0;
        padding: 0 16px 4px 16px;
        z-index: 48;
        pointer-events: none;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        animation: interestBarFlash 1.5s ease;
    }

    .mobile-matched-interests-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    body.partner-connected .mobile-matched-interests.hidden {
        display: none !important;
    }

    /* Ensure matched interests show when partner is connected and interests exist */
    body.partner-connected .mobile-matched-interests:not(.hidden) {
        display: flex !important;
    }

    .homepage-content {
        padding: 28px 24px 100px;
        gap: 20px;
        justify-content: center;
        max-width: 100%;
    }

    .homepage-online-counter-wrapper {
        margin-top: 14px;
    }

    .homepage-online-counter {
        padding: 6px 14px;
        font-size: 0.78rem;
    }

    .homepage-header {
        padding-top: 8px;
        padding-bottom: 8px;
        margin-bottom: 0;
    }
    
    .homepage-title {
        font-size: 4.5rem;
        line-height: 1;
        padding-bottom: 0;
        margin-bottom: 20px;
    }
    
    .homepage-tagline {
        font-size: 1.3rem;
    }
    
    .homepage-interests-container {
        max-width: 100%;
        padding: 8px 8px 8px 20px;
    }
    
    .homepage-interest-input {
        font-size: 1rem;
        padding: 14px 10px;
    }
    
    .homepage-add-interest-btn {
        width: 44px;
        height: 44px;
    }
    
    .homepage-start-btn {
        padding: 18px 50px;
        font-size: 1.2rem;
        width: 100%;
        max-width: 100%;
    }
    
    .interests-section {
        max-width: 100%;
        padding: 20px;
        margin: 0 20px;
    }
    
    .interests-section-header {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }
    
    .interests-section-title {
        font-size: 1rem;
    }
    
    .clear-all-interests-btn {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
    
    .clear-all-interests-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .interests-list {
        max-width: 100%;
    }
    
    .homepage-bottom-section {
        max-width: 100%;
        padding-bottom: 16px;
        gap: 10px;
    }

    .homepage-bottom-nav {
        padding: 8px 12px;
        gap: 6px;
        max-width: 100%;
    }
    
    .homepage-nav-item {
        padding: 5px 10px;
    }
    
    .homepage-nav-item svg {
        width: 18px;
        height: 18px;
    }
    
    .homepage-nav-item span {
        font-size: 0.65rem;
    }

    .homepage-tagline {
        font-size: 1.3rem;
    }

    .homepage-tagline-sub {
        font-size: 0.68em;
        letter-spacing: 0.07em;
    }

    .homepage-feature-pills {
        gap: 8px;
        margin-top: 20px;
    }

    .homepage-feature-pill {
        font-size: 0.65rem;
        padding: 6px 12px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0;
        margin: 0;
        background: var(--bg-darker);
        /* Allow scrolling on homepage */
        overflow: auto;
    }
    
    .container {
        padding: 0;
        max-width: 100%;
        margin: 0;
        background: var(--bg-darker);
        /* Let the homepage grow naturally and allow body-level scrolling */
        height: auto;
        max-height: none;
        overflow: visible;
        min-height: 100vh;
    }

    /* Hide header only when in connection view */
    body.connection-active header {
        display: none !important;
    }

    /* Show header on homepage (pre-connection) */
    header {
        display: block;
        padding: 15px 10px;
    }
    
    header h1 {
        font-size: 1.8rem;
    }
    
    .tagline {
        font-size: 0.85rem;
    }

    .connection {
        gap: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
        margin: 0;
        height: 100vh;
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        background: var(--bg-darker);
    }
    
    /* When connection view is active, prevent body scroll */
    body.connection-active {
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important; /* Use dynamic viewport height */
        position: fixed !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        touch-action: none;
    }
    
    body.connection-active .container {
        height: 100vh !important;
        height: 100dvh !important; /* Use dynamic viewport height */
        overflow: hidden !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
    }
    
    /* Ensure buttons are clickable on mobile */
    .btn, .btn-primary {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 255, 136, 0.3);
        cursor: pointer;
        user-select: none;
        position: relative;
        z-index: 100;
    }
    
    /* Ensure pre-connection section is accessible */
    .pre-connection {
        position: relative;
        z-index: 1;
    }
    
    .video-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        height: 100dvh; /* Use dynamic viewport height */
        overflow: hidden;
        background: var(--bg-darker);
        gap: 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        touch-action: none;
        transform-origin: center center; /* Ensure scaling happens from center */
    }
    
    /* Ensure each video wrapper takes exactly 50% of screen */
    .video-wrapper {
        position: relative;
        width: 100%;
        height: 50vh;
        height: 50dvh; /* Use dynamic viewport height for 50% split */
        flex: 0 0 50vh;
        flex: 0 0 50dvh; /* Use dynamic viewport height */
        flex-shrink: 0;
        border-radius: 0;
        border: none;
        overflow: hidden;
        background: var(--bg-darker);
        transform-origin: center center; /* Ensure children scale correctly */
    }
    
    .video-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    /* 16:9 videos - center, no cropping, show natural aspect ratio */
    .video-wrapper.video-wide {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .video-wrapper.video-wide video {
        object-fit: contain;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
    
    /* 9:16 videos - crop top/bottom to fit 16:9 frame, center horizontally */
    .video-wrapper.video-vertical {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .video-wrapper.video-vertical video {
        object-fit: cover;
        object-position: center center; /* Center the crop to show central portion */
        width: 100%;
        height: 100%;
    }
    
    /* Remote video (peer) - on top on mobile, subtle glowing divider at bottom */
    .remote-video-wrapper {
        order: 1;
        border-bottom: 1px solid rgba(0, 255, 136, 0.18);
    }
    
    /* Local video (user) - on bottom on mobile */
    .local-video-wrapper {
        order: 2;
    }
    
    /* Hide video labels on mobile */
    .video-label {
        display: none;
    }
    
    /* Adjust matched interests position when partner is connected */
    body.partner-connected .mobile-matched-interests {
        bottom: var(--mobile-interests-bottom-sm);
    }
    
    .mobile-chat-status-icon {
        font-size: 1rem;
        color: #00ff88;
        filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.5));
    }

    .mobile-chat-status-text {
        flex: 1;
        background: linear-gradient(90deg, #00ff88, #00ffe0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 500;
    }
    
    .mobile-chat-status-divider {
        display: none; /* Divider is the border-bottom on mobile-chat-status-header */
    }
    
    .mobile-chat-messages {
        position: absolute;
        top: 0;
        bottom: calc(var(--keyboard-height, 0px) + 100px);
        left: 0;
        right: 0;
        overflow-y: auto;
        padding: 8px 12px;
        padding-top: 60px;
        padding-bottom: 0; /* No bottom padding to bring messages right above status */
        display: flex;
        flex-direction: column-reverse;
        gap: 6px; /* Reduced gap to fit more messages */
        z-index: 45;
        pointer-events: none;
    }
    
    /* When partner is connected: push chat messages up above the status bar */
    body.partner-connected .mobile-chat-messages {
        padding-bottom: var(--mobile-messages-pad);
    }

    body.partner-connected .local-video-wrapper .mobile-chat-messages {
        bottom: calc(var(--keyboard-height, 0px) + var(--mobile-messages-bottom));
        padding-bottom: 0;
    }

    .mobile-chat-messages .chat-message {
        pointer-events: auto;
        max-width: 75%;
        padding: 8px 12px; /* Reduced padding for smaller boxes */
        border-radius: 12px; /* Slightly smaller border radius */
        font-size: 0.85rem; /* Smaller font size */
        font-weight: 500;
        word-wrap: break-word;
        animation: slideIn 0.3s ease;
        backdrop-filter: blur(20px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); /* Slightly smaller shadow */
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        line-height: 1.3; /* Tighter line height */
    }
    
    .mobile-chat-messages .chat-message.own {
        background: linear-gradient(135deg, #00ffb3, #00cc6a);
        color: #000;
        align-self: flex-end;
        border-bottom-right-radius: 4px;
        border: none;
        box-shadow: 0 2px 12px rgba(0, 255, 136, 0.35), 0 0 20px rgba(0, 255, 136, 0.15);
        text-shadow: none;
    }

    .mobile-chat-messages .chat-message.remote {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
        align-self: flex-start;
        border-bottom-left-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    .mobile-chat-messages::-webkit-scrollbar {
        display: none;
    }
    
    .mobile-chat-messages {
        scrollbar-width: none;
    }

    .video-label {
        font-size: 0.7rem;
        padding: 3px 6px;
        top: 4px;
        left: 4px;
        z-index: 10;
        position: absolute;
    }

    .controls {
        display: none; /* Hide controls (skip/stop buttons) on mobile */
    }

    .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .btn-icon {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
    
    .btn-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .online-counter {
        height: 48px;
    }

    #skip-btn,
    #stop-btn {
        display: none; /* Hide skip and stop buttons on mobile */
    }
    
    .chat-container {
        display: none; /* Hide chat container on mobile - we use mobile chat input instead */
    }
    
    .chat-messages {
        display: none; /* Hide chat messages on mobile */
    }
    
    /* Hide desktop chat input on mobile */
    .desktop-chat-input {
        display: none; /* Hide on mobile */
    }
    
    /* Hide emoji picker button and picker on mobile */
    #emoji-btn {
        display: none;
    }
    
    .emoji-picker {
        display: none !important;
    }
    
    /* Hide emoji quick bar on mobile */
    .emoji-quick-bar {
        display: none !important;
    }
    
    /* Mobile control bar */
    .mobile-control-bar {
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        z-index: 60;
        background: transparent;
        pointer-events: none;
    }
    
    .mobile-control-bar > * {
        pointer-events: auto;
    }
    
    /* Mobile chat status — only shown when partner is connected */
    body.partner-connected .mobile-chat-status {
        position: absolute;
        bottom: var(--mobile-status-bottom);
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        padding: 6px 16px; /* Reduced vertical padding for tighter spacing */
        z-index: 60; /* Higher than matched interests (48) and status header (50) to ensure it stays on top */
        background: transparent;
        pointer-events: none;
        transform-origin: left center; /* Scale from left edge to maintain horizontal alignment with interests */
    }
    
    .mobile-chat-status-icon {
        font-size: 1.2rem;
        color: #00ff88;
        filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.5));
    }

    .mobile-chat-status-text {
        font-size: 0.85rem;
        background: linear-gradient(90deg, #00ff88, #00ffe0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 500;
    }
    
    .waiting-overlay {
        z-index: 5;
        display: flex; /* Show waiting overlay on mobile */
        background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(0, 255, 136, 0.05) 0%, rgba(0, 0, 0, 0.92) 100%);
    }
    
    .waiting-overlay.hidden {
        display: none !important; /* Hide when hidden class is present */
    }
    
    .waiting-content {
        gap: 12px;
    }
    
    .spinner {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }
    
    #waiting-message {
        font-size: 0.9rem;
        color: var(--text-primary);
    }

    /* ── Keyboard focus: viewport lock (CRITICAL-2) ──────────────────────────
       Previously set as inline styles in the JS focus/blur handlers.
       Using a CSS class keeps media queries in control; desktop is completely
       immune because these rules only exist inside this ≤480 px block.      */
    body.mobile-input-focused {
        /* Prevent the browser from scrolling the page body when keyboard appears */
        overflow: hidden;
        touch-action: none;
    }

    body.mobile-input-focused .connection {
        position: fixed;
        top: 0;
        left: 0;
    }

    body.mobile-input-focused .video-container {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateY(0) !important;
    }

    /* ── Messages window while keyboard is open ──────────────────────────────
       The message area is position:absolute inside the local video wrapper
       (bottom 50dvh). With a typical keyboard height (≈300px) only ~22px of
       that wrapper sits above the input bar — not enough for a single message.
       Switching to position:fixed lets messages escape the wrapper and occupy
       a clean strip directly above the input bar.                            */
    body.mobile-input-focused .mobile-chat-messages {
        position: fixed;
        top: auto;
        bottom: calc(var(--keyboard-height, 0px) + var(--mobile-input-height, 68px) + 4px);
        left: 0;
        right: 0;
        max-height: 130px;
        z-index: 65;
        padding-top: 0;
        padding-bottom: 4px;
        transition: bottom 0.2s ease-out, max-height 0.2s ease-out;
    }

    .emoji-picker {
        max-height: 250px;
        padding: 8px;
    }

    .emoji-categories {
        gap: 3px;
        padding: 5px;
    }

    .emoji-category-btn {
        font-size: 1.1rem;
        padding: 6px 8px;
        min-width: 36px;
    }

    .emoji-grid {
        grid-template-columns: repeat(6, 1fr);
        max-height: 180px;
    }

    .emoji-item {
        font-size: 1.3rem;
        padding: 6px;
    }
}

/* ── Desktop layout (≥1025 px wide) ────────────────────────────────────
   Pure width breakpoint — no pointer detection.
   ≤1024px gets mobile layout (phones, portrait tablets, iPad Pro portrait).
   ≥1025px gets desktop layout (landscape tablets, laptops, desktops).
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {

    /* ── Fit the layout inside the visible viewport on tablets/devices with
       OS navigation bars (Android) or browser chrome at the bottom.
       100vh includes the area behind the nav bar (viewport-fit:cover);
       100dvh is the dynamic height that excludes all browser/OS chrome.
       Overriding both here means the desktop flex column never extends
       into the navigation-bar zone, so the chat input stays fully visible. */
    body {
        min-height: 100dvh;
        max-height: 100dvh;
    }

    .container {
        height: 100dvh;
        max-height: 100dvh;
    }

    /* ── Hide all mobile-only UI elements ────────────────────────────────
       !important is required here: JS calls classList.remove('hidden') on
       these elements when a partner is found, which would otherwise make
       them visible on desktop. The media query alone cannot win against a
       removed .hidden class without !important.                            */
    .mobile-control-bar,
    .mobile-chat-status,
    .mobile-chat-status-header,
    .mobile-chat-messages,
    .mobile-matched-interests,
    .mobile-chat-input-container,
    .mobile-chat-input,
    .emoji-quick-bar {
        display: none !important;
    }

    /* ── Connection: column flex, fills remaining viewport height ─────────
       !important needed: the @media (max-width: 480px) mobile block sets
       .connection { position: fixed; height: 100vh; width: 100vw; gap: 0 }
       without !important, but those rules have the SAME specificity as
       these desktop rules. Because mobile blocks appear earlier in the file,
       the desktop block (being later) normally wins by cascade order.
       However !important is kept here for defence against edge cases
       (e.g. browser quirks, future rule additions, inline style bleed).    */
    /* ── Horizontal breathing room from viewport edges on desktop ─────────
       Scoped to connection-active so the homepage layout is unaffected.     */
    body.connection-active .container {
        padding: 0 20px;
    }

    .connection {
        position: static !important;
        height: auto !important;
        width: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 0 14px 0 !important;
        margin: 0 !important;
    }

    /* ── Video container: sized by aspect ratio, capped at 45vh ────────────
       aspect-ratio: 32/9 = two 16:9 feeds side-by-side. Combined with the
       1fr × 1fr grid inside, each cell works out to exactly 16:9, so the
       feeds always resize proportionally.
       flex: 0 0 auto  — size from content (aspect-ratio), not flex growth.
       max-height: 45vh — safety cap on very wide/short viewports.
       width: min(100%, 160vh) — 160vh = 45vh × 32/9 is the exact container
         width at which max-height:45vh produces a perfectly 16:9 cell.
         • When viewport is wider than 160vh (e.g. ultrawide or short window):
           container = 160vh wide, height = 45vh → each cell 80vh×45vh = 16:9 ✓
         • When viewport is ≤ 160vh wide (normal):
           container = 100%, natural aspect-ratio applies < 45vh → 16:9 ✓
       margin: 0 auto — centres the container when it is narrower than 100%. */
    .video-container {
        flex: 0 0 auto !important;
        aspect-ratio: 32 / 9 !important;
        min-height: 150px !important;
        max-height: 45vh !important;
        overflow: hidden !important;
        margin: 0 auto !important;
        height: auto !important;
        width: min(100%, 160vh) !important;
        position: static !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr !important;
    }

    /* ── Video wrappers: fill their grid cell (which is already 16:9) ─────
       object-fit: cover on the <video> element handles any residual crop
       when max-height clips the container.                                  */
    .video-wrapper {
        aspect-ratio: auto !important;
        height: 100% !important;
        width: auto !important;
        position: relative !important;
    }

    /* ── Controls (Skip + Stop): always visible, above chat layer ─────────
       .connection .controls (specificity 0-2-0) beats a plain .controls rule.
       position: relative + z-index: 2 ensures controls paint above
       .chat-container if any stacking context causes layering issues.
       width + margin mirror the video-container constraint so the controls
       row spans the same area as the video feeds.
       display: grid; grid-template-columns: 1fr 1fr — two equal columns,
       matching the video-container's 1fr 1fr grid. This puts the gap between
       the buttons at exactly 50 % of the row, lining up with the divider
       between the two video panels, regardless of button width.            */
    .connection .controls {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-shrink: 0 !important;
        width: min(100%, 160vh) !important;
        margin: 0 auto !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /* Skip sits in the left column, right-aligned → flush against the gap */
    .connection .controls #skip-btn {
        justify-self: end !important;
    }

    /* Stop sits in the right column, left-aligned → flush against the gap */
    .connection .controls #stop-btn {
        justify-self: start !important;
    }

    /* ── Chat container: fills remaining space, width-capped to match video ──
       width: min(100%, 160vh) mirrors the video-container constraint so on
       ultra-wide monitors the chat doesn't sprawl wider than the video feeds. */
    .chat-container {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        min-height: 220px !important;
        overflow: hidden !important;
        width: min(100%, 160vh) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ── Header: explicitly visible when connected ─────────────────────── */
    body.connection-active header {
        display: block !important;
    }

    /* ── Emoji picker: fixed position escapes overflow:hidden ancestors ───
       Both .chat-container and .connection use overflow:hidden.
       position:absolute would be clipped by those ancestors.
       position:fixed is viewport-relative and bypasses all overflow
       containing blocks, so the picker is never clipped.                   */
    #emoji-picker:not(.hidden) {
        position: fixed !important;
        bottom: 80px !important;
        right: 80px !important;
        animation: none !important;
        z-index: 10000 !important;
    }

    /* ── Compact chat input on desktop ─────────────────────────────────── */
    .desktop-chat-input {
        display: flex !important;
        padding: 8px;
    }

    #chat-input {
        padding: 8px 12px;
        font-size: 0.95rem;
    }

    .desktop-chat-input .btn-icon {
        width: 40px;
        height: 40px;
        padding: 8px;
    }

    .desktop-chat-input .btn-icon svg {
        width: 20px;
        height: 20px;
    }

    /* ── Header buttons: scale down to match the h1 (≈48px) height ─────────
       Base .btn-icon is 56px and .online-counter is 56px — both taller than
       the header text, so they overflow into the video feed and get clipped.
       Here we pin them to 40px to stay within the header's natural height.  */
    body.connection-active header .btn-icon {
        width: 40px;
        height: 40px;
        padding: 8px;
    }

    body.connection-active header .btn-icon svg {
        width: 20px;
        height: 20px;
    }

    body.connection-active .online-counter {
        height: 40px;
        padding: 0 12px;
        font-size: 0.85rem;
    }
}

/* ── Short-viewport tweak (125 % DPI on 1080 p, small laptop windows) ───
   Viewport ≤ 820 px tall: trim header and gaps to recover ~20 px           */
@media (min-width: 1025px) and (max-height: 820px) {
    body.connection-active header h1 {
        font-size: 1.8rem;
    }

    body.connection-active header {
        margin-bottom: 8px;
        padding: 6px 0 8px;
    }

    .connection {
        gap: 8px;
    }

    /* h1 shrinks to 1.8rem (≈34px) — shrink buttons to match */
    body.connection-active header .btn-icon {
        width: 34px;
        height: 34px;
        padding: 7px;
    }

    body.connection-active header .btn-icon svg {
        width: 18px;
        height: 18px;
    }

    body.connection-active .online-counter {
        height: 34px;
        padding: 0 10px;
        font-size: 0.8rem;
    }
}

/* Scrollbar styling */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: var(--bg-darker);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* Settings Modal */
.settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.settings-modal.hidden {
    display: none;
}

.settings-modal-content {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.settings-header-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.settings-header-username {
    font-size: 0.85rem;
    color: var(--primary-color);
    margin: 0;
    font-weight: 500;
}

.settings-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.settings-section {
    margin-bottom: 24px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.setting-item {
    margin-bottom: 20px;
}

.setting-item label {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.setting-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.5;
}

.wait-time-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.wait-time-input {
    width: 80px;
    padding: 10px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}

.wait-time-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.2);
}

.wait-time-unit {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.wait-time-slider-container {
    margin-top: 12px;
}

.wait-time-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-light);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.wait-time-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid var(--bg-dark);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.wait-time-slider::-webkit-slider-thumb:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

.wait-time-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid var(--bg-dark);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.wait-time-slider::-moz-range-thumb:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.gender-select {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300ff88' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.gender-select:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
}

.gender-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.2);
}

.gender-select option {
    background: var(--bg-dark);
    color: var(--text-primary);
    padding: 12px;
}

.settings-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

/* Mobile Responsive for Settings */
@media (max-width: 768px) {
    .header-right {
        position: static;
        justify-content: center;
        margin-top: 10px;
    }

    .settings-modal-content {
        width: 95%;
        max-height: 85vh;
    }

    .settings-header,
    .settings-body,
    .settings-footer {
        padding: 16px;
    }
}

/* Onboarding Modal */
.onboarding-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.onboarding-modal.hidden {
    display: none;
}

.onboarding-modal-content {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease-out;
}

.onboarding-header {
    padding: 28px 28px 20px;
    border-bottom: 1px solid var(--border-color);
}

.onboarding-header h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.onboarding-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.onboarding-body {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.onboarding-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.onboarding-field label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

.onboarding-required {
    color: var(--danger-color);
}

.onboarding-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.onboarding-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.15);
}

.onboarding-input.error {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 3px rgba(255, 51, 102, 0.15);
}

.onboarding-error {
    font-size: 0.85rem;
    color: var(--danger-color);
    margin: 0;
}

.onboarding-footer {
    padding: 20px 28px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.onboarding-continue-btn {
    min-width: 140px;
}

.onboarding-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.onboarding-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.onboarding-link {
    color: var(--primary-color);
    text-decoration: none;
}

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

/* Ban Modal Styles */
.ban-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    backdrop-filter: blur(5px);
}

.ban-modal.hidden {
    display: none;
}

.ban-modal-content {
    background: var(--bg-dark);
    border: 2px solid #ff4444;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(255, 68, 68, 0.3), 0 0 40px rgba(255, 68, 68, 0.2);
    animation: slideUp 0.3s ease-out;
}

.ban-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 24px 20px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}

.ban-icon {
    color: #ff4444;
    margin-bottom: 16px;
    animation: pulseFade 2s ease-in-out infinite;
}

@keyframes pulseFade {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.ban-header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ff4444;
    margin: 0;
    text-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
}

.ban-body {
    padding: 24px;
    text-align: center;
}

.ban-message {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 24px;
    line-height: 1.6;
}

.ban-details {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.ban-detail-item {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ban-detail-item:last-child {
    margin-bottom: 0;
}

.ban-detail-item strong {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ban-detail-item span {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    word-break: break-word;
}

.ban-footer-message {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.ban-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

.ban-footer .btn {
    min-width: 120px;
}

@media (max-width: 768px) {
    .ban-modal-content {
        width: 95%;
        max-width: 400px;
    }
    
    .ban-header {
        padding: 24px 20px 16px;
    }
    
    .ban-header h2 {
        font-size: 1.5rem;
    }
    
    .ban-body {
        padding: 20px;
    }
    
    .ban-details {
        padding: 16px;
    }
    
    .ban-footer {
        padding: 16px 20px;
    }

    .settings-header h2 {
        font-size: 1.3rem;
    }
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Emoji Picker Styles */
.chat-input-container {
    position: relative;
}

#emoji-btn {
    position: relative;
}

.chat-input-container .emoji-picker {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 64px; /* Align with emoji button (send button 56px + gap 8px = 64px from right) */
    width: 340px;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 12px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 255, 136, 0.12);
    overflow: hidden;
    animation: slideUp 0.2s ease-out;
    transform-origin: bottom right;
}

/* Ensure picker doesn't go off screen on smaller desktops */
@media (min-width: 1025px) and (max-width: 1280px) {
    .emoji-picker {
        width: 320px;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.emoji-search-container {
    margin-bottom: 10px;
}

.emoji-search {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s;
}

.emoji-search:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.2);
}

.emoji-search::placeholder {
    color: var(--text-secondary);
}

.emoji-categories {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: var(--bg-darker);
    border-radius: 12px;
    margin-bottom: 12px;
    justify-content: space-around;
}

.emoji-category-btn {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    position: relative;
    flex: 1;
}

.emoji-category-btn:hover {
    background: rgba(0, 255, 136, 0.2);
    transform: translateY(-2px);
}

.emoji-category-btn.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.4);
    transform: translateY(-2px);
}

.emoji-category-btn.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    overflow-y: auto;
    max-height: 240px;
    padding: 8px 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-darker);
}

.emoji-item {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    position: relative;
}

.emoji-item:hover {
    background: rgba(0, 255, 136, 0.15);
    transform: scale(1.15);
}

.emoji-item:active {
    transform: scale(0.95);
}

.emoji-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(255, 0, 255, 0.1));
    opacity: 0;
    transition: opacity 0.2s;
}

.emoji-item:hover::before {
    opacity: 1;
}

.emoji-grid::-webkit-scrollbar {
    width: 8px;
}

.emoji-grid::-webkit-scrollbar-track {
    background: var(--bg-darker);
    border-radius: 4px;
    margin: 4px;
}

.emoji-grid::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
    border: 2px solid var(--bg-darker);
}

.emoji-grid::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .emoji-picker {
        bottom: calc(100% + 8px);
        left: 0;
        right: 0;
        width: 100%;
        padding: 10px;
        max-height: 280px;
        border-radius: 12px;
    }
    
    .emoji-categories {
        gap: 4px;
        padding: 6px;
        margin-bottom: 10px;
    }
    
    .emoji-category-btn {
        font-size: 1.2rem;
        padding: 8px 10px;
        min-width: 40px;
    }
    
    .emoji-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 3px;
        max-height: 200px;
        padding: 6px 3px;
    }
    
    .emoji-item {
        font-size: 1.4rem;
        padding: 8px;
        border-radius: 8px;
    }
}

/* ============================================================
   Content Viewer Modal (Terms of Service / Privacy Policy)
   ============================================================ */

.content-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10002;
    backdrop-filter: blur(4px);
    padding: 16px;
}

.content-modal.hidden {
    display: none;
}

.content-modal-inner {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 100%;
    max-width: 680px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: slideUp 0.25s ease-out;
}

.content-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.content-modal-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.content-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: color 0.2s, background 0.2s;
}

.content-modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-light);
}

.content-modal-body {
    overflow-y: auto;
    padding: 24px;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.content-modal-loading,
.content-modal-empty {
    text-align: center;
    padding: 40px 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.content-modal-error {
    text-align: center;
    padding: 40px 0;
    color: var(--danger-color);
    font-size: 0.95rem;
}

.content-modal-updated {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.content-modal-rendered {
    line-height: 1.8;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.content-modal-rendered h1,
.content-modal-rendered h2,
.content-modal-rendered h3,
.content-modal-rendered h4 {
    color: var(--text-primary);
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
    font-weight: 600;
}

.content-modal-rendered h1 { font-size: 1.4rem; }

.content-modal-rendered h2 {
    font-size: 1.1rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}

.content-modal-rendered h3 { font-size: 1rem; }

.content-modal-rendered p {
    margin-bottom: 0.9rem;
}

.content-modal-rendered a {
    color: var(--primary-color);
    text-decoration: none;
}

.content-modal-rendered a:hover {
    text-decoration: underline;
}

.content-modal-rendered ul,
.content-modal-rendered ol {
    margin: 0 0 0.9rem 1.4rem;
}

.content-modal-rendered li {
    margin-bottom: 0.35rem;
}

.content-modal-rendered strong {
    color: var(--text-primary);
    font-weight: 600;
}

.content-modal-rendered hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1.75rem 0;
}

.content-modal-rendered blockquote {
    border-left: 3px solid var(--primary-color);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
}

.content-modal-rendered code {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 0.875em;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .content-modal-inner {
        max-height: 90vh;
    }

    .content-modal-header {
        padding: 16px 20px;
    }

    .content-modal-body {
        padding: 16px 20px;
    }
}

/* ============================================================
   Content Pages (Terms of Service, Privacy Policy)
   ============================================================ */

body.content-page {
    overflow: auto;
    max-height: unset;
    display: block;
    padding: 0;
}

.content-page-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    width: 100%;
}

.content-page-nav {
    margin-bottom: 32px;
}

.content-page-back {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: opacity 0.2s;
}

.content-page-back:hover {
    opacity: 0.75;
    text-decoration: underline;
}

.content-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.content-page-updated {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.content-page-loading,
.content-page-empty {
    color: var(--text-secondary);
    font-size: 1rem;
    padding: 60px 0;
    text-align: center;
}

.content-page-error {
    color: var(--danger-color);
    font-size: 1rem;
    padding: 60px 0;
    text-align: center;
}

/* Rendered markdown */
.content-page-rendered {
    line-height: 1.8;
    color: var(--text-secondary);
}

.content-page-rendered h1,
.content-page-rendered h2,
.content-page-rendered h3,
.content-page-rendered h4 {
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.content-page-rendered h1 { font-size: 1.6rem; }

.content-page-rendered h2 {
    font-size: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.content-page-rendered h3 { font-size: 1.05rem; }

.content-page-rendered p {
    margin-bottom: 1rem;
}

.content-page-rendered a {
    color: var(--primary-color);
    text-decoration: none;
}

.content-page-rendered a:hover {
    text-decoration: underline;
}

.content-page-rendered ul,
.content-page-rendered ol {
    margin: 0 0 1rem 1.5rem;
}

.content-page-rendered li {
    margin-bottom: 0.4rem;
}

.content-page-rendered strong {
    color: var(--text-primary);
    font-weight: 600;
}

.content-page-rendered hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2rem 0;
}

.content-page-rendered blockquote {
    border-left: 3px solid var(--primary-color);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--text-secondary);
    font-style: italic;
}

.content-page-rendered code {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.9em;
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .content-page-wrapper {
        padding: 24px 16px 60px;
    }

    .content-page-title {
        font-size: 1.5rem;
    }
}

/* ── Short viewport / landscape phone ──────────────────────────────────────
   Fires on landscape phones (e.g. iPhone SE landscape: ~568×320px) and on
   any device where the viewport is shorter than 600px. Reduces title size,
   collapses gaps, and hides the decorative feature pills so all interactive
   elements — interests input, Start button, and nav bar — remain visible
   without needing to scroll.                                                */
@media (max-height: 600px) {
    .homepage-title {
        font-size: 2.8rem;
        margin-bottom: 6px;
    }

    .homepage-tagline {
        font-size: 0.95rem;
        line-height: 1.3;
    }

    .homepage-tagline-sub {
        margin-top: 4px;
        font-size: 0.65em;
    }

    .homepage-feature-pills {
        display: none;
    }

    .homepage-header {
        padding-top: 0;
        padding-bottom: 0;
    }

    .homepage-content {
        padding: 12px 24px 16px;
        gap: 12px;
    }

    .homepage-main-content {
        gap: 12px;
    }

    .homepage-online-counter {
        padding: 6px 14px;
        font-size: 0.85rem;
    }

    .homepage-interests-container {
        padding: 6px 6px 6px 14px;
    }

    .homepage-interest-input {
        padding: 10px 8px;
        font-size: 0.9rem;
    }

    .homepage-add-interest-btn {
        width: 38px;
        height: 38px;
    }

    .homepage-start-btn {
        padding: 14px 40px;
        font-size: 1.1rem;
    }

    .homepage-bottom-nav {
        padding: 8px 0;
    }

    .homepage-nav-item {
        padding: 4px 10px;
    }

    .homepage-nav-item svg {
        width: 18px;
        height: 18px;
    }

    .homepage-nav-item span {
        font-size: 0.6rem;
    }
}

/* ── Mobile first-time tutorial overlay ─────────────────────────────────────
   Shown once per device when the user first enters the chat on mobile.
   Explains the swipe-up-to-skip gesture. Dismissed by tapping anywhere.
   State persisted in localStorage. JS only adds .visible on mobile.
   ─────────────────────────────────────────────────────────────────────────── */

.mobile-tutorial {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 160;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-tutorial.visible {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mt-fade-in 0.4s ease-out forwards;
}

.mobile-tutorial.dismissing {
    animation: mt-fade-out 0.25s ease-in forwards;
    pointer-events: none;
}

@keyframes mt-fade-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes mt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes mt-bounce-up {
    0%, 100% { transform: translateY(0); }
    45%      { transform: translateY(-14px); }
}

/* Centered card */
.mt-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    padding: 36px 32px 28px;
    max-width: 300px;
    width: 100%;
    background: rgba(8, 8, 8, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 255, 136, 0.06) inset;
    pointer-events: none;
}

/* Animated swipe arrow */
.mt-swipe-visual {
    animation: mt-bounce-up 1.8s ease-in-out infinite;
}

.mt-swipe-svg {
    width: 44px;
    height: 80px;
    display: block;
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.6));
}

/* Headline */
.mt-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #00ffe0 0%, #00ff88 50%, #cc00ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Body text */
.mt-body {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

/* Got it button */
.mt-got-it {
    padding: 13px 44px;
    background: linear-gradient(135deg, #00ffb3, #00cc6a);
    border: none;
    border-radius: 40px;
    color: #000;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.5), 0 0 36px rgba(0, 255, 136, 0.18);
    transition: transform 0.15s, box-shadow 0.15s;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.mt-got-it:active {
    transform: scale(0.96);
}

/* Tap-anywhere note */
.mt-tap-note {
    margin: 0;
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* ── Announcement System ─────────────────────────────────────────────────────
   Four display modes: banner, alert (inline), popup, fullpage.
   Hidden by default; JS adds .ann-visible to reveal them.
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── BANNER (top strip, above header) ──────────────────────────────── */

.ann-banner-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* Hide banners on the chat page so they don't crowd the compact header */
body.connection-active .ann-banner-container {
    display: none;
}

.ann-banner {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.875rem;
    line-height: 1.4;
    border-bottom: 1px solid transparent;
    animation: ann-slide-down 0.3s ease-out;
}

.ann-banner.ann-visible {
    display: flex;
}

.ann-banner-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    opacity: 0.9;
    display: flex;
    align-items: center;
}

.ann-banner-body {
    flex: 1;
    min-width: 0;
}

.ann-banner-title {
    font-weight: 600;
    margin-right: 6px;
}

.ann-banner-message {
    opacity: 0.9;
}

.ann-banner-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.55;
    padding: 4px;
    line-height: 1;
    color: inherit;
    display: flex;
    align-items: center;
    transition: opacity 0.15s;
}

.ann-banner-dismiss:hover {
    opacity: 1;
}

/* ─── ALERTS SECTION CARD (inline in homepage, below interests) ─────── */

.ann-alert-container {
    width: 100%;
    max-width: clamp(900px, 60vw, 1200px);
}

.ann-section-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    animation: ann-fade-in 0.3s ease-out;
}

.ann-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.07) 0%, rgba(204, 0, 255, 0.04) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
}

.ann-section-header:hover {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.10) 0%, rgba(204, 0, 255, 0.06) 100%);
}

.ann-section-chevron {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.25s ease, color 0.15s;
}

.ann-section-header:hover .ann-section-chevron {
    color: rgba(255, 255, 255, 0.7);
}

/* Collapsed state */
.ann-section-collapsed .ann-section-chevron {
    transform: rotate(-90deg);
}

.ann-section-collapsed .ann-section-body {
    display: none;
}

.ann-section-collapsed .ann-section-header {
    border-bottom-color: transparent;
}

.ann-section-header-icon {
    display: flex;
    align-items: center;
    color: var(--ann-success-color);
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.5));
}

.ann-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #00ffe0 0%, #00ff88 50%, #cc00ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ann-section-body {
    display: flex;
    flex-direction: column;
}

.ann-section-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 14px 8px 18px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
}

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

.ann-section-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Coloured left stripe — type indicator */
.ann-section-stripe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.ann-section-row-icon {
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: flex-start;
}

.ann-section-row-content {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.ann-section-row-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.ann-section-row-msg {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
    text-align: left;
}

.ann-section-row-ts {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 4px;
}

/* News post rows — no type stripe, no icon */
.news-post-row {
    padding-left: 14px;
}

.news-new-badge {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #ff3366;
    margin-left: 8px;
    flex-shrink: 0;
    animation: news-badge-flash 1s ease-in-out infinite;
}

@keyframes news-badge-flash {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.15; }
}

.news-load-more {
    display: block;
    width: 100%;
    padding: 10px;
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    text-align: center;
}

.news-load-more:hover:not(:disabled) {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.03);
}

.news-load-more:disabled {
    cursor: default;
}

/* Type stripe + icon colours */
.ann-type-info    .ann-section-stripe { background: var(--ann-info-color); }
.ann-type-warning .ann-section-stripe { background: var(--ann-warning-color); }
.ann-type-error   .ann-section-stripe { background: var(--ann-error-color); }
.ann-type-success .ann-section-stripe { background: var(--ann-success-color); }

.ann-type-info    .ann-section-row-icon { color: var(--ann-info-color); }
.ann-type-warning .ann-section-row-icon { color: var(--ann-warning-color); }
.ann-type-error   .ann-section-row-icon { color: var(--ann-error-color); }
.ann-type-success .ann-section-row-icon { color: var(--ann-success-color); }

/* ─── POPUP (centred modal overlay) ──────────────────────────────────── */

.ann-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    z-index: 10003;
    padding: 16px;
}

.ann-popup-overlay.ann-visible {
    display: flex;
    animation: ann-fade-in 0.25s ease-out;
}

.ann-popup {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: slideUp 0.3s ease-out;
    overflow: hidden;
}

.ann-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--border-color);
}

.ann-popup-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
}

.ann-popup-title {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.ann-popup-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.ann-popup-close:hover {
    color: var(--text-primary);
}

.ann-popup-body {
    padding: 16px 20px 20px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ─── FULLPAGE (full-viewport takeover) ─────────────────────────────── */

.ann-fullpage-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-darker);
    z-index: 10004;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
}

.ann-fullpage-overlay.ann-visible {
    display: flex;
    animation: ann-fade-in 0.3s ease-out;
}

.ann-fullpage-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ann-fullpage-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.ann-fullpage-message {
    max-width: 520px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0 0 32px;
    white-space: pre-wrap;
    word-break: break-word;
}

.ann-fullpage-dismiss {
    padding: 12px 32px;
    border: none;
    border-radius: 40px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: #000;
    transition: opacity 0.15s, transform 0.1s;
}

.ann-fullpage-dismiss:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.ann-fullpage-dismiss:active {
    transform: translateY(0);
}

/* ─── MARKDOWN CONTENT INSIDE ANNOUNCEMENTS ─────────────────────────── */

.ann-section-row-msg p,
.ann-popup-body p,
.ann-fullpage-message p {
    margin: 0 0 0.6em;
}
.ann-section-row-msg p:last-child,
.ann-popup-body p:last-child,
.ann-fullpage-message p:last-child {
    margin-bottom: 0;
}
.ann-section-row-msg h1,
.ann-section-row-msg h2,
.ann-section-row-msg h3,
.ann-popup-body h1,
.ann-popup-body h2,
.ann-popup-body h3,
.ann-fullpage-message h1,
.ann-fullpage-message h2,
.ann-fullpage-message h3 {
    margin: 0 0 0.4em;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}
.ann-section-row-msg ul,
.ann-section-row-msg ol,
.ann-popup-body ul,
.ann-popup-body ol,
.ann-fullpage-message ul,
.ann-fullpage-message ol {
    margin: 0.3em 0 0.6em 1.4em;
    padding: 0;
}
.ann-section-row-msg li,
.ann-popup-body li,
.ann-fullpage-message li {
    margin-bottom: 0.2em;
}
.ann-section-row-msg code,
.ann-popup-body code,
.ann-fullpage-message code,
.ann-banner-message code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.88em;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 1px 5px;
}
.ann-section-row-msg pre,
.ann-popup-body pre,
.ann-fullpage-message pre {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 12px;
    overflow-x: auto;
    margin: 0.5em 0;
}
.ann-section-row-msg pre code,
.ann-popup-body pre code,
.ann-fullpage-message pre code {
    background: none;
    padding: 0;
    font-size: 0.85em;
}
.ann-section-row-msg a,
.ann-popup-body a,
.ann-fullpage-message a,
.ann-banner-message a {
    color: #00ff88;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ann-section-row-msg a:hover,
.ann-popup-body a:hover,
.ann-fullpage-message a:hover,
.ann-banner-message a:hover {
    color: #00ffe0;
}
.ann-section-row-msg blockquote,
.ann-popup-body blockquote,
.ann-fullpage-message blockquote {
    border-left: 3px solid rgba(255,255,255,0.25);
    margin: 0.4em 0;
    padding: 0.2em 0.8em;
    color: rgba(255,255,255,0.65);
}
.ann-section-row-msg strong,
.ann-popup-body strong,
.ann-fullpage-message strong,
.ann-banner-message strong {
    font-weight: 700;
}
.ann-section-row-msg em,
.ann-popup-body em,
.ann-fullpage-message em,
.ann-banner-message em {
    font-style: italic;
}

/* ─── TYPE COLOUR MODIFIERS ──────────────────────────────────────────── */

.ann-type-info.ann-banner,
.ann-type-info.ann-alert  { background: var(--ann-info-bg); color: var(--ann-info-color); border-color: var(--ann-info-border); }

.ann-type-warning.ann-banner,
.ann-type-warning.ann-alert { background: var(--ann-warning-bg); color: var(--ann-warning-color); border-color: var(--ann-warning-border); }

.ann-type-error.ann-banner,
.ann-type-error.ann-alert  { background: var(--ann-error-bg); color: var(--ann-error-color); border-color: var(--ann-error-border); }

.ann-type-success.ann-banner,
.ann-type-success.ann-alert { background: var(--ann-success-bg); color: var(--ann-success-color); border-color: var(--ann-success-border); }

/* Popup type accents */
.ann-type-info .ann-popup-icon,
.ann-type-info .ann-popup-title    { color: var(--ann-info-color); }
.ann-type-info.ann-popup           { border-color: var(--ann-info-border); }
.ann-type-info .ann-popup-header   { border-bottom-color: var(--ann-info-border); }

.ann-type-warning .ann-popup-icon,
.ann-type-warning .ann-popup-title  { color: var(--ann-warning-color); }
.ann-type-warning.ann-popup         { border-color: var(--ann-warning-border); }
.ann-type-warning .ann-popup-header { border-bottom-color: var(--ann-warning-border); }

.ann-type-error .ann-popup-icon,
.ann-type-error .ann-popup-title   { color: var(--ann-error-color); }
.ann-type-error.ann-popup          { border-color: var(--ann-error-border); }
.ann-type-error .ann-popup-header  { border-bottom-color: var(--ann-error-border); }

.ann-type-success .ann-popup-icon,
.ann-type-success .ann-popup-title  { color: var(--ann-success-color); }
.ann-type-success.ann-popup         { border-color: var(--ann-success-border); }
.ann-type-success .ann-popup-header { border-bottom-color: var(--ann-success-border); }

/* Fullpage type accents */
.ann-type-info .ann-fullpage-title,
.ann-type-info .ann-fullpage-icon    { color: var(--ann-info-color); }
.ann-type-info .ann-fullpage-dismiss { background: var(--ann-info-color); }

.ann-type-warning .ann-fullpage-title,
.ann-type-warning .ann-fullpage-icon  { color: var(--ann-warning-color); }
.ann-type-warning .ann-fullpage-dismiss { background: var(--ann-warning-color); }

.ann-type-error .ann-fullpage-title,
.ann-type-error .ann-fullpage-icon   { color: var(--ann-error-color); }
.ann-type-error .ann-fullpage-dismiss { background: var(--ann-error-color); }

.ann-type-success .ann-fullpage-title,
.ann-type-success .ann-fullpage-icon  { color: var(--ann-success-color); }
.ann-type-success .ann-fullpage-dismiss { background: var(--ann-success-color); }

/* ─── ANIMATIONS ─────────────────────────────────────────────────────── */

@keyframes ann-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ann-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .ann-banner {
        font-size: 0.82rem;
        padding: 9px 12px;
    }
    .ann-fullpage-title {
        font-size: 1.3rem;
    }
}