/* ═══════════════════════════════════════════════════════════════════
   REMILIA CORPORATION — EXPERIMENTAL AESTHETIC LAYER
   ☆ UNIT ONLINE ☆ TRANSMISSION AUTHORIZED ☆ CORP://REMILIA.SYS
   ═══════════════════════════════════════════════════════════════════
   Override layer applied after remilia-theme.css.
   Aesthetic: dark-corp, glitch-wave, neon-blood, CRT ghost, Y2K-void.
   ─────────────────────────────────────────────────────────────────── */

/* ─── Extended Variables ─────────────────────────────────────────── */
:root {
    --rx-font-corp:    "Space Grotesk", "Arial Narrow", Arial, sans-serif;
    --rx-font-mono:    "IBM Plex Mono", "Courier New", monospace;
    --rx-red:          #ff0000;
    --rx-red-dim:      rgba(255, 0, 0, 0.55);
    --rx-red-ghost:    rgba(255, 0, 0, 0.07);
    --rx-neon:         0 0 6px #ff0000, 0 0 22px rgba(255, 0, 0, 0.45), 0 0 50px rgba(255, 0, 0, 0.15);
    --rx-neon-soft:    0 0 4px rgba(255, 0, 0, 0.4), 0 0 14px rgba(255, 0, 0, 0.18);
    --rx-banner-bg:    #080808;
    --rx-banner-text:  #ebebeb;
    --rx-toolbar-bg:   rgba(6, 0, 0, 0.92);
    --rx-mono-green:   #00ff88;
    --rx-scan:         rgba(0, 0, 0, 0.022);
    --rx-noise-tile:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════
   01  (CRT scanlines removed)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   02  DARK PORTAL BANNER
   ═══════════════════════════════════════════════════════════════════ */
.portal-banner {
    background: var(--rx-banner-bg) !important;
    background-image:
        var(--rx-noise-tile),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 44px,
            rgba(255, 0, 0, 0.018) 44px,
            rgba(255, 0, 0, 0.018) 45px
        ) !important;
    border-bottom: 1px solid rgba(255, 0, 0, 0.35) !important;
    box-shadow:
        0 1px 0 rgba(255, 0, 0, 0.12),
        inset 0 -1px 0 rgba(255, 0, 0, 0.06) !important;
    position: relative;
    overflow: hidden;
}

/* Animated horizontal sweep line across the banner */
.portal-banner::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, 0.6) 50%, transparent 100%);
    animation: rxBannerSweep 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes rxBannerSweep {
    0%   { top: -2px; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}

/* ─── Portal Logo ────────────────────────────────────────────────── */
.portal-logo {
    color: var(--rx-red) !important;
    font-family: var(--rx-font-corp) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: -0.03em !important;
    text-shadow: 0 0 12px rgba(255, 0, 0, 0.55) !important;
    text-decoration: none !important;
    position: relative;
    z-index: 2;
    animation: rxLogoGlitch 14s ease-in-out infinite;
}

.portal-logo:hover {
    text-shadow: var(--rx-neon) !important;
    text-decoration: none !important;
}

@keyframes rxLogoGlitch {
    0%,   86%,  100% { text-shadow: 0 0 12px rgba(255,0,0,0.55); transform: none; }
    87%              { text-shadow: -3px 0 cyan, 3px 0 #ff0044;  transform: translateX(-2px) skewX(-1deg); filter: brightness(1.3); }
    87.4%            { text-shadow:  3px 0 cyan, -3px 0 #ff0044; transform: translateX(2px); }
    87.8%            { text-shadow: -1px 0 rgba(0,255,255,.6), 1px 0 rgba(255,0,68,.6); transform: none; }
    88%              { text-shadow: 0 0 12px rgba(255,0,0,0.55); filter: none; }
    90%              { text-shadow: -2px 0 cyan, 2px 0 #ff0000; transform: translateX(-1px); filter: brightness(1.5); }
    90.3%            { text-shadow: 0 0 12px rgba(255,0,0,0.55); transform: none; filter: none; }
}

/* ─── Tagline on dark banner ─────────────────────────────────────── */
.portal-tagline {
    color: rgba(255, 255, 255, 0.28) !important;
    font-family: var(--rx-font-mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-style: normal !important;
    position: relative;
    z-index: 2;
}

/* ─── Smiley SVG: neon on dark ───────────────────────────────────── */
.portal-remilia-smiley svg {
    stroke: var(--rx-red) !important;
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.65));
    animation: rxSmileyPulse 5s ease-in-out infinite;
}

.portal-remilia-smiley:hover svg {
    filter: drop-shadow(0 0 12px rgba(255, 0, 0, 1));
}

@keyframes rxSmileyPulse {
    0%,  100% { filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.65)); }
    50%        { filter: drop-shadow(0 0 14px rgba(255, 0, 0, 0.95)) drop-shadow(0 0 28px rgba(255, 0, 0, 0.3)); }
}

/* ─── Mobile topbar on dark ──────────────────────────────────────── */
.portal-mobile-topbar { background: transparent !important; }

.portal-mobile-brand-lockup .portal-mobile-kicker,
.portal-mobile-brand-lockup .portal-mobile-home-link,
.portal-mobile-eyebrow,
.portal-mobile-title,
.portal-mobile-subtitle { color: var(--rx-banner-text) !important; }

.portal-mobile-action {
    color: var(--rx-banner-text) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.portal-mobile-action:hover {
    background: rgba(255, 0, 0, 0.18) !important;
    border-color: rgba(255, 0, 0, 0.45) !important;
    color: var(--rx-red) !important;
}

/* ─── Search on dark banner ──────────────────────────────────────── */
.portal-search-shell { background: transparent !important; }

.header-search-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 0, 0, 0.22) !important;
    color: var(--rx-banner-text) !important;
}
.header-search-input::placeholder { color: rgba(255, 255, 255, 0.25) !important; }
.header-search-input:focus {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 0, 0, 0.65) !important;
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.12), 0 0 10px rgba(255, 0, 0, 0.08) !important;
}
.header-search-scope {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 0, 0, 0.22) !important;
    color: rgba(255, 255, 255, 0.55) !important;
}
.header-search-button {
    border-color: rgba(255, 0, 0, 0.45) !important;
    color: var(--rx-red) !important;
    background: transparent !important;
}
.header-search-button:hover {
    background: var(--rx-red) !important;
    color: #000 !important;
    box-shadow: var(--rx-neon-soft) !important;
}

/* ─── Corp Meta Bar ──────────────────────────────────────────────── */
.rx-corp-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 6px 0 0;
    font-family: var(--rx-font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    user-select: none;
}

.rx-corp-meta-live {
    color: var(--rx-mono-green);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.7);
}
.rx-corp-meta-live::before {
    content: '●';
    font-size: 7px;
    animation: rxBlink 1.4s step-end infinite;
}

.rx-corp-meta-sys { color: rgba(255, 0, 0, 0.38); }
.rx-corp-meta-id  { color: rgba(255, 255, 255, 0.15); }

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

/* ═══════════════════════════════════════════════════════════════════
   03  TICKER — Terminal Stock-Feed Look
   ═══════════════════════════════════════════════════════════════════ */
.rem-ticker-bar {
    background: #0b0000 !important;
    border-top:    1px solid rgba(255, 0, 0, 0.12) !important;
    border-bottom: 1px solid rgba(255, 0, 0, 0.25) !important;
    padding: 5px 0 !important;
    position: relative;
}

/* Fade left & right edges — terminal-style */
.rem-ticker-bar::before,
.rem-ticker-bar::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 48px;
    pointer-events: none;
    z-index: 2;
}
.rem-ticker-bar::before {
    left: 0;
    background: linear-gradient(90deg, #0b0000 40%, transparent);
}
.rem-ticker-bar::after {
    right: 0;
    background: linear-gradient(-90deg, #0b0000 40%, transparent);
}

.rem-ticker-item {
    font-family: var(--rx-font-mono) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
    color: rgba(255, 190, 190, 0.72) !important;
    text-transform: uppercase !important;
}

.rem-ticker-sep {
    color: rgba(255, 0, 0, 0.38) !important;
    font-size: 9px !important;
    margin: 0 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   04  NAV BAR — Underline sweep + corp typography
   ═══════════════════════════════════════════════════════════════════ */
.portal-nav {
    border-color: rgba(255, 0, 0, 0.25) !important;
    background: #fdfdfd !important;
}

.portal-nav-link {
    font-family: var(--rx-font-corp) !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    font-weight: 500 !important;
    position: relative;
    overflow: hidden;
}

/* animated underline sweep on hover/active */
.portal-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    height: 2px;
    background: var(--rx-red);
    box-shadow: var(--rx-neon-soft);
    transition: left 0.22s ease, right 0.22s ease;
}
.portal-nav-link:hover::after,
.portal-nav-link.active::after { left: 0; right: 0; }

/* ═══════════════════════════════════════════════════════════════════
   05  SIDEBAR ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════ */
.sidebar-title {
    font-family: var(--rx-font-corp) !important;
    font-size: 9px !important;
    letter-spacing: 0.22em !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

/* Pulsing neon online counter */
.sidebar-counter {
    font-family: var(--rx-font-mono) !important;
    font-size: 34px !important;
    font-weight: 400 !important;
    color: var(--rx-red) !important;
    text-shadow: var(--rx-neon-soft) !important;
    animation: rxCounterPulse 4s ease-in-out infinite;
    line-height: 1;
}

@keyframes rxCounterPulse {
    0%, 100% { text-shadow: 0 0 4px rgba(255,0,0,0.4),  0 0 14px rgba(255,0,0,0.18); }
    50%       { text-shadow: 0 0 10px rgba(255,0,0,0.8), 0 0 30px rgba(255,0,0,0.35), 0 0 60px rgba(255,0,0,0.1); }
}

.rem-online-dot {
    color: #00ff88 !important;
    font-size: 9px !important;
    margin-right: 5px !important;
    animation: rxBlink 1.6s step-end infinite;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.9) !important;
}

/* Top chatter avatars — neon hover ring */
.top-chatter-slot img {
    transition: box-shadow 0.2s, transform 0.22s !important;
}
.top-chatter-slot:hover img {
    box-shadow: 0 0 0 2px var(--rx-red), 0 0 12px rgba(255, 0, 0, 0.45) !important;
    transform: scale(1.08) translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   06  NEWS DISPATCH CARDS — Classified Document Aesthetic
   ═══════════════════════════════════════════════════════════════════ */
.news-classic-post {
    position: relative;
    border-left: 3px solid var(--rx-red) !important;
    padding-left: 18px !important;
    margin-bottom: 36px !important;
}

/* Diagonal hatch in top-right corner — classified texture */
.news-classic-post::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 3px,
        rgba(255, 0, 0, 0.05) 3px,
        rgba(255, 0, 0, 0.05) 4px
    );
    pointer-events: none;
}

/* DISPATCH header: monospace corp ID */
.rem-dispatch-header {
    font-family: var(--rx-font-mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.2em !important;
    color: var(--rx-red) !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(255, 0, 0, 0.14) !important;
    padding-bottom: 7px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* ID chip: red pill */
.rem-dispatch-id {
    background: var(--rx-red);
    color: #fff;
    padding: 2px 9px;
    font-family: var(--rx-font-mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
    font-weight: 500;
}

.rem-dispatch-date {
    color: rgba(255, 0, 0, 0.45) !important;
    font-size: 9px !important;
}

/* Post titles — corp bold */
.post .posttitle a,
.post .posttitle a:visited {
    font-family: var(--rx-font-corp) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
}
.post .posttitle a:hover {
    text-shadow: var(--rx-neon-soft) !important;
    text-decoration: none !important;
}

/* Page intro title */
.news-home-intro h1.portal-page-title {
    font-family: var(--rx-font-corp) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}

/* News stamp behind posts — larger, corp-weight */
.news-home-stamp {
    font-family: var(--rx-font-corp) !important;
    font-size: 60px !important;
    font-weight: 900 !important;
    font-style: normal !important;
    letter-spacing: -0.05em !important;
    text-transform: uppercase !important;
    opacity: 0.055 !important;
    color: var(--rx-red) !important;
}

/* Portal lead text */
.portal-lead {
    font-family: var(--rx-font-corp) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    letter-spacing: 0.01em !important;
    color: #555 !important;
    line-height: 1.75 !important;
}

/* Comment cards: classified indent */
.reply-card,
.news-comment-card {
    border-left: 2px solid rgba(255, 0, 0, 0.18) !important;
    padding-left: 12px !important;
    background: #fffafa !important;
}
.reply-card .activity-meta {
    font-family: var(--rx-font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    color: rgba(180, 0, 0, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   07  BUTTONS — Neon glow on hover / focus
   ═══════════════════════════════════════════════════════════════════ */
.green-btn:hover,
.send-btn:hover {
    box-shadow: var(--rx-neon-soft) !important;
    border-color: var(--rx-red) !important;
}
.green-btn:focus-visible {
    outline: 2px solid var(--rx-red) !important;
    outline-offset: 2px !important;
    box-shadow: var(--rx-neon-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   08  INPUTS — Glow on focus
   ═══════════════════════════════════════════════════════════════════ */
.header-search-input:focus,
.sidebar-input:focus,
.text-input:focus,
.textarea-input:focus,
.chat-line:focus {
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.13), 0 0 10px rgba(255, 0, 0, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   09  CHAT TOOLBAR — Dark glassmorphism
   ═══════════════════════════════════════════════════════════════════ */
#toolbar,
.floating-sidebar {
    background: var(--rx-toolbar-bg) !important;
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
    box-shadow:
        0 10px 40px rgba(255, 0, 0, 0.13),
        0 3px 10px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 100, 100, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.toolbar-handle {
    background: rgba(255, 0, 0, 0.1) !important;
    border-bottom-color: rgba(255, 0, 0, 0.2) !important;
    color: rgba(255, 130, 130, 0.6) !important;
    letter-spacing: 5px !important;
}

.side-btn {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 0, 0, 0.18) !important;
    color: rgba(255, 210, 210, 0.7) !important;
    border-radius: 6px !important;
}
.side-btn:hover,
.side-btn.active {
    background: rgba(255, 0, 0, 0.14) !important;
    border-color: rgba(255, 0, 0, 0.55) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.22), inset 0 0 10px rgba(255, 0, 0, 0.05) !important;
}
.side-label { color: rgba(255, 255, 255, 0.88) !important; }
.side-btn:hover .side-label,
.side-btn.active .side-label { color: rgba(255, 255, 255, 0.88) !important; }

.side-icon { filter: saturate(0.5) brightness(1.2); }
.side-btn:hover .side-icon,
.side-btn.active .side-icon { filter: none; }

.side-badge { box-shadow: 0 0 8px rgba(255, 0, 0, 0.7) !important; }

/* ═══════════════════════════════════════════════════════════════════
   10  CHAT ADMIN BAR — Dark
   ═══════════════════════════════════════════════════════════════════ */
#wp-admin-bar,
.chat-admin-bar {
    background: #070000 !important;
    border-bottom: 1px solid rgba(255, 0, 0, 0.35) !important;
    box-shadow: 0 1px 0 rgba(255, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}
#wp-admin-bar .padder,
.chat-admin-bar .padder { background: transparent !important; }

#admin-bar-logo {
    color: var(--rx-red) !important;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.45) !important;
    font-family: var(--rx-font-corp) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 16px !important;
    letter-spacing: -0.02em !important;
    animation: rxLogoGlitch 18s ease-in-out infinite;
}

.chat-admin-bar .main-nav a,
#wp-admin-bar .main-nav a {
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: var(--rx-font-corp) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
}
.chat-admin-bar .main-nav a:hover,
#wp-admin-bar .main-nav a:hover {
    color: var(--rx-red) !important;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   11  WINDOW PANELS — Sharper, glowing borders
   ═══════════════════════════════════════════════════════════════════ */
.window-panel,
.info-panel {
    border-color: rgba(255, 0, 0, 0.45) !important;
    box-shadow:
        0 10px 36px rgba(255, 0, 0, 0.1),
        0 3px 10px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
}
.window-title,
.history-title {
    font-family: var(--rx-font-corp) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    background: linear-gradient(90deg, #ffefef 0%, #fffafa 100%) !important;
}
.window-close {
    font-family: var(--rx-font-mono) !important;
    font-size: 18px !important;
    transition: text-shadow 0.15s !important;
}
.window-close:hover {
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.7) !important;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   12  ROOM BADGE — Dark terminal chip
   ═══════════════════════════════════════════════════════════════════ */
#roomBadge,
.room-badge {
    background: rgba(6, 0, 0, 0.88) !important;
    border: 1px solid rgba(255, 0, 0, 0.45) !important;
    color: var(--rx-red) !important;
    font-family: var(--rx-font-mono) !important;
    font-size: 9px !important;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.6) !important;
    letter-spacing: 0.25em !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   13  SEND / CHAT INPUT BAR
   ═══════════════════════════════════════════════════════════════════ */
.send-btn {
    font-family: var(--rx-font-corp) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    letter-spacing: 0.1em !important;
}
.chat-line {
    font-family: var(--rx-font-corp) !important;
    font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   14  FLASH / TRANSMISSION MESSAGES
   ═══════════════════════════════════════════════════════════════════ */
.rem-transmission {
    border-left: 3px solid var(--rx-red) !important;
    background: #fff8f8 !important;
    font-family: var(--rx-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    padding: 10px 16px !important;
    box-shadow: 0 2px 14px rgba(255, 0, 0, 0.07) !important;
    animation: rxTransIn 0.35s ease;
}
.rem-transmission.error { background: #fff0f0 !important; }

@keyframes rxTransIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   15  FOOTER — Corp watermark line
   ═══════════════════════════════════════════════════════════════════ */
.portal-footer-classic {
    background: #fafafa !important;
    border-top: 1px solid rgba(255, 0, 0, 0.1) !important;
    padding: 18px 18px 14px !important;
    position: relative;
}
.portal-footer-classic::before {
    content: '⚜ REMILIA CORP · EST. 2026 · CORP://REMILIA.SYS ⚜';
    display: block;
    font-family: var(--rx-font-mono);
    font-size: 8px;
    letter-spacing: 0.22em;
    color: rgba(255, 0, 0, 0.18);
    text-align: center;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.portal-footer-classic p,
.portal-footer-classic a {
    font-family: var(--rx-font-mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
}

/* ═══════════════════════════════════════════════════════════════════
   16  USER CORNER (chat) — Neon hover
   ═══════════════════════════════════════════════════════════════════ */
.user-corner:hover {
    border-color: rgba(255, 0, 0, 0.5) !important;
    box-shadow:
        0 0 0 1px rgba(255, 0, 0, 0.2),
        0 0 18px rgba(255, 0, 0, 0.14),
        0 8px 28px rgba(180, 0, 0, 0.12) !important;
}
.me-name {
    font-family: var(--rx-font-corp) !important;
    font-weight: 600 !important;
    font-style: normal !important;
}
.me-card img {
    border-color: var(--rx-red) !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.2) !important;
    transition: box-shadow 0.2s, transform 0.2s !important;
}
.me-card img:hover {
    box-shadow: 0 0 0 3px var(--rx-red), 0 0 22px rgba(255, 0, 0, 0.45) !important;
    transform: scale(1.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   17  CUSTOM SCROLLBARS — Blood-red
   ═══════════════════════════════════════════════════════════════════ */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 0, 0, 0.28) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 0, 0.22);
    border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 0, 0, 0.52); }

/* ═══════════════════════════════════════════════════════════════════
   18  TYPOGRAPHY UPGRADES — Corp everywhere
   ═══════════════════════════════════════════════════════════════════ */
.portal-page-title {
    font-family: var(--rx-font-corp) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

body.theme-anime h1,
body.theme-anime h2,
body.theme-anime h3 {
    font-family: var(--rx-font-corp);
}

.panel-label {
    font-family: var(--rx-font-mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
    color: rgba(180, 0, 0, 0.45) !important;
}

.legacy-profile-form h4 {
    font-family: var(--rx-font-corp) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-size: 9px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   19  LANGUAGE SWITCHER — Monospace enhancement
   ═══════════════════════════════════════════════════════════════════ */
.rem-lang-switcher { font-family: var(--rx-font-mono) !important; }
.rem-lang-btn {
    font-family: var(--rx-font-mono) !important;
    border-radius: 0 !important;
}
.rem-lang-btn:hover,
.rem-lang-btn.active {
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   20  PORTAL SECTION BORDERS
   ═══════════════════════════════════════════════════════════════════ */
.portal-section,
.sidebar-box { border-bottom-color: rgba(255, 0, 0, 0.07) !important; }

/* ═══════════════════════════════════════════════════════════════════
   21  CHAT PAGE — Stage border enhancement
   ═══════════════════════════════════════════════════════════════════ */
#chatStage,
.chat-scene {
    border: 1px solid rgba(255, 0, 0, 0.3) !important;
    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.06), 0 8px 40px rgba(255, 0, 0, 0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   22  DM PANEL — Corp style
   ═══════════════════════════════════════════════════════════════════ */
.dm-side-title {
    font-family: var(--rx-font-corp) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: -0.01em !important;
}
.dm-section-title {
    font-family: var(--rx-font-mono) !important;
    font-size: 8px !important;
    letter-spacing: 0.2em !important;
}

/* ═══════════════════════════════════════════════════════════════════
   23  PORTAL MOBILE PILLS — Dark banner
   ═══════════════════════════════════════════════════════════════════ */
.portal-mobile-pill {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}
.portal-mobile-pill:hover {
    border-color: rgba(255, 0, 0, 0.4) !important;
    color: var(--rx-red) !important;
    background: rgba(255, 0, 0, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   24  STATUS / MINI STATUS LINES
   ═══════════════════════════════════════════════════════════════════ */
.status-line,
.mini-status {
    font-family: var(--rx-font-mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
}

/* ═══════════════════════════════════════════════════════════════════
   25  "DISPATCH" NOTE: empty states
   ═══════════════════════════════════════════════════════════════════ */
.portal-empty-state,
.sidebar-empty-note {
    font-family: var(--rx-font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    color: rgba(180, 0, 0, 0.35) !important;
}
.portal-empty-state::before { content: '// '; }

/* ═══════════════════════════════════════════════════════════════════
   26  CORP WATERMARK (opt-in class .rx-watermark)
   ═══════════════════════════════════════════════════════════════════ */
.rx-watermark { position: relative; overflow: hidden; }
.rx-watermark::after {
    content: 'REMILIA CORP';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    font-family: var(--rx-font-corp);
    font-size: 72px;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: rgba(255, 0, 0, 0.022);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   27  AUTH ACCORDION / SIDEBAR REGISTER DETAILS
   ═══════════════════════════════════════════════════════════════════ */
.auth-accordion > summary {
    font-family: var(--rx-font-corp) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(180, 0, 0, 0.7) !important;
    list-style: none;
    cursor: pointer;
}
.auth-accordion > summary::marker,
.auth-accordion > summary::-webkit-details-marker { display: none; }
.auth-accordion > summary::before {
    content: '▸ ';
    font-size: 10px;
}
.auth-accordion[open] > summary::before { content: '▾ '; }

/* ═══════════════════════════════════════════════════════════════════
   28  HISTORY / CHAT MESSAGES — Corp typography
   ═══════════════════════════════════════════════════════════════════ */
body.theme-anime[data-page="chat"] .history-message .message-head .username {
    font-family: var(--rx-font-corp) !important;
    font-weight: 600 !important;
}
.history-footer {
    font-family: var(--rx-font-mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
}

/* ═══════════════════════════════════════════════════════════════════
   29  RESIZE HANDLES — Glowing
   ═══════════════════════════════════════════════════════════════════ */
.resize-handle:hover {
    background: rgba(255, 0, 0, 0.18) !important;
    box-shadow: 0 0 6px rgba(255, 0, 0, 0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   30  MUSIC PLAYER TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════════ */
.rem-music-btn {
    animation: rxSmileyPulse 6s ease-in-out infinite;
}
.rem-music-btn:hover {
    box-shadow: var(--rx-neon-soft) !important;
    border-color: var(--rx-red) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   31  CHAT PANEL DEFAULTS
   — chatHistoryPanel taller, onlinePanel pushed left
   ═══════════════════════════════════════════════════════════════════ */

/* Taller chat history panel — no !important on height so JS resize can still override */
body.theme-anime[data-page="chat"] #chatHistoryPanel {
    width: 320px;
    height: 430px;
    min-height: 180px;
    max-height: none;
}

/* Before the panel is moved to the floating layer by floatWindowPanel(),
   it is measured via getBoundingClientRect() while position:absolute
   relative to #chatStage.  Setting left:2px / top:68px / transform:none
   means the measurement returns coords near the left edge of the stage,
   so the fixed inline position applied afterwards lands next to the
   left toolbar rather than in the centre of the stage.
   :not(.floating-window) prevents these rules from fighting the inline
   styles once the panel has already been floated. */
#onlinePanel:not(.floating-window) {
    position: absolute !important;
    left: 2px !important;
    top: 68px !important;
    transform: none !important;
    width: 200px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   32  SOCIAL FEED — Corp Dispatch Cards
   ═══════════════════════════════════════════════════════════════════ */

/* Feed header above the card */
.rx-feed-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 0, 0, 0.12);
}
.rx-feed-header-label {
    font-family: var(--rx-font-mono);
    font-size: 8px;
    letter-spacing: 0.22em;
    color: rgba(255, 0, 0, 0.38);
    text-transform: uppercase;
}
.rx-feed-header-title {
    font-family: var(--rx-font-corp);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #1a0000;
    text-transform: uppercase;
}
.rx-feed-header-ts {
    margin-left: auto;
    font-family: var(--rx-font-mono);
    font-size: 8px;
    letter-spacing: 0.1em;
    color: rgba(180, 0, 0, 0.3);
}

/* Social post card — dispatch doc look */
.social-post-card {
    border-bottom: 1px solid rgba(255, 0, 0, 0.08) !important;
    padding: 14px 0 14px !important;
    margin: 0 !important;
    background: transparent !important;
    position: relative;
    transition: background 0.15s !important;
}
.social-post-card::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 0, 0, 0);
    transition: background 0.2s;
}
.social-post-card:hover::before { background: rgba(255, 0, 0, 0.35); }
.social-post-card:hover { background: #fffafa !important; }

.social-post-header { margin-bottom: 8px !important; }

.social-post-author-name {
    font-family: var(--rx-font-corp) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #1a0000 !important;
    text-decoration: none !important;
}
.social-post-author-handle {
    font-family: var(--rx-font-mono) !important;
    font-size: 11px !important;
    color: rgba(180, 0, 0, 0.45) !important;
    letter-spacing: 0.04em !important;
}
.social-post-time {
    font-family: var(--rx-font-mono) !important;
    font-size: 11px !important;
    color: rgba(180, 0, 0, 0.3) !important;
    text-decoration: none !important;
    letter-spacing: 0.04em !important;
}
.social-post-body {
    font-family: var(--rx-font-corp) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #2a0000 !important;
}
.social-post-avatar {
    border: 2px solid rgba(255, 0, 0, 0.2) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.social-post-avatar:hover {
    border-color: rgba(255, 0, 0, 0.6) !important;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.25) !important;
}

/* Action buttons: react/reply/repost */
.social-post-actions { margin-top: 10px !important; gap: 2px !important; }
.social-action-btn {
    font-family: var(--rx-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    color: rgba(160, 0, 0, 0.45) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    padding: 3px 10px !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: color 0.15s, border-color 0.15s, background 0.15s !important;
}
.social-action-btn:hover {
    color: var(--rx-red) !important;
    border-color: rgba(255, 0, 0, 0.22) !important;
    background: rgba(255, 0, 0, 0.04) !important;
}
.social-action-btn.liked { color: var(--rx-red) !important; }
.social-action-btn.reposted { color: var(--rx-red) !important; }

/* Post share link button */
.post-share-btn {
    font-size: 12px !important;
    opacity: 0.3 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
}
.post-share-btn:hover { opacity: 1 !important; }

/* Repost badge */
.social-repost-badge {
    font-family: var(--rx-font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    color: rgba(180, 0, 0, 0.45) !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* Cite card */
.social-cited-card {
    border: 1px solid rgba(255, 0, 0, 0.15) !important;
    border-left: 3px solid rgba(255, 0, 0, 0.35) !important;
    padding: 10px 14px !important;
    margin-top: 8px !important;
    background: #fffafa !important;
    font-size: 13px !important;
    transition: border-color 0.15s !important;
}
.social-cited-card:hover { border-left-color: var(--rx-red) !important; }

/* "New posts" banner */
#newPostsBanner {
    font-family: var(--rx-font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    background: #0b0000 !important;
    color: var(--rx-mono-green) !important;
    border-left: 3px solid var(--rx-mono-green) !important;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6) !important;
    padding: 9px 16px !important;
    cursor: pointer !important;
    animation: rxTransIn 0.3s ease !important;
}
#newPostsBanner:empty,
#newPostsBanner[style*="display:none"],
#newPostsBanner[style*="display: none"] { display: none !important; }

/* "Load more" button */
#loadMoreBtn {
    font-family: var(--rx-font-corp) !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}
#loadMoreBtn:hover { box-shadow: var(--rx-neon-soft) !important; }

/* ═══════════════════════════════════════════════════════════════════
   33  COMPOSE BOX — Corp terminal style
   ═══════════════════════════════════════════════════════════════════ */
.social-compose {
    border: 1px solid rgba(255, 0, 0, 0.15) !important;
    border-top: 3px solid rgba(255, 0, 0, 0.5) !important;
    background: #fefefe !important;
    padding: 14px 14px 10px !important;
    margin-bottom: 20px !important;
    position: relative !important;
}
.social-compose::before {
    content: '// POST TO NETWORK';
    display: block;
    font-family: var(--rx-font-mono);
    font-size: 8px;
    letter-spacing: 0.22em;
    color: rgba(255, 0, 0, 0.3);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.social-compose-input { width: 100% !important; }
.social-char-counter {
    font-family: var(--rx-font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    color: rgba(180, 0, 0, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   34  FRIEND REQUESTS CARD — Classified clearance look
   ═══════════════════════════════════════════════════════════════════ */
.friend-requests-pinned {
    border: 1px solid rgba(255, 0, 0, 0.15) !important;
    border-left: 3px solid var(--rx-red) !important;
    background: #fffafa !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
}
.friend-requests-pinned-header {
    font-family: var(--rx-font-corp) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #1a0000 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.friend-requests-count {
    font-family: var(--rx-font-mono) !important;
    font-size: 10px !important;
    background: var(--rx-red) !important;
    color: #fff !important;
    padding: 1px 7px !important;
    letter-spacing: 0.08em !important;
}
.friend-request-name {
    font-family: var(--rx-font-corp) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #1a0000 !important;
    text-decoration: none !important;
}
.friend-request-handle {
    font-family: var(--rx-font-mono) !important;
    font-size: 10px !important;
    color: rgba(180, 0, 0, 0.45) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   35  PORTAL CARD — Corp paper look
   ═══════════════════════════════════════════════════════════════════ */
.portal-card {
    position: relative;
    overflow: hidden;
}
.portal-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 100px;
    height: 100px;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(255, 0, 0, 0.025) 4px,
        rgba(255, 0, 0, 0.025) 5px
    );
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   36  MODAL OVERLAYS — Corp glass
   ═══════════════════════════════════════════════════════════════════ */
.social-modal {
    border-top: 3px solid var(--rx-red) !important;
    border-radius: 0 !important;
    font-family: var(--rx-font-corp) !important;
}
.social-modal h3 {
    font-family: var(--rx-font-corp) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════════
   37  CORP "LIVE SIGNAL" SPINNER — Loading feed
   ═══════════════════════════════════════════════════════════════════ */
.social-empty {
    font-family: var(--rx-font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    color: rgba(180, 0, 0, 0.3) !important;
    text-transform: uppercase !important;
    animation: rxBlink 1.6s step-end infinite !important;
}
.social-empty::before { content: '> '; color: rgba(255, 0, 0, 0.4); }

/* ═══════════════════════════════════════════════════════════════════
   38  REPLYING-TO THREAD INDICATOR
   ═══════════════════════════════════════════════════════════════════ */
.social-replying-to {
    font-family: var(--rx-font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    color: rgba(180, 0, 0, 0.35) !important;
    margin-bottom: 6px !important;
}
.social-replying-to a {
    color: rgba(255, 0, 0, 0.55) !important;
    text-decoration: none !important;
}
.social-replying-to a:hover { text-decoration: underline !important; }

/* ═══════════════════════════════════════════════════════════════════
   39  POST IMAGE — Corp polaroid-edge
   ═══════════════════════════════════════════════════════════════════ */
.social-post-image {
    border: 1px solid rgba(255, 0, 0, 0.12) !important;
    display: block !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    transition: box-shadow 0.2s !important;
}
.social-post-image:hover {
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.14) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   40  FEED PAGE TITLE — Corp transmission
   ═══════════════════════════════════════════════════════════════════ */
.portal-card > .portal-page-title {
    font-family: var(--rx-font-corp) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: rgba(180, 0, 0, 0.45) !important;
    margin-bottom: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   41  SPEECH BUBBLE — directional, bottom-anchored (grows upward)
   bubble-edge-right = avatar on LEFT  → bubble extends RIGHT, tail left
   bubble-edge-left  = avatar on RIGHT → bubble extends LEFT,  tail right
   ═══════════════════════════════════════════════════════════════════ */

/* Wider max-width, readable text, click-through so stage movement still works */
body.theme-anime[data-page="chat"] .chat-bubble {
    max-width: 230px !important;
    text-align: left !important;
    pointer-events: none !important;
}

/* Bottom-anchor the wrap. One of the two edge classes is ALWAYS applied by JS for sent messages.
   No edge class = typing indicator, which should be centered above the avatar. */
body.theme-anime[data-page="chat"] .avatar-item .bubble-wrap {
    width: 240px !important;
    max-width: min(240px, calc(100vw - 80px)) !important;
    top: auto !important;
    bottom: 110px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* Avatar on LEFT half → wrap starts at avatar center (left:50%), extends RIGHT.
   text-align:left anchors chat-bubble to wrap's left edge so tail aligns with avatar center. */
body.theme-anime[data-page="chat"] .avatar-item .bubble-wrap.bubble-edge-left {
    left: 50% !important;
    right: auto !important;
    transform: none !important;
    text-align: left !important;
}

/* Avatar on RIGHT half → wrap ends at avatar center (right:50%), extends LEFT.
   text-align:right anchors chat-bubble to wrap's right edge so tail aligns with avatar center. */
body.theme-anime[data-page="chat"] .avatar-item .bubble-wrap.bubble-edge-right {
    right: 50% !important;
    left: auto !important;
    transform: none !important;
    text-align: right !important;
}

/* Tail for edge-left: left:0 on ::before anchors it to chat-bubble's left edge = avatar center */
body.theme-anime[data-page="chat"] .avatar-item .bubble-wrap.bubble-edge-left .chat-bubble::before {
    left: 0 !important;
    right: auto !important;
}

/* Tail for edge-right: right:0 anchors it to chat-bubble's right edge = avatar center */
body.theme-anime[data-page="chat"] .avatar-item .bubble-wrap.bubble-edge-right .chat-bubble::before {
    left: auto !important;
    right: 0 !important;
    border-radius: 0 0 0 100% !important;
    box-shadow:
        2px -2px 0 0 var(--bubble-stroke, #000000) inset,
        13px 0 0 0 var(--user-bubble, #f7f7ee) inset,
        15px -2px 0 0 var(--bubble-stroke, #000000) inset !important;
}

/* ── 42  PORTAL NAV — wrap items so Settings / Admin are always visible ────────
   flex-wrap: wrap means items that don't fit on one line flow to a second row
   rather than being hidden off-screen behind a scrollbar. This works in all
   languages, regardless of how many nav items exist.                           */
#navigation {
    overflow: visible !important;
}
.portal-nav {
    flex-wrap: wrap !important;
    overflow: visible !important;
}
/* Compact sizing so items fit in as few rows as possible */
.portal-nav-link {
    padding-left: 7px !important;
    padding-right: 7px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
}

/* ── 43  FULLSCREEN VIDEO MODE ─────────────────────────────────────────────
   Cytube-style: video fills left ~75%, chat sidebar pinned on the right.
   No overlap — clean separation between video and chat column.              */

:root {
    --fs-sidebar-w: 300px;
    --fs-input-h: 46px;
}

/* Full viewport wrapper */
body.video-fullscreen .main-stage {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    background: #0d0d14 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Video stage: fills everything except the right sidebar */
body.video-fullscreen .chat-scene {
    position: absolute !important;
    inset: 0 var(--fs-sidebar-w) 0 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    aspect-ratio: unset !important;
    overflow: hidden !important;
    background: #000 !important;
}

/* Thin separator line between video and sidebar */
body.video-fullscreen .chat-scene::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.10);
    pointer-events: none;
}

/* Hide avatars and speech bubbles */
body.video-fullscreen #fieldOverlay {
    opacity: 0 !important;
    pointer-events: none !important;
}
body.video-fullscreen .chat-bubble {
    display: none !important;
}

/* Hide sidebar, user corner, room info, composer bar, floating buttons */
body.video-fullscreen #toolbar,
body.video-fullscreen .user-corner,
body.video-fullscreen #roomBadge,
body.video-fullscreen #roomMetaBar,
body.video-fullscreen #composerAssistBar,
body.video-fullscreen #jumpUnreadButton,
body.video-fullscreen .rem-music-btn:not(#videoFullscreenBtn),
body.video-fullscreen #avatarOpacityPanel,
body.video-fullscreen #remPlayer {
    display: none !important;
}
/* Hide floating exit button — it moves into the sidebar footer instead */
body.video-fullscreen #videoFullscreenBtn {
    display: none !important;
}

/* ── Right sidebar: chat history ───────────────────────────────────────── */
body.video-fullscreen #chatHistoryPanel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: var(--fs-input-h) !important;
    width: var(--fs-sidebar-w) !important;
    height: auto !important;
    z-index: 10001 !important;
    background: #0f0f18 !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    transform: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}
body.video-fullscreen #chatHistoryPanel .history-title {
    background: #151520 !important;
    color: #c8c8d8 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
}
body.video-fullscreen #chatHistoryPanel .history-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    background: transparent !important;
    color: #d8d8e8 !important;
    padding: 6px 8px !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
}
body.video-fullscreen #chatHistoryPanel .history-body *,
body.video-fullscreen #chatHistoryPanel .history-body .chat-msg,
body.video-fullscreen #chatHistoryPanel .history-body .chat-name,
body.video-fullscreen #chatHistoryPanel .history-body .msg-text,
body.video-fullscreen #chatHistoryPanel .history-body .chat-line-wrap {
    color: #d8d8e8 !important;
    background: transparent !important;
}
body.video-fullscreen #chatHistoryPanel .history-body .system-line,
body.video-fullscreen #chatHistoryPanel .system-line {
    color: #888 !important;
}
body.video-fullscreen #chatHistoryPanel .history-footer,
body.video-fullscreen #chatHistoryPanel .history-footer * {
    background: #0f0f18 !important;
    color: #555 !important;
    font-size: 0.74rem !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    padding: 4px 8px !important;
}
/* Hide call moderator link and its separator in fullscreen */
body.video-fullscreen #callModeratorHistory,
body.video-fullscreen .history-footer-sep {
    display: none !important;
}
/* Fullscreen toggle button in chat log footer */
.history-fs-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: inherit !important;
    font: inherit !important;
    padding: 0 !important;
    text-decoration: underline !important;
    display: inline !important;
}
.history-fs-btn:hover {
    opacity: 0.75 !important;
}
/* Exit fullscreen button injected into footer */
body.video-fullscreen .fs-exit-btn {
    margin-left: auto !important;
    color: #e8b4b4 !important;
    font-size: 0.74rem !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    text-decoration: none !important;
    display: inline-block !important;
}
body.video-fullscreen .fs-exit-btn:hover {
    color: #fff !important;
}
/* Images in the chat log */
body.video-fullscreen #chatHistoryPanel .history-body .message-attachment {
    margin-top: 4px !important;
}
body.video-fullscreen #chatHistoryPanel .history-body .message-attachment img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px !important;
}
/* Make resize handles invisible in this mode */
body.video-fullscreen #chatHistoryResizeE,
body.video-fullscreen #chatHistoryResizeS,
body.video-fullscreen #chatHistoryResizeSE {
    display: none !important;
}

/* ── Right sidebar: input bar at the very bottom ───────────────────────── */
body.video-fullscreen .bottom-bar {
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: var(--fs-sidebar-w) !important;
    height: var(--fs-input-h) !important;
    max-width: none !important;
    background: #151520 !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 10002 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
    gap: 5px !important;
    display: flex !important;
    align-items: center !important;
}
/* Hide only Rooms button in fullscreen sidebar — keep Image upload */
body.video-fullscreen #mobileRoomsButton {
    display: none !important;
}
/* Image button stays but shrinks to fit the slim bar */
body.video-fullscreen #attachImageButton {
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    font-size: 0.78rem !important;
    line-height: 30px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
/* Slim text input to fit */
body.video-fullscreen .bottom-bar .chat-line {
    height: 30px !important;
    min-height: 30px !important;
    padding: 2px 8px !important;
    font-size: 0.80rem !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.07) !important;
    color: #e8e8e8 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}
body.video-fullscreen .bottom-bar .send-btn {
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    font-size: 0.80rem !important;
    line-height: 30px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Video controls panel — hidden in fullscreen */
body.video-fullscreen #videoBottomControl {
    display: none !important;
}

/* ── 45  VIDEO LIBRARY PANEL ───────────────────────────────────────────────── */
.vlib-body {
    padding: 6px 4px !important;
}
.vlib-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 340px;
    overflow-y: auto;
}
.vlib-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,0,0,0.15);
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--rx-font-corp, Arial, sans-serif);
}
.vlib-item:hover {
    background: rgba(255,0,0,0.12);
    border-color: rgba(255,0,0,0.45);
}
.vlib-name {
    font-size: 11px;
    font-weight: 600;
    color: #e8e8e8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.vlib-size {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
}

/* ── 46  RETRO EMULATOR PANEL ─────────────────────────────────────────────── */
.emu-panel-body {
    display: flex;
    flex-direction: column;
    height: calc(100% - 32px);
    padding: 0 !important;
    overflow: hidden;
}
.emu-setup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    flex: 1;
    justify-content: center;
}
.emu-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 340px;
    border: 2px dashed rgba(255, 0, 0, 0.35);
    border-radius: 8px;
    padding: 28px 16px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: rgba(255, 0, 0, 0.04);
    text-align: center;
}
.emu-drop-zone.drag-over {
    border-color: rgba(255, 0, 0, 0.8);
    background: rgba(255, 0, 0, 0.1);
}
.emu-drop-icon { font-size: 32px; }
.emu-drop-text { font-size: 13px; font-weight: 600; color: #e0e0e0; }
.emu-drop-sub  { font-size: 11px; color: rgba(255,255,255,0.5); }
.emu-browse-label {
    color: rgba(255, 0, 0, 0.9);
    cursor: pointer;
    text-decoration: underline;
}
.emu-browse-label input[type="file"] { display: none; }
.emu-rom-name {
    font-size: 11px;
    color: var(--rx-mono-green, #00ff88);
    background: rgba(0,255,136,0.07);
    border: 1px solid rgba(0,255,136,0.25);
    border-radius: 4px;
    padding: 4px 10px;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emu-core-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 340px;
}
.emu-label {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    flex-shrink: 0;
}
.emu-select {
    flex: 1;
    background: rgba(20,0,0,0.85);
    border: 1px solid rgba(255,0,0,0.3);
    border-radius: 4px;
    color: #e8e8e8;
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
}
.emu-slot-select { flex: 0 0 60px; }
.emu-start-btn {
    width: 100%;
    max-width: 340px;
    padding: 9px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.emu-start-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Game wrapper (shown after start) */
.emu-game-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.emu-game-container {
    flex: 1;
    background: #000;
    overflow: hidden;
    position: relative;
}
.emu-game-container canvas,
.emu-game-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}
.emu-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 10px;
    background: rgba(6,0,0,0.92);
    border-top: 1px solid rgba(255,0,0,0.18);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.emu-save-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.emu-save-status {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    min-width: 80px;
}
.emu-save-status.ok  { color: var(--rx-mono-green, #00ff88); }
.emu-save-status.err { color: var(--rx-red, #ff0000); }
.emu-change-btn { margin-left: auto; }



@keyframes danmakuFly {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--dm-travel, -2000px)); }
}

.danmaku-msg {
    position: absolute;
    white-space: nowrap;
    font-family: var(--rx-font-corp, "Space Grotesk", Arial, sans-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow:
        0 0 6px rgba(0,0,0,0.9),
        1px 1px 3px rgba(0,0,0,0.8);
    opacity: 0.72;
    animation: danmakuFly linear forwards;
    pointer-events: none;
    user-select: none;
    padding: 2px 6px;
    border-radius: 2px;
}

/* Hidden by default, becomes a fixed full-viewport overlay in fullscreen */
.danmaku-layer {
    display: none;
    pointer-events: none;
}
body.video-fullscreen .danmaku-layer {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9500 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}